1641 lines
43 KiB
Vue
1641 lines
43 KiB
Vue
<template>
|
|
<div class="detail_modal_body_select">
|
|
<div v-show="(type_ == 1 || type_ == 2) && select == true">
|
|
<div class="detail_uploadLibrary">
|
|
<div class="switch_type_list">
|
|
<div
|
|
@click.stop="open(1)"
|
|
class="switch_type_item"
|
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
|
>
|
|
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
|
|
</div>
|
|
<div
|
|
@click.stop="open(2)"
|
|
class="switch_type_item Guide_1_21"
|
|
:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
|
|
>
|
|
<span>{{ $t('DesignDetailAlter.Library') }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-show="openClick == 2" class="detail_Library">
|
|
<div class="content_search_block">
|
|
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
|
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
|
</div>
|
|
<!-- clothesPrint -->
|
|
</div>
|
|
</div>
|
|
<div v-show="openClick == 1" class="detail_Upload_item">
|
|
<div class="moodboard_body">
|
|
<div class="upload_img_body scroll_style">
|
|
<div class="upload_item">
|
|
<div
|
|
class="upload_file_item"
|
|
v-for="(file, index) in uploadList"
|
|
:key="file"
|
|
@click.stop="selectImgItem(file)"
|
|
>
|
|
<div
|
|
class="upload_file_item_content"
|
|
v-show="file?.status === 'uploading'"
|
|
>
|
|
<a-spin :indicator="indicator" tip="Uploading..." />
|
|
</div>
|
|
<div
|
|
class="upload_file_item_content"
|
|
v-show="file?.status === 'done'"
|
|
>
|
|
<img :src="file?.url" class="upload_img" />
|
|
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
|
|
<div class="select_img_type">
|
|
<div
|
|
class="select_category"
|
|
@click.stop="showFileCategory(file)"
|
|
>
|
|
{{ current.type }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="delete_file_block"
|
|
@click.stop="deleteFile(index)"
|
|
>
|
|
<span class="icon iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="upload_file_item upload_component"
|
|
v-show="uploadList.length != 8"
|
|
|
|
>
|
|
<a-upload
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload,
|
|
}"
|
|
:headers="{ Authorization: token }"
|
|
v-model:file-list="uploadList"
|
|
:before-upload="beforeUpload"
|
|
:maxCount="8 - uploadList.length"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="(file) => upFileUploadChange(file)"
|
|
>
|
|
<div
|
|
class="upload_tip_block"
|
|
v-show="uploadList.length != 8"
|
|
>
|
|
<i class="fi fi-br-upload"></i>
|
|
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
|
</div>
|
|
</a-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="openClick == 2" class="detail_Library_item Guide_1_22" :class="[driver__.driver?'showEvents':'']">
|
|
<div class="material_content_body scroll_style">
|
|
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
|
|
<div class="content_img_item_block" :class="{active:file?.checked}">
|
|
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
|
|
<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
|
|
<div class="select_img_type">
|
|
<div
|
|
class="select_category"
|
|
@click.stop="showFileCategory(file)"
|
|
>
|
|
{{ file.level2Type }}
|
|
<div
|
|
:class="[
|
|
'icon',
|
|
'iconfont',
|
|
'icon-xiala',
|
|
file.categoryShow
|
|
? 'icon_rotate'
|
|
: '',
|
|
]"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="category_list"
|
|
v-show="file.categoryShow"
|
|
>
|
|
<div
|
|
:class="[
|
|
'category_item',
|
|
file.level2Type == cate.value
|
|
? 'select_category_item'
|
|
: '',
|
|
]"
|
|
v-for="(
|
|
cate, index
|
|
) in disignTypeList"
|
|
:key="index"
|
|
@click.stop="selectFileCategory(file, cate)"
|
|
>
|
|
{{ cate.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
|
|
<img src="@/assets/images/homePage/loading.gif" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="no_data_block loading_block" v-show="isShowLoading">
|
|
<a-spin size="large"></a-spin>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="type_ == 3 && select == true">
|
|
<div class="detail_color">
|
|
<div class="right_content_line">
|
|
<div class="upload_right_header">
|
|
<i class="color_edit fi fi-bs-comments" ></i>
|
|
<span>{{ $t('DesignDetailAlter.Palette') }}</span>
|
|
</div>
|
|
<div class="color_setting_block">
|
|
<!-- <Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/> -->
|
|
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
|
|
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
|
|
|
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
|
|
<!-- <div class="color_block">
|
|
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
|
<div v-show="colorBlockHex">
|
|
{{ $t('DesignDetailAlter.HEX') }}
|
|
</div>
|
|
<div v-show="!colorBlockHex">
|
|
{{ $t('DesignDetailAlter.RGBA') }}
|
|
</div>
|
|
</div>
|
|
<div class="color_right">
|
|
<div class="color_HEX_block" v-show="colorBlockHex">
|
|
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
|
<div>
|
|
{{getSelectRGB(selectColor).hex}}
|
|
</div>
|
|
</div>
|
|
<div class="color_rgb_block" v-show="!colorBlockHex">
|
|
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
|
<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
|
|
<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
|
|
<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right_content_line right_content_line_upload">
|
|
<div class="upload_right_header">
|
|
<i class="color_edit fi fi-bs-comments" ></i>
|
|
<span>{{ $t('DesignDetailAlter.UploadImage') }}</span>
|
|
</div>
|
|
<div class="upload_centetn">
|
|
<div class="upload_item">
|
|
<div class="upload_file_item" v-for="(file) in colorFileList" :key="file">
|
|
<div class="upload_file_item_content" v-show="file.status !== 'done'">
|
|
<a-spin :indicator="indicator" tip="Uploading..."/>
|
|
</div>
|
|
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
|
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
|
|
<div class="delete_file_block" @click="colorDeleteFile(index)">{{ $t('DesignDetailAlter.Delete') }}</div>
|
|
</div>
|
|
</div>
|
|
<a-upload
|
|
v-show="colorFileList.length < 1"
|
|
list-type="picture-card"
|
|
:customRequest="function(){}"
|
|
@change="fileUploadChange"
|
|
:before-upload="beforeUpload"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
>
|
|
<div class="upload_tip_block">
|
|
<i class="fi fi-rr-picture"></i>
|
|
</div>
|
|
</a-upload>
|
|
</div>
|
|
<div class="upload_color">
|
|
<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item">
|
|
<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
|
|
</div>
|
|
<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
|
|
<img src="#" :title="pantongNameList[index]">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="right_content_line">
|
|
<div class="upload_right_header">
|
|
<i class="color_edit fi fi-bs-comments" ></i>
|
|
<span>{{ $t('DesignDetailAlter.ColorCode') }}</span>
|
|
</div>
|
|
<div class="get_color_block">
|
|
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
|
<div class="get_color_button" @click="getTcxColor()">
|
|
<span class="icon iconfont icon-huoquduixiang"></span>
|
|
<span class="get_color_des"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="detail_modal_body_result"></div> -->
|
|
<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
|
|
</template>
|
|
<script>
|
|
import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue'
|
|
import Draggable from 'vuedraggable'
|
|
import { Https } from "@/tool/https";
|
|
import GO from "@/tool/GO";
|
|
import { useStore } from "vuex";
|
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
|
import { message,Upload} from 'ant-design-vue';
|
|
import { Sketch, Chrome} from '@ans1998/vue3-color'
|
|
import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
|
import DesignDetailEnd from './DesignDetailEnd.vue';
|
|
import { getCookie } from "@/tool/cookie";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import { useI18n } from 'vue-i18n';
|
|
export default defineComponent({
|
|
props: ["msg"],
|
|
components:{
|
|
Draggable,Sketch,DesignDetailEnd,Chrome
|
|
},
|
|
setup(prop) {
|
|
const store = useStore();
|
|
let type_ = ref(1);
|
|
let select = ref(false);
|
|
let current = inject('current')//父组件传过来的数据
|
|
let driver__ = inject('driver__')//父组件传过来的数据
|
|
let openClick = ref(1);
|
|
let searchPictureName = ref('')
|
|
//模型印花
|
|
let disignTypeList = [
|
|
|
|
]
|
|
let total = ref(0)
|
|
let pageSize = ref(10)
|
|
let currentPage = ref(1)
|
|
|
|
let isShowLoading = ref(false)
|
|
let clothesList = ref([])
|
|
let uploadList = ref([])
|
|
let apparelList = ref([])
|
|
let printList = ref([])
|
|
let selectCode = ref('Sketchboard')
|
|
//颜色
|
|
let selectColor = ref({
|
|
rgba:{},
|
|
}) //顔色选择器默认颜色
|
|
let selectColorList = ref({
|
|
})
|
|
let workspace = ref({})
|
|
|
|
let {t} = useI18n()
|
|
return{
|
|
store,
|
|
current,
|
|
openClick,
|
|
searchPictureName,
|
|
disignTypeList,
|
|
total,
|
|
pageSize,
|
|
currentPage,
|
|
isShowLoading,
|
|
clothesList,
|
|
uploadList,
|
|
apparelList,
|
|
printList,
|
|
selectCode,
|
|
|
|
type_,
|
|
select,
|
|
selectColor,
|
|
selectColorList,
|
|
workspace,
|
|
driver__,
|
|
t,
|
|
}
|
|
},
|
|
|
|
data(){
|
|
return{
|
|
|
|
token: "",
|
|
uploadUrl:'',
|
|
upload: {
|
|
isPin: 0,
|
|
gender:'',
|
|
level1Type: 'Sketchboard',
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
designShowPrview:1, //展示图片预览步骤
|
|
//颜色
|
|
reviewColor:{}, //预览的颜色
|
|
colorPickerVisible: true,
|
|
colorBlockHex:true,
|
|
getColorBg:false,
|
|
pantongName:'',//潘通值
|
|
pantongNameList:[],
|
|
tcxColor:'',
|
|
selectColorList: [],
|
|
colorFileList: [],
|
|
selectIndex:0,
|
|
indicator : h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: '2.4rem',
|
|
},
|
|
spin: true,
|
|
}),
|
|
getPantongNameTime:true,
|
|
workspaceCom:{}
|
|
}
|
|
},
|
|
directives:{
|
|
observe:{
|
|
mounted (el,binding) {
|
|
// console.log(binding.instance);
|
|
const ob = new IntersectionObserver(callback,{
|
|
root:null,
|
|
threshold:[.5]
|
|
})
|
|
ob.observe(el)
|
|
// this.currentPage = 1
|
|
// this.pageSize = 12
|
|
let this_ = binding.instance
|
|
function callback(entries, observer) {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
this_.getLibraryList()
|
|
} else {
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
},
|
|
computed:{
|
|
getSketchLabel(value) {
|
|
return (value) => {
|
|
let lable = "";
|
|
for (let item of this.disignTypeList) {
|
|
if (item.value === value) {
|
|
value = item.value;
|
|
break;
|
|
}
|
|
}
|
|
return lable;
|
|
};
|
|
},
|
|
|
|
getSelectRGB(selectColor){
|
|
|
|
return (selectColor)=>{
|
|
let rgba = selectColor.rgba
|
|
let data = {
|
|
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
|
|
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
|
|
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
|
|
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
|
|
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
|
|
}
|
|
if(data.a != 1 || data.a != 0){
|
|
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
|
|
}
|
|
return data
|
|
}
|
|
},
|
|
},
|
|
mounted(){
|
|
},
|
|
watch:{
|
|
selectColor(newVal,oldVal){
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
|
|
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
|
|
this.setColorboardList(colorList)
|
|
|
|
|
|
clearInterval(this.getPantongNameTime)
|
|
this.getPantongNameTime = setTimeout(() => {
|
|
this.getPantongName(newVal.rgba)
|
|
}, 100);
|
|
},
|
|
workspaceCom(newVal,oldVal){
|
|
this.workspace = newVal
|
|
this.upload.gender = newVal.sexEnum.name
|
|
this.getPosition()
|
|
},
|
|
},
|
|
mounted () {
|
|
this.token = getCookie("token") || "";
|
|
this.uploadUrl = getUploadUrl();
|
|
const backIcon = document.createElement('div');
|
|
backIcon.classList.add('vc-sketch-color-wrap')
|
|
let dropperDom = document.getElementsByClassName("detail_modal_body_select")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
|
dropperDom.appendChild(backIcon);
|
|
backIcon.addEventListener('click',async ()=>{
|
|
try {
|
|
const dropper = new EyeDropper();
|
|
const result = await dropper.open();
|
|
let hex = result.sRGBHex.replace("#", "");
|
|
// 将十六进制颜色码拆分成红、绿、蓝三个部分
|
|
const r = parseInt(hex.substring(0, 2), 16);
|
|
const g = parseInt(hex.substring(2, 4), 16);
|
|
const b = parseInt(hex.substring(4, 6), 16);
|
|
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
|
|
// return `rgb(${r}, ${g}, ${b})`;
|
|
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
|
} catch (e) {
|
|
message.info(this.t('DesignDetailAlter.jsContent1'))
|
|
}
|
|
})
|
|
},
|
|
methods:{
|
|
//点击判断
|
|
init(num){
|
|
this.type_ = num
|
|
this.select = true
|
|
let arr = this.current.color
|
|
// if(!arr[3]){
|
|
// arr[3] = 1
|
|
// }
|
|
this.selectColor = {
|
|
rgba:{
|
|
r:Number(arr.r),
|
|
g:Number(arr.g),
|
|
b:Number(arr.b),
|
|
a:Number(arr.a?arr.a:1),
|
|
},
|
|
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
|
|
}
|
|
this.uploadList = []
|
|
if (num == 1) {
|
|
this.selectCode = 'Sketchboard'
|
|
this.upload.level1Type = 'Sketchboard'
|
|
this.uploadList = this.apparelList
|
|
}else if (num == 2){
|
|
this.selectCode = 'Printboard'
|
|
this.upload.level1Type = 'Printboard'
|
|
this.uploadList = this.printList
|
|
}
|
|
if(num == 1 || num == 2){
|
|
this.clothesList = []
|
|
this.getLibraryList()
|
|
}
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
DesignDetailEnd.init(num)
|
|
this.workspaceCom = computed(()=>{
|
|
return this.store?.state?.Workspace?.workspace
|
|
})
|
|
},
|
|
getPosition(){
|
|
let params
|
|
if(this.workspace.sexEnum.name == 'Female'){
|
|
params = 'FemalePosition'
|
|
}else{
|
|
params = 'MalePosition'
|
|
}
|
|
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv) => {
|
|
if (rv) {
|
|
// let arr = []
|
|
// rv.forEach((item) => {
|
|
// let obj = {
|
|
// value:item.value,
|
|
// name:item.name,
|
|
// key:item.key,
|
|
// }
|
|
// arr.push(obj)
|
|
// });
|
|
this.disignTypeList = rv
|
|
}
|
|
})
|
|
},
|
|
deleteFile(num){
|
|
this.uploadList.splice(num, 1)
|
|
},
|
|
upFileUploadChange(data) {
|
|
let file = data.file;
|
|
let bor = true
|
|
|
|
if (file.status === "done") {
|
|
let res = JSON.parse(file.xhr.response);
|
|
if(res.errCode == 0){
|
|
file.id = res.data.id;
|
|
file.url = res.data.url;
|
|
file.resData = res.data;
|
|
file.designType = res.data.designType
|
|
file.category = this.current;
|
|
file.minIOPath = file.resData.minIOPath
|
|
let fileList = this.uploadList.filter(
|
|
(v) => v.status === "done"
|
|
);
|
|
if (this.uploadList.length >= 8) {
|
|
message.info(this.t('DesignDetailAlter.jsContent2'));
|
|
} else {
|
|
// this.store.commit("setSketchboardFile", fileList);
|
|
this.uploadList = fileList
|
|
// this.store.commit("clearMoodTemplateId");
|
|
if(this.selectCode == 'Sketchboard'){
|
|
this.apparelList = this.uploadList
|
|
}else{
|
|
this.printList = this.uploadList
|
|
}
|
|
}
|
|
}else{
|
|
bor = false
|
|
}
|
|
} else if (file.status === "error") {
|
|
bor = false
|
|
}
|
|
if(!bor){
|
|
let res = JSON.parse(file.xhr.response);
|
|
let index = -1;
|
|
this.uploadList.forEach((ele, index1) => {
|
|
if (file.uid === ele.uid) {
|
|
index = index1;
|
|
}
|
|
});
|
|
if (index > -1) {
|
|
this.uploadList.splice(index, 1);
|
|
}
|
|
// message.warning(file.name + this.t('DesignDetailAlter.jsContent3'));
|
|
message.warning(res.errMsg);
|
|
}
|
|
|
|
},
|
|
|
|
//关闭
|
|
terminate(){
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
this.select = false
|
|
DesignDetailEnd.selectIndex = 0
|
|
DesignDetailEnd.type_ = 0
|
|
this.colorFileList = []
|
|
this.selectColorList = []
|
|
DesignDetailEnd.sketchImg = {}
|
|
},
|
|
|
|
//切换整体衣服
|
|
changePlace(){
|
|
this.uploadList = []
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
this.uploadList = []
|
|
this.apparelList = []
|
|
this.printList = []
|
|
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
|
|
DesignDetailEnd.sketchImg={}
|
|
this.terminate()
|
|
},
|
|
// this.getLibraryList('Moodboard')
|
|
// this.getLibraryList('Printboard')
|
|
|
|
showFileCategory(file) {
|
|
file.categoryShow = true;
|
|
document.addEventListener("click", this.hiddenFileCategory);
|
|
},
|
|
selectFileCategory(file, cate) {
|
|
file.level2Type = cate.name;
|
|
for (let item of this.clothesList) {
|
|
item.categoryShow = false;
|
|
}
|
|
this.setSketchLibrary(file)
|
|
},
|
|
hiddenFileCategory() {
|
|
for (let item of this.clothesList) {
|
|
item.categoryShow = false;
|
|
}
|
|
document.removeEventListener("click", this.hiddenFileCategory);
|
|
},
|
|
setSketchLibrary(item){
|
|
let data = {
|
|
libraryId:item.id,
|
|
level2Type:item.level2Type,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
|
|
(rv) => {
|
|
}
|
|
).catch((res)=>{
|
|
});
|
|
},
|
|
selectImgItem(imgData){
|
|
if(this.selectCode == 'Sketchboard'){
|
|
// this.current.id_ = imgData.id
|
|
// this.current.path = imgData.url
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
DesignDetailEnd.setSketchImg(imgData)
|
|
// DesignDetailEnd.sketchImg.id_ = imgData.id
|
|
// DesignDetailEnd.sketchImg.path = imgData.url
|
|
}else{
|
|
this.current.printObject.path = imgData?.url
|
|
this.current.printObject.id = imgData?.id
|
|
this.current.printObject.minIOPath = imgData.minIOPath
|
|
this.current.printObject.prints = [{
|
|
minIOPath:imgData.minIOPath,
|
|
path:imgData?.url
|
|
}]
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
|
|
// console.log(this.current.printObject,imgData);
|
|
}
|
|
},
|
|
//请求我的印花&&模型
|
|
getLibraryList(){
|
|
let workspace = this.store.state.Workspace.workspace
|
|
let data = {
|
|
level1Type:this.selectCode,
|
|
// level2Type:this.designType,
|
|
modelSex:workspace?.sex,
|
|
page:this.currentPage,
|
|
pictureName:this.searchPictureName,
|
|
size:this.pageSize+this.clothesList.length,
|
|
}
|
|
this.isShowLoading = true
|
|
|
|
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
|
(rv) => {
|
|
|
|
this.clothesList = rv.content
|
|
this.isShowLoading = false
|
|
this.total = rv.total
|
|
}
|
|
).catch((res)=>{
|
|
this.isShowLoading = false
|
|
});
|
|
},
|
|
|
|
//衣服
|
|
open(num) {
|
|
this.openClick = num;
|
|
if(num ==2 ){
|
|
this.getLibraryList()
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
}
|
|
},
|
|
|
|
//印花
|
|
|
|
|
|
|
|
|
|
//颜色
|
|
beforeUpload(file){
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
|
if (!isJpgOrPng) {
|
|
message.info(this.t('DesignDetailAlter.jsContent4'));
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
if (!isLt2M) {
|
|
message.info(this.t('DesignDetailAlter.jsContent5'));
|
|
}
|
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
},
|
|
//清除当前的颜色
|
|
colorDeleteFile(index){
|
|
this.colorFileList.splice(index, 1)
|
|
this.selectColorList = []
|
|
},
|
|
setUplpadColor(color){
|
|
this.selectColor = color
|
|
},
|
|
rgbaToHex(rgba) { // rgba转16进制
|
|
let hex = '#';
|
|
rgba.forEach((i,index) => {
|
|
if(index == 3){
|
|
hex += Math.round(i * 255).toString(16)
|
|
}else{
|
|
hex += Number(i).toString(16).padStart(2, '0');
|
|
}
|
|
});
|
|
|
|
return hex;
|
|
},
|
|
//通过HSV获取颜色
|
|
getHsvColor(color){
|
|
// let hsv = rgbToHsv(color)
|
|
this.pantongName = ''
|
|
// {params:{id:3}}
|
|
// console.log(color);
|
|
let colorList = []
|
|
color.forEach((item,index)=>{
|
|
let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
|
|
colorList.push(arr)
|
|
})
|
|
|
|
let hsvList = []
|
|
colorList.forEach((item)=>{
|
|
let hsv = rgbToHsv(item)
|
|
if(hsvList.length == 0){
|
|
}else{
|
|
if(hsvList[0].h+5){
|
|
}
|
|
}
|
|
|
|
let obj = {
|
|
h:Number(hsv[0]),
|
|
s:Number(hsv[1]),
|
|
v:Number(hsv[2]),
|
|
}
|
|
hsvList.push(obj)
|
|
})
|
|
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
|
|
(rv) => {
|
|
if(rv){
|
|
rv.forEach(element => {
|
|
this.pantongNameList.push(element.name)
|
|
});
|
|
}
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
},
|
|
|
|
//通过tcx获取颜色
|
|
getTcxColor(){
|
|
if(!this.tcxColor){
|
|
return
|
|
}
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
let pattern = /^\d{2}-\d{4}$/;
|
|
if(pattern.test(this.tcxColor)){
|
|
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
|
|
if(rv && rv.name){
|
|
// let hex = this.rgbaToHex([color.r,color.g,color.b])
|
|
let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
|
|
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
|
|
this.selectColor = this.reviewColor
|
|
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
|
|
this.pantongName = rv.name
|
|
let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
|
|
this.setColorboardList(colorList)
|
|
this.getColorBg = true
|
|
}else{
|
|
message.info(this.t('DesignDetailAlter.jsContent6'))
|
|
}
|
|
})
|
|
}else{
|
|
message.info(this.t('ColorboardUpload.jsContent5'))
|
|
}
|
|
|
|
},
|
|
//查询颜色的潘通值和txc
|
|
getPantongName(v) {
|
|
if(!v.r){
|
|
return
|
|
}
|
|
let color = [v.r, v.g, v.b];
|
|
let hsv = rgbToHsv(color);
|
|
let data = [{
|
|
h: hsv[0],
|
|
s: hsv[1],
|
|
v: hsv[2],
|
|
}]
|
|
return new Promise((resolve, reject) => {
|
|
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
|
|
.then((rv) => {
|
|
if (rv) {
|
|
this.selectColor.tcx = rv[0].tcx
|
|
this.selectColor.name = rv[0].name
|
|
resolve();
|
|
}
|
|
})
|
|
.catch((res) => {
|
|
reject();
|
|
});
|
|
});
|
|
},
|
|
setColorboardList(colorList){
|
|
|
|
let newColorList = colorList.map((v)=>{
|
|
let data = {
|
|
id:'',
|
|
name:'',
|
|
rgbValue:v
|
|
}
|
|
|
|
return data
|
|
})
|
|
|
|
},
|
|
fileUploadChange(data){
|
|
let file = data.file
|
|
let fileData = file.originFileObj
|
|
var reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
let data_new;
|
|
if (typeof e.target.result === 'object') {
|
|
// 把Array Buffer转化为blob 如果是base64不需要
|
|
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
|
} else {
|
|
data_new = e.target.result;
|
|
}
|
|
file.imgUrl = data_new
|
|
file.status = 'done'
|
|
this.colorFileList.push(file)
|
|
|
|
setTimeout(async ()=>{
|
|
const img = new Image();
|
|
let colorImage = this.$refs.colorImage
|
|
img.src = colorImage[0].src;
|
|
|
|
img.onload = async () => {
|
|
const colorThief = new ColorThief();
|
|
// let domImg = colorImage[0];
|
|
// let color = colorThief.getColor(img)
|
|
// let colorHex = this.rgbaToHex(color)
|
|
let selectColorList = [];
|
|
let selectColor = colorThief.getPalette(img,8)
|
|
//排序
|
|
let obj = {
|
|
max : 5,
|
|
min: 5,
|
|
}
|
|
let colorSort
|
|
await GO.setColor(selectColor,file.imgUrl,obj).then(
|
|
(rv) => {
|
|
if(rv){
|
|
colorSort = rv.ratio
|
|
}
|
|
}
|
|
)
|
|
colorSort.sort((a, b) => {
|
|
var a_num = a.ratio;
|
|
var b_num = b.ratio;
|
|
return b_num - a_num;
|
|
});
|
|
selectColor = []
|
|
colorSort.forEach(v=>{
|
|
selectColor.push(v.rgb)
|
|
})
|
|
selectColor = selectColor.join('&')
|
|
selectColor = selectColor.split("&")
|
|
let color = selectColor[0].split(',')
|
|
let colorHex = this.rgbaToHex(color)
|
|
|
|
let colorLi = []
|
|
new Set(selectColor).forEach((item)=>{
|
|
colorLi.push(item.split(","))
|
|
})
|
|
colorLi.forEach(element => {
|
|
let colorLiHex = this.rgbaToHex(element)
|
|
selectColorList.push(
|
|
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
|
|
)
|
|
});
|
|
this.selectColorList = selectColorList
|
|
// this.getHsvColor(selectColorList)
|
|
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
|
};
|
|
|
|
|
|
},100)
|
|
};
|
|
// 转化为base64S
|
|
reader.readAsDataURL(fileData)
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
|
|
.detail_modal_body_select{
|
|
width: 20%;
|
|
>div{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
i{
|
|
font-size: 1.8rem;
|
|
display: block;
|
|
}
|
|
.detail_uploadLibrary{
|
|
.switch_type_list {
|
|
margin-bottom: 1rem;
|
|
margin-top: -1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: space-around;
|
|
|
|
// .switch_type_item {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// // padding: 0 2rem;
|
|
// height: 4rem;
|
|
// background: #fff;
|
|
// border-radius: 0.8rem;
|
|
// line-height: 4rem;
|
|
// font-size: 1.6rem;
|
|
// // margin-right: 2.2rem;
|
|
// color: #000;
|
|
// cursor: pointer;
|
|
// position: relative;
|
|
// text-align: center;
|
|
// transform-origin: left;
|
|
// transform: scale(1);
|
|
// transition: 0.3s all;
|
|
// &.switch_type_item::before {
|
|
// position: absolute;
|
|
// content: "";
|
|
// display: block;
|
|
// background: #000;
|
|
// height: .3rem;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
// bottom: .4rem;
|
|
// width: 0px;
|
|
// transition: 0.3s all;
|
|
// }
|
|
// &.select_swtich {
|
|
// color: #000;
|
|
// font-weight: 600;
|
|
// transform: scale(1.15);
|
|
// }
|
|
// &.select_swtich::before {
|
|
// width: 100%;
|
|
// }
|
|
|
|
// .switch_icon {
|
|
// font-size: 1.8rem;
|
|
// margin-right: 0.8rem;
|
|
// }
|
|
// }
|
|
}
|
|
|
|
|
|
}
|
|
.detail_Library{
|
|
.content_search_block{
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
|
|
.search_input{
|
|
width: 15rem;
|
|
padding-left: 1.5rem;
|
|
// height: 4rem;
|
|
// line-height: 3.8rem;
|
|
// background: #FFFFFF;
|
|
border: 0.1rem solid #F1F1F1;
|
|
// font-size: 1.6rem;
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
height: 3rem;
|
|
|
|
&::placeholder {
|
|
color: #C2C2C2;
|
|
}
|
|
}
|
|
|
|
.search_icon_block{
|
|
width: 5rem;
|
|
height: 3rem;
|
|
line-height: 3rem;
|
|
text-align: center;
|
|
background: #343579;
|
|
cursor: pointer;
|
|
|
|
.icon-sousuo{
|
|
font-size: 2rem;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail_Library_item,.detail_Upload_item{
|
|
width: 100%;
|
|
// height: calc(100% - 19rem);
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&.generate::-webkit-scrollbar{display: none;}
|
|
>div{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-content: flex-start;
|
|
overflow-X: hidden;
|
|
height: 100%;
|
|
&.scroll_style::-webkit-scrollbar{display: none;}
|
|
|
|
}
|
|
.material_content_list_loding{
|
|
text-align: center;
|
|
width: 100%;
|
|
img{
|
|
height: 10rem;
|
|
}
|
|
}
|
|
.content_img_item{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
// padding: 0 1.4rem;
|
|
// margin-bottom: 2.8rem;
|
|
margin-bottom: 2rem;
|
|
padding: 0;
|
|
// height: 9rem;
|
|
&.active{
|
|
margin-bottom: 2rem;
|
|
.pin_block{
|
|
display: block;
|
|
}
|
|
}
|
|
.pin_block{
|
|
display: none;
|
|
}
|
|
.content_img_item_block{
|
|
// border: 0.1rem solid transparent;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
&.active{
|
|
opacity: .5;
|
|
img{
|
|
transform: scale(.9);
|
|
}
|
|
|
|
}
|
|
|
|
&.select_item_img{
|
|
// border-color: #343579;
|
|
}
|
|
|
|
.print_content_img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.content_img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.operate_file_block{
|
|
height: 1.5rem;
|
|
.select_img_type{
|
|
line-height: 1;
|
|
.select_category{
|
|
zoom: .6;
|
|
height: 100%;
|
|
.icon-xiala{
|
|
zoom: .8;
|
|
}
|
|
}
|
|
.category_list{
|
|
margin-top: .1rem;
|
|
.category_item{
|
|
zoom: .7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.content_img_name{
|
|
width: 16.5rem;
|
|
height: 3.5rem;
|
|
line-height: 3.5rem;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 1.4rem;
|
|
color: #030303;
|
|
}
|
|
}
|
|
.upload_img_body{
|
|
width: 100%;
|
|
.upload_item{
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.moodboard_body{
|
|
.upload_file_item{
|
|
margin: 0;
|
|
|
|
margin-bottom: 2rem;
|
|
width: 9rem;
|
|
height: 9rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
.upload_file_item_content{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.upload_img{
|
|
display: block;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.operate_file_block .select_img_type .select_category{
|
|
zoom: .8;
|
|
}
|
|
.delete_file_block{
|
|
display: none;
|
|
width: 3.2rem;
|
|
height: 3.2rem;
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: 0.4rem;
|
|
position: absolute;
|
|
top: 0.9rem;
|
|
right: 0.9rem;
|
|
text-align: center;
|
|
line-height: 3.2rem;
|
|
left: auto;
|
|
.icon-shanchu{
|
|
font-size: 1.6rem;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:hover .delete_file_block{
|
|
display: block;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.detail_color{
|
|
// height: calc(100% - 5.4rem);
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.right_content_line{
|
|
position: relative;
|
|
margin-bottom: 1rem;
|
|
.upload_right_header{
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
margin-top: 1rem;
|
|
&.upload_right_header:nth-child(1){
|
|
margin-top: 0;
|
|
}
|
|
span{
|
|
margin-left: 1rem;
|
|
font-size: 1.8rem;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.upload_centetn{
|
|
// overflow-x: hidden;
|
|
}
|
|
.upload_centetn::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.color_review_block{
|
|
margin-right: 4rem;
|
|
|
|
.color_review_content{
|
|
width: 16.5rem;
|
|
height: 16.5rem;
|
|
background: #FFFFFF;
|
|
border: 0.1rem solid #DCDCEC;
|
|
}
|
|
|
|
.pantong_name{
|
|
margin-top: 1rem;
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
color: #030303;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.clear_button{
|
|
padding: 0 2.8rem;
|
|
height: 3.2rem;
|
|
line-height: 3.2rem;
|
|
background: #EFEEFF;
|
|
font-size: 1.2rem;
|
|
font-family: Roboto;
|
|
color: #343579;
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.upload_file_item{
|
|
// margin: 0 2rem 2rem 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
// width: 16.5rem;
|
|
// height: 16.5rem;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
border: 1px solid #F5F5F5;
|
|
vertical-align: top;
|
|
|
|
.upload_file_item_content{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&:hover .delete_file_block{
|
|
display: block;
|
|
}
|
|
|
|
.upload_img{
|
|
display: block;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.delete_file_block{
|
|
display: none;
|
|
width: 100%;
|
|
height: 4rem;
|
|
background: rgba(0,0,0,0.2);
|
|
font-size: 1.6rem;
|
|
color: #FFFFFF;
|
|
line-height: 4rem;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload_img_icon{
|
|
width: 4.6rem;
|
|
}
|
|
.upload_color{
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
height: 2rem;
|
|
.upload_color_item{
|
|
width: 2rem;
|
|
height: 2rem;
|
|
position: relative;
|
|
cursor: pointer;
|
|
margin-right: 1rem;
|
|
.upload_color_item_bg{
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
img{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
top: 0;
|
|
}
|
|
// .upload_color_item_text{
|
|
// font-size: 12px;
|
|
// line-height: 1;
|
|
// text-align: center;
|
|
// }
|
|
div{
|
|
}
|
|
}
|
|
}
|
|
.color_setting_block{
|
|
width: 17.5rem;
|
|
margin: auto;
|
|
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
|
|
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
// box-shadow: 2px 2px 8px #000;
|
|
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
|
|
.vc-chrome{
|
|
background: rgba(0,0,0,0);
|
|
|
|
}
|
|
.chrome_color{
|
|
width: 17.5rem;
|
|
// height: 16.5rem;
|
|
overflow: hidden;
|
|
|
|
.vc-chrome-saturation-wrap{
|
|
height: 100%;
|
|
width: 16rem;
|
|
height: 16rem;
|
|
max-height: 17rem;
|
|
max-width: 17rem;
|
|
margin: .7rem auto;
|
|
padding-bottom: 0;
|
|
}
|
|
.vc-chrome-body{
|
|
padding: 0;
|
|
width: 90%;
|
|
margin: 0.5rem auto;
|
|
margin: 0 auto;
|
|
background: rgba(0,0,0,0);
|
|
margin-bottom: 1rem;
|
|
// display: none;
|
|
.vc-chrome-fields-wrap{
|
|
margin-top: 5%;
|
|
padding: 0;
|
|
position: relative;
|
|
.vc-chrome-toggle-btn{
|
|
width: 3.2rem;
|
|
.vc-chrome-toggle-icon{
|
|
height: auto;
|
|
margin-right: -0.4rem;
|
|
margin-top: 0rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
svg{
|
|
width: 2.4rem !important;
|
|
height: 2.4rem !important;
|
|
}
|
|
}
|
|
}
|
|
.vc-chrome-fields{
|
|
.vc-chrome-field{
|
|
padding-left: .6rem;
|
|
}
|
|
.vc-input__label{
|
|
font-size: 1.6rem;
|
|
}
|
|
.vc-input__input{
|
|
font-size: 1.1rem;
|
|
height: 2.1rem;
|
|
}
|
|
}
|
|
.ant-upload-list{
|
|
|
|
}
|
|
.vc-sketch-color-wrap{
|
|
background-image: url(@../../../../assets/images/homePage/dropper.png);
|
|
// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
|
|
// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
|
|
// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
|
|
background-size: 1.5rem;
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
padding: .7rem;
|
|
border: 1px solid;
|
|
position: absolute;
|
|
bottom: -.5rem;
|
|
right: .5rem;
|
|
border-radius: .5rem;
|
|
}
|
|
.vc-chrome-fields{
|
|
.vc-input__label{
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
}
|
|
.vc-chrome-controls{
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
.vc-chrome-color-wrap{
|
|
// width: 3.6rem;
|
|
margin-left: 2rem;
|
|
width: auto;
|
|
.vc-chrome-active-color{
|
|
border-radius: 50%;
|
|
}
|
|
.vc-chrome-active-color,.vc-checkerboard{
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
}
|
|
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
|
|
.vc-hue{
|
|
border-radius: 15px;
|
|
}
|
|
.vc-alpha{
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
}
|
|
height: 1rem;
|
|
.vc-hue-picker{
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
}
|
|
.vc-alpha-picker{
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
transform: translate(-.6rem,-.4rem);
|
|
}
|
|
}
|
|
.vc-chrome-alpha-wrap{
|
|
display: none;
|
|
}
|
|
.vc-chrome-hue-wrap{
|
|
margin-bottom: .5rem;
|
|
}
|
|
}
|
|
}
|
|
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
|
|
.sileder_color{
|
|
margin-top:1.3rem;
|
|
|
|
.vc-slider-swatches{
|
|
display:none
|
|
}
|
|
.vc-slider-hue-warp {
|
|
width: 16.5rem;
|
|
height: 2.4rem;
|
|
border-radius: 1.2rem;
|
|
overflow: hidden;
|
|
|
|
.vc-hue-picker{
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
border-radius: 50%;
|
|
transform: translate(-0.7rem, -0.2rem);
|
|
}
|
|
}
|
|
.vc-hue-pointer{
|
|
top: 0.5rem !important;
|
|
}
|
|
|
|
}
|
|
|
|
.color_block{
|
|
// margin-top: 1rem;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// font-size: 1.6rem;
|
|
width: 100%;
|
|
padding: 0 5%;
|
|
padding-bottom: 5%;
|
|
margin: 0.5rem auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.color_right{
|
|
width: 11rem;
|
|
font-size: 1,2rem;
|
|
color: #666666;
|
|
.color_rgb_block{
|
|
display: flex;
|
|
.rgb_item{
|
|
margin-left: .2rem;
|
|
}
|
|
}
|
|
}
|
|
.color_left{
|
|
cursor: pointer;
|
|
color: rgb(153, 153, 153);
|
|
}
|
|
.color_right,.color_left{
|
|
>div{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.color_HEX_block,.color_rgb_block{
|
|
padding: .2rem .5rem;
|
|
box-shadow: inset 0 0 0 1px #ccc;
|
|
border-radius: .4rem;
|
|
justify-content: space-around;
|
|
text-transform:uppercase;
|
|
.color_block_bg{
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
// margin-right: .5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.color_block_bg{
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.get_color_block{
|
|
display: flex;
|
|
flex-direction: row;
|
|
.get_color_input{
|
|
width: 15rem;
|
|
height: 2.8rem;
|
|
background: #FFFFFF;
|
|
border: 0.1rem solid #DCDCEC;
|
|
padding: 1rem 1.3rem;
|
|
box-sizing: border-box;
|
|
font-size: 1.4rem;
|
|
text-align: left;
|
|
|
|
&::placeholder {
|
|
color: #B7B7B7;
|
|
}
|
|
}
|
|
|
|
.get_color_button{
|
|
padding: 0 .2rem;
|
|
height: 2.8rem;
|
|
background: #EFEEFF;
|
|
display: inline-block;
|
|
line-height: 3rem;
|
|
font-size: 1.2rem;
|
|
color: #343579;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
.icon-huoquduixiang{
|
|
margin-right: 0.5rem;
|
|
font-size: 2rem;
|
|
color:#343579;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.get_color_des{
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.upload_item{
|
|
margin-bottom: .5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
.ant-upload-picture-card-wrapper{
|
|
.ant-upload-list{
|
|
display: flex;
|
|
justify-content: center;
|
|
.ant-upload-select-picture-card{
|
|
// margin: 0 2rem 2rem 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
border: 1px solid #F5F5F5;
|
|
vertical-align: top;
|
|
i{
|
|
zoom: 1.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style> |