716 lines
22 KiB
Vue
716 lines
22 KiB
Vue
<template>
|
|
<div class="detail_modal_body_result">
|
|
<div v-show="type_ == 1" class="result_apparel_print">
|
|
<div class="upload_title result_apparel" v-show="type_ == 1">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>{{ $t('DesignDetailEnd.NewApparel') }}</span>
|
|
</div>
|
|
|
|
<div class="result_apparel_print_img">
|
|
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.path?sketchImg?.path:current?.path" :title="current?.type">
|
|
<!-- <div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
|
|
<img v-for="item in current?.layersObject" :src="item.imageUrl" alt="">
|
|
</div> -->
|
|
|
|
</div>
|
|
</div>
|
|
<div v-show="type_ == 2" class="result_apparel_elements">
|
|
<div class="upload_title result_apparel">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
|
|
</div>
|
|
<div class="modal_img">
|
|
<div class="modal_img_item" v-for="item,index in exhibitionList.print" :key="item" >
|
|
<!-- <div class="modal_img_item" v-for="item,index in current.printObject.prints" :key="item" > -->
|
|
<img v-lazy="item.path" alt="">
|
|
<sketchCategory :disignTypeList="designTypeList" :generateList="exhibitionList.print" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
|
|
<!-- <div
|
|
class="delete_file_block"
|
|
@click="deleteSelectptints(item,index)"
|
|
>
|
|
<span class="icon iconfont icon-shanchu"></span>
|
|
</div> -->
|
|
</div>
|
|
<div class="modal_img_item" v-for="item,index in printsList" :key="item" >
|
|
<img v-lazy="item.path" alt="">
|
|
<sketchCategory :disignTypeList="designTypeList" :generateList="printsList" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
|
|
<div
|
|
class="delete_file_block"
|
|
@click="deleteptints(item,index)"
|
|
>
|
|
<span class="icon iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="type_ == 3">
|
|
<div class="result_color upload_title">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>{{ $t('DesignDetailEnd.NewColor') }}</span>
|
|
</div>
|
|
<div class="modal_img">
|
|
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
|
<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
|
|
<div v-if="!color?.gradient" class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
|
|
</div>
|
|
<div class="color_content" v-else :style="{height:'100%','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
|
|
<div v-if="!color?.gradient" class="color_content_body">
|
|
<div class="color_des">{{color.tcx}}</div>
|
|
<div class="color_des">{{ color.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="type_ == 4" class="result_apparel_elements">
|
|
<div class="upload_title result_apparel">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>New Elements</span>
|
|
</div>
|
|
<div class="modal_img">
|
|
|
|
<!-- <div class="modal_img_item" v-for="item,index in current.trims.prints" :key="item" > -->
|
|
<div class="modal_img_item" v-for="item,index in exhibitionList.elements" :key="item" >
|
|
<img v-lazy="item.path" alt="">
|
|
<div
|
|
class="delete_file_block"
|
|
@click="deleteSelectElements(item,index)"
|
|
>
|
|
<span class="icon iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
<div class="modal_img_item" v-for="item,index in elementsList" :key="item" >
|
|
<img v-lazy="item.url" alt="">
|
|
<div
|
|
class="delete_file_block"
|
|
@click="deleteElements(item,index)"
|
|
>
|
|
<span class="icon iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
|
|
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0 || exhibitionList.print.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
|
|
<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
|
|
<div v-if="type_ == 4 && (elementsList.length != 0 || exhibitionList.elements.length != 0)" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
|
|
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
|
|
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
|
|
<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
|
|
<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
|
|
</div>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { defineComponent,computed,ref, nextTick,h ,inject} from 'vue'
|
|
import Draggable from 'vuedraggable'
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { Sketch} from '@ans1998/vue3-color'
|
|
import DesignPrintOperation from './DesignPrintOperation.vue';
|
|
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
|
|
import DesignElementsOperation from './DesignElements.vue';
|
|
import DesignPrintMobile from './DesignElementsMobile.vue';
|
|
import { message,Upload} from 'ant-design-vue';
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import {isMoible,setGradual} from '@/tool/util'
|
|
import { useI18n } from 'vue-i18n';
|
|
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
|
|
|
export default defineComponent({
|
|
props: ["msg"],
|
|
components:{
|
|
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
|
|
DesignElementsOperation,DesignPrintMobile,sketchCategory
|
|
},
|
|
setup(prop) {
|
|
const store = useStore();
|
|
let type_ = ref(0);
|
|
let current = inject('current')//父组件传过来的数据
|
|
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
|
let sketchImg = ref({})
|
|
let driver__ = inject('driver__')//父组件传过来的数据
|
|
let moible = inject('moible')//父组件传过来的数据
|
|
let designItemDetail = inject('designItemDetail')//父组件传过来的数据
|
|
let currentIndex = inject('currentIndex')//父组件传过来的数据
|
|
let designTypeList = inject('designTypeList')//父组件传过来的数据
|
|
let previewShow = ref(false)
|
|
//印花
|
|
|
|
//颜色
|
|
// let colorList = ref([{}])
|
|
// let colorList = ref([{},{},{},{},{},{},{},{},{}])
|
|
let colorList = inject('colorList')//父组件传过来的数据
|
|
let selectIndex = inject('selectIndex')//父组件传过来的数据
|
|
//加载中
|
|
let loadingShow = ref(false)
|
|
|
|
let exhibitionList = inject('exhibitionList')
|
|
let {t} = useI18n()
|
|
let printsList = ref([])
|
|
let elementsList = ref([
|
|
|
|
])
|
|
return{
|
|
store,
|
|
current,
|
|
setRevocation,
|
|
sketchImg,
|
|
driver__,
|
|
moible,
|
|
designItemDetail,
|
|
currentIndex,
|
|
designTypeList,
|
|
previewShow,
|
|
type_,
|
|
colorList,
|
|
selectIndex,
|
|
loadingShow,
|
|
exhibitionList,
|
|
t,
|
|
printsList,
|
|
elementsList,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
//颜色
|
|
getRGBA:{},
|
|
selectColor:{},
|
|
}
|
|
},
|
|
computed:{
|
|
setGradient(){
|
|
return (gradient)=>{
|
|
let gradientStr = ''
|
|
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}`
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
'exhibitionList.print':{
|
|
handler(newVal,oldVal){
|
|
this.printsList = this.printsList.filter(objA => {
|
|
return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
|
|
});
|
|
this.setExhibitionType('print')
|
|
}
|
|
},
|
|
'exhibitionList.elements':{
|
|
handler(newVal,oldVal){
|
|
this.elementsList = this.elementsList.filter(objA => {
|
|
return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
|
|
});
|
|
this.setExhibitionType('elements')
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
//点击判断
|
|
init(num){
|
|
// this.current = JSON.parse(JSON.stringify(this.currentItem))
|
|
this.type_ = num
|
|
this.colorList[this.selectIndex] = this.$parent.selectColor
|
|
if(num == 2){
|
|
this.setExhibitionType('print')
|
|
}else if(num == 4){
|
|
this.setExhibitionType('elements')
|
|
}
|
|
},
|
|
clearModal(){
|
|
this.elementsList = []
|
|
this.printsList = []
|
|
},
|
|
//模型
|
|
setSketchImg(v){
|
|
this.sketchImg.id_ = v.id
|
|
this.sketchImg.id = v.id
|
|
this.sketchImg.path = v.url
|
|
this.sketchImg.minIOPath = v.minIOPath
|
|
this.sketchImg.type = v.level2Type
|
|
this.sketchImg.designType = v.designType
|
|
},
|
|
//印花
|
|
setExhibitionType(str){
|
|
this.exhibitionList[str].forEach((item,index)=>{
|
|
if(!item.categoryValue){
|
|
this.designTypeList.forEach((typeItem)=>{
|
|
if(item.level2Type == typeItem.value){
|
|
item.categoryValue = typeItem.value
|
|
item.category = typeItem.name
|
|
}
|
|
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
setPrint(){
|
|
// if(this.current?.printObject?.prints?.[0]?.path){
|
|
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
|
|
DesignPrintOperation.init()
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
// }else{
|
|
// message.info(this.t('DesignDetailEnd.jsContent1'));
|
|
// }
|
|
|
|
},
|
|
deleteFile(){
|
|
this.current.printObject = {}
|
|
},
|
|
|
|
|
|
//颜色
|
|
selectColorItem(index,color){
|
|
this.selectIndex = index
|
|
// if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
|
|
// return
|
|
// }
|
|
if(color.rgba?.r){
|
|
this.$parent.selectColor = color
|
|
}else{
|
|
this.$parent.selectColor.isClick = {}
|
|
}
|
|
//判断是否对一个颜色重复点击
|
|
|
|
// this.$parent.selectColor.tcxColor = ''
|
|
// this.$parent.selectColor.pantongName = ''
|
|
},
|
|
setSelectColorItem(color){
|
|
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
|
|
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b}`
|
|
this.current.color = string
|
|
designItemDetail.clothes.forEach((element,index) => {
|
|
if(element.id == this.current.id){
|
|
designItemDetail.clothes[index] = this.current
|
|
}
|
|
});
|
|
},
|
|
hasDuplicateId(arr) {
|
|
const set = new Set();
|
|
for (let i = 0; i < arr.length; i++) {
|
|
const id = arr[i].id;
|
|
if (set.has(id)) {
|
|
return true;
|
|
}
|
|
set.add(id);
|
|
}
|
|
return false;
|
|
},
|
|
soleId(arr,index){
|
|
let randomNum = Math.floor(100 + Math.random() * 900);
|
|
// if(this.sketchImg.id_){
|
|
if(this.sketchImg.id){
|
|
if(this.sketchImg.id == this.sketchImg.id_){
|
|
arr[index].id = Number(this.sketchImg.id_+(randomNum+""))
|
|
arr[index].changed = true
|
|
if(this.hasDuplicateId(arr)){
|
|
this.sketchImg.id_ = this.sketchImg.id
|
|
this.soleId(arr,index)
|
|
}
|
|
}else{
|
|
arr[index].id = this.sketchImg.id_
|
|
}
|
|
}else{
|
|
arr[index].id = this.current.id
|
|
}
|
|
// arr[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id
|
|
return arr
|
|
},
|
|
deleteptints(item,index){
|
|
this.printsList.splice(index,1)
|
|
},
|
|
deleteSelectptints(item,index){
|
|
this.exhibitionList.print.splice(index,1)
|
|
},
|
|
deleteElements(item,index){
|
|
this.elementsList.splice(index,1)
|
|
},
|
|
deleteSelectElements(item,index){
|
|
this.exhibitionList.elements.splice(index,1)
|
|
},
|
|
setElemets(){
|
|
if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
|
|
let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
|
|
DesignElementsOperation.init()
|
|
},
|
|
//提交
|
|
setPreview(){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
let index
|
|
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
|
// let bor = false
|
|
let zIndex = 10
|
|
designItemDetail.clothes.forEach((v,ind)=>{
|
|
if(v.id == this.current.id){
|
|
index = ind
|
|
// bor = true
|
|
}
|
|
if(v.priority){
|
|
if(zIndex < v.priority){
|
|
zIndex = v.priority
|
|
}
|
|
}
|
|
})
|
|
index = index? index:0
|
|
if(!this.current.id){
|
|
if(index){
|
|
data.designSingleItemDTOList[index].priority = zIndex+=1
|
|
}
|
|
}
|
|
if(this.type_ == 1){
|
|
if(data.designSingleItemDTOList[index].path != this.sketchImg.minIOPath && this.sketchImg.id_){
|
|
data.designSingleItemDTOList[index].offset = [0,0]
|
|
data.designSingleItemDTOList[index].scale = [1,1]
|
|
}
|
|
data.designSingleItemDTOList = this.soleId(data.designSingleItemDTOList,index)
|
|
this.sketchImg.id_ = data.designSingleItemDTOList[index].id
|
|
data.designSingleItemDTOList[index].path =this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath
|
|
data.designSingleItemDTOList[index].type =this.sketchImg.type? this.sketchImg.type: this.current.type
|
|
}else if(this.type_ == 2){
|
|
data.designSingleItemDTOList[index].printObject.prints = []
|
|
}else if(this.type_ == 3){
|
|
if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
|
|
message.info(this.t('DesignDetailEnd.jsContent2'))
|
|
return
|
|
}
|
|
let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
|
|
data.designSingleItemDTOList[index].color = color
|
|
}else if(this.type_ == 4){
|
|
data.designSingleItemDTOList[index].trims = this.current.trims
|
|
}
|
|
if(this.colorList[this.selectIndex].gradient){
|
|
let gradient = this.colorList[this.selectIndex].gradient
|
|
gradient.colorImg = setGradual(gradient,320,700)
|
|
data.designSingleItemDTOList[index].gradient = gradient
|
|
}else{
|
|
delete data.designSingleItemDTOList[index].gradient
|
|
}
|
|
data.designSingleItemDTOList[index].designType = this.sketchImg.designType?this.sketchImg.designType:this.current.designType
|
|
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
this.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
|
(rv) => {
|
|
let bor = false
|
|
rv.clothes.forEach((item)=>{
|
|
if(item.type != 'body'){
|
|
if(item.id == designItemDetail.clothes[index].id || item.id == this.sketchImg.id_){
|
|
designItemDetail.clothes[index].color = item.color
|
|
if(item.gradient){
|
|
designItemDetail.clothes[index].gradient = item.gradient
|
|
}else{
|
|
delete designItemDetail.clothes[index].gradient
|
|
}
|
|
designItemDetail.clothes[index].designType = item.designType
|
|
designItemDetail.clothes[index].trims = item.trims
|
|
designItemDetail.clothes[index].layersObject = item.layersObject
|
|
designItemDetail.clothes[index].minIOPath = item.minIOPath
|
|
designItemDetail.clothes[index].path = item.path
|
|
designItemDetail.clothes[index].id = item.id
|
|
designItemDetail.clothes[index].changed = item.changed?item.changed:false
|
|
designItemDetail.clothes[index].type = item.type
|
|
designItemDetail.clothes[index].printObject = item.printObject
|
|
bor = true
|
|
}else{
|
|
|
|
}
|
|
if(!this.current.id ){
|
|
designItemDetail.clothes[index].priority = zIndex
|
|
}
|
|
}
|
|
})
|
|
|
|
designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
|
designItemDetail.ifSubmit = true
|
|
designItemDetail.clothes.forEach((item,index)=>{
|
|
let a
|
|
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
|
|
a = item.layersObject[0]
|
|
item.layersObject[0] = item.layersObject[1]
|
|
item.layersObject[1] = a
|
|
}
|
|
item.layersObject[0].id = designItemDetail.clothes[index].layersObject[0].id
|
|
item.layersObject[1].id = designItemDetail.clothes[index].layersObject[1].id
|
|
})
|
|
this.loadingShow = false
|
|
this.store.commit("setDesignItemDetail", designItemDetail);
|
|
this.store.commit("setDesignPreviewData", data);
|
|
this.setRevocation(designItemDetail,data)
|
|
}
|
|
).catch(res=>{
|
|
this.loadingShow = false
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.detail_modal_body_result{
|
|
width: 26%;
|
|
position: relative;
|
|
i{
|
|
font-size: var(--aida-fsize1-8);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.upload_title{
|
|
display: flex;
|
|
margin-bottom: calc(1rem*1.2);
|
|
margin-top: calc(1rem*1.2);
|
|
&.upload_title:nth-child(1){
|
|
margin-top: 0;
|
|
}
|
|
span{
|
|
margin-left: calc(1rem*1.2);
|
|
font-size: var(--aida-fsize1-8);
|
|
color: #000000;
|
|
}
|
|
}
|
|
//模型和印花
|
|
.result_apparel_print{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.result_apparel_print_img{
|
|
position: relative;
|
|
flex: 1;
|
|
text-align: center;
|
|
img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
max-height: calc(35rem*1.2);
|
|
margin-top: calc(2rem*1.2);
|
|
width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.result_print_img{
|
|
transform: scale(.85);
|
|
transform-origin: center top;
|
|
cursor: pointer;
|
|
img:nth-child(1){
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//印花
|
|
.result_print{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: calc(14rem*1.2);
|
|
>div{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.print_left,.print_right{
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
.print_left{
|
|
position: relative;
|
|
img{
|
|
width: auto;
|
|
height: calc(8rem*1.2);
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.print_right{
|
|
|
|
.habit_Overal_Single {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// margin: 2rem*1.2) 0;
|
|
transform: scale(.8);
|
|
// margin: 3rem*1.2) 0;
|
|
.habit_Overal_Single_text {
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
// font-weight: 900;
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
:deep(.ant-switch) {
|
|
margin: 0 calc(1rem*1.2);
|
|
background-color: #efefef;
|
|
}
|
|
:deep(.ant-switch-checked) {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
.habit_System_Designer {
|
|
margin-top: calc(4rem*1.2);
|
|
transform: scale(.8);
|
|
|
|
:deep(.ant-slider-track),
|
|
:deep(.ant-slider-rail) {
|
|
height: calc(.6rem*1.2);
|
|
background-color: #e1e1e1;
|
|
border-radius: calc(0.5rem*1.2);
|
|
}
|
|
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
|
|
:deep(.ant-slider-handle) {
|
|
background-color: #2d2e76 !important;
|
|
border: none !important;
|
|
}
|
|
:deep(.ant-slider-handle:hover) {
|
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//颜色
|
|
.modal_img{
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: calc(2rem*1.2);
|
|
align-content: flex-start;
|
|
&.modal_img::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.modal_img_item{
|
|
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
|
position: relative;
|
|
// cursor: pointer;
|
|
border: calc(0.1rem*1.2) solid #DCDCEC;
|
|
//放8个
|
|
height: calc(8.5rem*1.2);
|
|
width: calc(7rem*1.2);
|
|
// height: 32rem*1.2);
|
|
// width: 25rem*1.2);
|
|
overflow: hidden;
|
|
@media screen and (max-width: 1440px) {
|
|
&.modal_img_item {
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
box-sizing: border-box;
|
|
.color_content{
|
|
width: 100%;
|
|
//放8个
|
|
height: calc(4rem*1.2);
|
|
// height: 25rem*1.2);
|
|
}
|
|
.color_content_body{
|
|
.color_des{
|
|
// font-size: 1.8rem*1.2);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
}
|
|
.select_upload_color{
|
|
border: calc(0.1rem*1.2) solid #343579;
|
|
}
|
|
.upload_color{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
}
|
|
//elements
|
|
.result_apparel_elements{
|
|
height: 85%;
|
|
// height: 100%;
|
|
.modal_img{
|
|
height: calc(100%);
|
|
overflow-y: auto;
|
|
}
|
|
.modal_img_item{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
height: auto;
|
|
border: none;
|
|
img{
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.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;
|
|
cursor: pointer;
|
|
.icon-shanchu{
|
|
font-size: calc(1.6rem*1.2);
|
|
color: #fff;
|
|
}
|
|
}
|
|
&:hover .delete_file_block{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.subitOkPreviewBtn{
|
|
bottom: calc(4rem*1.2);
|
|
position: absolute;
|
|
&.active{
|
|
opacity: .5;
|
|
pointer-events:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style> |