1342 lines
46 KiB
Vue
1342 lines
46 KiB
Vue
<template>
|
|
<div ref="designOpenrtionModal">
|
|
<a-modal
|
|
class="designOpenrtion_modal Guide_1_24 generalModel"
|
|
:class="[driver__.driver?'hideEvents':'']"
|
|
v-model:visible="designOpenrtion"
|
|
:footer="null"
|
|
:get-container="() => $refs.designOpenrtionModal"
|
|
width="78%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:keyboard="false"
|
|
:mask="true"
|
|
:destroyOnClose="true"
|
|
>
|
|
<div class="designOpenrtion_content">
|
|
<div class="design_title_text">
|
|
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
|
</div>
|
|
<div class="generalModel_btn">
|
|
<div class="generalModel_closeIcon" @click.stop="closeModal()">
|
|
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
|
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="designOpenrtion_open">
|
|
<!-- -->
|
|
<div class="print_right">
|
|
<div class="habit_Overal_Single">
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: !overallSingle }"
|
|
>
|
|
{{ $t('DesignPrintOperation.Overall') }}
|
|
</div>
|
|
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: overallSingle }"
|
|
>
|
|
{{ $t('DesignPrintOperation.Single') }}
|
|
</div>
|
|
</div>
|
|
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
|
|
<div class="designOpenrtion_nav">
|
|
<!-- :class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''" -->
|
|
<div
|
|
class="designOpenrtion_single"
|
|
v-for="item,index in designOpenrtionList" :key="item"
|
|
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
|
>
|
|
<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
|
|
</div>
|
|
<div
|
|
class="designOpenrtion_single"
|
|
v-for="item,index in designList" :key="item"
|
|
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
|
>
|
|
<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
|
|
</div>
|
|
<!-- <div class="designOpenrtion_overall" v-show="!overallSingle">
|
|
<img :src="designOpenrtionList[0].path">
|
|
</div> -->
|
|
</div>
|
|
<div v-show="!overallSingle" class="habit_System_Designer">
|
|
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
|
|
<a-slider id="system_silder"
|
|
class="system_silder"
|
|
:min="20"
|
|
:max="1000"
|
|
v-model:value="systemDesignerPercentage"
|
|
@afterChange="systemDesigner"
|
|
:tip-formatter="formatter"
|
|
>
|
|
</a-slider>
|
|
</div>
|
|
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
|
<!-- <div v-show="overallSingle" class="print_input">
|
|
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
|
|
<i class="fi fi-rr-trash" @click="deletePrint"></i>
|
|
</div> -->
|
|
|
|
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
|
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
|
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
|
|
<div class="designOpenrtion_imgMask">
|
|
<div class="designOpenrtion_print">
|
|
<div
|
|
v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]"
|
|
:key="item"
|
|
v-if="overallSingle"
|
|
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
|
|
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
|
|
class="modal_imgItem"
|
|
ref="content"
|
|
>
|
|
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[stateOverallSingle][index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
|
|
</div>
|
|
</div>
|
|
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
|
|
<div class="designOpenrtion_btn">
|
|
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
|
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
|
|
<li class="designOpenrtion_delete" @click.stop="deletePrint">
|
|
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
|
</li>
|
|
</ul>
|
|
<div v-show="!overallSingle"></div>
|
|
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
|
|
<i class="fi fi-rr-arrows animtion1"></i>
|
|
<i class="fi fi-rr-arrows animtion2"></i>
|
|
<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
|
|
<!-- <li class="designOpenrtion_delete" @click="deletePrint">
|
|
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="designOpenrtion_right">
|
|
<div class="designOpenrtion_entirety_img">
|
|
<img :src="currentFullBodyView" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script >
|
|
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
|
|
// import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { useStore } from "vuex";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import { Https } from "@/tool/https";
|
|
import { Modal,message } from 'ant-design-vue';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { useI18n } from "vue-i18n";
|
|
import { remove } from "jszip";
|
|
import { getMousePosition } from "@/tool/mdEvent";
|
|
|
|
export default defineComponent({
|
|
|
|
setup(prop) {
|
|
let designOpenrtion = ref(false);
|
|
let designOpenrtionList = ref([])//新增的元素
|
|
let designList = ref([])//已经存在的元素
|
|
let setOkData = ref([])
|
|
let exhibitionOpenrtionList = ref({
|
|
single:[],
|
|
overall:[],
|
|
})//展示的元素
|
|
let current = inject('current')//父组件传过来的数据
|
|
let driver__ = inject('driver__')
|
|
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
|
let overallSingle = ref(true)
|
|
let stateOverallSingle = ref('single')
|
|
let systemDesignerPercentage = ref(0)
|
|
let printZIndex = ref(2)//印花优先级
|
|
let printStyleList = ref({
|
|
single:[],
|
|
overall:[],
|
|
});
|
|
let currentPrintStyleList = ref({
|
|
centers:{
|
|
left:0,
|
|
top:0,
|
|
},
|
|
style:{
|
|
left:0+"px",
|
|
top:0+"px",
|
|
right:"auto",
|
|
bottom:"auto",
|
|
width:'auto',
|
|
height:'auto',
|
|
zIndex:1,
|
|
},
|
|
transform:{
|
|
scale:1,
|
|
rotateZ:0,
|
|
},
|
|
designOpenrtionBtn:false
|
|
});
|
|
|
|
let direction = ref('')
|
|
let imgDom = ref()
|
|
let imgDomIndex = ref(0)
|
|
let print = ref({
|
|
width:'',
|
|
height:''
|
|
})
|
|
let sketch = ref({
|
|
width:'',
|
|
height:''
|
|
})
|
|
let operationCurrent = ref({
|
|
|
|
})
|
|
let loadingShow = ref(false)
|
|
let currentFullBodyView = ref('')
|
|
let designItemDetailTS = ref({})
|
|
let body = ref(false)
|
|
let {t} = useI18n()
|
|
return {
|
|
designOpenrtion,
|
|
designOpenrtionList,
|
|
designList,
|
|
setOkData,
|
|
exhibitionOpenrtionList,
|
|
overallSingle,
|
|
stateOverallSingle,
|
|
systemDesignerPercentage,
|
|
current,
|
|
driver__,
|
|
printZIndex,
|
|
printStyleList,
|
|
currentPrintStyleList,
|
|
direction,//判断点击的是li那个边
|
|
imgDom,
|
|
imgDomIndex,
|
|
print,
|
|
sketch,
|
|
operationCurrent,
|
|
loadingShow,
|
|
setRevocation,
|
|
t,
|
|
currentFullBodyView,
|
|
designItemDetailTS,
|
|
body,
|
|
getMousePosition,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
store: useStore(),
|
|
};
|
|
},
|
|
|
|
directives:{
|
|
//操作旋转
|
|
rotote:{
|
|
mounted(el,value){
|
|
let mousedown = function(event){
|
|
let e = getMousePosition(event,false)
|
|
mouseDownOperation(e)
|
|
}
|
|
|
|
let touchstart = function(event){
|
|
let e = getMousePosition(event,true)
|
|
mouseDownOperation(e)
|
|
}
|
|
let mouseDownOperation = (e) => {
|
|
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
|
let mouse = true;
|
|
let angle = 0
|
|
let num = 1
|
|
let x = 0
|
|
let y = 0
|
|
num = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
|
|
angle = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
|
|
// 添加鼠标按下事件监听器
|
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
|
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
|
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
|
mouse = true;
|
|
var info = el.getBoundingClientRect();
|
|
let eX = info.x + info.width / 2;
|
|
let eY = info.y + info.height / 2;
|
|
let mouseMove = function(event){
|
|
let e = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let touchmove = function(event){
|
|
let e = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let mouseMoveOperation = (e) => {
|
|
if (mouse) {
|
|
let X = eX
|
|
let Y = eY
|
|
let x = e.clientX - X
|
|
let y = Y - e.clientY
|
|
angle = Math.atan2(x,y)*(180 / Math.PI)
|
|
if(elParent){
|
|
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
|
|
}
|
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
|
}
|
|
}
|
|
// 添加鼠标松开事件监听器
|
|
let mouseup = () => {
|
|
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
|
|
mouse = false;
|
|
// document.removeEventListener('mouseup',mouseup)
|
|
// document.removeEventListener('mousemove',mousemove)
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
}
|
|
// document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
el.addEventListener('touchstart',touchstart)
|
|
}
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.designOpenrtion = true
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
this.currentFullBodyView = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
|
|
if(designItemDetail.others.length == 0){
|
|
this.body = true
|
|
}
|
|
//设置前片后片
|
|
this.operationCurrent = Object.assign({},this.current)
|
|
this.clearModal()
|
|
let printList = JSON.parse(JSON.stringify(this.current.printObject.prints))
|
|
this.setprintList(printList)
|
|
|
|
this.overallSingle = this.exhibitionOpenrtionList.overall.length>0?false:this.exhibitionOpenrtionList.single.length>0?true:false
|
|
this.ifListOver()
|
|
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
|
|
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
|
|
let skecth = new Image
|
|
skecth.onload=()=>{
|
|
this.sketch.width = skecth.width/10+'rem'
|
|
this.sketch.height = skecth.height/10+'rem'
|
|
skecth.remove()
|
|
}
|
|
skecth.src = this.current.path
|
|
if(this.exhibitionOpenrtionList.overall.length > 0){
|
|
let str = 'overall'
|
|
this.exhibitionOpenrtionList[str].forEach((item,index)=>{
|
|
this.setTemplate(item,index,str)
|
|
this.designOpenrtionList.forEach((openrtItem)=>{
|
|
if(item.minIOPath == openrtItem.minIOPath)openrtItem.checked=true
|
|
})
|
|
})
|
|
}
|
|
if(this.exhibitionOpenrtionList.single.length > 0){
|
|
let str = 'single'
|
|
this.exhibitionOpenrtionList[str].forEach((item,index)=>{
|
|
this.setTemplate(item,index,str)
|
|
})
|
|
}
|
|
if(this.exhibitionOpenrtionList.overall.length == 0 && this.exhibitionOpenrtionList.single.length == 0)this.setpitch(this.designList[0],0)
|
|
},
|
|
setprintList(arr){
|
|
arr.forEach(item=>{
|
|
if(item.ifSingle){
|
|
this.exhibitionOpenrtionList.single.push(item)
|
|
}else{
|
|
this.exhibitionOpenrtionList.overall.push(item)
|
|
}
|
|
})
|
|
},
|
|
ifListOver(){
|
|
if(!this.overallSingle){
|
|
// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
|
|
// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
|
|
this.stateOverallSingle = 'overall'
|
|
}else{
|
|
this.stateOverallSingle = 'single'
|
|
}
|
|
},
|
|
setPrintWH(url){
|
|
let print = new Image
|
|
return new Promise((resolve, reject) => {
|
|
print.onload=()=>{
|
|
this.print.width = print.width+'px'
|
|
this.print.height = print.height+'px'
|
|
resolve()
|
|
print.remove()
|
|
}
|
|
print.src = url
|
|
})
|
|
},
|
|
systemDesigner(num) {
|
|
},
|
|
formatter(value) {
|
|
return `${value}%`;
|
|
},
|
|
|
|
setOveralSingle(){
|
|
if(!this.overallSingle){
|
|
// this.refetchTemplate(0)
|
|
this.stateOverallSingle = 'overall'
|
|
}else{
|
|
this.stateOverallSingle = 'single'
|
|
}
|
|
// this.random()
|
|
},
|
|
async setpitch(item,index,str){
|
|
await this.setPrintWH(item.path)
|
|
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
|
|
v.designOpenrtionBtn = false
|
|
})
|
|
if(!this.overallSingle){
|
|
if(item.checked){
|
|
this.imgDomIndex = 0
|
|
this.deletePrint()
|
|
item.checked = false
|
|
return
|
|
}else{
|
|
this.designOpenrtionList.forEach((itemElem)=>{
|
|
itemElem.checked = false
|
|
})
|
|
this.designList.forEach((itemElem)=>{
|
|
itemElem.checked = false
|
|
})
|
|
item.checked = true
|
|
}
|
|
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
|
|
this.refetchTemplate(0,true)
|
|
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
|
|
angle:0,
|
|
designType:item.designType,
|
|
level2Type:item.level2Type,
|
|
minIOPath:item.minIOPath,
|
|
path:item.path,
|
|
priority:1,
|
|
scale:.3,
|
|
location:[0,0],
|
|
ifSingle:false,
|
|
}
|
|
this.systemDesignerPercentage = item.scale?item.scale*100:30
|
|
}else{
|
|
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
|
|
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
|
|
this.exhibitionOpenrtionList[this.stateOverallSingle].push({
|
|
angle:0,
|
|
designType:item.designType,
|
|
level2Type:item.level2Type,
|
|
minIOPath:item.minIOPath,
|
|
path:item.path,
|
|
priority:1,
|
|
scale:1,
|
|
location:[0,0],
|
|
ifSingle:true,
|
|
})
|
|
this.refetchTemplate(currentIndex,true)
|
|
}
|
|
},
|
|
//设置移动
|
|
itemMoveMousedown(index,event){
|
|
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
|
|
this.imgDomIndex = index
|
|
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
|
|
v.designOpenrtionBtn = false
|
|
})
|
|
if(!this.overallSingle){
|
|
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
|
|
}else{
|
|
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
|
}
|
|
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
|
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
|
this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
|
|
this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
|
|
this.printStyleList[this.stateOverallSingle][index].transform = {
|
|
scale:scale,
|
|
rotateZ:rotateZ?rotateZ:0,
|
|
}
|
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
|
|
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
|
|
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
|
|
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
|
|
// document.addEventListener("mouseup", this.mouseup);
|
|
// document.addEventListener("mousemove", this.moveMousemove);
|
|
document.addEventListener('mousemove', this.mouseMove);
|
|
document.addEventListener('touchmove', this.touchmove);
|
|
document.addEventListener('mouseup', this.mouseup);
|
|
document.addEventListener('touchend', this.mouseup);
|
|
},
|
|
//设置尺寸
|
|
itemSizeMousedown(direction,event){
|
|
this.direction = direction
|
|
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
|
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
|
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
|
|
scale:scale,
|
|
rotateZ:rotateZ?rotateZ:0,
|
|
}
|
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
|
|
if(this.direction == 'right' || this.direction == 'bottom'){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
|
|
}else{
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
|
}
|
|
|
|
// document.addEventListener("mouseup", this.sizeMouseup);
|
|
// document.addEventListener("mousemove", this.sizeMousemove);
|
|
document.addEventListener('mousemove', this.sizeMouseMove);
|
|
document.addEventListener('touchmove', this.sizeTouchmove);
|
|
document.addEventListener('mouseup', this.sizeMouseup);
|
|
document.addEventListener('touchend', this.sizeMouseup);
|
|
},
|
|
mouseMove(event){
|
|
let e = getMousePosition(event,false)
|
|
this.mouseMoveOperation(e)
|
|
},
|
|
touchmove(event){
|
|
let e = getMousePosition(event,true)
|
|
this.mouseMoveOperation(e)
|
|
},
|
|
//鼠标移动
|
|
mouseMoveOperation(e) {
|
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
|
|
parentNode = parentNode.getBoundingClientRect()
|
|
let x = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
|
|
let y = ( e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
|
|
if(!this.overallSingle){
|
|
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
|
}
|
|
if(x.replace(/px/g,'') <= 0){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
|
|
}
|
|
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
|
|
}
|
|
if(y.replace(/px/g,'') <= 0){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
|
|
}
|
|
}
|
|
|
|
},
|
|
sizeMouseMove(event){
|
|
let e = getMousePosition(event,false)
|
|
this.sizeMouseMoveOperation(e)
|
|
},
|
|
sizeTouchmove(event){
|
|
let e = getMousePosition(event,true)
|
|
this.sizeMouseMoveOperation(e)
|
|
},
|
|
sizeMouseMoveOperation(e) {
|
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
|
let parentNode =this.imgDom.parentNode
|
|
let width = imgDomWH.width
|
|
let height = imgDomWH.height
|
|
let num = width/height
|
|
let num1 = height/width
|
|
let w,h
|
|
//判断移动四个边
|
|
if(this.direction == 'right'){
|
|
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
|
|
h = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
|
width = w+'px'
|
|
height = w*num1+'px'
|
|
}else if(this.direction == 'top'){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
|
|
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
|
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
|
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.clientY)
|
|
|
|
height = h+'px'
|
|
width = h*num+'px'
|
|
}else if(this.direction == 'bottom'){
|
|
h = (e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
|
|
height = h+'px'
|
|
width = h*num+'px'
|
|
}else if(this.direction == 'left'){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
|
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.clientX)
|
|
width = w+'px'
|
|
height = w*num1+'px'
|
|
}
|
|
//判断尺寸是否到边
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
|
|
|
|
},
|
|
//鼠标抬起
|
|
sizeMouseup(e){
|
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
|
|
right:'auto',
|
|
left:this.imgDom.offsetLeft+'px',
|
|
bottom:'auto',
|
|
top:this.imgDom.offsetTop+'px',
|
|
height:this.imgDom.offsetHeight+'px',
|
|
width:this.imgDom.offsetWidth+'px',
|
|
zIndex:this.printZIndex
|
|
}
|
|
// document.removeEventListener("mouseup", this.sizeMouseup);
|
|
// document.removeEventListener("mousemove", this.sizeMousemove);
|
|
document.removeEventListener('mousemove',this.sizeMouseMove)
|
|
document.removeEventListener('touchmove',this.sizeTouchmove)
|
|
document.removeEventListener('mouseup',this.sizeMouseup)
|
|
document.removeEventListener('touchend',this.sizeMouseup)
|
|
},
|
|
mouseup(e) {
|
|
|
|
// document.removeEventListener("mouseup", this.mouseup);
|
|
// document.removeEventListener("mousemove", this.moveMousemove);
|
|
document.removeEventListener('mousemove',this.mouseMove)
|
|
document.removeEventListener('touchmove',this.touchmove)
|
|
document.removeEventListener('mouseup',this.mouseup)
|
|
document.removeEventListener('touchend',this.mouseup)
|
|
},
|
|
deletePrint(){
|
|
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
|
this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
|
},
|
|
random(){
|
|
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
|
|
this.refetchTemplate(index,false)
|
|
})
|
|
},
|
|
//随机重置图片顺序
|
|
refetchTemplate(index,boor) {
|
|
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
|
|
let width
|
|
let scale
|
|
let img = new Image()
|
|
img.onload = ()=>{
|
|
if(sketch.width<sketch.height){
|
|
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
|
|
if(boor){
|
|
width = Math.trunc((sketch?.width-sketch?.width/2))+sketch?.width/4
|
|
}
|
|
scale = width / this.print.width.replace(/px/g,'')
|
|
}else{
|
|
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
|
|
if(boor){
|
|
width = Math.trunc((sketch?.height-sketch?.height/2))+sketch?.height/4
|
|
}
|
|
scale = width / this.print.height.replace(/px/g,'')
|
|
}
|
|
let x = sketch?.width - this.print.width.replace(/px/g,'')*scale
|
|
if(!this.overallSingle){
|
|
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
|
|
}
|
|
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
|
let left = sketch.offsetWidth/2-this.print.width.replace(/px/g,'')*scale/2
|
|
let top = sketch.offsetHeight/2-this.print.height.replace(/px/g,'')*scale/2
|
|
if(this.stateOverallSingle == 'overall'){
|
|
left = sketch.offsetWidth/2-5
|
|
top = sketch.offsetHeight/2-5
|
|
}
|
|
this.printStyleList[this.stateOverallSingle][index]={
|
|
centers:{
|
|
left:0,
|
|
top:0,
|
|
},
|
|
style:{
|
|
left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
|
|
top:(boor?top:Math.trunc(Math.random()*y)+1)+"px",
|
|
right:"auto",
|
|
bottom:"auto",
|
|
width:this.print.width.replace(/px/g,'')*scale+'px',
|
|
height:this.print.height.replace(/px/g,'')*scale+'px',
|
|
zIndex:this.printZIndex++
|
|
},
|
|
transform:{
|
|
// scale:scale<.2?.2:scale,//0.2-3
|
|
// rotateZ:rotateZ1-rotateZ2,
|
|
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
|
|
},
|
|
designOpenrtionBtn:false
|
|
}
|
|
}
|
|
img.src = sketch.src
|
|
},
|
|
//设置图片
|
|
async setTemplate(item,index,str) {
|
|
await this.setPrintWH(item.path)
|
|
this.designOpenrtionList
|
|
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
|
|
let sketchImg = new Image()
|
|
sketchImg.onload = ()=>{
|
|
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
|
let scale
|
|
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
|
let zIndex = 1
|
|
let left = item.location[0]/sketchNum+'px'
|
|
let top = item.location[1]/sketchNum+'px'
|
|
if(sketch.offsetWidth < item.location[0]/sketchNum){
|
|
left = sketch.offsetWidth +'px'
|
|
}
|
|
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
|
top = sketch.offsetHeight +'px'
|
|
}
|
|
if(str == 'overall')this.systemDesignerPercentage = item.scale?item.scale*100:30
|
|
this.printStyleList[str][index]={
|
|
centers:{
|
|
left:0,
|
|
top:0,
|
|
},
|
|
style:{
|
|
left:left,
|
|
top:top,
|
|
right:"auto",
|
|
bottom:"auto",
|
|
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
|
|
height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
|
|
zIndex:zIndex++
|
|
},
|
|
transform:{
|
|
// scale:scale<.2?.2:scale,//0.2-3
|
|
rotateZ:item.angle,
|
|
},
|
|
designOpenrtionBtn:false
|
|
}
|
|
sketchImg.remove()
|
|
}
|
|
sketchImg.src = sketch.src
|
|
},
|
|
setOverallPosition(index,str){
|
|
nextTick(()=>{
|
|
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
|
|
this.printStyleList[str][index]={
|
|
centers:{
|
|
left:0,
|
|
top:0,
|
|
},
|
|
style:{
|
|
left:sketch.offsetWidth / 2 +'px',
|
|
top:sketch.offsetHeight / 2 +'px',
|
|
right:"auto",
|
|
bottom:"auto",
|
|
width:'auto',
|
|
height:'auto',
|
|
zIndex:1
|
|
},
|
|
transform:{
|
|
// scale:scale<.2?.2:scale,//0.2-3
|
|
rotateZ:0,
|
|
},
|
|
designOpenrtionBtn:false
|
|
}
|
|
})
|
|
|
|
},
|
|
computeZindex(resolve,prints){
|
|
prints.sort((a, b) => {
|
|
var a_num = a.priority;
|
|
var b_num = b.priority;
|
|
return a_num - b_num;
|
|
});
|
|
|
|
|
|
let num = 1
|
|
|
|
prints.forEach((v)=>{
|
|
v.priority = num++
|
|
})
|
|
resolve(prints)
|
|
},
|
|
computeSize(){
|
|
return new Promise(async (resolve, reject) => {
|
|
let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
|
|
// let num = this.sketch/
|
|
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
|
|
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
|
let prints = []
|
|
prints = this.operationCurrent.printObject.prints.filter(item=>!!!item.ifSingle)
|
|
if(this.stateOverallSingle == 'overall'){
|
|
prints = this.operationCurrent.printObject.prints.filter(item=>!!item.ifSingle)
|
|
}else{
|
|
prints = this.operationCurrent.printObject.prints.filter(item=>!!!item.ifSingle)
|
|
}
|
|
let scale
|
|
let location
|
|
for (let index = 0; index < arr.length; index++) {
|
|
if(!this.overallSingle){
|
|
scale = this.systemDesignerPercentage/100
|
|
console.log(this.print);
|
|
let overallScale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
|
let x = Number(arr[index].style.left.replace(/px/g,''))
|
|
let y = Number(arr[index].style.top.replace(/px/g,''))
|
|
let width = Number(this.print.width.replace(/px/g,''))
|
|
let height = Number(this.print.height.replace(/px/g,''))
|
|
|
|
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
|
|
location = [(x)*sketchNum ,(y )*sketchNum]
|
|
}else{
|
|
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
|
|
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
|
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
|
}
|
|
let obj = {
|
|
angle : arr[index].transform.rotateZ,
|
|
// angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
|
|
location : location,
|
|
priority:arr[index].style.zIndex,
|
|
scale: scale,
|
|
designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
|
|
level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
|
|
path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
|
|
minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
|
|
ifSingle:!!this.exhibitionOpenrtionList[this.stateOverallSingle][index].ifSingle,
|
|
}
|
|
prints.push(obj)
|
|
}
|
|
this.computeZindex(resolve,prints)
|
|
})
|
|
},
|
|
async setPreview(){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
let index
|
|
designItemDetail.clothes.forEach((v,ind)=>{
|
|
if(v.id == this.current.id){
|
|
index = ind
|
|
}
|
|
})
|
|
let priority = designItemDetail.clothes.map((v)=>{
|
|
return v.type
|
|
})
|
|
// let data = {
|
|
// ...designItemDetail,
|
|
// priority:priority,
|
|
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
// }
|
|
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
|
await this.computeSize().then((rv)=>{
|
|
this.setOkData = rv
|
|
})
|
|
data.designSingleItemDTOList[index].printObject={
|
|
ifSingle:this.overallSingle,
|
|
prints:this.setOkData,
|
|
}
|
|
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
this.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
|
(rv) => {
|
|
this.operationCurrent = Object.assign({},rv.clothes[index])
|
|
|
|
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
|
|
this.currentFullBodyView = rv.currentFullBodyView
|
|
this.designItemDetailTS.rv = rv
|
|
this.designItemDetailTS.data = data
|
|
this.loadingShow = false
|
|
// this.designOpenrtion = false
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
}
|
|
).catch(res=>{
|
|
this.loadingShow = false
|
|
});
|
|
},
|
|
setOK(){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
let index
|
|
designItemDetail.clothes.forEach((v,ind)=>{
|
|
if(v.id == this.current.id){
|
|
index = ind
|
|
}
|
|
})
|
|
if(this.designItemDetailTS.rv){
|
|
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
|
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
|
|
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
|
|
designItemDetail.clothes[index].undividedLayer = this.designItemDetailTS.rv.clothes[index].undividedLayer
|
|
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
|
|
designItemDetail.clothes[index].printObject.prints = this.setOkData
|
|
designItemDetail.ifSubmit = true
|
|
designItemDetail.clothes.forEach((item,i)=>{
|
|
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 = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
|
|
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
|
|
})
|
|
this.store.commit("setDesignItemDetail", designItemDetail);
|
|
this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
|
|
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
|
|
this.designItemDetailTS = {}
|
|
}
|
|
this.designOpenrtion = false
|
|
if(this.driver__.driver){
|
|
nextTick(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
},
|
|
clearModal(){
|
|
this.designOpenrtion = true//modal页面关闭
|
|
this.printZIndex = 2//点击图片z-index
|
|
this.imgDomIndex = 0//点击图片下标
|
|
this.designOpenrtionList = []
|
|
this.designList = []
|
|
this.exhibitionOpenrtionList = {
|
|
single:[],
|
|
overall:[],
|
|
}
|
|
this.printStyleList = {
|
|
single:[],
|
|
overall:[],
|
|
}
|
|
},
|
|
closeModal(){
|
|
if(this.designItemDetailTS.rv){
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: this.t('DesignPrintOperation.jsContent1'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
_this.designOpenrtion=false
|
|
}
|
|
});
|
|
}else{
|
|
this.designOpenrtion=false
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.designOpenrtion_modal {
|
|
// max-width: 1440px;
|
|
user-select: none; /* 对现代浏览器有效 */
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
.ant-modal-body{
|
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
|
// height: calc(65vh - 6.4rem*1.2));
|
|
height: calc(65rem*1.2);
|
|
display: flex;
|
|
overflow-y: hidden;
|
|
flex-direction: column;
|
|
}
|
|
.ant-modal-content{
|
|
border-radius: calc(1rem*1.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.designOpenrtion_content {
|
|
// background: #f2f3fb;
|
|
// padding-bottom: 2.9rem*1.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.designOpenrtion_header {
|
|
position: relative;
|
|
height: calc(6.6rem*1.2);
|
|
width: 100%;
|
|
background: #F7F7F7;
|
|
|
|
.placement_modal_title{
|
|
position: absolute;
|
|
height: 100%;
|
|
line-height: calc(6.6rem*1.2);
|
|
left: calc(3.7rem*1.2);
|
|
top: 0;
|
|
font-size: calc(1.8rem*1.2);
|
|
color: #030303;
|
|
}
|
|
}
|
|
|
|
.designOpenrtion_right{
|
|
height: calc(50rem*1.2);
|
|
position: absolute;
|
|
right: calc(2rem*1.2);
|
|
left: auto;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
max-height: calc(50rem*1.2);
|
|
max-width: calc(30rem*1.2);
|
|
.designOpenrtion_entirety_img{
|
|
height: 100%;
|
|
img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
}
|
|
}
|
|
.designOpenrtion_open{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
.print_right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border: 2px solid;
|
|
padding: calc(2rem*1.2) 0;
|
|
width: calc(16rem*1.2);
|
|
border-radius: calc(1rem*1.2);
|
|
height: calc(40rem*1.2);
|
|
.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);
|
|
}
|
|
}
|
|
.ant-switch {
|
|
margin: 0 calc(1rem*1.2);
|
|
background-color: #efefef;
|
|
}
|
|
.ant-switch-checked {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
.habit_System_Designer {
|
|
transform: scale(.8);
|
|
width: 100%;
|
|
margin-top: calc(1.5rem*1.2);
|
|
.ant-slider-track,
|
|
.ant-slider-rail {
|
|
height: calc(.6rem*1.2);
|
|
background-color: #e1e1e1;
|
|
border-radius: calc(0.5rem*1.2);
|
|
}
|
|
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
|
|
.ant-slider-handle {
|
|
background-color: #2d2e76 !important;
|
|
border: none !important;
|
|
}
|
|
.ant-slider-handle:hover{
|
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
|
}
|
|
.habit_System_Designer_text{
|
|
font-size: calc(1.6rem*1.2);
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.button_second{
|
|
margin: calc(1rem*1.2) 0;
|
|
width: calc(10rem*1.2);
|
|
text-align: center;
|
|
position: initial;
|
|
transform: none;
|
|
height: calc(3rem*1.2);
|
|
line-height: calc(3rem*1.2);
|
|
}
|
|
.designOpenrtion_nav{
|
|
display: flex;
|
|
margin-top: calc(2rem*1.2);
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: calc(12rem*1.2);
|
|
overflow-x: hidden;
|
|
justify-content: space-evenly;
|
|
&.designOpenrtion_nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.designOpenrtion_single{
|
|
width: 40%;
|
|
margin-bottom: calc(2rem*1.2);
|
|
&.isOverall{
|
|
cursor: no-drop;
|
|
img{
|
|
pointer-events: none;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
img{
|
|
width: 100%;
|
|
cursor: pointer;
|
|
&.active{
|
|
opacity: .5;
|
|
transform: scale(.8);
|
|
}
|
|
}
|
|
.designOpenrtion_overall{
|
|
width: 80%;
|
|
}
|
|
}
|
|
&.show_print_right{
|
|
border: none;
|
|
padding: 0;
|
|
flex: 1;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
.designOpenrtion_centent{
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
user-select:none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
display: flex;
|
|
&.active{
|
|
flex-direction: row;
|
|
}
|
|
.designOpenrtion_imgMask{
|
|
width: auto;
|
|
height: auto;
|
|
position: relative;
|
|
>img{
|
|
z-index: 2;
|
|
position: relative;
|
|
// max-width: 100%;
|
|
// max-height: 100%;
|
|
// width: 100%;
|
|
// height: 50rem*1.2);
|
|
max-height: calc(50rem*1.2);
|
|
min-height: calc(30rem*1.2);
|
|
width: auto;
|
|
max-width: calc(60rem*1.2);
|
|
}
|
|
.designOpenrtion_sketch_mask{
|
|
z-index: 2;
|
|
// z-index: 3;
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
}
|
|
>div{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
}
|
|
.designOpenrtion_print{
|
|
z-index: 3;
|
|
.modal_imgItem{
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: 0;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
float: left;
|
|
user-select:none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
}
|
|
}
|
|
.designOpenrtion_btn{
|
|
z-index: 3;
|
|
>div{
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px solid rgb(20, 188, 255);
|
|
position: absolute;
|
|
}
|
|
ul{
|
|
list-style: none;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
border: 2px solid rgb(20, 188, 255);
|
|
padding: 0;
|
|
-webkit-user-drag: none;
|
|
user-select:none;
|
|
opacity: 0;
|
|
margin: 0;
|
|
|
|
&.designOpenrtion_Mouoverall{
|
|
opacity: 1;
|
|
border: none;
|
|
width: calc(1.4rem*1.2);
|
|
height: calc(1.4rem*1.2);
|
|
z-index: 2;
|
|
i{
|
|
display: flex;
|
|
color: #14bcff;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.animtion1{
|
|
animation: anim 4s 2s linear infinite;
|
|
// animation-delay: .5;
|
|
}
|
|
.animtion2{
|
|
animation: anim 4s linear infinite;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
@keyframes anim{
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(3);
|
|
}
|
|
}
|
|
|
|
}
|
|
li{
|
|
cursor: pointer;
|
|
// border-radius: 50%;
|
|
width: calc(2rem*1.2);
|
|
height: calc(2rem*1.2);
|
|
background-color: rgb(20, 188, 255);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
&.active{
|
|
opacity: 1;
|
|
li{
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: n-resize;
|
|
}
|
|
.designOpenrtion_btn_top{
|
|
top: 0;
|
|
}
|
|
.designOpenrtion_btn_bottom{
|
|
top: 100%;
|
|
}
|
|
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
|
|
top: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: e-resize;
|
|
}
|
|
.designOpenrtion_btn_left{
|
|
left: 0;
|
|
}
|
|
.designOpenrtion_btn_right{
|
|
left: 100%;
|
|
}
|
|
.designOpenrtion_rotote{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.designOpenrtion_delete{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 2.5rem;
|
|
background: none;
|
|
transform: translate(100%, -100%);
|
|
height: 2.5rem;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.designOpenrtion_rotote::after{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
width: calc(.2rem*1.2);
|
|
height: calc(3rem*1.2);
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
.designOpenrtion_rotote::before{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
top: calc(50% - 3rem*1.2);
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
width: calc(1.5rem*1.2);
|
|
height: calc(1.5rem*1.2);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.subitOkPreviewBtn{
|
|
z-index: 2;
|
|
margin: calc(1rem*1.2) 0;
|
|
width: calc(10rem*1.2);
|
|
text-align: center;
|
|
position: initial;
|
|
transform: none;
|
|
}
|
|
}
|
|
}
|
|
</style> |