detail印花页面布局调整

src/component/Detail/detailRight/editPrintElement.vue

@@ -1,36 +1,24 @@
 <template>
     <div class="editPrintElement">
+		<div class="detailText" style="text-align: left; margin-bottom: 1rem;">
+			{{ $t('DesignPrintOperation.ModifyPrint') }}
+		</div>
 		<div class="printOverallBtn" v-if="type == 'print'">
 			<div class="overallSlogin">
-				<div
+				<label>
-					class="habit_Overal_Single_text"
+					<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="single">
-					style="margin-left: 0"
-					: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') }}
+				</label>
+				<label>
+					<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="overall">
+					{{ $t('DesignPrintOperation.Overall') }}
+				</label>
 			</div>
+			
 		</div>
-			<div v-show="!overallSingle" class="habit_System_Designer">
+		<div class="printElementListBorder" :class="{'single':stateOverallSingle == 'single'}">
-				<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"
-					:tip-formatter="formatter"
-				>
-				</a-slider>
-			</div>
-		</div>
 			<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
-			<div class="itemList" :style="{width:prentWidth || 0}">
+				<div class="itemList" :style="{width:stateOverallSingle == 'single'?(prentWidth || 0) : '100%'}">
 					<div class="imgItem" 
 						v-if="stateOverallSingle == 'single'"
 						v-for="item in printStyleList[type][stateOverallSingle]" 
@@ -45,13 +33,25 @@
 						v-if="stateOverallSingle == 'overall'"
 						v-for="item in printStyleList[type][stateOverallSingle]" 
 						:key="item"
-					style="width:14rem;height:14rem;"
+						style="width:14rem;height:14rem;left: 0;right: 0;margin: 0 auto;"
 					>
 						<img :src="item.path" alt="">
 						<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
 					</div>
 				</div>
 			</div>
+		</div>
+		<div v-show="stateOverallSingle != 'single'" 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"
+				:tip-formatter="formatter"
+			>
+			</a-slider>
+		</div>
 		<div class="editPrintElementBox">
 			<div class="designOpenrtion_centent" id="designOpenrtionCentent">
 			<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
@@ -60,7 +60,7 @@
 						<div 
 							v-for="item,index in printStyleList[type][stateOverallSingle]" 
 							:key="item"
-							v-if="overallSingle"
+							v-if="stateOverallSingle == 'single'"
 							:style="item?.pattern?.style" 
 							@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
 							class="modal_imgItem" 
@@ -72,7 +72,7 @@
 					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
 					<img :src="selectDetail?.undividedLayer?selectDetail.undividedLayer:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg">
 					<div class="designOpenrtion_btn">
-						<ul v-if="overallSingle" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
+						<ul v-if="stateOverallSingle == 'single'" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.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>
@@ -82,8 +82,8 @@
 								<img src="../../../assets/images/homePage/cuowu.svg" alt="">
 							</li>
 						</ul>
-						<div v-show="!overallSingle"></div>
+						<div v-show="stateOverallSingle != 'single'"></div>
-						<ul v-if="!overallSingle && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
+						<ul v-if="stateOverallSingle != 'single' && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.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[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
@@ -125,7 +125,6 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
 			currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
