2023-11-28-用户指引功能

src/assets/style/style.css

@@ -162,7 +162,10 @@ li {
 .hideEvents * {
   pointer-events: none !important;
 }
-.hideEvents .Guide_ {
+.Guide_ {
+  pointer-events: auto !important;
+}
+.Guide_.showEvents * {
   pointer-events: auto !important;
 }
 .delete_like_file_block {
@@ -389,6 +392,13 @@ li {
 .operate_file_block .select_img_type .category_list .category_item:hover {
   background: linear-gradient(-137deg, #eeefdb, #e7dbed);
 }
+.driver-overlay,
+.driver-active * {
+  pointer-events: none;
+}
+.showEvents * {
+  pointer-events: auto;
+}
 .habit :deep(.ant-btn:hover),
 :deep(.ant-btn:focus),
 :deep(.ant-btn:active),
@@ -502,12 +512,6 @@ li {
 .libraryPageCascader .ant-cascader-menu {
   margin-top: 4rem;
 }
-.collection_modal .ant-modal-content,
-.design_detail_modal_component .ant-modal-content,
-.designOpenrtion_modal .ant-modal-content {
-  transform: scale(1.2);
-  transform-origin: center !important;
-}
 .collection_modal .ant-modal-body,
 .design_detail_modal_component .ant-modal-body,
 .designOpenrtion_modal .ant-modal-body,

src/assets/style/style.less

@@ -177,8 +177,14 @@ ul,li{
 	*{
 		pointer-events:none !important;
 	}
-	.Guide_{
+	
-		pointer-events:auto !important;
+}
+.Guide_{
+	pointer-events:auto !important;
+	&.showEvents{
+		*{
+			pointer-events:auto !important;
+		}
 	}
 }
 
@@ -453,6 +459,14 @@ ul,li{
 		}
 	}
 }
+.driver-overlay, .driver-active * {
+    pointer-events: none;
+}
+.showEvents{
+	*{
+		pointer-events: auto;
+	}
+}
 // .ant-modal-wrap{
 // 	z-index: 10001 ;
 // }
@@ -597,8 +611,8 @@ ul,li{
 }
 .collection_modal,.design_detail_modal_component,.designOpenrtion_modal{
 	.ant-modal-content{
-		transform: scale(1.2);
+		// transform: scale(1.2);
-		transform-origin: center !important;
+		// transform-origin: center !important;
 	}
 }
 //collection 弹窗

src/component/Detail/DesignDetail.vue

@@ -2,11 +2,13 @@
     <div>
 		<!-- designDetailShow -->
         <a-modal class="design_detail_modal_component Guide_1_18" 
+		:class="[driver__.driver?'hideEvents':'']"
             v-model:visible="designDetailShow" 
             :footer="null" 
             width="65%"
             :maskClosable="false"
             :centered="true"
+			:keyboard="false"
 			:closable="false"
         >
 			<div class="design_title_text">
@@ -58,11 +60,11 @@
 						<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
 						<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 					</div>
-					<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
+					<div v-show="ifSubmit" class="subitOkPreviewBtn Guide_1_26" @click="submit">
 						{{ $t('DesignDetail.Submit') }}
 					</div>
                 </div>
-                <div class="detail_modal_body_category Guide_1_20" :class="[driver__.driver?'hideEvents':'']">
+                <div class="detail_modal_body_category">
                     <div v-show="designOrder" class="detail_modal_right_top scroll_style">
                         <div class="clothes_detail_item clothes_detail_item_apparel">
                             <div class="clothes_item_header">
@@ -72,7 +74,7 @@
 							</div>
 							<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
                         </div>
-						<div class="clothes_detail_item clothes_detail_item_print">
+						<div class="clothes_detail_item clothes_detail_item_print Guide_1_20" :class="[driver__.driver?'showEvents':'']">
                             <div class="clothes_item_header">
 								<i class="fi fi-rs-comments"></i>
 								<div>{{ $t('DesignDetail.CurrentPrint') }}</div>
@@ -294,6 +296,11 @@ export default defineComponent({
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.init(num)
 			if(num ==2 ){
+				if(this.driver__.driver){
+					nextTick().then(()=>{
+						driverObj__.moveNext();
+					})
+				}
 			}
         },
 	
@@ -569,7 +576,11 @@ export default defineComponent({
 					this.closeModal()
 					this.store.commit('setDesignCollectionList',designCollectionList)
 					this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
-					
+					if(this.driver__.driver){
+						nextTick().then(()=>{
+							driverObj__.moveNext();
+						})
+					}
                 }
             ).catch(res=>{
                 this.loadingShow = false
@@ -651,6 +662,7 @@ export default defineComponent({
 		},
 		clothesOpen(index:any){
 			this.clothesDetail('',index)
+			
 		},
 		clothesOpenActive(index:any){
 			this.designItemDetail.clothes.forEach((item:any)=>{
@@ -688,6 +700,11 @@ export default defineComponent({
 			this.store.commit('setDesignPreviewData',data)
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.changePlace()
+			if(this.driver__.driver){
+				nextTick().then(()=>{
+					driverObj__.moveNext();
+				})
+			}
         },
         //重新设计
         redesignItem(){
@@ -852,6 +869,7 @@ export default defineComponent({
 					position: relative;
 					height: 80%;
 					display: inline-block;
+					width: 100%;
 					.detail_modal_model{
 						z-index: 1;
 						position: relative;

src/component/Detail/DesignDetailAlter.vue

@@ -12,8 +12,8 @@
 				</div>
 				<div
 					@click.stop="open(2)"
-					class="switch_type_item"
+					class="switch_type_item Guide_1_21"
-					:class="[openClick == 2 ? 'select_swtich' : '']"
+					:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
 				>
 					<span>{{ $t('DesignDetailAlter.Library') }}</span>
 				</div>
@@ -96,7 +96,7 @@
 					</div>
 				</div>
 			</div>
-			<div v-show="openClick == 2" class="detail_Library_item">
+			<div v-show="openClick == 2" class="detail_Library_item Guide_1_22" :class="[driver__.driver?'showEvents':'']">
                 <div class="material_content_body scroll_style">
                     <div class="content_img_item" v-for="(file) in clothesList" :key="file.id"  :class="{active:selectCode !== 'Moodboard'}">
                         <div class="content_img_item_block" :class="{active:file?.checked}">
@@ -267,6 +267,7 @@ import { Sketch, Chrome} from '@ans1998/vue3-color'
 import {getUploadUrl,rgbToHsv} from '@/tool/util'
 import DesignDetailEnd from './DesignDetailEnd.vue';
 import { getCookie } from "@/tool/cookie";
+import { openGuide,driverObj__ } from "@/tool/guide";
 import { useI18n } from 'vue-i18n';
 export default defineComponent({
     props: ["msg"],
@@ -278,6 +279,7 @@ export default defineComponent({
 		let type_ = ref(1);
 		let select = ref(false);
         let current = inject('current')//父组件传过来的数据
+        let driver__ = inject('driver__')//父组件传过来的数据
 		let openClick = ref(1);
 		let searchPictureName = ref('')
 		//模型印花
@@ -324,6 +326,7 @@ export default defineComponent({
 			selectColor,
 			selectColorList,
 			workspace,
+			driver__,
 			t,
         }
     },
@@ -638,6 +641,11 @@ export default defineComponent({
 					minIOPath:imgData.minIOPath,
 					path:imgData?.url
 				}]
+				if(this.driver__.driver){
+					nextTick().then(()=>{
+						driverObj__.moveNext();
+					})
+				}
 
 				// console.log(this.current.printObject,imgData); 
 			}
@@ -672,6 +680,11 @@ export default defineComponent({
             this.openClick = num;
 			if(num ==2 ){
 				this.getLibraryList()
+				if(this.driver__.driver){
+					nextTick().then(()=>{
+						driverObj__.moveNext();
+					})
+				}
 			}
         },
 
@@ -1417,7 +1430,11 @@ export default defineComponent({
 							flex-direction: row-reverse;
 							.vc-chrome-color-wrap{
 								// width: 3.6rem;
+								margin-left: 2rem;
 								width: auto;
+								.vc-chrome-active-color{
+									border-radius: 50%;
+								}
 								.vc-chrome-active-color,.vc-checkerboard{
 									width: 3rem;
 									height: 3rem;

src/component/Detail/DesignDetailEnd.vue

@@ -85,7 +85,7 @@
 			</div>
 		</div>
 		<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
-		<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
+		<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
 		<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
 		
 	<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
@@ -96,7 +96,7 @@
 	</div>
 </template>
 <script>
-import { defineComponent,computed,ref, h ,inject} from 'vue'
+import { defineComponent,computed,ref, nextTick,h ,inject} from 'vue'
 import Draggable from 'vuedraggable'
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
@@ -104,6 +104,7 @@ import { Sketch} from '@ans1998/vue3-color'
 import DesignPrintOperation from './DesignPrintOperation.vue';
 import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
 import { message,Upload} from 'ant-design-vue';
+import { openGuide,driverObj__ } from "@/tool/guide";
 import {isMoible} from '@/tool/util'
 import { useI18n } from 'vue-i18n';
 
@@ -118,6 +119,8 @@ export default defineComponent({
         let current = inject('current')//父组件传过来的数据
         let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let sketchImg = ref({})
+        let driver__ = inject('driver__')//父组件传过来的数据
+
 		//印花
 		let overallSingle = ref(false)
 		let systemDesignerPercentage = ref(30)
@@ -134,6 +137,7 @@ export default defineComponent({
 			current,
 			setRevocation,
 			sketchImg,
+			driver__,
 			type_,
 			overallSingle,
 			systemDesignerPercentage,
@@ -180,6 +184,11 @@ export default defineComponent({
 			if(this.current?.printObject?.prints?.[0]?.path){
 				let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
 				DesignPrintOperation.init()
+				if(this.driver__.driver){
+					nextTick().then(()=>{
+						driverObj__.moveNext();
+					})
+				}
 			}else{
                 message.info(this.t('DesignDetailEnd.jsContent1'));
 			}

src/component/Detail/DesignPrintOperation.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
 	<a-modal
-            class="designOpenrtion_modal"
+            class="designOpenrtion_modal Guide_1_24"
+			:class="[driver__.driver?'hideEvents':'']"
             v-model:visible="designOpenrtion"
             :footer="null"
             width="65%"
             :maskClosable="false"
             :centered="true"
             :closable="false"
+			:keyboard="false"
             :mask="true"
         >
             <div class="designOpenrtion_content">
@@ -56,7 +58,7 @@
 								<img :src="designOpenrtionList[0].path">
 							</div>
 						</div>
-						<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
+						<div class="subitOkPreviewBtn  Guide_1_25" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
 					</div>
 				</div>
 				<div class="designOpenrtion_centent" id="designOpenrtionCentent">
@@ -104,6 +106,7 @@
 import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { useStore } from "vuex";
+import { openGuide,driverObj__ } from "@/tool/guide";
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -114,6 +117,7 @@ export default defineComponent({
         let designOpenrtion = ref(false);
 		let designOpenrtionList = ref([])
 		let current = inject('current')//父组件传过来的数据
+		let driver__ = inject('driver__')
         let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let overallSingle = ref(false)
 		let systemDesignerPercentage = ref(0)
@@ -160,6 +164,7 @@ export default defineComponent({
 			overallSingle,
 			systemDesignerPercentage,
 			current,
+			driver__,
 			printAmount,
 			printZIndex,
             printStyleList,
@@ -652,6 +657,11 @@ export default defineComponent({
 					this.loadingShow = false
 					this.designOpenrtion = false
 					// this.closeModal()
+					if(this.driver__.driver){
+						nextTick().then(()=>{
+							driverObj__.moveNext();
+						})
+					}
 				}
 			).catch(res=>{
 				this.loadingShow = false

src/component/Detail/DesignPrintOperationMobile.vue

@@ -8,6 +8,7 @@
             :maskClosable="false"
             :centered="true"
             :closable="false"
+			:keyboard="false"
             :mask="true"
         >
             <div class="designOpenrtion_content">

src/component/Detail/HistoryDetail.vue

@@ -5,6 +5,7 @@
             :title="collectionName"
             width="80%"
             :maskClosable="false"
+			:keyboard="false"
             :centered="true"
         >
             <template #closeIcon>

src/component/Detail/habit.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="habit">
 		<div v-show="openType.habit" class="habit_mask"></div>
-        <div class="habit_button" @click.stop="setOpenType('habit')" >
+        <div class="habit_button Guide_1_27" @click.stop="setOpenType('habit')" >
 			{{ $t('Habit.Workspace') }}
             <i class="fi fi-bs-angle-down"></i>
         </div>
@@ -95,7 +95,7 @@
                     <div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
                 </div>
             </div>
-			<div class="habit_model">
+			<div class="habit_model Guide_1_28">
                 <a-dropdown placement="bottomRight"
 					trigger="['click']"
 					@click.stop="setOpenType('model')"
@@ -107,7 +107,7 @@
                     </a-button>
                 </a-dropdown>
             </div>
-			<div id="modelShow" class="habit_model_show"  v-fade="openType.model">
+			<div id="modelShow" class="habit_model_show Guide_1_29" :class="[driver__.driver?'showEvents':'']" v-fade="openType.model">
 				<div class="habit_btn">
 					<div class="model_current">
 					<div class="model_text">{{ $t('Habit.Current') }}</div>
@@ -153,12 +153,13 @@
 </template>
 <script lang="ts">
 import { useStore } from "vuex";
-import { defineComponent, createVNode, ref,Ref} from "vue";
+import { defineComponent, createVNode,nextTick, computed,ref,Ref} from "vue";
 import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
 import { Https } from "@/tool/https";
 import type { MenuProps } from "ant-design-vue";
 import { Modal,message,Upload} from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { openGuide,driverObj__ } from "@/tool/guide";
 import { useI18n } from "vue-i18n";
 export default defineComponent({
     components: {
@@ -166,8 +167,9 @@ export default defineComponent({
         UserOutlined,
     },
 	setup(){
+        const store = useStore();
 		let workspaceItem:any = ref({
-			id:1,
+			id:'',
 			id_:1,
 			workSpaceName:"工作台1",
 			putName:false,
@@ -189,6 +191,9 @@ export default defineComponent({
 			addWorkspace:false,
 			sex:false
 		})
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		})
 		let workspace:any = ref({
 			
 		});
@@ -200,11 +205,11 @@ export default defineComponent({
 			
 		])
 		const {t} = useI18n()
-			
 	return{
 			systemSeleves,
 			mannequins,
 			openType,
+			driver__,
 			workspace,
 			workspaceItem,
 			workspaceItemName,
@@ -224,13 +229,13 @@ export default defineComponent({
 					let data = this.workspaceItem
 					delete data.isLastIndex
 					this.putWorkspace(data,'')
+					// this.getDetail(this.workspaceItem.id)
 					this.store.commit("setWorkspace", this.workspaceItem);
 				}
 			}
 		},
 		'workspaceItem.id_':{
 			handler(newVal:any,oldVal:any){
-
 				this.workspace.workspaceList.forEach((v:any)=>{
 					if(v.id == this.workspaceItem.id_){
 						this.workspaceItem = v
@@ -239,7 +244,7 @@ export default defineComponent({
 					if(v.id == oldVal){
 						delete v.isLastIndex
 						this.putWorkspace(v,newVal)
-						// this.getDetail(newVal)
+						this.getDetail(newVal)
 					}
 				})
 				this.getMannequins()
@@ -264,21 +269,12 @@ export default defineComponent({
 				// })
 			}
 		},
-		// 'workspa,ceItem.sex':{
+		'workspaceItem.sex':{
-		// 	handler(newVal:any,oldVal:any){
+			handler(newVal:any,oldVal:any){
-		// 		console.log(oldVal);
+				// console.log(this.workspaceItem);
 				
-		// 		if(oldVal){
+			}
-		// 			console.log(oldVal);
+		},
-					
-		// 			if(newVal != oldVal){
-		// 				console.log(this.workspaceItem.position);
-						
-		// 				this.workspaceItem.position = this.singleTypeList[0].label
-		// 			}
-		// 		}
-		// 	}
-		// },
 		workspaceItem:{
 			handler(newVal:any,oldVal:any){
 				this.store.commit("setWorkspace", this.workspaceItem);
@@ -292,6 +288,7 @@ export default defineComponent({
     },
    mounted() {
 		this.getworkspace()
+		this.getSex()
 	},
 	directives:{
 		fade:{
@@ -336,7 +333,6 @@ export default defineComponent({
 					this.sex = rv
 				}
 			})
-			this.getPosition('')
 		},
 		async getPosition(str:any){
 			let params
@@ -379,23 +375,21 @@ export default defineComponent({
 							v.overallSingle = true
 						}
 						v.putName = false
-						if(v.id == rv.id){
+						if(v.id ==  (this.workspaceItem.id?this.workspaceItem.id:rv.id)){
 							this.workspaceItem = v
-							console.log(this.workspaceItem);
 							this.setMannequinsSex()
+							this.getPosition('')
 						}
 					});
 					this.workspace.id = rv.id
 					this.workspace.workspaceList = rv.page.content
-					this.getSex()
 				}
 			})
 		},
 		getDetail(id:any){//
 			Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
 				if (rv) {
-					this.getworkspace()
+					// this.getworkspace()
-
 				}
 			})
 		},
@@ -422,7 +416,7 @@ export default defineComponent({
 			Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
 				if (rv) {
 					if(index){
-						this.getDetail(index)
+						// this.getDetail(index)
 					}else{
 						this.getworkspace()
 					}
@@ -558,15 +552,28 @@ export default defineComponent({
 			// this.workspaceItem.mannequinId = item.id
 			// this.workspaceItem.mannequinType = str
 			// this.workspaceItem.mannequinUrl = item.presignedUrl
+			let id
+			console.log(id , item.id);
+			
 			if(this.workspaceItem.sexEnum.name == 'Female'){
+				id = this.workspaceItem.mannequinFemaleId
 				this.workspaceItem.femalePresignedUrl = item.presignedUrl
 				this.workspaceItem.mannequinFemaleType  = str
 				this.workspaceItem.mannequinFemaleId = item.id
 			}else if(this.workspaceItem.sexEnum.name == 'Male'){
+				id = this.workspaceItem.mannequinMaleId
 				this.workspaceItem.malePresignedUrl = item.presignedUrl
 				this.workspaceItem.mannequinMaleType  = str
 				this.workspaceItem.mannequinMaleId = item.id
 			}
+			if(id != item.id){
+				if(this.driver__.driver){
+					this.openType.habit = false
+					nextTick().then(()=>{
+						driverObj__.moveNext();
+					})
+				}
+			}
 			this.workspaceItem.mannequinUrl = item.presignedUrl
 			this.workspaceItem.mannequinType = str
 			this.workspaceItem.mannequinId = item.id
@@ -586,6 +593,13 @@ export default defineComponent({
 		setOpenType(v:string){
 			if(v == 'habit'){
 				this.openType.habit = !this.openType.habit
+				if(this.driver__.driver){
+					nextTick().then(()=>{
+						// driverObj__.moveNext();
+						driverObj__.moveTo(28);
+
+					})
+				}
 			}else if(v == 'workspace'){
 				this.openType.singleton = false
 				this.openType.sex = false
@@ -599,6 +613,11 @@ export default defineComponent({
 				this.openType.sex = false
 				this.openType.model = !this.openType.model
 				this.getMannequins()
+				if(this.driver__.driver){
+					nextTick().then(()=>{
+						driverObj__.moveNext();
+					})
+				}
 			}else if(v == 'singleton'){
 				this.openType.singleton = !this.openType.singleton
 				this.openType.workspace = false
@@ -607,6 +626,7 @@ export default defineComponent({
 				this.openType.sex = !this.openType.sex
 				this.openType.workspace = false
 				this.openType.singleton = false
+				
 			}
 			let mask = document.getElementsByClassName("habit_mask")[0]
 			mask.addEventListener("click", this.documentClick,true);
@@ -682,6 +702,7 @@ export default defineComponent({
 		transition: all .3s;
         transform: scale(0.75)translateY(10%);
 		display: none;
+		overflow: inherit !important;
 		&.active{
 			opacity: 1;
 			transform: scale(0.75)translateY(0%);

src/component/HomePage/ColorboardUpload.vue

@@ -767,10 +767,12 @@ export default defineComponent({
 								flex-direction: row-reverse;
 								.vc-chrome-color-wrap{
 									// width: 3.6rem;
+									margin-left: 2rem;
 									width: auto;
 									.vc-chrome-active-color,.vc-checkerboard{
 										width: 3rem;
 										height: 3rem;
+										border-radius: 50%;
 									}
 								}
 								.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{

src/component/HomePage/Cropper.vue

@@ -6,6 +6,7 @@
         :maskClosable="false"
         :centered="true"
 		:closable="false"
+		:keyboard="false"
 		:zIndex="999999"
 		:mask="false"
     >
@@ -163,8 +164,8 @@ export default defineComponent({
 }
 .cut_pricture_modal{
 	.ant-modal-content{
-		transform: scale(1.2);
+		// transform: scale(1.2);
-		transform-origin: center !important;
+		// transform-origin: center !important;
 	}
 	*{
 		pointer-events: auto;

src/component/HomePage/Header.vue

@@ -87,6 +87,7 @@
             title="Mailbox binding"
             width="56rem"
             :maskClosable="false"
+			:keyboard="false"
             :centered="true"
         >
             <template #closeIcon v-if="!isHaveBindEmail && bindEmailStep === 1">

src/component/HomePage/MoodboardUpload.vue

@@ -109,7 +109,7 @@
             ></Generate>
         </div>
         <div v-show="moodboarList.length" class="modal_right">
-			<div class="modal_layout Guide_1_7">
+			<div class="modal_layout Guide_1_7" :class="[driver__.driver?'showEvents':'']">
 				<div class="modal_text">
 					<div>
 						{{ $t('MoodboardUpload.Thumbnail') }}
@@ -268,6 +268,8 @@ export default defineComponent({
 		},
 		driver__:{
 			handler(newVal,oldVal){
+				console.log(newVal,'======');
+				
 				if(newVal.index >= 1 && newVal.index <= 2){
 					this.open(newVal.index)
 				}else{

src/component/HomePage/PrintboardUpload.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="printboard_upload_modal">
+    <div class="printboard_upload_modal" :class="[driver__.driver?'showEvents':'']">
 		
         <div class="printboard_left_upload">
             <div class="left_upload_header">

src/component/HomePage/SketchboardUpload.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="sketchboard_upload_modal">
         <div class="modal_left">
-            <div class="switch_type_list">
+            <div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
                 <div
                     @click.stop="open(1)"
                     class="switch_type_item"

src/component/HomePage/collectionModal.vue

@@ -8,6 +8,7 @@
             :centered="true"
 			:closable="false"
 			wrapClassName="#app"
+			:keyboard="false"
         >
             <div class="collection_title">
 				<div class="collection_title_text">
@@ -85,6 +86,8 @@ export default defineComponent({
 		const store = useStore()
 		let {t} = useI18n()
 		let driver__:any = computed(()=>{
+			console.log(123);
+			
 			return store.state.Guide.guide
 		})
 		provide('driver__',driver__)

src/component/HomePage/layout.vue

@@ -8,6 +8,7 @@
             :maskClosable="false"
             :centered="true"
             :closable="false"
+			:keyboard="false"
             :mask="false"
 			:destroyOnClose="true"
         >
@@ -627,8 +628,8 @@ export default defineComponent({
     -khtml-user-select: none;
     user-select: none;
 	.ant-modal-content{
-		transform: scale(1.2);
+		// transform: scale(1.2);
-		transform-origin: center !important;
+		// transform-origin: center !important;
 	}
 	// max-width: 1150px;
     .ant-modal-body {

src/component/HomePage/layoutMobile.vue

@@ -9,6 +9,7 @@
             :centered="true"
             :closable="false"
             :mask="false"
+			:keyboard="false"
 			:destroyOnClose="true"
         >
             <div class="layout_content">
@@ -659,8 +660,8 @@ export default defineComponent({
     -khtml-user-select: none;
     user-select: none;
 	.ant-modal-content{
-		transform: scale(1.2);
+		// transform: scale(1.2);
-		transform-origin: center !important;
+		// transform-origin: center !important;
 	}
 	// max-width: 1150px;
     .ant-modal-body {

src/component/HomePage/scaleImage.vue

@@ -8,6 +8,7 @@
             :centered="true"
             :closable="false"
             :mask="false"
+			:keyboard="false"
 			:destroyOnClose="true"
         >
 		<div class="scaleImage_btn">

src/component/LibraryPage/ModelPlacement.vue

@@ -1,10 +1,11 @@
 <template>
-    <div  v-show="placementShow">
+    <div  v-if="placementShow">
         <a-modal class="models_placement_component" 
             v-model:visible="placementShow" 
             :footer="null" 
             width="111.5rem"
             :maskClosable="false"
+			:keyboard="false"
             :centered="true"
         >
             <template #closeIcon>
@@ -93,6 +94,7 @@
 								</div>
 							</div>
 							<vue-cropper
+								v-show="!perviewUrl"
 								ref="cropper"
 								:img="option.img"
 								:outputSize="option.outputSize"
@@ -118,7 +120,7 @@
 								:autoCropWidth="option.autoCropWidth"
 								:mode="option.mode">
 							</vue-cropper>
-                            <!-- <img class="placement_img" :src="perviewUrl || printObject?.url"> -->
+                            <img class="placement_img" v-show="perviewUrl" :src="perviewUrl || printObject?.url">
                            
                         </div>
                         

src/component/LibraryPage/ModelPlacementMobile.vue

@@ -1,10 +1,11 @@
 <template>
-    <div  v-show="placementShow">
+    <div  v-if="placementShow">
-        <a-modal class="models_placement_mobile_component" 
+        <a-modal class="models_placement_component" 
             v-model:visible="placementShow" 
             :footer="null" 
             width="111.5rem"
             :maskClosable="false"
+			:keyboard="false"
             :centered="true"
         >
             <template #closeIcon>
@@ -12,55 +13,115 @@
             </template>
             <div class="models_placement_body" >
                 <div class="palcement_modal_header">
-                    <div class="models_placement_title">{{ $t('ModelPlacementMobile.Registration') }}</div>
+                    <div class="models_placement_title">{{ $t('ModelPlacement.Registration') }}</div>
                     <div class="placement_operate_list">
                         <div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
                             <div class="icon iconfont icon-baocun1 operate_icon"></div>
-                            <div class="operate_item_des">{{ $t('ModelPlacementMobile.Submit') }}</div>
+                            <div class="operate_item_des">{{ $t('ModelPlacement.Submit') }}</div>
                         </div>
                         <div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
                             <div class="icon iconfont icon-shengchengyulan operate_icon"></div>
-                            <div class="operate_item_des">{{ $t('ModelPlacementMobile.Preview') }}</div>
+                            <div class="operate_item_des">{{ $t('ModelPlacement.Preview') }}</div>
                         </div>
                         <div class="operate_item" v-show="perviewUrl" @click="backPreview">
                             <div class="icon iconfont icon-fanhui1 operate_icon"></div>
-                            <div class="operate_item_des">{{ $t('ModelPlacementMobile.Back') }}</div>
+                            <div class="operate_item_des">{{ $t('ModelPlacement.Back') }}</div>
                         </div>
                         <div class="operate_item" @click="restoreLocationList">
                             <div class="icon iconfont icon-huifu operate_icon"></div>
-                            <div class="operate_item_des">{{ $t('ModelPlacementMobile.Restore') }}</div>
+                            <div class="operate_item_des">{{ $t('ModelPlacement.Restore') }}</div>
                         </div>
                     </div>
                 </div>
-                <div class="models_placement_content" @touchmove="startMove($event)">
+				<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
-                    <div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
+					<div style="display: flex;   align-items: center;">
-                        <div class="placement_point_item" v-for="(point,index) in pointList" :key="index"  >
+						<div style="display: flex;   align-items: center;">
+							<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
+							{{ $t('ModelPlacement.System') }}
+						</div>
+						<div style="display: flex;   align-items: center;">
+							<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
+							{{ $t('ModelPlacement.Library') }}
+						</div>
+					</div>
+				</div>
+                <div class="models_placement_content">
+                    <div class="plcaement_point_content">
+						<div class="select_block">
+							<a-select
+								ref="select"
+								v-model:value="sex"
+								:options="sexList"
+							>
+								<template #suffixIcon
+									><span
+										class="icon iconfont icon-xiala"
+										style="color: #343579"
+									></span
+								></template>
+							</a-select>
+						</div>
+                        <div class="placement_point_item" v-for="(point,index) in pointList" :key="index"   @touchmove="startMove($event)">
                             <div class="ponit_title">{{point.title}}</div>
                             <div class="point_list">
                                 <div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
                             </div>
                         </div>
+						<div class="placement_point_item placement_point_item_btn">
+							<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
+						</div>
                     </div>
-
+					
                     <div class="placement_content_operate_list">
                         <div class="placement_content_operate_item" @click="changeRemoveStatus">
                             <div class="placement_remove_point_block"></div>
-                            <div class="placement_content_operate_des">Remove Point</div>
+                            <div class="placement_content_operate_des">{{ $t('ModelPlacement.RemovePoint') }}</div>
                         </div>
                     </div>
 
-                    <div class="placement_tip_content">Please change the pure white inside the mannequin for another color to enhance your experience</div>
+                    <div class="placement_tip_content">{{ $t('ModelPlacement.mannequinHint') }}</div>
 
                     <div class="img_preview_block"  >
                         <div class="perview_mark_loading" v-show="isShowMark">
                             <a-spin size="large" />
                         </div>
                         <div class="img_content_block" ref="imgbox">
-                            <img class="placement_img" :src="perviewUrl || printObject?.url">
+							
-                            <div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @touchstart="getMouseDown($event,item,index)"  @touchmove="startMove($event)">
+							<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
-                                <div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
+								<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @touchstart="getMouseDown($event,item,index)"  @touchmove="startMove($event)">
-                                <div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
+									<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
-                            </div>
+									<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
+								</div>
+							</div>
+							<vue-cropper
+								v-show="!perviewUrl"
+								ref="cropper"
+								:img="option.img"
+								:outputSize="option.outputSize"
+								:outputType="option.outputType"
+								:info="option.info"
+								:canScale="option.canScale"
+								:autoCrop="option.autoCrop"
+								:fixed="option.fixed"
+								:fixedNumber="option.fixedNumber"
+								:full="option.full"
+								:fixedBox="option.fixedBox"
+								:canMove="option.canMove"
+								:canMoveBox="option.canMoveBox"
+								:original="option.original"
+								:centerBox="option.centerBox"
+								:height="option.height"
+								:infoTrue="option.infoTrue"
+								:limitMinSize="option.limitMinSize"
+								:enlarge="option.enlarge"
+								@real-time="realTime"
+								:autoCropArea="1"
+								:autoCropHeight="option.autoCropHeight"
+								:autoCropWidth="option.autoCropWidth"
+								:mode="option.mode">
+							</vue-cropper>
+                            <img class="placement_img" v-show="perviewUrl" :src="perviewUrl || printObject?.url">
+                           
                         </div>
                         
                     </div>
@@ -71,13 +132,20 @@
     
 </template>
 <script lang="ts">
-import { defineComponent,ref,createVNode} from 'vue'
+import { defineComponent,ref,createVNode,nextTick} from 'vue'
 import { Https } from "@/tool/https";
-import { useStore } from "vuex";
+import {dataURLtoFile,base64toFile} from "@/tool/util"
 import { getCookie } from "@/tool/cookie";
+import 'vue-cropper/dist/index.css'
+import { VueCropper }  from "vue-cropper";
+import { useStore } from "vuex";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useI18n } from 'vue-i18n';
 export default defineComponent({
+	components:{
+        VueCropper,
+    },
     setup() {
         const store = useStore()
         let oldLocationList:any = ref([])
@@ -91,6 +159,33 @@ export default defineComponent({
         let isSubmit:any = ref(false) //判断历史是否有提交过
 		let manager:any = ref(false)
 		let userInfo:any = ref()
+
+		let cropperTime:any = ref()
+		let option:any = ref({
+			img: '',             //裁剪图片的地址
+			outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
+			outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
+			info: false,          //图片大小信息
+			canScale: true,      //图片是否允许滚轮缩放
+			autoCrop: true,      //是否默认生成截图框
+			autoCropWidth: '0',  //默认生成截图框宽度
+			autoCropHeight: '0', //默认生成截图框高度
+			fixed: true,         //是否开启截图框宽高固定比例
+			fixedBox: true,      //固定截图框大小，不允许改变
+			fixedNumber: [1, 2.125], //截图框的宽高比例
+			full: false,         //false按原比例裁切图片，不失真
+			canMove: true,      //上传图片是否可以移动
+			canMoveBox: false,    //截图框能否拖动
+			original: false,     //上传图片按照原始比例渲染
+			centerBox: false,    //截图框是否被限制在图片里面
+			height: true,        //是否按照设备的dpr 输出等比例图片
+			infoTrue: true,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
+			maxImgSize:'2000',    //限制图片最大宽度和高度
+			enlarge: 7,          //图片根据截图框输出比例倍数
+			mode: 'auto 90%',  //图片默认渲染方式
+			limitMinSize:'100%'
+		})
+		let {t} = useI18n()
         return {
             store,
             oldLocationList,
@@ -103,7 +198,11 @@ export default defineComponent({
             pointList,
             isSubmit,
 			manager,
-			userInfo
+			userInfo,
+
+			cropperTime,
+			option,
+			t
         }
     },
     data(){
@@ -120,7 +219,7 @@ export default defineComponent({
 			sex:'Male',
 			sexList: [
                
-            ]
+            ],
         }
     }, 
 	mounted(){
@@ -128,94 +227,202 @@ export default defineComponent({
         this.userInfo = JSON.parse(userInfo);
 		this.getSex()
 	},
+	watch: {
+		sex:{
+			handler(newVal:any,oldVal:any){
+				// let imgbox:any = this.$refs.imgbox
+				// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
+				// if(imgBoxSizeBG){
+				// 	if(newVal == 'Male'){
+				// 		imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
+				// 	}else{
+				// 		imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
+				// 	}
+				// }
+
+			},
+		},
+	},
     methods:{
         formatter(value:number){
             return `${value}%`;
         },
-
         showPlacementModal(data:any){
+			
             this.placementShow = true
             this.printObject = {
                 ...data
             }
+			this.option.img = this.printObject.url
+			
             setTimeout(()=>{
-                let imgbox:any = this.$refs.imgbox
+				nextTick().then(()=>{
-                let position = imgbox.getBoundingClientRect()
+					let image:any = new Image()
-                this.imgBox = {
+					image.src = this.option.img
-                    width:imgbox.clientWidth,
+					let imgbox:any = this.$refs.imgbox
-                    height:imgbox.scrollHeight,
+					let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
-                    left : position.left,
+					let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
-                    top:position.top,
+					let divTop:any = document.createElement('div');
-                    scrollTop:imgbox.scrollTop || 0,
+					let divBottom:any = document.createElement('div');
-                }
+					let divCenter:any = document.createElement('div');
-                this.getDefaultPointList(this.imgBox)
+					if(imgbox.getElementsByClassName('cropper-view-box-Bg').length >= 1){
-            },400)
+					}else{
+						divTop.classList.add('cropper-view-box-Bg')
+						divBottom.classList.add('cropper-view-box-Bg')
+						divCenter.classList.add('cropper-view-box-Bg')
+						divTop.classList.add('cropper-view-box-Top')
+						divBottom.classList.add('cropper-view-box-Bottom')
+						divCenter.classList.add('cropper-view-box-Center')
+
+						imgBoxSizeBG.appendChild(divTop)
+						imgBoxSizeBG.appendChild(divBottom)
+						imgBoxSizeBG.appendChild(divCenter)
+						// imgBoxSizeBG.appendChild(div)
+
+					}
+					// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
+
+					let cropper:any = this.$refs.cropper
+					cropper.cropH = cropper.scale*cropper.trueHeight
+					cropper.cropW = cropper.cropH/2.125
+					cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
+					cropper.cropOffsertY = cropper.getImgAxis().y1
+					imgBoxSize.addEventListener('touchmove',this.startMove)
+					this.setImageSize()
+					this.getDefaultPointList(this.imgBox,' ')
+					
+				})
+				
+            },800)
         },
+		realTime(data:any) {
+			clearTimeout(this.cropperTime)
+			this.cropperTime = setTimeout(()=>{
+				this.setImageSize()
+			},1000)
+			
+        },
+		setImageSize(){
+			let imgbox:any = this.$refs.imgbox
+			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
+			let position = imgBoxSize.getBoundingClientRect()
+			let position1 = imgbox.getBoundingClientRect()
+			let cropper:any = this.$refs.cropper
+			this.imgBox = {
+				width:cropper.cropW,
+				height:cropper.cropH,
+				left : position.left,
+				top:position.top,
+				scrollTop:imgBoxSize.scrollTop || 0,
+				x:cropper.getCropAxis().x1,
+				y:cropper.getCropAxis().y1,
+			}
+		},
 		getSex(){
 			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
 				if (rv) {
 					let arr:any = []
 					rv.forEach((item:any) => {
-						let obj = {
+						arr.push({
 							value:item.name,
 							label:item.value,
-						}
+						})						
-						arr.push(obj)						
 					});
 					this.sex = arr[0].value
 					this.sexList = arr
-					console.log(this.sexList);
-					
 				}
 			})
 		},
+		//截屏框移动
+		setMove(){
+			
+		},
         //初始化可以使用的点位
-        getDefaultPointList(imgBox:any){
+        getDefaultPointList(imgBox:any,str:any){
             this.isSubmit = false
+			this.locationList=[]
             this.pointList = [
                 {
-                    title:'SHOULDER',
+                    title:this.t('ModelPlacement.SHOULDER'),
                     pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
                 },
                 {
-                    title:'WAISTBAND',
+                    title:this.t('ModelPlacement.WAISTBAND'),
                     pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
                 },
                 {
-                    title:'HAND',
+                    title:this.t('ModelPlacement.HAND'),
-                    pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
+                    pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
                 },
             ]
-            if(this.printObject.templateId){//编辑
+			for(let ponit of this.pointList){
+				for(let pointItem of ponit.pointList){
+					if(this.printObject[pointItem.type]?.length){
+						pointItem.show = false
+						let data = {
+							left:this.printObject[pointItem.type][0] * imgBox.width - 12,
+							top:this.printObject[pointItem.type][1] * imgBox.height - 12,
+							color:pointItem.color,
+							type:pointItem.type,
+							field:pointItem.field,
+						}
+						this.locationList.push(data)
+					}
+				}
+			}
+            if(str != 'setPoint'){//编辑
                 this.isSubmit = true
-                for(let ponit of this.pointList){
+				// this.option.canScale = false
-                    for(let pointItem of ponit.pointList){
+				// this.option.canMove = false
-                        if(this.printObject[pointItem.type]?.length){
-                            pointItem.show = false
-                            let data = {
-                                left:this.printObject[pointItem.type][0] * imgBox.width - 12,
-                                top:this.printObject[pointItem.type][1] * imgBox.height - 12,
-                                color:pointItem.color,
-                                type:pointItem.type,
-                                field:pointItem.field,
-                            }
-                            this.locationList.push(data)
-                        }
-                    }
-                }
-                this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
-
-            }
             
-            this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
+                this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
+				this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
+            }else{
+				this.option.canScale = true
+				// this.option.fixedBox = false
+				this.option.canMove = true
+				// this.option.canMoveBox = true
+			}
+           
         },
-
+		setPoint(){
-
+			let file = this.printObject.file
+			let url = this.printObject.url
+			this.printObject = {
+				"shoulderLeft": [
+					0.3338,
+					0.1858
+				],
+				"shoulderRight": [
+					0.6644,
+					0.1858
+				],
+				"waistbandLeft": [
+					0.3758,
+					0.364
+				],
+				"waistbandRight": [
+					0.6103,
+					0.364
+				],
+				"handLeft": [
+					0.3277,
+					0.4687
+				],
+				"handRight": [
+					0.6764,
+					0.4715
+				],
+				file:file,
+				url:url
+			}
+			this.getDefaultPointList(this.imgBox,'setPoint')
+		},
         AddDian(point:any){
             if(!point.show){
                 return
             }
-            this.startDian = true
+            this.startDian = true 
             this.isRemoveStatus = false
             this.intObj = point
         },
@@ -225,14 +432,14 @@ export default defineComponent({
         },
 
         startMove(event:any){
-            if(this.isRemoveStatus){
+			if(this.isRemoveStatus){
                 return
             }
             let imgbox:any = this.$refs.imgbox
             let scrollTop = imgbox.scrollTop;
             if(event.targetTouches[0].pageX > this.imgBox.left){
                 if(this.intObj){
-                    this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left
+					this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left
                     this.currentSign.top =  event.targetTouches[0].pageY + scrollTop - this.imgBox.top
                     this.currentSign.color = this.intObj.color
                     this.currentSign.type= this.intObj.type
@@ -242,8 +449,8 @@ export default defineComponent({
                     this.intObj = null
                 }else{
                     if(this.startDian){
-                        this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left - this.moveOriginal.posX
+                        this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left -12
-                        this.currentSign.top =  event.targetTouches[0].pageY + scrollTop - this.imgBox.top -this.moveOriginal.posY
+                        this.currentSign.top =  event.targetTouches[0].pageY + scrollTop - this.imgBox.top -12
                         document.addEventListener('touchend', this.getMouseOver);
                         this.$forceUpdate()
                         this.setBoundarySign()
@@ -257,27 +464,32 @@ export default defineComponent({
          // 在边界上的签名域处理
          setBoundarySign() {
             let imgbox:any = this.$refs.imgbox
-            let height = imgbox.offsetHeight + imgbox.scrollTop;
+			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
+			let top = (this.$refs.cropper as any).getCropAxis().y1
+			let left = (this.$refs.cropper as any).getCropAxis().x1
+            let height = imgBoxSize.offsetHeight;
+            // let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
             // 2 为签名域的边框
             let maxPosHeight = height - 24
-            let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
+            let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
-            if (this.currentSign.top <= 0) {
+            if (this.currentSign.top+top <= 0) {
                 this.currentSign.top = 0
-            } else if (this.currentSign.top >= maxPosHeight ) {
+            } else if (this.currentSign.top >= maxPosHeight+top ) {
-                this.currentSign.top = maxPosHeight;
+                this.currentSign.top = maxPosHeight+top;
             }
-            if (this.currentSign.left <= 0) {
+            if (this.currentSign.left+left <= 0) {
                 this.currentSign.left = 0
-            } else if (this.currentSign.left >= maxPosWidth) {
+            } else if (this.currentSign.left >= maxPosWidth+left) {
-                this.currentSign.left = maxPosWidth;
+                this.currentSign.left = maxPosWidth+left;
             }
         },
 
         getMouseDown(event:any,item:any,index:number){
             if(this.isRemoveStatus){
+				//删除
                 for(let itemPoint of this.pointList){
                     for(let point of itemPoint.pointList){
-                        if(item.id == point.id){
+                        if(item.type == point.type){
                             point.show = true
                             break
                         }
@@ -287,14 +499,16 @@ export default defineComponent({
             }else{
                 this.currentSign = item
                 // 计算出鼠标在签名域上的偏移
-                this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
+                // this.moveOriginal.posX = event.offsetX
+                // this.moveOriginal.posY = event.offsetY // 1为边框
+				this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
                 this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框
                 this.startDian = true
             }
             
         },
      
-        getMouseOver(){
+        getMouseOver(){//鼠标抬起
             this.startDian = false
             this.currentSign = {}
             document.removeEventListener('touchend', this.getMouseOver);
@@ -304,7 +518,7 @@ export default defineComponent({
             let _this = this
             if(!this.isSubmit){
                 Modal.confirm({
-                    title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
+                    title: this.t('ModelPlacement.jsContent1'),
                     icon: createVNode(ExclamationCircleOutlined),
                     okText: 'Yes',
                     cancelText: 'No',
@@ -318,6 +532,7 @@ export default defineComponent({
                         _this.currentSign = {}
                         _this.isRemoveStatus = false
                         _this.placementShow = false
+                        _this.perviewUrl = ''
                     }
                 });
             }else{
@@ -328,31 +543,65 @@ export default defineComponent({
                 _this.currentSign = {}
                 _this.isRemoveStatus = false
                 _this.placementShow = false
+                _this.perviewUrl = ''
             }
         },
 
         restoreLocationList(){
+			this.locationList = []
             this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
             this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
         },
 
         submitPlacement(){
-            if(this.printObject.templateId){
+			// let cropper:any = this.$refs.cropper,
-                this.printObject.id = this.printObject.libraryId
+            //     that = this
-                this.confrimSubmit()
+				
-            }else{
+            // cropper.getCropData((data:any) => {
-                this.customRequest().then((rv:any)=>{
+            // // 转换为File对象
-                    this.isShowMark = false
+            //     let file = base64toFile(data,this.cropperFileData.name);
-                    this.printObject.id = rv.id
+            //     this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
-                    this.confrimSubmit()
+            // })
-                }).catch((res:any)=>{
+			let cropper:any = this.$refs.cropper,
-                    this.isShowMark = false
+                that = this
-                })
+			if(this.modelType == 'System' && this.userInfo.userId == 88 || this.userInfo.userId == 83){
-            }
+				if(this.printObject.templateId){
-
+					this.printObject.id = this.printObject.relationId
+					this.confrimSubmit()
+				}else{
+					this.customRequest().then((rv:any)=>{
+						this.isShowMark = false
+						this.printObject.id = rv.id
+						this.confrimSubmit()
+					}).catch((res:any)=>{
+						this.isShowMark = false
+					})
+				}
+			}else{
+				cropper.getCropData(async (value:any) => {
+				// 转换为File对象
+					if(this.printObject.templateId){
+						this.printObject.id = this.printObject.relationId
+						this.confrimSubmit()
+					}else{
+						let file:any = base64toFile(value,this.printObject.file.name);
+						file.uid = this.printObject.file.uid
+						this.printObject.file = file
+						this.customRequest().then((rv:any)=>{
+							this.isShowMark = false
+							this.printObject.id = rv.id
+							this.confrimSubmit()
+						}).catch((res:any)=>{
+							this.isShowMark = false
+						})
+					}
+				})
+			}
+           
         },
 
         confrimSubmit(){
+			
             let param = {
                 libraryId:this.printObject.id,
                 templateId:this.printObject.templateId || null,
@@ -364,6 +613,7 @@ export default defineComponent({
 			if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
 				param.modelType = this.modelType
 			}
+			
             this.isShowMark = true
             Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
                 (rv: any) => {
@@ -380,22 +630,21 @@ export default defineComponent({
         customRequest(){
             let new_data = {
                 file:this.printObject.file,
-				checkMd5:1,
                 level1Type:'Models',
-				sex:this.sex,
-				modelType:'',
                 level2Type:'',
+				checkMd5:1,
+				sex:this.sex,
+				modelType:'Library',
                 timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
             }
-            this.isShowMark = true
 			if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
 				new_data.modelType = this.modelType
 				new_data.sex = this.sex
 			}
+            this.isShowMark = true
             return new Promise((resolve,reject)=>{
                 Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
                     (rv: any) => {
-                        // resolve(rv)
 						if(!rv.checkMd5){
 							resolve(this.affirmCstomRequest(new_data))
 						}else{
@@ -406,12 +655,13 @@ export default defineComponent({
                     reject(res)
                 });
             })
+            
         },
 		affirmCstomRequest(data:any){
 			let _this = this
 			return new Promise((resolve,reject)=>{
 				Modal.confirm({
-					title: 'This picture has been uploaded whether to continue uploading？ ',
+					title: this.t('ModelPlacement.jsContent2'),
 					icon: createVNode(ExclamationCircleOutlined),
 					okText: 'Yes',
 					cancelText: 'No',
@@ -434,7 +684,6 @@ export default defineComponent({
 				});
 			})
 		},
-
         getPrintLocation(){
             let {width , height} = this.imgBox
             let locationData:any = {}
@@ -464,31 +713,28 @@ export default defineComponent({
         },
 
         printPreview(){
-            // this.printObject.scale = this.placement_sacle / 100
+            let file = this.printObject.templateId ? null :this.printObject.file,
-            // this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() : []
+                models = {
-            // let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+                    libraryId:this.printObject.libraryId || null,
-            // designItemDetail.clothes[this.collectionIndex] = this.clothesData
+                    templateId:this.printObject.templateId || null,
-            // delete designItemDetail.designItemUrl
+                    timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            // let priority = designItemDetail.clothes.map((v:any)=>{
+                    ...this.getPrintLocation()
-            //     return v.type
+                }
-            // })
+            let formData = new FormData();
-            // let data = {
+                formData.append('file', file);
-            //     ...designItemDetail,
+                formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
-            //     priority:priority,
+            if(this.isShowMark){
-            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+                return
-            // }
+            }
-            // if(this.isShowMark){
+            this.isShowMark = true
-            //     return
+            Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
-            // }
+                (rv: any) => {
-            // this.isShowMark = true
+                    this.perviewUrl = rv
-            // Https.axiosPost(Https.httpUrls.detailPrintDot, data).then(
+                    this.isShowMark = false
-            //     (rv: any) => {
+                }
-            //         this.perviewUrl = rv
+            ).catch(res=>{
-            //         this.isShowMark = false
+                this.isShowMark = false
-            //     }
+            });
-            // ).catch(res=>{
-            //     this.isShowMark = false
-            // });
         },
 
         backPreview(){
@@ -498,7 +744,7 @@ export default defineComponent({
 })
 </script>
 <style lang="less">
-.models_placement_mobile_component{
+.models_placement_component{
 
     .ant-modal-close{
         width: 3.6rem;
@@ -596,7 +842,39 @@ export default defineComponent({
                 left: 0;
                 top:18.4rem;
                 padding: 3rem 2.7rem 0 1.4rem;
-
+				.select_block{
+					// background: #FFFFFF;
+					overflow: hidden;
+                    margin-bottom: 3rem;
+					color: #1A1A1A !important;
+					.ant-select{
+						width: 100%;
+						.ant-select-selector{
+							padding: 0;
+							width: 100%;
+							margin: 0;
+							background: rgba(0, 0, 0, 0);
+							font-size: 1.3rem;
+							color: #64686D;
+							-webkit-user-select: none;
+							-moz-user-select: none;
+							user-select: none;
+							height: 3rem;
+							.ant-select-selection-item, .select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
+								font-weight: 300 !important;
+								line-height: 1.5715 !important;
+								width: 100%;
+								display: block;
+								position: relative;
+								padding: 0;
+							}
+							
+						}
+					}
+					.icon-xiala{
+						color: #1A1A1A !important;
+					}
+				}
                 .placement_point_item{
                     display: flex;
                     justify-content: space-between;
@@ -639,6 +917,13 @@ export default defineComponent({
                             }
                         }
                     }
+					&.placement_point_item_btn{
+						display: flex;
+						justify-content: center;
+						.started_btn{
+						}
+					}
+					
                 }
             }
 
@@ -709,7 +994,7 @@ export default defineComponent({
                 user-select:none;
                 -moz-user-select:none;
                 position: relative;
-
+				height: 57.6rem;
                 .img_content_block{
                     width: 40.8rem;
                     height: 100%;
@@ -720,6 +1005,34 @@ export default defineComponent({
                     position: relative;
 
                     &::-webkit-scrollbar { width: 0 !important }
+					.cropper-view-box-Bg{
+						width: 100%;
+						position: absolute;
+					}
+					.cropper-view-box-Top{
+						// border-top: 1px dashed;
+						/*虚线2 css*/
+						background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
+						height: 1rem;
+						opacity: .4;
+						top: 6%;
+					}
+					.cropper-view-box-Bottom{
+						bottom: 6%;
+						// border-top: 1px dashed;
+						height: 1rem;
+						opacity: .4;
+						background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
+					}
+					.cropper-view-box-Center{
+						// border-left: 1px dashed;
+						left: 50%;
+						opacity: .4;
+						background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
+						top: 0;
+						width: 1rem;
+						height: 100%;
+					}
                 }
 
                 .perview_mark_loading{
@@ -755,7 +1068,7 @@ export default defineComponent({
                     -o-user-select:none; /* Opera私有属性 */
                     user-select:none; /* CSS3属性 */
                     cursor: pointer;
-
+					z-index: 22;
                     &.remove_point_click{
                         border-color: transparent;
                         background: #EF3C3C;

src/component/LibraryPage/setLabel.vue

@@ -5,6 +5,7 @@
 		title="Edit tag"
 		width="65%"
 		:maskClosable="false"
+			:keyboard="false"
 		:centered="true"
 		@cancel="clearSetLabel"
 	>

src/tool/guide.js

@@ -11,7 +11,7 @@ let data = {
 }
 const driverObj__ = driver({
 	steps: [
-		{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_1', popover: { title: 'Title', description: 'Description' } },
 		{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
 		{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
 		{ element: '.Guide_1_4', popover: { title: 'Title', description: 'Description' } },
@@ -31,8 +31,18 @@ const driverObj__ = driver({
 		{ element: '.Guide_1_17', popover: { title: 'Title', description: 'Description' } },
 		{ element: '.Guide_1_18', popover: { title: 'Title', description: 'Description' } },
 		{ element: '.Guide_1_19', popover: { title: 'Title', description: 'Description' } },
-		// { element: '.Guide_1_20', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_20', popover: { title: 'Title', description: 'Description' } },
-
+		{ element: '.Guide_1_21', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_22', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_23', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_24', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_25', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_26', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_27', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_28', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_29', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_30', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_16', popover: { title: 'Title', description: 'Description' } },
 	  ],
 	  // showProgress: true,//控制总页数和当前页数是否显示
 	allowClose:false,
@@ -42,26 +52,34 @@ const driverObj__ = driver({
 	allowKeyboardControl:true,//控制是否可以键盘控制下一步
 	disableActiveInteraction:false,//是否禁用显示元素的交互
 	overlayOpacity:.4,
+	allowKeyboardControl:false,
 	overlay: true,
 	onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
-		console.log(popover,options);	
+		// console.log(popover,options);	
 		if(element){
 			element.classList.remove('Guide_')
 		}
 		popover.previousButton.style.display = 'none'
+		let driver = document.getElementsByClassName('driver-active')[0]
 		if(
 			options.state.activeIndex >= 1 && options.state.activeIndex <= 2 || 
-			options.state.activeIndex >= 18 && options.state.activeIndex <= 19
+			options.state.activeIndex >= 18 && options.state.activeIndex < 19 || 
+			options.state.activeIndex >= 24 && options.state.activeIndex < 25
 		){
 			popover.footer.style.display = 'block'
+			driver.classList.add('showEvents')
 			addDiv(options.state.activeElement)
 		}else{
 			popover.footer.style.display = 'none'
 			removeDiv(options.state.activeElement)
+			driver.classList.remove('showEvents')
 		}
 		// console.log(options.state.activeIndex);
 		driverIndex__ = driverObj__.getState().activeIndex
-		data.index = driverIndex__
+		data = {
+			index : driverIndex__,
+			driver : true,
+		}
 		store?.commit("setGuide", data);
 		element = options.state.activeElement
 		element.classList.add('Guide_')
@@ -69,7 +87,7 @@ const driverObj__ = driver({
 	},
 	//销毁前
 	onDestroyStarted:()=>{
-		// data.driver = false
+		data.driver = false
 		store?.commit("setGuide", data);
 		driverObj__.destroy();//销毁方法
 	},
@@ -119,12 +137,12 @@ function removeDiv(element){
 	}
 }
 const openGuide = () =>{
-	// driverObj__.drive();
+	driverObj__.drive();
 	store = useStore()
 	// driverObj__.moveTo(18);
 	let data = {
 		index:driverIndex__,
-		// driver:true,
+		driver:true,
 	}
 	store?.commit("setGuide", data);
 	// driverObj__.moveNext();

src/views/HistoryPage.vue

@@ -50,6 +50,7 @@
             v-model:visible="renameVisivle" 
             :footer="null" 
             :title="renameData?.name"
+			:keyboard="false"
             width="56rem"
             :maskClosable="false"
             :centered="true"

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="home_page .Guide_1_16">
+	<div class="home_page Guide_1_16">
 		<HeaderComponent></HeaderComponent>
 		<div class="page_content">
 			<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
@@ -14,7 +14,7 @@
                                         class="home_null_icon"
                                         src="@/assets/images/homePage/null_img.png"
                                     /> -->
-									<div id="Guide_1_1" class="new_collection_button" @click="startNewCollection()">
+									<div id="Guide_1_1" class="new_collection_button Guide_1_1" @click="startNewCollection()">
 										{{ $t('HomeView.GetStarted') }}
 									</div>
 								</div>
@@ -52,7 +52,7 @@
 								<div class="button_second Guide_1_15" @click="designNewCollection()">
 									{{ $t('HomeView.Design') }}
 								</div>
-								<div class="button_first button_margin_14" v-show="designCollectionId"
+								<div class="button_first button_margin_14 Guide_1_30" v-show="designCollectionId"
 									@click="resDesignCollection()">
 									{{ $t('HomeView.Redesign') }}
 								</div>
@@ -69,7 +69,7 @@
 							</div>
 
 							<div class="right_content_body">
-								<div class="right_content_img_block scroll_style Guide_1_17" v-mousewheel :class="{active:designCollectionList.length != 0}">
+								<div class="right_content_img_block scroll_style Guide_1_17" v-mousewheel :class="[designCollectionList.length != 0?'active':'',driver__.driver?'showEvents':'']">
 									<div class="right_content_img_item">
 										<!-- <draggable 
 											group="people" > -->

src/views/LibraryPage.vue

@@ -315,6 +315,7 @@
             :footer="null" 
             title="Rename Pic"
             width="65%"
+			:keyboard="false"
             :maskClosable="false"
             :centered="true"
             @onCancel="closeRenameModal"
@@ -350,7 +351,7 @@
         </a-modal>
 
         <ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
-        <ModelPlacementMobile ref="ModelPlacementMobile"></ModelPlacementMobile>
+        <ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
 		<setLabel ref="setLabel"></setLabel>
         <!-- 蒙层 start-->
         <div class="mark_loading" v-show="isShowMark">
@@ -1021,6 +1022,8 @@ export default defineComponent({
         //给模特打点编辑
         placementClick(data:any){
             let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
+			console.log(isMoible());
+			
             placementModal.showPlacementModal(data)
         },
 		//generate
@@ -1297,10 +1300,10 @@ export default defineComponent({
                 display: flex;
 				padding-top: 2rem;
                 .library_body_left{
-                    width: 23.5rem;
+                    width: 26.5rem;
                     height: 100%;
                     background: rgba(255,255,255,0.4);
-					margin-right: 8rem;
+					margin-right: 5rem;
 					>div{
 						background: #f7f8fa;
 						border-radius: 2rem;
@@ -1318,7 +1321,8 @@ export default defineComponent({
                             justify-content: space-between;
                             padding: 0 1rem 0 2.5rem;
                             border-left: 0.5rem solid transparent;
-                            font-size: 1.6rem;
+                            // font-size: 1.6rem;
+							font-size: var(--aida-fsize2);
                             color: #030303;
                             cursor: pointer;
 							transition: all .3s;
@@ -1365,7 +1369,7 @@ export default defineComponent({
 					.header_operate_item{
 						margin-right: 5rem;
 						color: #C2C2C2;
-						font-size: 1.6rem;
+						font-size: var(--aida-fsize1-8);
 						.ant-upload{
 							// font-size: 1.6rem;
 							// font-weight: 900;