This commit is contained in:
2023-10-11 17:34:14 +08:00
parent 98dc5cd8f7
commit 268ffecff7
35 changed files with 1947 additions and 878 deletions

View File

@@ -1,22 +1,25 @@
<template>
<div class="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print">
<div
v-for="item,index in designItemDetail?.clothes"
:key="item"
:style="[printStyleList[index].style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
<!-- <img crossOrigin="anonymous" :src="item.path" :style="{transform:`scale(${printStyleList[index].transform.scale}) rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> -->
</div>
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
:key="item"
:style="item.style"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<img class="perview_img" style="width: 400px; height: auto;" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<div class="designOpenrtion_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
@@ -25,8 +28,11 @@
</ul>
</div>
</div>
<div @click="setPreview" class="subitOkPreviewBtn">OK</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
@@ -35,14 +41,18 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import GO from '@/tool/GO';
import { Https } from "@/tool/https";
export default defineComponent({
props: ["frontBack"],
// props: ["frontBack"],
setup(prop) {
const store = useStore();
let designItemDetail = ref([])
let designItemDetail = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let current = inject('current')//父组件传过来的数据
let printZIndex = ref(2)//印花优先级
let printZIndex = ref(4)//印花优先级
let printStyleList = ref([
{
centers:{
@@ -56,7 +66,7 @@ export default defineComponent({
bottom:"auto",
width:100+'px',
height:100+'px',
zIndex:1,
// zIndex:1,
},
transform:{
scale:1,
@@ -68,6 +78,7 @@ export default defineComponent({
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let frontBack = ref({})
return {
designItemDetail,
current,
@@ -76,22 +87,20 @@ export default defineComponent({
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
frontBack
};
},
data() {
return {
loadingShow:false,//加载中
store: useStore(),
};
},
methods: {
init(){
let DesignParent = this.$parent
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designItemDetail = designItemDetail
// this.clearModal()
console.log(this.frontBack);
// console.log(this.current,DesignParent.frontBack);
console.log(DesignParent);
this.printStyleList.push({
centers:{
left:0,
@@ -104,7 +113,7 @@ export default defineComponent({
bottom:"auto",
width:100+'px',
height:100+'px',
zIndex:1,
// zIndex:1,
},
transform:{
scale:1,
@@ -112,44 +121,116 @@ export default defineComponent({
},
designOpenrtionBtn:false
})
this.setImgSize()
},
async setImgSize(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
// let front = 3
// let back = 3
designItemDetail.clothes.forEach((v,index)=>{
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
// zIndex:zIndex-=1
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = frontIndex-=1
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = backIndex-=1
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
this.frontBack = {
front:front,
back:back,
body:body,
}
},
//按比设置单件衣服宽高位置
async setPostition(url){
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
};
img.onerror = reject;
img.src = url;
});
}
return num
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
},
// 设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
@@ -159,22 +240,22 @@ export default defineComponent({
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
}
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
// this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
// }
// if(x.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
// }
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
// this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
// }
// if(y.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
},
sizeMousemove(e) {
@@ -182,42 +263,45 @@ export default defineComponent({
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let w,h
let num = height/width
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
this.frontBack.front[this.imgDomIndex].style.width = width
this.frontBack.front[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
this.frontBack.front[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
@@ -226,6 +310,7 @@ export default defineComponent({
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
},
@@ -240,8 +325,184 @@ export default defineComponent({
this.clothes = []
this.printStyleList.splice(1,this.printStyleList.length-1)
},
setPreview(){
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
setPreviewData(){
this.$emit('setSubmit','preview');
},
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
// this.frontBack.back.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
// this.frontBack.front.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
data.designSingleItemDTOList.forEach((item)=>{
let front = this.frontBack.front
let imageCategory1 = front[1].imageCategory
front.forEach((i)=>{
let imageCategory = i.imageCategory.split('_')[0]
if(item.type == this.capitalizeFirstLetter(imageCategory)){
let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
item.scale = scale
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
}
})
if(item.type == this.capitalizeFirstLetter(imageCategory1)){
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
this.loadingShow = false
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
designItemDetail.designItemUrl = rv.designItemUrl
designItemDetail.currentFullBodyView = rv.currentFullBodyView
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.type === i.type){
// item.position = [
// item.position[0] += left,
// item.position[1] += top
// ]
// item.layersObject[1].position = [
// item.layersObject[1].position[0]+=item.layersObject[1].offset[1],
// item.layersObject[1].position[1]+=item.layersObject[1].offset[0]
// ],
// item.layersObject[0].position = [
// item.layersObject[0].position[0]+=item.layersObject[0].offset[1],
// item.layersObject[0].position[1]+=item.layersObject[0].offset[0]
// ]
i.layersObject = item.layersObject
}
})
// data.designSingleItemDTOList.front.forEach((i)=>{
// if(item.type === i.type){
// // item.position = [
// // item.position[0] += left,
// // item.position[1] += top
// // ]
// console.log(item.position,left ,top);
// i.layersObject = item.layersObject
// }
// })
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
// let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
// let likeDesignCollectionList = this.store.state.HomeStoreModule.likeDesignCollectionList
// designCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// likeDesignCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// this.store.commit('setDesignCollectionList',designCollectionList)
// this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
}
).catch(res=>{
this.loadingShow = false
});
//顺序不能乱
// let arr = [...this.frontBack.front,...this.frontBack.back,...this.frontBack.body.layersObject]
// let layers=[]
// let num = 0
// let front = this.frontBack.back.length+2
// let back = this.frontBack.back.length-1
// let str
// arr.forEach(item => {
// let obj
// if(item.imageCategory == 'body'){
// obj = item
// obj.priority = this.frontBack.back.length+1
// }else{
// str = str?str:item?.imageCategory.split('_')[0]
// obj = {
// id:item.id,
// imageCategory:item.imageCategory,
// scale:item?.imageSize?Number(((item?.style?.width.replace(/px/g,'')*ratio)/item?.imageSize[0]).toFixed(2)):1,
// position:[Number((item?.style?.top?.replace(/px/g,'')*ratio).toFixed(0)),Number((item?.style?.left?.replace(/px/g,'')*ratio).toFixed(0))],
// imageSize: item.imageSize,
// priority:item.style.zIndex,
// }
// if(item?.imageCategory?.indexOf("front") == -1){
// // if(str == item?.imageCategory.split('_')[0])
// if(str == item?.imageCategory.split('_')[0]){
// num = 0
// back = this.frontBack.back.length-1
// }else{
// num = 1
// back++
// }
// obj.scale = layers[num].scale
// obj.position = layers[num].position
// obj.imageSize = layers[num].imageSize
// obj.priority = back
// }else{
// obj.priority = front++
// }
// }
// obj.imageUrl = item.imageMinioUrl
// obj.maskUrl = item.maskMinioUrl
// layers.push(obj)
// });
// console.log(layers);
// let data = {
// layers:{
// designItemId:designItemDetail.designItemId,
// designItemUrl:designItemDetail.designItemUrl,
// layers:layers
// },
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
// this.loadingShow = true
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
// (rv) => {
// // let top,bottom
// // let desingStr0 = designItemDetail.clothes[0].type
// // let desingStr1 = designItemDetail.clothes[1].type
// // rv.layers.forEach((item)=>{
// // let str = this.capitalizeFirstLetter(item.imageCategory)
// // if(str.split('_')[0] == desingStr0){
// // top.push(item)
// // }else if(str.split('_')[0] == desingStr1){
// // bottom.push(item)
// // }
// // })
// // console.log(rv,designItemDetail);
// // designItemDetail.clothes[0]
// // designItemDetail.clothes.forEach((item)=>{
// // if(item.type == desingStr0){
// // item.layersObject = top
// // }else if(item.type == desingStr1){
// // item.layersObject = bottom
// // }
// // })
// // this.store.commit("setDesignItemDetail", designItemDetail);
// this.loadingShow = false
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
},
});
@@ -271,7 +532,6 @@ export default defineComponent({
height: 100%;
width: 100%;
.designOpenrtion_centent{
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
@@ -290,7 +550,6 @@ export default defineComponent({
width: auto;
height: auto;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
>img{
@@ -304,23 +563,27 @@ export default defineComponent({
top: 0;
}
}
.designOpenrtion_print{
.designOpenrtion_print,.detail_modal_item_front{
z-index: 1;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designOpenrtion_print{
z-index: 1 !important;
}
.designOpenrtion_btn{
z-index: 3;
z-index: 9999;
ul{
list-style: none;
// width: 100%;