633 lines
23 KiB
Vue
633 lines
23 KiB
Vue
<template>
|
|
<div class="molepositon" :class="{active:!imgDesignImg}">
|
|
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
|
|
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
|
|
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
|
</div>
|
|
<img class="perview_img" @load="setPrintSize()" ref="detailBody" :key="designDetail.designItemId" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'">
|
|
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
|
|
<img :src="item.imageUrl" alt="">
|
|
</div>
|
|
<div class="designOpenrtion_btnBox">
|
|
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="designOpenrtion_imgMask" v-if="!frontBack?.body?.path">
|
|
<img :src="selectDetail?.undividedLayerWithSinglePrint || selectDetail?.undividedLayer || selectDetail?.path" style="object-fit: cover;" alt="">
|
|
<!-- <img @load="setSelectSketch()" :src="designDetail?.currentFullBodyView || selectDetail?.undividedLayer" style="object-fit: cover;" alt=""> -->
|
|
</div>
|
|
</div>
|
|
<div class="molepositon imgDesignImg" :class="{active:imgDesignImg}">
|
|
<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
|
|
<div class="detail_modal_item_front">
|
|
<img :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { useI18n } from 'vue-i18n'
|
|
import { getMousePosition } from "@/tool/mdEvent";
|
|
import { Modal,message } from 'ant-design-vue';
|
|
import newFollowVue from '@/component/Account/message/newFollow.vue';
|
|
export default defineComponent({
|
|
components:{
|
|
},
|
|
props:{
|
|
imgDesignImg:{
|
|
default:false,
|
|
type:Boolean,
|
|
}
|
|
},
|
|
emits:['canvasReload','addSketch','modelOnLoad'],
|
|
setup(props,{emit}) {
|
|
const {t} = useI18n()
|
|
const store = useStore();
|
|
const detailData = reactive({
|
|
frontBack:computed(()=>store.state.DesignDetail.frontBack),
|
|
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
|
isEditPattern:inject('isEditPattern') as any,
|
|
singleOveral:inject('singleOveral') as any,
|
|
detailBody:null as any,
|
|
})
|
|
const selectItem = reactive({
|
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
|
imgDomIndex:-1,
|
|
printZIndex:store.state.DesignDetail.printZIndex,
|
|
imgDom:null as any,
|
|
direction:'',
|
|
})
|
|
watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
|
|
if(!newValue && newValue?.id == oldValue?.id)return
|
|
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
|
},{immediate: true,})
|
|
watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
|
|
setPrintSize()
|
|
})
|
|
const setPrintSize = ()=>{
|
|
nextTick(()=>{
|
|
let sacle = 0
|
|
const img = new Image();
|
|
let dom = document.querySelector('.molepositon .perview_img') as any
|
|
if(!detailData.frontBack?.body?.path || !dom)return
|
|
img.onload = () => {
|
|
if(detailData.designDetail.clothes.length == 0){
|
|
store.commit('DesignDetail/addDesignColthes')
|
|
emit('addSketch')
|
|
return
|
|
}
|
|
if(!detailData.selectDetail?.id){
|
|
store.commit('DesignDetail/setDesignColthes',detailData.designDetail.clothes[0].id)
|
|
}
|
|
// resolve(img)
|
|
sacle = dom.parentNode.offsetWidth / img.width
|
|
detailData.frontBack.front.forEach((item:any,index:number) => {
|
|
for (const key in item.style) {
|
|
if(key == 'zIndex')return
|
|
let value = item.style[key]
|
|
if(typeof value !== 'number'){
|
|
value = value.replace('px','')
|
|
item.style[key] = value
|
|
}else{
|
|
item.style[key] = value*sacle+'px'
|
|
}
|
|
// item.style[key] = value*sacle+'px'
|
|
}
|
|
for (const key in detailData.frontBack.back[index].style) {
|
|
if(key == 'zIndex')return
|
|
let value = detailData.frontBack.back[index].style[key]
|
|
if(typeof value !== 'number'){
|
|
value = value.replace('px','')
|
|
detailData.frontBack.back[index].style[key] = value
|
|
}else{
|
|
detailData.frontBack.back[index].style[key] = value*sacle+'px'
|
|
}
|
|
// detailData.frontBack.back[index].style[key] = value*sacle+'px'
|
|
}
|
|
});
|
|
setTimeout(() => {
|
|
emit('modelOnLoad')
|
|
},500);
|
|
};
|
|
img.src = detailData.frontBack?.body?.path;
|
|
})
|
|
}
|
|
const getDetailListDom = reactive({
|
|
libraryList:null as any,
|
|
})
|
|
|
|
//设置尺寸
|
|
const itemSizeMousedown = (direction:any,event:any)=>{
|
|
selectItem.direction = direction
|
|
selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
|
|
detailData.frontBack.front[selectItem.imgDomIndex].designOpenrtionBtn = true
|
|
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
|
let li = (document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
|
|
if(selectItem.direction == 'right' || selectItem.direction == 'bottom'){
|
|
detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
|
|
detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
|
|
}else{
|
|
detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
|
detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
|
}
|
|
|
|
document.addEventListener('mousemove', sizeMouseMove);
|
|
document.addEventListener('touchmove', sizeTouchmove);
|
|
document.addEventListener('mouseup', sizeMouseup);
|
|
document.addEventListener('touchend', sizeMouseup);
|
|
}
|
|
const sizeMouseMove = (event:any)=>{
|
|
let e = getMousePosition(event,false)
|
|
sizeMouseMoveOperation(e)
|
|
}
|
|
const sizeTouchmove = (event:any)=>{
|
|
let e = getMousePosition(event,true)
|
|
sizeMouseMoveOperation(e)
|
|
}
|
|
const sizeMouseup = (e:any)=>{
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style={
|
|
right:'auto',
|
|
left:selectItem.imgDom.offsetLeft+'px',
|
|
bottom:'auto',
|
|
top:selectItem.imgDom.offsetTop+'px',
|
|
height:selectItem.imgDom.offsetHeight+'px',
|
|
width:selectItem.imgDom.offsetWidth+'px',
|
|
zIndex:selectItem.imgDom.style.zIndex,
|
|
// zIndex:selectItem.printZIndex
|
|
}
|
|
// detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
|
|
document.removeEventListener('mousemove',sizeMouseMove)
|
|
document.removeEventListener('touchmove',sizeTouchmove)
|
|
document.removeEventListener('mouseup',sizeMouseup)
|
|
document.removeEventListener('touchend',sizeMouseup)
|
|
}
|
|
const sizeMouseMoveOperation = (e:any)=> {
|
|
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
|
let parentNode =selectItem.imgDom.parentNode
|
|
let width = imgDomWH.width
|
|
let height = imgDomWH.height
|
|
let w,h
|
|
let num = height/width
|
|
//判断移动四个边
|
|
if(selectItem.direction == 'right'){
|
|
w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)
|
|
h = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
|
|
width = w+'px'
|
|
// height = w*num+'px'
|
|
}else if(selectItem.direction == 'top'){
|
|
num = width/height
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.top = 'auto'
|
|
// this.printStyleList[selectItem.imgDomIndex].style.left = 'auto'
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - selectItem.imgDom.offsetTop+'px'
|
|
w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
|
|
h = (detailData.frontBack.front[selectItem.imgDomIndex].centers.top - e.clientY)
|
|
|
|
height = h+'px'
|
|
// width = h*num+'px'
|
|
}else if(selectItem.direction == 'bottom'){
|
|
num = width/height
|
|
h = (e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)
|
|
height = h+'px'
|
|
// width = h*num+'px'
|
|
}else if(selectItem.direction == 'left'){
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.left = 'auto'
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - selectItem.imgDom.offsetLeft+'px'
|
|
w = (detailData.frontBack.front[selectItem.imgDomIndex].centers.left - e.clientX)
|
|
|
|
width = w+'px'
|
|
// height = w*num+'px'
|
|
}
|
|
//判断尺寸是否到边
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
|
|
}
|
|
// 设置移动
|
|
const mouseMove = (event:any)=>{
|
|
let e = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
const touchmove=(event:any)=>{
|
|
let e = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
const mouseup = (e:any)=> {
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
}
|
|
const mouseMoveOperation = (e:any)=>{
|
|
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
|
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
|
let x = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)+'px'
|
|
let y = ( e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)+'px'
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.left = x
|
|
detailData.frontBack.front[selectItem.imgDomIndex].style.top = y
|
|
}
|
|
const clothesOpenActive = (index:number)=>{
|
|
// this.designItemDetail.clothes.forEach((item)=>{
|
|
// item.clothesOpenItem = false
|
|
// })
|
|
// if(index != -1){
|
|
// this.designItemDetail.clothes[index].clothesOpenItem = true
|
|
// }
|
|
}
|
|
const itemMoveMousedown = async (index:any,e:any)=>{
|
|
if(detailData.selectDetail.id != detailData.frontBack.front[index].id)return
|
|
let isOpen = false
|
|
let isModal = false
|
|
await new Promise((resolve, reject) => {
|
|
// if(
|
|
// detailData.isEditPattern.value &&
|
|
// selectItem.selectDetail?.id &&
|
|
// (detailData.frontBack.front[index].id != selectItem.selectDetail.id)
|
|
// ){
|
|
// isModal = true
|
|
// Modal.confirm({
|
|
// title: t('collectionModal.jsContent2'),
|
|
// icon: createVNode(ExclamationCircleOutlined),
|
|
// okText: 'Yes',
|
|
// cancelText: 'No',
|
|
// mask:false,
|
|
// centered:true,
|
|
// onOk() {
|
|
// resolve(true)
|
|
// isOpen = true
|
|
// },
|
|
// onCancel(){
|
|
// resolve(false)
|
|
// isOpen = false
|
|
// }
|
|
// });
|
|
// }else{
|
|
// if(detailData.frontBack.front[index].id != selectItem.selectDetail.id){
|
|
// isOpen = true
|
|
// }
|
|
// resolve(true)
|
|
// isModal = false
|
|
// }
|
|
resolve(true)
|
|
isOpen = true
|
|
}).then((rv)=>{
|
|
})
|
|
if(isOpen){
|
|
emit('canvasReload')
|
|
store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
|
|
}
|
|
if(isModal)return
|
|
store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
|
|
selectItem.imgDomIndex = index
|
|
detailData.frontBack.front.forEach((v:any)=>{
|
|
v.designOpenrtionBtn = false
|
|
})
|
|
clothesOpenActive(index)
|
|
let event = e||window.event
|
|
selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
|
|
detailData.frontBack.front[index].designOpenrtionBtn = true
|
|
// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
|
// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
|
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
|
let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
|
|
let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
|
|
detailData.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
|
|
detailData.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
|
|
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
const sort = (arr:any)=>{
|
|
arr.sort((a:any, b:any) => {
|
|
var a_num = a.style.zIndex;
|
|
var b_num = b.style.zIndex;
|
|
return a_num - b_num;
|
|
});
|
|
return arr
|
|
}
|
|
const getSubmitData = (value:any)=>{
|
|
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
|
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
|
|
return{
|
|
scale:value.layersObject[0].scale,
|
|
offset:value.layersObject[0].offset,
|
|
priority:value.layersObject[0].priority,
|
|
}
|
|
}
|
|
let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
|
|
console.log(ratio,detailData.frontBack.body.layersObject[0].imageSize[0],parentNode.width)
|
|
// let arr:any = sort(detailData.frontBack.front)
|
|
let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
|
|
let num = 10
|
|
arr.forEach((item:any)=>{
|
|
item.priority = num++
|
|
})
|
|
let data:any = {
|
|
scale:null,
|
|
offset:null,
|
|
priority:'',
|
|
maskUrl:'',
|
|
maskMinioUrl:'',
|
|
}
|
|
let state = false
|
|
for (let index = 0; index < arr.length; index++) {
|
|
if(value.id == arr[index].id){
|
|
state = true
|
|
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
|
|
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
|
|
console.log(value.layersObject,x,y,ratio)
|
|
let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
|
|
let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
|
|
// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
|
|
data.scale = [scaleWidth,scaleHeight]
|
|
let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
|
|
let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
|
|
data.offset = [left?left:0,top?top:0]
|
|
// data.offset = [left?left:0,top?top:0]
|
|
data.maskUrl = arr[index].maskUrl
|
|
data.maskMinioUrl = arr[index].maskMinioUrl
|
|
// data.priority = arr[index].style.zIndex
|
|
data.priority = arr[index].priority
|
|
arr[index].similarity = true
|
|
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
|
|
break
|
|
}
|
|
}
|
|
if(!state){
|
|
data.scale = [1,1]
|
|
data.offset = [0,0]
|
|
data.priority = 10+arr.length
|
|
}
|
|
return data
|
|
}
|
|
const deleteNav = ()=>{
|
|
|
|
}
|
|
const setpitch = (item:any,index:any)=>{
|
|
detailData.frontBack.front.forEach((v:any)=>{
|
|
v.designOpenrtionBtn = false
|
|
})
|
|
detailData.frontBack.front[index].designOpenrtionBtn = true
|
|
// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
|
// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
|
clothesOpenActive(index)
|
|
}
|
|
const updataPosition = ()=>{
|
|
let url = detailData.frontBack?.body?.path
|
|
let sacle = 0
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
let dom:any = document.querySelector('.molepositon .perview_img')
|
|
// resolve(img)
|
|
sacle = dom.parentNode.offsetWidth / img.width
|
|
detailData.frontBack.front.forEach((item:any,index:number) => {
|
|
for (const key in item.style) {
|
|
if(key == 'zIndex')return
|
|
item.style[key] = item.style[key]*sacle+'px'
|
|
}
|
|
for (const key in detailData.frontBack.back[index].style) {
|
|
if(key == 'zIndex')return
|
|
detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
|
|
}
|
|
});
|
|
};
|
|
img.src = url;
|
|
}
|
|
return{
|
|
...toRefs(detailData),
|
|
...toRefs(selectItem),
|
|
...toRefs(getDetailListDom),
|
|
|
|
setPrintSize,
|
|
itemSizeMousedown,
|
|
itemMoveMousedown,
|
|
deleteNav,
|
|
setpitch,
|
|
getSubmitData,
|
|
getMousePosition,
|
|
updataPosition,
|
|
}
|
|
},
|
|
directives:{
|
|
detailBody:{
|
|
mounted (el,data:any) {
|
|
let sacle = 0
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
// resolve(img)
|
|
sacle = el.parentNode.offsetWidth / img.width
|
|
data.instance.frontBack.front.forEach((item:any,index:number) => {
|
|
for (const key in item.style) {
|
|
if(key == 'zIndex')return
|
|
item.style[key] = item.style[key]*sacle+'px'
|
|
}
|
|
for (const key in data.instance.frontBack.back[index].style) {
|
|
if(key == 'zIndex')return
|
|
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
|
|
}
|
|
});
|
|
};
|
|
img.src = data.value;
|
|
},
|
|
updated (el,data:any) {
|
|
let sacle = 0
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
// resolve(img)
|
|
sacle = el.parentNode.offsetWidth / img.width
|
|
data.instance.frontBack.front.forEach((item:any,index:number) => {
|
|
for (const key in item.style) {
|
|
if(key == 'zIndex')return
|
|
item.style[key] = item.style[key].replace(/px/g,'')*sacle+'px'
|
|
}
|
|
for (const key in data.instance.frontBack.back[index].style) {
|
|
if(key == 'zIndex')return
|
|
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key].replace(/px/g,'')*sacle+'px'
|
|
}
|
|
});
|
|
};
|
|
img.src = data.value;
|
|
}
|
|
}
|
|
},
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.molepositon{
|
|
// width: 30rem;
|
|
// width: calc(66 * .470rem);
|
|
width: calc(66 * .457rem);
|
|
height: 66rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// margin: auto 0;
|
|
// padding-top: 3rem;
|
|
position: relative;
|
|
display: none;
|
|
&.active{
|
|
display: flex;
|
|
z-index: 2;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
&.imgDesignImg{
|
|
> .designOpenrtion_imgMask{
|
|
.detail_modal_item_front{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img{
|
|
// height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .designOpenrtion_imgMask{
|
|
width: auto;
|
|
height: auto;
|
|
position: relative;
|
|
// height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
>img{
|
|
z-index: 2;
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
// height: 100%;
|
|
// object-fit: contain;
|
|
}
|
|
>div{
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.detail_modal_item_front,.designOpenrtion_print{
|
|
z-index: 2;
|
|
height: 100%;
|
|
width: 100%;
|
|
img{
|
|
width: 100%;
|
|
// height: ;
|
|
height: 100%;
|
|
float: left;
|
|
user-select:none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
.modal_imgItem{
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: 0;
|
|
|
|
}
|
|
}
|
|
.designOpenrtion_print{
|
|
z-index: 1 !important;
|
|
}
|
|
> .designOpenrtion_btnBox{
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
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;
|
|
|
|
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;
|
|
z-index: 999 !important;
|
|
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_rotote::after{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
width: 2px;
|
|
height: 30px;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
.designOpenrtion_rotote::before{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
top: calc(50% - 30px);
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
width: calc(1.5rem*1.2);
|
|
height: calc(1.5rem*1.2);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |