部分优化

src/component/Detail/model/modelPosition.vue

@@ -18,11 +18,12 @@
 			</div>
 		</div>
 		<div class="designOpenrtion_imgMask" v-if="!frontBack?.body?.path">
-			<img :src="designDetail.currentFullBodyView || selectDetail.undividedLayer" style="object-fit: cover;" alt="">
+			<img :src="designDetail?.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" :class="{active:imgDesignImg}">
-		<div class="designOpenrtion_imgMask">
+	<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>
@@ -55,6 +56,7 @@ export default defineComponent({
 		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,
@@ -67,7 +69,7 @@ export default defineComponent({
 			direction:'',
 		})
 		watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
-			if(newValue.id == oldValue?.id)return
+			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)=>{
@@ -80,6 +82,9 @@ export default defineComponent({
 				let dom = document.querySelector('.molepositon .perview_img') as any
 				if(!detailData.frontBack?.body?.path || !dom)return
 				img.onload = () => {
+					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) => {
@@ -462,14 +467,28 @@ export default defineComponent({
 		position: relative;
 		display: none;
 		&.active{
-			display: block;
+			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%;
+			// height: 100%;
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -491,9 +510,8 @@ export default defineComponent({
 				width: 100%;
 				img{
 					width: 100%;
+					// height: ;
 					height: 100%;
-					// width: 100%;
-					// height: auto;
 					float: left;
 					user-select:none;
 					-webkit-user-drag: none;