-			overallSingle:true,
 			systemDesignerPercentage:0,
 			printStyleList:{
 				print:{
@@ -168,11 +167,6 @@ export default defineComponent({
 		})
 		
 		const setOveralSingle = ()=>{
-			if(!editPrintElementData.overallSingle){
-				editPrintElementData.stateOverallSingle = 'overall'
-			}else{
-				editPrintElementData.stateOverallSingle = 'single'
-			}
 			setItemPosition()
 		}
 		const formatter = (value:any)=>{
@@ -197,7 +191,7 @@ export default defineComponent({
 					let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale
 					let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
 					let y = sketchH / 2 -(sketchH * height/2)
-					if(!editPrintElementData.overallSingle){
+					if(!editPrintElementData.stateOverallSingle == 'single'){
 						x = sketchW / 2
 						y = sketchH / 2
 					}
@@ -212,7 +206,7 @@ export default defineComponent({
 			let item = {
 				angle:0,
 				designType:data.designType,
-				ifSingle:editPrintElementData.overallSingle,
+				ifSingle:editPrintElementData.stateOverallSingle == 'single',
 				level2Type:data.level2Type,
 				location,
 				minIOPath:data.minIOPath || data.originalUrl,
@@ -354,9 +348,9 @@ export default defineComponent({
 						})
 						setItemPosition()
 					}
-					if(props.type == 'print'){
+					// if(props.type == 'print'){
-						editPrintElementData.overallSingle = state
+					// 	editPrintElementData.overallSingle = state
-					}
+					// }
 				}
 				// undividedLayer
 				//计算宽高使用editPrintElementData.selectDetail.path
@@ -392,7 +386,7 @@ export default defineComponent({
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].forEach((v:any)=>{
 				v.pattern.designOpenrtionBtn = false
 			})
-			if(!editPrintElementData.overallSingle){
+			if(editPrintElementData.stateOverallSingle != 'single'){
 				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
 			}else{
 				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
@@ -462,7 +456,7 @@ export default defineComponent({
 			let y:any = ( e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)+'px'
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = x
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = y
-			if(!editPrintElementData.overallSingle){
+			if(editPrintElementData.stateOverallSingle != 'single'){
 				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
 					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = parentNode.width - imgDomWH.width+'px'
 				}
@@ -740,7 +734,6 @@ export default defineComponent({
 		onMounted(()=>{
 			if(props.type == 'element'){
 				editPrintElementData.stateOverallSingle = 'single'
-				editPrintElementData.overallSingle = true
 			}
 		})
 		onBeforeUnmount(()=>{
@@ -857,28 +850,33 @@ export default defineComponent({
 			> .overallSlogin{
 				align-items: center;
 				display: flex;
+				// margin-top: 1.4rem;
+				margin-bottom: 2.2rem;
+				> label{
+					display: flex;
+					align-items: center;
+					font-size: 1.6rem;
+					margin-right: 2.4rem;
+					&:last-child{
+						margin-right: 0rem;
+					}
+					> input{
+						margin-right: 1rem;
+					}
 				}
-			.habit_Overal_Single_text {
-				font-weight: 600;
-				color: rgba(0, 0, 0, 0.5);
-				font-size: 1.8rem;
-				margin: 0 1rem;
-				&.active {
-					color: rgba(0, 0, 0, 0.7);
-					// font-weight: 900;
-					// transform: scale(1.2);
 			}
 		}
 		.habit_System_Designer {
 			align-items: center;
 			display: flex;
+			justify-content: center;
 			.ant-slider-track,
 			.ant-slider-rail {
 				background-color: #e1e1e1;
 				border-radius: calc(0.5rem*1.2);
 			}
 			:deep(.system_silder){
-					width: 20rem;
+				width: 17rem;
 			}
 			.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
 			.ant-slider-handle {
@@ -895,12 +893,19 @@ export default defineComponent({
 				font-weight: 600;
 			}
 		}
+		> .printElementListBorder{
+			&.single{
+				padding: 2rem 4rem;
+				width: 100%;
+				border-radius: 1.5rem;
+				border: .05rem solid #000;
 			}
 			> .printElementList{
 				width: 100%;
 				height: 10rem;
 				position: relative;
 				overflow-x: auto;
+				
 				.itemList{
 					height: 100%;
 				}
@@ -925,6 +930,8 @@ export default defineComponent({
 					}
 				}
 			}
+		}
+		
 		> .editPrintElementBox{
 			flex: 1;
 			overflow: hidden;

src/lang/cn.ts

@@ -636,6 +636,7 @@ export default {
   },
   DesignPrintOperation: {
     Placement: "调整位置",
+    ModifyPrint: "修改印花",
     Overall: "整体",
     Single: "单个",
     Scale: "大小",

src/lang/en.ts

@@ -638,6 +638,7 @@ export default {
   },
   DesignPrintOperation: {
     Placement: "Placement",
+    ModifyPrint: "Modify Print",
     Overall: "Overall",
     Single: "Single",
     Scale: "Scale",

src/views/HomeMain.vue

@@ -350,7 +350,7 @@ export default defineComponent({
 		const pastDuePage = computed(()=>{
 			const isAllowedRoute = route.path === '/home/events' || route.path === '/home/works';
 			const hasNoSystemAccess = userDetail.value.systemList.indexOf(1) === -1;
-			return !hasNoSystemAccess && !isAllowedRoute;
+			return hasNoSystemAccess && !isAllowedRoute;
 		})
 		watch(()=>homeMainData.userDetailLanguage,(newVal)=>{
 			if(locale.value == newVal || !newVal)return