1960 lines
57 KiB
Vue
1960 lines
57 KiB
Vue
<template>
|
|
<div class="detail_modal_body_select">
|
|
<div v-show="(type_ == 1 || type_ == 2 || type_ == 4) && select == true">
|
|
<div class="detail_uploadLibrary">
|
|
<div v-show="type_ == 4" style="font-size:1.5rem; margin:1rem 0">{{ $t('LibraryPage.generated') }}</div>
|
|
<div class="switch_type_list" v-show="type_ != 4">
|
|
<div
|
|
@click.stop="open(1)"
|
|
class="switch_type_item"
|
|
:class="[openClick == 1 ? 'select_swtich' : '',]"
|
|
:style="{cursor:type_==4?'no-drop':''}"
|
|
>
|
|
<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="select_block">
|
|
<a-select
|
|
v-model:value="designType"
|
|
:options="designTypeList"
|
|
@change="handleChange"
|
|
:fieldNames="{ label: 'name', value: 'value' }"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
</div>
|
|
<div class="content_search_block" v-show="type_ != 4">
|
|
<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" />
|
|
<sketchCategory v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" :disignTypeList="designTypeList" :generateList="uploadList" :item="file" ></sketchCategory>
|
|
<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"
|
|
:capture="null"
|
|
|
|
:data="{
|
|
...upload,
|
|
}"
|
|
:headers="{ Authorization: token }"
|
|
v-model:file-list="uploadList"
|
|
:before-upload="beforeUpload"
|
|
:maxCount="8"
|
|
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)"/>
|
|
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="designTypeList" :generateList="clothesList" :item="file" :isSpread="selectCode == 'DesignElements'" :isSetSketchCategory="true" @upTypeSucced='handleChange'></sketchCategory>
|
|
</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 class="color_setting_operateSingle">
|
|
<!-- <div class="started_btn" @click="setOperate">
|
|
{{ colorList[selectIndex]?.gradient?.gradientList?.length>1? 'Gradual Change':'Single'}}
|
|
</div> -->
|
|
<div class="color_setting_btn" :class="{active:!colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
|
|
<a-switch :checked="colorList[selectIndex]?.gradient?.gradientShow" @click="setOperate"/>
|
|
<div class="color_setting_btn" :class="{active:colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>
|
|
|
|
</div>
|
|
<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
|
|
<div class="color_setting_operate_item color_setting_operate_control">
|
|
<div class="operate_item_box">
|
|
<div>{{ $t('ColorboardUpload.Alignment') }}</div>
|
|
</div>
|
|
<div class="operate_item_box operate_item_angle">
|
|
<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
|
|
<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
|
|
</div>
|
|
</div>
|
|
<div class="operate_item_box operate_item_delete">
|
|
<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
|
|
</div>
|
|
</div>
|
|
<div class="color_setting_operate_item color_setting_operate_input">
|
|
<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
|
|
</div>
|
|
<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></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
|
|
:capture="null"
|
|
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 :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="fi fi-br-fill"></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,isMoible} from '@/tool/util'
|
|
import DesignDetailEnd from './DesignDetailEnd.vue';
|
|
import { getCookie } from "@/tool/cookie";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import { useI18n } from 'vue-i18n';
|
|
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
|
|
|
export default defineComponent({
|
|
props: ["msg"],
|
|
components:{
|
|
Draggable,Sketch,DesignDetailEnd,Chrome,sketchCategory
|
|
},
|
|
setup(prop) {
|
|
const store = useStore();
|
|
let type_ = ref(1);
|
|
let select = ref(false);
|
|
let current = inject('current')//父组件传过来的数据
|
|
let driver__ = inject('driver__')//父组件传过来的数据
|
|
let body = inject('body')//父组件传过来的数据
|
|
let openClick = ref(1);
|
|
let searchPictureName = ref('')
|
|
|
|
|
|
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 designTypeList = ref([])
|
|
let printCatecoryList = computed(()=>{
|
|
return store.state.UserHabit.printType
|
|
})
|
|
let designType = ref('')
|
|
//颜色
|
|
let selectColor = ref({
|
|
rgba:{},
|
|
}) //顔色选择器默认颜色
|
|
let selectColorList = ref({
|
|
})
|
|
let workspace = ref({})
|
|
let sketchCatecoryList = computed(()=>{
|
|
return store.state.Workspace.workspacePosition
|
|
})
|
|
let designElementsType = computed(()=>{
|
|
return store.state.UserHabit.designElementsType;
|
|
})
|
|
let colorList = ref([{},{},{},{},{},{},{},{},{}])
|
|
let selectIndex = ref(0)
|
|
let gradient = ref({
|
|
gradientList:[
|
|
{
|
|
rgba:{
|
|
r:117,
|
|
g:119,
|
|
b:255,
|
|
a:1,
|
|
},
|
|
left:'0%'
|
|
},{
|
|
rgba:{
|
|
r:0,
|
|
g:222,
|
|
b:152,
|
|
a:1,
|
|
},
|
|
left:'100%'
|
|
},
|
|
],
|
|
angle:45,
|
|
selectIndex:-1,
|
|
gradientShow:false,
|
|
})
|
|
provide('colorList',colorList)
|
|
provide('selectIndex',selectIndex)
|
|
provide('designTypeList',designTypeList)
|
|
let {t} = useI18n()
|
|
return{
|
|
store,
|
|
current,
|
|
openClick,
|
|
searchPictureName,
|
|
total,
|
|
pageSize,
|
|
currentPage,
|
|
isShowLoading,
|
|
clothesList,
|
|
uploadList,
|
|
apparelList,
|
|
printList,
|
|
selectCode,
|
|
|
|
designTypeList,
|
|
printCatecoryList,
|
|
designType,
|
|
|
|
type_,
|
|
select,
|
|
selectColor,
|
|
selectColorList,
|
|
workspace,
|
|
driver__,
|
|
body,
|
|
sketchCatecoryList,
|
|
designElementsType,
|
|
colorList,
|
|
selectIndex,
|
|
gradient,
|
|
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: [],
|
|
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
|
|
// currentPage
|
|
let this_ = binding.instance
|
|
function callback(entries, observer) {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting && !this_.isShowLoading) {
|
|
this_.getLibraryList()
|
|
} else {
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
},
|
|
computed:{
|
|
|
|
|
|
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
|
|
}
|
|
},
|
|
setGradient(){
|
|
// return this.setGradientAngle(gradient)
|
|
return (gradient)=>{
|
|
let gradientStr = ''
|
|
if(!gradient.gradientList)return
|
|
gradient.gradientList.sort((a, b) => {
|
|
let aArr = a.left.split('%')[0]
|
|
let bArr = b.left.split('%')[0]
|
|
return aArr - bArr;
|
|
});
|
|
gradient.gradientList.forEach((item,index)=>{
|
|
let str = ','
|
|
if(gradient.gradientList.length == index+1)str = ''
|
|
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
|
|
|
|
})
|
|
return `${gradientStr}`
|
|
}
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
},
|
|
watch:{
|
|
// selectColor(newVal,oldVal){
|
|
// this.colorList[this.selectIndex] = newVal
|
|
// let colorList = this.colorList.filter((v) => v && Object.keys(v).length)
|
|
|
|
|
|
// clearInterval(this.getPantongNameTime)
|
|
// this.getPantongNameTime = setTimeout(() => {
|
|
// this.getPantongName(newVal.rgba)
|
|
// }, 100);
|
|
// },
|
|
selectColor:{
|
|
handler(newVal,oldVal){
|
|
if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
|
|
this.colorList[this.selectIndex] = {}
|
|
return
|
|
}
|
|
this.colorList[this.selectIndex].rgba = newVal.rgba
|
|
this.colorList[this.selectIndex].hex = newVal.hex
|
|
if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
|
|
this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
|
|
r:newVal.rgba.r,
|
|
g:newVal.rgba.g,
|
|
b:newVal.rgba.b,
|
|
a:1,
|
|
}
|
|
}
|
|
// console.log(JSON.parse(JSON.stringify(this.colorList)),JSON.parse(JSON.stringify(newVal)));
|
|
clearInterval(this.getPantongNameTime)
|
|
this.getPantongNameTime = setTimeout(() => {
|
|
this.getPantongName(newVal.rgba,-1)
|
|
}, 100);
|
|
},
|
|
immediate: true
|
|
},
|
|
workspaceCom(newVal,oldVal){
|
|
this.workspace = newVal
|
|
this.upload.gender = newVal?.sexEnum?.value
|
|
},
|
|
},
|
|
mounted () {
|
|
this.token = getCookie("token") || "";
|
|
this.uploadUrl = getUploadUrl();
|
|
nextTick().then(()=>{
|
|
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
|
|
if(this.current?.color){
|
|
arr = this.current.color
|
|
}else{
|
|
arr = {
|
|
r: 0,
|
|
g: 0,
|
|
b: 0,
|
|
a:1,
|
|
}
|
|
}
|
|
// 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]),
|
|
gradient:this.current.gradient
|
|
}
|
|
this.uploadList = []
|
|
if (num == 1) {
|
|
this.selectCode = 'Sketchboard'
|
|
this.upload.level1Type = 'Sketchboard'
|
|
this.uploadList = this.apparelList
|
|
this.designTypeList = this.sketchCatecoryList
|
|
this.designType = this.designTypeList[0].value
|
|
}else if (num == 2){
|
|
this.selectCode = 'Printboard'
|
|
this.upload.level1Type = 'Printboard'
|
|
this.uploadList = this.printList
|
|
this.designTypeList = this.printCatecoryList
|
|
this.designType = this.designTypeList[0].value
|
|
}else if (num == 4){
|
|
this.selectCode = 'DesignElements'
|
|
this.upload.level1Type = 'DesignElements'
|
|
this.designTypeList = this.designElementsType
|
|
this.designType = this.designTypeList[0]?.value
|
|
this.openClick = 2
|
|
}
|
|
if(num == 1 || num == 2 || num == 4){
|
|
this.clothesList = []
|
|
this.getLibraryList()
|
|
}else{
|
|
this.store.state.UploadFilesModule.allBoardData?.colorBoards?.forEach((item,index) => {
|
|
this.colorList[index+1] = {
|
|
gradient:item.gradient,
|
|
rgba:item.rgbValue,
|
|
tcx:item.tcx,
|
|
name:item.name,
|
|
}
|
|
if(item.gradient){
|
|
this.colorList[index+1].gradient = item.gradient
|
|
}else{
|
|
delete this.colorList[index+1].gradient
|
|
}
|
|
})
|
|
}
|
|
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
DesignDetailEnd.init(num)
|
|
this.workspaceCom = computed(()=>{
|
|
return this.store?.state?.Workspace?.workspace
|
|
})
|
|
},
|
|
|
|
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;
|
|
let type
|
|
if(res.data.level2Type){
|
|
this.designTypeList.forEach((item) => {
|
|
if(item.value == res.data.level2Type){
|
|
file.categoryValue = item?.value;
|
|
type = item.value
|
|
file.category = item?.name;
|
|
}
|
|
});
|
|
}else{
|
|
file.categoryValue = this.designTypeList[0].value;
|
|
type = this.designTypeList[0].value
|
|
file.category = this.designTypeList[0].name;
|
|
}
|
|
file.designType = res.data.designType
|
|
file.level2Type = type;
|
|
file.minIOPath = file.resData.minIOPath
|
|
let fileList = this.uploadList.filter(
|
|
(v) => v.status === "done"
|
|
);
|
|
this.uploadList = fileList
|
|
this.selectImgItem(this.uploadList[this.uploadList.length-1])
|
|
// this.store.commit("clearMoodTemplateId");
|
|
if(this.selectCode == 'Sketchboard'){
|
|
this.apparelList = this.uploadList
|
|
}else{
|
|
this.printList = this.uploadList
|
|
}
|
|
// if (this.uploadList.length > 8) {
|
|
// message.info(this.t('DesignDetailAlter.jsContent2'));
|
|
// } else {
|
|
// // this.store.commit("setSketchboardFile", fileList);
|
|
// }
|
|
}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
|
|
this.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 = []
|
|
this.colorList = [{},{},{},{},{},{},{},{},{}]
|
|
// DesignDetailEnd.colorList = [{}]
|
|
DesignDetailEnd.sketchImg={}
|
|
this.terminate()
|
|
DesignDetailEnd.clearModal()
|
|
},
|
|
// this.getLibraryList('Moodboard')
|
|
// this.getLibraryList('Printboard')
|
|
setSketchLibrary(item){
|
|
let data = {
|
|
libraryId:[item.id],
|
|
level2Type:item.level2Type,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
|
|
(rv) => {
|
|
}
|
|
).catch((res)=>{
|
|
});
|
|
},
|
|
selectImgItem(imgData){
|
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
|
imgData.categoryValue = imgData.categoryValue?imgData.categoryValue:imgData.level2TypeEnum.name
|
|
imgData.category = imgData.category?imgData.category:imgData.level2TypeEnum.value
|
|
if(this.selectCode == 'Sketchboard'){
|
|
// this.current.id_ = imgData.id
|
|
// this.current.path = imgData.url
|
|
DesignDetailEnd.setSketchImg(imgData)
|
|
// DesignDetailEnd.sketchImg.id_ = imgData.id
|
|
// DesignDetailEnd.sketchImg.path = imgData.url
|
|
}else if(this.selectCode == 'Printboard'){
|
|
// this.current.printObject.path = imgData?.url
|
|
// this.current.printObject.id = imgData?.id
|
|
// this.current.printObject.designType = imgData?.designType
|
|
// this.current.printObject.minIOPath = imgData.minIOPath
|
|
// this.current.printObject.prints = [{
|
|
// minIOPath:imgData.minIOPath,
|
|
// path:imgData?.url,
|
|
// designType: imgData?.designType
|
|
// }]
|
|
|
|
imgData.path = imgData.url
|
|
DesignDetailEnd.printsList.push(imgData)
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
// console.log(this.current.printObject,imgData);
|
|
}else if(this.selectCode == 'DesignElements'){
|
|
imgData.path = imgData.url
|
|
DesignDetailEnd.elementsList.push(imgData)
|
|
}
|
|
},
|
|
handleChange(){
|
|
this.currentPage = 1
|
|
this.clothesList = []
|
|
this.getLibraryList('')
|
|
},
|
|
//请求我的印花&&模型
|
|
getLibraryList(){
|
|
this.isShowLoading = true
|
|
let level2Type = ''
|
|
if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
|
|
level2Type = this.designType
|
|
}else if(this.selectCode == 'Sketchboard'){
|
|
level2Type = this.current.type
|
|
}
|
|
let workspace = this.store.state.Workspace.workspace
|
|
let data = {
|
|
// level1Type:'Printboard',
|
|
level1Type:this.selectCode,
|
|
// level2Type:'Pattern',
|
|
level2Type:level2Type,
|
|
modelSex:workspace?.sex,
|
|
page:this.currentPage,
|
|
pictureName:this.searchPictureName,
|
|
size:this.pageSize+this.clothesList.length,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
|
(rv) => {
|
|
if(this.selectCode == 'Sketchboard'){
|
|
rv.content.forEach((vItem)=>{
|
|
this.sketchCatecoryList.forEach((item) => {
|
|
if(item.value == vItem.level2Type){
|
|
vItem.categoryValue = item.value
|
|
vItem.category = item.name
|
|
}
|
|
});
|
|
})
|
|
}
|
|
this.clothesList = rv.content
|
|
this.isShowLoading = false
|
|
this.total = rv.total
|
|
}
|
|
).catch((res)=>{
|
|
this.isShowLoading = false
|
|
});
|
|
},
|
|
|
|
//衣服
|
|
open(num) {
|
|
if(num == 1 && this.type_ ==4)return
|
|
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=>{
|
|
});
|
|
},
|
|
setOperate(){
|
|
this.selectColor.rgba = this.selectColor?.rgba?.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
|
|
this.gradient.selectIndex = 0
|
|
this.gradient.gradientShow = true
|
|
this.colorList[this.selectIndex].rgba = this.selectColor.rgba
|
|
if(!this.colorList[this.selectIndex].gradient){
|
|
if(this.selectColor.rgba.r){
|
|
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
|
|
r:this.selectColor.rgba.r,
|
|
g:this.selectColor.rgba.g,
|
|
b:this.selectColor.rgba.b,
|
|
a:1,
|
|
}
|
|
}
|
|
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
|
|
}else{
|
|
this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
|
|
this.colorList[this.selectIndex].gradient = null
|
|
}
|
|
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
|
|
},
|
|
mousedownGradient(event,item,index,str){
|
|
let moible = isMoible()
|
|
if(moible && str == 'mousedown'){
|
|
return
|
|
}else if(!moible && str == 'touchstart'){
|
|
return
|
|
}
|
|
event.stopPropagation();
|
|
this.colorList[this.selectIndex].gradient.selectIndex = index
|
|
let gradientRgba = item.rgba
|
|
let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
|
|
let hex = this.rgbaToHex(rgba)
|
|
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
|
|
// isMoible() true为移动端
|
|
let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
|
|
let position = {
|
|
x:moible?event.touches[0].screenX:event?.x,
|
|
left:event.target.style.left?event.target.style.left.split('%')[0]:0
|
|
}
|
|
let mousedownGradient = (e)=>{
|
|
let left = ((moible?e.touches[0].screenX:e.x) - position.x)/gradientWidth*100+Number(position.left)
|
|
left = (left<0?0:left>100?100:left)
|
|
item.left = left+'%'
|
|
}
|
|
let mouseupGradient = ()=>{
|
|
if(moible){
|
|
window.removeEventListener('touchmove',mousedownGradient)
|
|
window.removeEventListener('touchend',mouseupGradient)
|
|
}else{
|
|
window.removeEventListener('mousemove',mousedownGradient)
|
|
window.removeEventListener('mouseup',mouseupGradient)
|
|
}
|
|
}
|
|
if(moible){
|
|
window.addEventListener('touchmove',mousedownGradient)
|
|
window.addEventListener('touchend',mouseupGradient)
|
|
}else{
|
|
window.addEventListener('mousemove',mousedownGradient)
|
|
window.addEventListener('mouseup',mouseupGradient)
|
|
}
|
|
// event.target.addEventListener('touchmove',)
|
|
},
|
|
mousedownGradientAngle(event,str){
|
|
let moible = isMoible()
|
|
if(moible && str == 'mousedown'){
|
|
return
|
|
}else if(!moible && str == 'touchstart'){
|
|
return
|
|
}
|
|
event.stopPropagation();
|
|
// isMoible() true为移动端
|
|
let domPosition = event.target.getBoundingClientRect()
|
|
let position = {
|
|
x:domPosition.x+domPosition.width/2,
|
|
y:domPosition.y+domPosition.height/2,
|
|
}
|
|
let angle
|
|
|
|
let mousedownGradientAngle = (e)=>{
|
|
let X = position.x
|
|
let Y = position.y
|
|
let x = (moible?e.touches[0].clientX:e?.x) - X
|
|
let y = Y -( moible?e.touches[0].clientY:e?.y)
|
|
angle = Math.atan2(x,y)*(180 / Math.PI)
|
|
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
|
|
this.colorList[this.selectIndex].gradient.angle = angle
|
|
|
|
}
|
|
let mouseupGradientAngle = ()=>{
|
|
if(moible){
|
|
window.removeEventListener('touchmove',mousedownGradientAngle)
|
|
window.removeEventListener('touchend',mouseupGradientAngle)
|
|
}else{
|
|
window.removeEventListener('mousemove',mousedownGradientAngle)
|
|
window.removeEventListener('mouseup',mouseupGradientAngle)
|
|
}
|
|
}
|
|
if(moible){
|
|
window.addEventListener('touchmove',mousedownGradientAngle)
|
|
window.addEventListener('touchend',mouseupGradientAngle)
|
|
}else{
|
|
window.addEventListener('mousemove',mousedownGradientAngle)
|
|
window.addEventListener('mouseup',mouseupGradientAngle)
|
|
}
|
|
},
|
|
//通过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
|
|
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
|
|
this.pantongName = rv.name
|
|
let colorList =this.colorList.filter((v) => Object.keys(v).length)
|
|
this.getColorBg = true
|
|
}else{
|
|
message.info(this.t('DesignDetailAlter.jsContent6'))
|
|
}
|
|
})
|
|
}else{
|
|
message.info(this.t('ColorboardUpload.jsContent5'))
|
|
}
|
|
|
|
},
|
|
//查询颜色的潘通值和txc
|
|
getPantongName(v,index) {
|
|
if(v?.r == undefined){
|
|
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) {
|
|
if(index == -1){
|
|
this.colorList[this.selectIndex].tcx = rv[0].tcx
|
|
this.colorList[this.selectIndex].name = rv[0].name
|
|
}else{
|
|
this.colorList[index].tcx = rv[0].tcx
|
|
this.colorList[index].name = rv[0].name
|
|
}
|
|
resolve();
|
|
}
|
|
})
|
|
.catch((res) => {
|
|
reject();
|
|
});
|
|
});
|
|
},
|
|
|
|
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}
|
|
// let colorListIndex = []
|
|
// this.colorList.forEach((item,index)=>{
|
|
// if(!item.rgba){
|
|
// colorListIndex.push(index)
|
|
// }
|
|
// })
|
|
// for (let index = 0; index < selectColorList.length; index++) {
|
|
// this.colorList[colorListIndex[0]] = selectColorList[index]
|
|
// this.getPantongName(selectColorList[index].rgba,colorListIndex[0])
|
|
// colorListIndex.splice(0,1)
|
|
// }
|
|
img.remove()
|
|
};
|
|
|
|
|
|
},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: calc(1.8rem*1.2);
|
|
display: block;
|
|
}
|
|
.detail_uploadLibrary{
|
|
.switch_type_list {
|
|
margin-bottom: calc(1rem*1.2);
|
|
margin-top: calc(-1rem*1.2);
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: space-around;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
.detail_Library{
|
|
.select_block{
|
|
border: calc(0.1rem* 1.2) solid #F1F1F1;
|
|
// margin-right: calc(2.3rem*1.2);
|
|
height: 4rem;
|
|
width: calc(20rem*1.2);
|
|
margin-bottom: 1rem;
|
|
.ant-select{
|
|
width: 90%;
|
|
}
|
|
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.content_search_block{
|
|
display: flex;
|
|
margin-bottom: calc(1rem*1.2);
|
|
|
|
.search_input{
|
|
width: calc(15rem*1.2);
|
|
padding-left: calc(1.5rem*1.2);
|
|
// height: 4rem*1.2);
|
|
// line-height: 3.8rem*1.2);
|
|
// background: #FFFFFF;
|
|
border: calc(0.1rem*1.2) solid #F1F1F1;
|
|
// font-size: 1.6rem*1.2);
|
|
font-size: calc(1.2rem*1.2);
|
|
font-weight: 400;
|
|
height: 4rem;
|
|
|
|
&::placeholder {
|
|
color: #C2C2C2;
|
|
}
|
|
}
|
|
|
|
.search_icon_block{
|
|
width: calc(5rem*1.2);
|
|
height: calc(3rem*1.2);
|
|
line-height: calc(3rem*1.2);
|
|
text-align: center;
|
|
background: #343579;
|
|
cursor: pointer;
|
|
|
|
.icon-sousuo{
|
|
font-size: calc(2rem*1.2);
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail_Library_item,.detail_Upload_item{
|
|
width: 100%;
|
|
// height: calc(100% - 19rem*1.2));
|
|
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;}
|
|
|
|
}
|
|
.operate_file_block{
|
|
height: calc(1.5rem*1.2);
|
|
.select_img_type{
|
|
line-height: 1;
|
|
.select_category{
|
|
zoom: .6;
|
|
height: 100%;
|
|
.icon-xiala{
|
|
zoom: .8;
|
|
}
|
|
}
|
|
.category_list{
|
|
margin-top: calc(.1rem*1.2);
|
|
.category_item{
|
|
zoom: .7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.material_content_list_loding{
|
|
text-align: center;
|
|
width: 100%;
|
|
img{
|
|
height: calc(10rem*1.2);
|
|
}
|
|
}
|
|
.content_img_item{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
// padding: 0 1.4rem*1.2);
|
|
// margin-bottom: 2.8rem*1.2);
|
|
margin-bottom: calc(2rem*1.2);
|
|
padding: 0;
|
|
// height: 9rem*1.2);
|
|
&.active{
|
|
margin-bottom: calc(2rem*1.2);
|
|
.pin_block{
|
|
display: block;
|
|
}
|
|
}
|
|
.pin_block{
|
|
display: none;
|
|
}
|
|
.content_img_item_block{
|
|
// border: 0.1rem*1.2) solid transparent;
|
|
width: calc(10rem*1.2);
|
|
height: calc(10rem*1.2);
|
|
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%;
|
|
}
|
|
}
|
|
.content_img_name{
|
|
width: calc(16.5rem*1.2);
|
|
height: calc(3.5rem*1.2);
|
|
line-height: calc(3.5rem*1.2);
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: calc(1.4rem*1.2);
|
|
color: #030303;
|
|
}
|
|
}
|
|
.upload_img_body{
|
|
width: 100%;
|
|
.upload_item{
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.moodboard_body{
|
|
.upload_file_item{
|
|
margin: 0;
|
|
|
|
margin-bottom: calc(2rem*1.2);
|
|
width: calc(9rem*1.2);
|
|
height: calc(9rem*1.2);
|
|
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: calc(3.2rem*1.2);
|
|
height: calc(3.2rem*1.2);
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: calc(0.4rem*1.2);
|
|
position: absolute;
|
|
top: calc(0.9rem*1.2);
|
|
right: calc(0.9rem*1.2);
|
|
text-align: center;
|
|
line-height: calc(3.2rem*1.2);
|
|
left: auto;
|
|
.icon-shanchu{
|
|
font-size: calc(1.6rem*1.2);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:hover .delete_file_block{
|
|
display: block;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.detail_color{
|
|
// height: calc(100% - 5.4rem*1.2));
|
|
&.detail_color::-webkit-scrollbar{display: none;}
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.right_content_line{
|
|
position: relative;
|
|
margin-bottom: calc(1rem*1.2);
|
|
.upload_right_header{
|
|
display: flex;
|
|
margin-bottom: calc(1rem*1.2);
|
|
margin-top: calc(1rem*1.2);
|
|
&.upload_right_header:nth-child(1){
|
|
margin-top: 0;
|
|
}
|
|
span{
|
|
margin-left: calc(1rem*1.2);
|
|
font-size: calc(1.8rem*1.2);
|
|
color: #000000;
|
|
}
|
|
}
|
|
.upload_centetn{
|
|
// overflow-x: hidden;
|
|
}
|
|
.upload_centetn::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.color_review_block{
|
|
margin-right: calc(4rem*1.2);
|
|
|
|
.color_review_content{
|
|
width: calc(16.5rem*1.2);
|
|
height: calc(16.5rem*1.2);
|
|
background: #FFFFFF;
|
|
border: calc(0.1rem*1.2) solid #DCDCEC;
|
|
}
|
|
|
|
.pantong_name{
|
|
margin-top: calc(1rem*1.2);
|
|
font-size: calc(1.6rem*1.2);
|
|
font-weight: 400;
|
|
color: #030303;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.clear_button{
|
|
padding: 0 calc(2.8rem*1.2);
|
|
height: calc(3.2rem*1.2);
|
|
line-height: calc(3.2rem*1.2);
|
|
background: #EFEEFF;
|
|
font-size: calc(1.2rem*1.2);
|
|
font-family: Roboto;
|
|
color: #343579;
|
|
display: inline-block;
|
|
margin-top: calc(1rem*1.2);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.upload_file_item{
|
|
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
// width: 16.5rem*1.2);
|
|
// height: 16.5rem*1.2);
|
|
width: calc(6rem*1.2);
|
|
height: calc(6rem*1.2);
|
|
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: calc(4rem*1.2);
|
|
background: rgba(0,0,0,0.2);
|
|
font-size: calc(1.6rem*1.2);
|
|
color: #FFFFFF;
|
|
line-height: calc(4rem*1.2);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload_img_icon{
|
|
width: calc(4.6rem*1.2);
|
|
}
|
|
.upload_color{
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
height: calc(2rem*1.2);
|
|
.upload_color_item{
|
|
width: calc(2rem*1.2);
|
|
height: calc(2rem*1.2);
|
|
position: relative;
|
|
cursor: pointer;
|
|
margin-right: calc(1rem*1.2);
|
|
.upload_color_item_bg{
|
|
width: calc(2rem*1.2);
|
|
height: calc(2rem*1.2);
|
|
}
|
|
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{
|
|
margin: auto;
|
|
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
|
|
width: 24rem;
|
|
border-radius: calc(1rem*1.2);
|
|
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);
|
|
box-shadow:none;
|
|
}
|
|
.chrome_color{
|
|
width: 24rem;
|
|
// height: 16.5rem*1.2);
|
|
overflow: hidden;
|
|
|
|
.vc-chrome-saturation-wrap{
|
|
height: 100%;
|
|
// width: calc(16rem*1.2);
|
|
width: 100%;
|
|
height: calc(14rem*1.2);
|
|
max-height: calc(17rem*1.2);
|
|
max-width: calc(17rem*1.2);
|
|
margin: calc(.7rem*1.2) auto;
|
|
padding-bottom: 0;
|
|
}
|
|
.vc-chrome-body{
|
|
padding: 0;
|
|
width: 90%;
|
|
margin: calc(0.5rem*1.2) auto;
|
|
margin: 0 auto;
|
|
background: rgba(0,0,0,0);
|
|
margin-bottom: calc(1rem*1.2);
|
|
// display: none;
|
|
.vc-chrome-fields-wrap{
|
|
margin-top: 5%;
|
|
padding: 0;
|
|
position: relative;
|
|
.vc-chrome-toggle-btn{
|
|
width: calc(3.2rem*1.2);
|
|
.vc-chrome-toggle-icon{
|
|
height: auto;
|
|
margin-right: calc(-0.4rem*1.2);
|
|
margin-top: calc(0rem*1.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
svg{
|
|
width: calc(2.4rem*1.2) !important;
|
|
height: calc(2.4rem*1.2) !important;
|
|
}
|
|
}
|
|
}
|
|
.vc-chrome-fields{
|
|
.vc-chrome-field{
|
|
padding-left: calc(.6rem*1.2);
|
|
}
|
|
.vc-input__label{
|
|
font-size: calc(1.6rem*1.2);
|
|
}
|
|
.vc-input__input{
|
|
font-size: calc(1.1rem*1.2);
|
|
height: calc(2.1rem*1.2);
|
|
}
|
|
}
|
|
.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: calc(1.5rem*1.2);
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
width: calc(2.2rem*1.2);
|
|
height: calc(2.2rem*1.2);
|
|
padding: calc(.7rem*1.2);
|
|
border: 1px solid;
|
|
position: absolute;
|
|
bottom: calc(-.5rem*1.2);
|
|
right: calc(.5rem*1.2);
|
|
border-radius: calc(.5rem*1.2);
|
|
|
|
}
|
|
.vc-chrome-fields{
|
|
.vc-input__label{
|
|
margin-top: calc(1rem*1.2);
|
|
}
|
|
}
|
|
.vc-chrome-fields:nth-child(2){
|
|
>:last-of-type {
|
|
display: none;
|
|
}
|
|
}
|
|
.vc-chrome-fields:nth-child(3){
|
|
>:last-of-type {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.vc-chrome-controls{
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
.vc-chrome-color-wrap{
|
|
// width: 3.6rem*1.2);
|
|
margin-left: calc(2rem*1.2);
|
|
width: auto;
|
|
.vc-chrome-active-color{
|
|
border-radius: 50%;
|
|
}
|
|
.vc-chrome-active-color,.vc-checkerboard{
|
|
width: calc(3rem*1.2);
|
|
height: calc(3rem*1.2);
|
|
}
|
|
}
|
|
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
|
|
.vc-hue{
|
|
border-radius: 15px;
|
|
}
|
|
.vc-alpha{
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
}
|
|
height: calc(1rem*1.2);
|
|
.vc-hue-picker{
|
|
width: calc(1.4rem*1.2);
|
|
height: calc(1.4rem*1.2);
|
|
}
|
|
.vc-alpha-picker{
|
|
width: calc(1.4rem*1.2);
|
|
height: calc(1.4rem*1.2);
|
|
transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2));
|
|
}
|
|
}
|
|
.vc-chrome-alpha-wrap{
|
|
display: none;
|
|
}
|
|
.vc-chrome-hue-wrap{
|
|
margin-bottom: calc(.5rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
|
width: calc(1rem*1.2);
|
|
height: calc(1rem*1.2);
|
|
}
|
|
}
|
|
.color_setting_operateSingle{
|
|
text-align: center;
|
|
margin: 1rem 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
.color_setting_btn{
|
|
margin: 0 1rem;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active{
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
}
|
|
.color_setting_operate{
|
|
*{
|
|
-webkit-touch-callout: none; /* iOS Safari */
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none;
|
|
}
|
|
.color_setting_operate_item{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
.operate_item_box{
|
|
}
|
|
}
|
|
.color_setting_operate_control{
|
|
.operate_item_delete,.operate_item_angle{
|
|
cursor: pointer;
|
|
}
|
|
.operate_item_delete{
|
|
i{
|
|
display: flex;
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
.operate_item_angle{
|
|
.operate_item_angle_box{
|
|
border-radius: 50%;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border: solid 2px #39215b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
>div{
|
|
height: 100%;
|
|
width: 1rem;
|
|
position: relative;
|
|
pointer-events:none;
|
|
}
|
|
>div::before{
|
|
position: absolute;
|
|
content: "";
|
|
top: 0.2rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
background: #39215b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.color_setting_operate_input{
|
|
width: 80%;
|
|
// padding: 0 10%;
|
|
margin: 1.2rem 10%;
|
|
border-radius: 10%;
|
|
position: relative;
|
|
height: 2.5rem;
|
|
.color_setting_operate_bg{
|
|
border-radius: .5rem;
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
background: #fff;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.color_setting_operate_btn{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
left: 0;
|
|
width: 1rem;
|
|
height: 110%;
|
|
border: .2rem solid;
|
|
border-radius: .5rem;
|
|
cursor: pointer;
|
|
box-sizing: content-box;
|
|
z-index: 2;
|
|
&.active{
|
|
border: .3rem solid;
|
|
}
|
|
}
|
|
.color_setting_operate_btn:hover{
|
|
border: .3rem solid;
|
|
}
|
|
}
|
|
|
|
.sileder_color{
|
|
margin-top:calc(1.3rem*1.2);
|
|
|
|
.vc-slider-swatches{
|
|
display:none
|
|
}
|
|
.vc-slider-hue-warp {
|
|
width: calc(16.5rem*1.2);
|
|
height: calc(2.4rem*1.2);
|
|
border-radius: calc(1.2rem*1.2);
|
|
overflow: hidden;
|
|
|
|
.vc-hue-picker{
|
|
width: calc(1.4rem*1.2);
|
|
height: calc(1.4rem*1.2);
|
|
border-radius: 50%;
|
|
transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
|
|
}
|
|
}
|
|
.vc-hue-pointer{
|
|
top: calc(0.5rem*1.2) !important;
|
|
}
|
|
|
|
}
|
|
|
|
.color_block{
|
|
// margin-top: 1rem*1.2);
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// font-size: 1.6rem*1.2);
|
|
width: 100%;
|
|
padding: 0 5%;
|
|
padding-bottom: 5%;
|
|
margin: calc(0.5rem*1.2) auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.color_right{
|
|
width: calc(11rem*1.2);
|
|
font-size: calc(1,2rem*1.2);
|
|
color: #666666;
|
|
.color_rgb_block{
|
|
display: flex;
|
|
.rgb_item{
|
|
margin-left: calc(.2rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
.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: calc(.2rem*1.2) calc(.5rem*1.2);
|
|
box-shadow: inset 0 0 0 1px #ccc;
|
|
border-radius: calc(.4rem*1.2);
|
|
justify-content: space-around;
|
|
text-transform:uppercase;
|
|
.color_block_bg{
|
|
width: calc(1.5rem*1.2);
|
|
height: calc(1.5rem*1.2);
|
|
// margin-right: .5rem*1.2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.color_block_bg{
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.get_color_block{
|
|
display: flex;
|
|
flex-direction: row;
|
|
.get_color_input{
|
|
width: calc(15rem*1.2);
|
|
height: calc(2.8rem*1.2);
|
|
background: #FFFFFF;
|
|
border: calc(0.1rem*1.2) solid #DCDCEC;
|
|
padding: calc(1rem*1.2) calc(1.3rem*1.2);
|
|
box-sizing: border-box;
|
|
font-size: calc(1.4rem*1.2);
|
|
text-align: left;
|
|
|
|
&::placeholder {
|
|
color: #B7B7B7;
|
|
}
|
|
}
|
|
|
|
.get_color_button{
|
|
padding: 0 calc(.2rem*1.2);
|
|
height: calc(2.8rem*1.2);
|
|
background: #EFEEFF;
|
|
display: inline-block;
|
|
line-height: calc(3rem*1.2);
|
|
font-size: calc(1.2rem*1.2);
|
|
color: #343579;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
.fi-br-fill{
|
|
margin-right: calc(0.5rem*1.2);
|
|
color:#343579;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.get_color_des{
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.upload_item{
|
|
margin-bottom: calc(.5rem*1.2);
|
|
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*1.2) 2rem*1.2) 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
width: calc(6rem*1.2);
|
|
height: calc(6rem*1.2);
|
|
border: 1px solid #F5F5F5;
|
|
vertical-align: top;
|
|
i{
|
|
zoom: 1.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style> |