aida_front/src/component/Detail/model/modelPosition.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" :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" ref="target"  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="detail_modal_item_front" :ref="el => { setElementRef(el, index) }" v-for="item,index in frontBack.front" :class="{'active':item.id == selectDetail?.id}" :style="item.style">
				<img :src="item.imageUrl" alt="">
			</div>
			<div ref="moveableContainer" class="moveableContainer"></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
				:style="{width:observerWH.width+'px',height:observerWH.height+'px'}"
				 :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive, onUnmounted} 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 { KeyValueDB } from "@/tool/indexedDB";
import Vue3Moveable from 'vue3-moveable';
import Moveable from 'moveable';
import { parse } from 'vue/compiler-sfc';
import { scale } from 'echarts/types/src/scale/helper.js';
export default defineComponent({
    components:{
    },
	props:{
	    imgDesignImg:{
            default:false,
			type:Boolean,
		}
	},
	emits:['addSketch'],
    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,
			observer:null as any,
			observerWH:{
				width:0,
				height:0,
			},
		})
		const selectItem = reactive({
		    selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
		    imgDomIndex:-1,
		    printZIndex:store.state.DesignDetail.printZIndex,
			imgDom:null as any,
			direction:'',
		})
		
		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.observer) {
						detailData.observer.disconnect()
					}
					detailData.observerWH.width = dom.width
					detailData.observerWH.height = dom.height
					detailData.observer = new ResizeObserver((entries) => {
						if(entries[0].contentRect.width == 0)return
						detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
						detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
					})
					detailData.observer.observe(dom)


					if(detailData.designDetail.clothes.length == 0){
						store.commit('DesignDetail/addDesignColthes')
						emit('addSketch')
						return
					}
					if(!detailData.selectDetail?.id){
						let item = detailData.designDetail.clothes.reduce((max, current) => {
							return current.priority > max.priority ? current : max;
						});
						store.commit('DesignDetail/setDesignColthes',item.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
							if(key == 'transform')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(() => {
						initMoveableForSelected()
					},500);
				};
				img.src = detailData.frontBack?.body?.path;
			})
		}
		const getDetailListDom = reactive({
			libraryList:null as any,
			moveableContainer:null as any,//控件层
		})
		
		const elementRefs = ref([]) as any;
		const moveableInstance = ref(null) as any;
		const setElementRef = (el, index) => {
			elementRefs.value[index] = el;
		};
		const updateRect = ()=>{
			setTimeout(() => {
				if(moveableInstance.value)moveableInstance.value.updateRect()
			}, 200);
		}
		const initMoveableForSelected = () => {
			// 销毁旧的实例
			if(selectItem.imgDomIndex == -1)return
			if (moveableInstance.value) {
				moveableInstance.value.destroy();
			}
			
			const selectedEl = elementRefs.value[selectItem.imgDomIndex];
			if (!selectedEl) return;
			if(!selectedEl.style.left)return
			moveableInstance.value = new Moveable(getDetailListDom.moveableContainer, {
				target: selectedEl,
				draggable: true,
				scalable: true,
				rotatable: true,
				keepRatio: false, // 等比缩放
				snappable: true,
				snapThreshold: 5,
				edge: false,
			});
			let startPosition = {//记录初始位置
				left: 0,
				top: 0,
			}
			moveableInstance.value.on('scaleStart', ({ target, direction }) => {
				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				if (!frontStyle.mirror){
					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
				}
			});
			moveableInstance.value.on('rotateStart', ({ target, direction }) => {
				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				if (!frontStyle.mirror){
					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
				}
			});
			moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
				startPosition = {
					left:parseFloat(selectedEl.style.left.replace('px','')) || 0,
					top:parseFloat(selectedEl.style.top.replace('px','')) || 0,
				}
			});
			// 拖拽
			moveableInstance.value.on('drag', ({ target, beforeTranslate }) => {
				let x = startPosition.left + beforeTranslate[0]
				let y = startPosition.top + beforeTranslate[1]
				detailData.frontBack.front[selectItem.imgDomIndex].style.left = x + 'px'
				detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
			});
			const updateElementTransform = (element, rotateDeg = null) => {
				
				const currentTransform = element.style?.transform || '';
				// 1. 提取当前的所有rotate
				const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
				// 2. 获取除镜像和rotate外的其他所有变换
				let otherTransforms = currentTransform
					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
					.replace(/rotate[XYZ]?\([^)]+\)/g, '')    // 移除rotate
					.replace(/\s+/g, ' ')
					.trim();
				// 3. 构建新transform
				const transforms = [];
				// 镜像部分
				if (element.mirror.x) transforms.push('scaleX(-1)');
				if (element.mirror.y) transforms.push('scaleY(-1)');
				if (otherTransforms) transforms.push(otherTransforms);
				if (rotateDeg !== null) {
					transforms.push(`rotate(${rotateDeg}deg)`);
				} else if (currentRotates.length > 0) {
					transforms.push(...currentRotates);
				}
				element.style.transform = transforms.join(' ').trim();
			};

			moveableInstance.value.on('scale', ({ target, delta, direction }) => {
				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
				
				const width = parseFloat(frontStyle.style.width);
				const height = parseFloat(frontStyle.style.height);
				let left = parseFloat(frontStyle.style.left) || 0;
				let top = parseFloat(frontStyle.style.top) || 0;
				let rotation = 0;
				// 获取原始比例
				const originalRatio = width / height;
				if (frontStyle.style.transform) {
					const transform = frontStyle.style.transform;
					const match = transform.match(/rotate\(([-\d.]+)deg\)/);
					if (match) {
						rotation = parseFloat(match[1]);
					}
				}
				// 根据旋转角度重新计算控制点的方向
				function getAdjustedCorner(originalCorner, rotationAngle) {
					const angleRad = rotationAngle * (Math.PI / 180);
					const cosA = Math.cos(angleRad);
					const sinA = Math.sin(angleRad);
					const newX = originalCorner.x * cosA - originalCorner.y * sinA;
					const newY = originalCorner.x * sinA + originalCorner.y * cosA;
					const threshold = 0.5;
					return {
						x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
						y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
					};
				}
				
				if (rotation !== 0) {
					direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
					direction = [direction.x, direction.y];
				}
				
				// 判断是否是对角线方向（需要等比缩放）
				const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
				
				// 处理轴缩放，包含镜像翻转逻辑
				const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
					let newVal = val * deltaVal;
					const mirrorKey = axis === 'width' ? 'x' : 'y';
					const isWidth = axis === 'width';
					
					// 检查是否需要镜像翻转（当值小于等于0时）
					if (newVal <= 0) {
						frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
						newVal = Math.abs(newVal);
						
						updateElementTransform(frontStyle);
						
						// 镜像翻转后，位置需要根据原始锚点调整
						if (dir === -1) {
							// 从左上/右上缩放时，位置保持不变
							return { 
								newVal, 
								adjustPos: originalPosition,
								shouldFlip: true 
							};
						} else {
							// 从左下/右下缩放时，位置需要调整
							const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
							return { 
								newVal, 
								adjustPos: newPosition,
								shouldFlip: true 
							};
						}
					}
					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || 
									(frontStyle.mirror[mirrorKey] && dir === 1);
					if (keepRatio && otherAxisResult) {
						newVal = isWidth ? 
							otherAxisResult.newVal * originalRatio : 
							otherAxisResult.newVal / originalRatio;
					}
					let adjustPos;
					if (shouldMove) {
						adjustPos = originalPosition - (newVal - originalSize);
					} else {
						adjustPos = originalPosition;
					}
					return { 
						newVal, 
						adjustPos,
						shouldFlip: false
					};
				};

					// 自由缩放
					const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
					const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
					
					frontStyle.style.left = widthResult.adjustPos + 'px';
					frontStyle.style.top = heightResult.adjustPos + 'px';
					frontStyle.style.width = widthResult.newVal + 'px';
					frontStyle.style.height = heightResult.newVal + 'px';
				// }
			});
			
			// 旋转
			moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
				let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				// 确保镜像状态存在
				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
				
				const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
				
				// 计算实际旋转角度
				let actualRotate = beforeRotate;
				
				// 关键逻辑：当镜像状态不同时（一个true一个false），旋转方向反转
				if (isMirroredX !== isMirroredY) {
					actualRotate = -beforeRotate;
				}
				
				// 确保角度在 0-360 度范围内
				actualRotate = actualRotate % 360;
				
				// 如果角度为负数，转换为正数
				if (actualRotate < 0) {
					actualRotate += 360;
				}
				
				// 确保角度在 [0, 360) 范围内
				actualRotate = ((actualRotate % 360) + 360) % 360;
				
				updateElementTransform(frontStyle, actualRotate.toFixed(2));
			});
			// 调整大小
			moveableInstance.value.on('resize', ({ target, width, height }) => {
				// console.log(width, height)
				// detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
				// detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
			});
			moveableInstance.value.on('dragEnd', ({ target, clientX, clientY }) => {
				startPosition = {
					left:0,
					top:0,
				}
				upDataDetail()
			});
			moveableInstance.value.on('scaleEnd', () => {
				upDataDetail()
			});
			moveableInstance.value.on('rotateEnd', () => {
				upDataDetail()
			});
		};
		watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
			if(!newValue && newValue?.id == oldValue?.id)return
			selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
			initMoveableForSelected()
		},{immediate: true,})

		const setRevocation = async ()=>{
			let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))	
			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
			revocation.push({designData:null,position:frontBack})
			KeyValueDB.set('revocation', JSON.stringify(revocation));
		}
		const upDataDetail = async ()=>{
			//同步到selectDetail数据中，
			// getDetailListData.designDetail
			let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail)
			selectItem.selectDetail.layersObject[0].scale = scale
			selectItem.selectDetail.layersObject[1].scale = scale
			selectItem.selectDetail.layersObject[0].offset = offset
			selectItem.selectDetail.layersObject[1].offset = offset
			selectItem.selectDetail.layersObject[0].priority = priority
			selectItem.selectDetail.layersObject[1].priority = priority
			selectItem.selectDetail.layersObject[0].rotate = rotate
			selectItem.selectDetail.layersObject[1].rotate = rotate
			selectItem.selectDetail.layersObject[0].transpose = transpose
			selectItem.selectDetail.layersObject[1].transpose = transpose
			selectItem.selectDetail.layersObject[0].position = position
			selectItem.selectDetail.layersObject[1].position = position
			selectItem.selectDetail.layersObject[0].imageSize = imageSize
			selectItem.selectDetail.layersObject[1].imageSize = imageSize
			setRevocation()
		}
		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 = async (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

			let scale = 0
			let dom:any = document.querySelector('.molepositon .perview_img')
			const img = new Image();
			img.src =  detailData.frontBack?.body?.path;
			await new Promise<void>((resolve, reject) => {
				img.onload = () => {
					scale = dom.parentNode.offsetWidth / img.width
					resolve()
				};
			})
			// 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:'',
				position:null,
				imageSize:null,
			}
			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])
					let positionX = Number((arr[index]?.style?.left.replace(/px/g,'')/scale)).toFixed(2)
					let positionY = Number((arr[index]?.style?.top.replace(/px/g,'')/scale)).toFixed(2)
					let imageSizeW = Number((arr[index]?.style?.width.replace(/px/g,'')/scale)).toFixed(2)
					let imageSizeH = Number((arr[index]?.style?.height.replace(/px/g,'')/scale)).toFixed(2)

					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)

					let transformStr = arr[index]?.style?.transform
					let scaleX = transformStr.match(/scaleX\(([-\d.]+)\)/)
					let scaleY = transformStr.match(/scaleY\(([-\d.]+)\)/)
					let rotate = transformStr.match(/rotate\(([-\d.]+)deg\)/);
					data.transpose = [parseFloat(scaleX?.[1] || 1),parseFloat(scaleY?.[1] || 1)]
					data.rotate = parseFloat(rotate?.[1] || 0)
					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.position = [positionY,positionX]
					data.imageSize = [imageSizeW,imageSizeH]
					// 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 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
							if(key == 'transform')return
							item.style[key] = item.style[key]*sacle+'px'
						}
						for (const key in detailData.frontBack.back[index].style) {
							if(key == 'zIndex')return
							if(key == 'transform')return
							detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
						}
					});
				};
				img.src = url;
		}
		onUnmounted(()=>{
			if (detailData.observer) {
				detailData.observer.disconnect()
			}
			if (moveableInstance.value) {
				moveableInstance.value.destroy();
			}
		})
        return{
			...toRefs(detailData),
			...toRefs(selectItem),
			...toRefs(getDetailListDom),
			setElementRef,

			setPrintSize,
			deleteNav,
			getSubmitData,
			getMousePosition,
			updataPosition,
			updateRect,
        }
    },
	
	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;
					}
				}
			}	
		}
		.moveableContainer{
			:deep(.moveable-origin){
				opacity: 0;
			}
			:deep(.moveable-control){
				border-radius: 0;
			}
			:deep(.moveable-rotation-control){
				border-radius: 50%;
			}
		}
		> .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%;
				pointer-events: none;
				&.active{
					pointer-events: auto;
				}
				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;
			}
		}
	}
</style>