2023-11-22-1

package-lock.json

@@ -13,6 +13,7 @@
         "ant-design-vue": "^3.2.12",
         "axios": "^1.4.0",
         "core-js": "^3.8.3",
+        "driver.js": "^1.3.1",
         "element-plus": "^2.4.2",
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",
@@ -5445,6 +5446,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "node_modules/driver.js": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz",
+      "integrity": "sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ=="
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
@@ -16565,6 +16571,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "driver.js": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz",
+      "integrity": "sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ=="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "ant-design-vue": "^3.2.12",
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
+    "driver.js": "^1.3.1",
     "element-plus": "^2.4.2",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",

src/assets/iconfont2/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4292253 */
-  src: url('iconfont.woff2?t=1700017557054') format('woff2'),
+  src: url('iconfont.woff2?t=1700554220413') format('woff2'),
-       url('iconfont.woff?t=1700017557054') format('woff'),
+       url('iconfont.woff?t=1700554220413') format('woff'),
-       url('iconfont.ttf?t=1700017557054') format('truetype');
+       url('iconfont.ttf?t=1700554220413') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bingji:before {
+  content: "\e620";
+}
+
+.icon-bingji1:before {
+  content: "\e668";
+}
+
 .icon-biaoqian:before {
   content: "\e603";
 }

src/assets/style/style.css

@@ -127,7 +127,7 @@ li {
   --el-cascader-tag-background: #e1d9ec;
   --el-fill-color: #e1d9ec;
   height: 80%;
-  width: 80% !important;
+  width: 90% !important;
   flex-wrap: nowrap;
   overflow: hidden;
 }
@@ -159,7 +159,8 @@ li {
   --el-cascader-menu-selected-text-color: #000;
 }
 .el-popper .el-cascader-panel .el-scrollbar {
-  min-width: 18rem;
+  min-width: 19rem;
+  max-width: 19rem;
 }
 .el-popper .el-cascader-panel .el-scrollbar .el-cascader-menu__wrap {
   height: 24.4rem;

src/assets/style/style.less

@@ -141,7 +141,7 @@ ul,li{
 	--el-cascader-tag-background:#e1d9ec;
 	--el-fill-color:#e1d9ec;
 	height: 80%;
-	width: 80% !important;
+	width: 90% !important;
 	flex-wrap: nowrap;
 	overflow: hidden;
 	.el-tag--light{
@@ -173,7 +173,8 @@ ul,li{
 	.el-cascader-panel{
 		--el-cascader-menu-selected-text-color: #000;
 		.el-scrollbar{
-			min-width: 18rem;
+			min-width: 19rem;
+			max-width: 19rem;
 			.el-cascader-menu__wrap{
 				height: 24.4rem;
 				.el-cascader-menu__list{

src/component/Detail/habit.vue

@@ -39,14 +39,14 @@
 				<a-dropdown @click.stop="setOpenType('sex')">
                     <a-button>
                         <UserOutlined />
-                        {{ workspaceItem.sex }}
+                        {{ workspaceItem.sex.label }}
                         <DownOutlined />
                     </a-button>
                 </a-dropdown>
 				<div class="habit_model_show habit_sex_show"  v-fade="openType.sex">
 					<ul class="habit_model_list">
 						<li v-for="item,index in sex">
-							<div @click.stop="setSex(item.value)">{{ item.label }}</div>
+							<div @click.stop="setSex(item)">{{ item.label }}</div>
 						</li>
 					</ul>
 				</div>
@@ -334,7 +334,7 @@ export default defineComponent({
 					let arr:any = []
 					rv.forEach((item:any) => {
 						let obj = {
-							value:item.name,
+							value:item.key,
 							label:item.name,
 						}
 						arr.push(obj)						
@@ -548,7 +548,8 @@ export default defineComponent({
 		},
 		setSex(v:any){
 			this.openType.sex = false
-			this.workspaceItem.sex = v
+			this.workspaceItem.sex.value = v.value
+			this.workspaceItem.sex.label = v.label
 			this.getMannequins()
 			this.setMannequinsSex()
 			this.getPosition('sex')
@@ -563,11 +564,11 @@ export default defineComponent({
 			// this.workspaceItem.mannequinId = item.id
 			// this.workspaceItem.mannequinType = str
 			// this.workspaceItem.mannequinUrl = item.presignedUrl
-			if(this.workspaceItem.sex == 'Female'){
+			if(this.workspaceItem.sex.value == 'FEMALE'){
 				this.workspaceItem.femalePresignedUrl = item.presignedUrl
 				this.workspaceItem.mannequinFemaleType  = str
 				this.workspaceItem.mannequinFemaleId = item.id
-			}else if(this.workspaceItem.sex == 'Male'){
+			}else if(this.workspaceItem.sex.value == 'MALE'){
 				this.workspaceItem.malePresignedUrl = item.presignedUrl
 				this.workspaceItem.mannequinMaleType  = str
 				this.workspaceItem.mannequinMaleId = item.id
@@ -577,11 +578,11 @@ export default defineComponent({
 			this.workspaceItem.mannequinId = item.id
 		},
 		setMannequinsSex(){
-			if(this.workspaceItem.sex == 'Female'){
+			if(this.workspaceItem.sex.value == 'FEMALE'){
 				this.workspaceItem.mannequinUrl = this.workspaceItem.femalePresignedUrl
 				this.workspaceItem.mannequinType = this.workspaceItem.mannequinFemaleType
 				this.workspaceItem.mannequinId = this.workspaceItem.mannequinFemaleId
-			}else if(this.workspaceItem.sex == 'Male'){
+			}else if(this.workspaceItem.sex.value == 'MALE'){
 				this.workspaceItem.mannequinUrl = this.workspaceItem.malePresignedUrl
 				this.workspaceItem.mannequinType = this.workspaceItem.mannequinMaleType
 				this.workspaceItem.mannequinId = this.workspaceItem.mannequinMaleId

src/component/HomePage/MoodboardUpload.vue

@@ -18,7 +18,7 @@
                 </div>
                 <div
                     @click.stop="open(3)"
-                    class="switch_type_item"
+                    class="switch_type_item Guide_1_4"
                     :class="[openClick == 3 ? 'select_swtich' : '']"
                 >
                     <span>{{ $t('MoodboardUpload.Generate') }}</span>

src/component/HomePage/collectionModal.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="showCollectionModal">
-         <a-modal class="modal_component collection_modal" 
+         <a-modal class="modal_component collection_modal Guide_1_2" 
             v-model:visible="showCollectionModal" 
             :footer="null" 
             width="65%"

src/lang/cn.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'导出文件失败。',
 	},
 	LibraryPage:{
+		Organize:'喜欢',
 		Upload:'上传',
 		Generate:'生成',
 		Delete:'删除',
 		Rename:'重命名',
 		inputContent1:'输入名字进行搜索',
+		intersection:'交集',
+		unionSet:'并集',
 		all:'全选',
 		ImageOnly:'图片',
 		TextOnly:'文字',

src/lang/en.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'Failed to export the file',
 	},
 	LibraryPage:{
+		Organize:'Organize',
 		Upload:'Upload',
 		Generate:'Generate',
 		Delete:'Delete',
 		Rename:'Rename',
 		inputContent1:'Search by your style code',
+		intersection:'intersection',
+		unionSet:'union set',
 		all:'all',
 		ImageOnly:'Image Only',
 		TextOnly:'Text Only',
@@ -201,7 +204,7 @@ export default {
 		Delete:'Delete',
 		Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image',
 		Thumbnail:'Thumbnail preview of selected moodboard',
-		layout:'layout',
+		layout:'Layout',
 		jsContent1:'You can select up to 8 images',
 		jsContent2:"upload failed",
 		jsContent3:"You can only upload Image file!",

src/lang/fr.ts

@@ -56,11 +56,14 @@ export default {
 		jsContent3:"Échec de l'exportation du fichier",
 	},
 	LibraryPage:{
+		Organize:'Organiser',
 		Upload:'Télécharger',
 		Generate:'Générer',
 		Delete:'Supprimer',
 		Rename:'Renommer',
 		inputContent1:'Recherchez par votre code de style',
+		intersection:'intersection',
+		unionSet:"ensemble d'unions",
 		all:'tout',
 		ImageOnly:'Image uniquement',
 		TextOnly:'Texte seulement',

src/lang/it.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'Impossibile esportare il file',
 	},
 	LibraryPage:{
+		Organize:'Organizzare',
 		Upload:'Caricamento',
 		Generate:'creare',
 		Delete:'Eliminare',
 		Rename:'Rinominare',
 		inputContent1:'Search by your style code',
+		intersection:'intersezione',
+		unionSet:'insieme di unione',
 		all:'Tutto',
 		ImageOnly:'Solo immagine',
 		TextOnly:'Solo testo',

src/lang/ja.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'ファイルのエクスポートに失敗しました',
 	},
 	LibraryPage:{
+		Organize:'編成',
 		Upload:'アップロード',
 		Generate:'生成する',
 		Delete:'消去',
 		Rename:'名前の変更',
 		inputContent1:'スタイルコードで検索',
+		intersection:'交差点',
+		unionSet:'ユニオンセット',
 		all:'全て',
 		ImageOnly:'画像のみ',
 		TextOnly:'テキストのみ',

src/lang/kr.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'파일을 내보내지 못했습니다.',
 	},
 	LibraryPage:{
+		Organize:'구성',
 		Upload:'업로드',
 		Generate:'생성하다',
 		Delete:'삭제',
 		Rename:'이름 바꾸기',
 		inputContent1:'스타일 코드로 검색',
+		intersection:'교차로',
+		unionSet:'결합 세트',
 		all:'모두',
 		ImageOnly:'이미지만',
 		TextOnly:'텍스트만',

src/lang/ru.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'Не удалось экспортировать файл',
 	},
 	LibraryPage:{
+		Organize:'Организовать',
 		Upload:'Загрузить',
 		Generate:'Генерировать',
 		Delete:'Удалить',
 		Rename:'Переименовать',
 		inputContent1:'Поиск по коду вашего стиля',
+		intersection:'пересечение',
+		unionSet:'набор объединений',
 		all:'all',
 		ImageOnly:'Только изображение',
 		TextOnly:'Только текст',

src/lang/th.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'ล้มเหลวในการส่งออกไฟล์',
 	},
 	LibraryPage:{
+		Organize:'จัดระเบียบ',
 		Upload:'อัปโหลด',
 		Generate:'กำเนิด',
 		Delete:'ลบ',
 		Rename:'เปลี่ยนชื่อ',
 		inputContent1:'ค้นหาตามรหัสสไตล์ของคุณ',
+		intersection:'แยก',
+		unionSet:'ชุดยูเนี่ยน',
 		all:'ทั้งหมด',
 		ImageOnly:'รูปภาพเท่านั้น',
 		TextOnly:'ข้อความเท่านั้น',

src/lang/vn.ts

@@ -55,11 +55,14 @@ export default {
 		jsContent3:'Không xuất được tệp',
 	},
 	LibraryPage:{
+		Organize:'Tổ chức',
 		Upload:'Tải lên',
 		Generate:'Phát ra',
 		Delete:'Xóa bỏ',
 		Rename:'Đổi tên',
 		inputContent1:'Tìm kiếm theo mã kiểu của bạn',
+		intersection:'ngã tư',
+		unionSet:'bộ đoàn',
 		all:'tất cả',
 		ImageOnly:'Chỉ hình ảnh',
 		TextOnly:'Chỉ văn bản',

src/tool/guide.js

@@ -0,0 +1,41 @@
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
+//版本一
+const driverObj__ = driver({
+	steps: [
+		{ 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_2', popover: { title: 'Title', description: 'Description' } },
+		{ element: '.Guide_1_4', popover: { title: 'Title', description: 'Description' } },
+	  ],
+	  // showProgress: true,//控制总页数和当前页数是否显示
+	allowClose:false,
+	showButtons:false,
+	stagePadding:10,//切口到元素的距离
+	stageRadius:5,//切口圆弧度
+	allowKeyboardControl:true,//控制是否可以键盘控制下一步
+	disableActiveInteraction:false,//是否禁用显示元素的交互
+	// overlay: true,
+	onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
+		console.log(popover,options);	
+		if(options.state.activeIndex >= 1 && options.state.activeIndex <= 3){
+			popover.footer.style.display = 'block'
+		}else{
+			popover.footer.style.display = 'none'
+		}
+		
+	},
+});
+
+
+const openGuide = () =>{
+	// driverObj__.drive();
+	driverObj__.moveNext();
+	driverObj__.movePrevious();
+}	
+
+export{
+    openGuide,
+	driverObj__,
+}

src/views/HomeView.vue

@@ -14,7 +14,7 @@
                                         class="home_null_icon"
                                         src="@/assets/images/homePage/null_img.png"
                                     /> -->
-									<div class="new_collection_button" @click="startNewCollection()">
+									<div id="Guide_1_1" class="new_collection_button" @click="startNewCollection()">
 										{{ $t('HomeView.GetStarted') }}
 									</div>
 								</div>
@@ -205,7 +205,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed ,inject,provide} from "vue";
+import { defineComponent, h, ref, computed ,inject,provide,nextTick} from "vue";
 import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
@@ -217,6 +217,7 @@ import { message } from "ant-design-vue";
 import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
+import { openGuide,driverObj__ } from "@/tool/guide";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import draggable from 'vuedraggable'
 import JSZip from "jszip";
@@ -330,6 +331,10 @@ export default defineComponent({
 		};
 	},
 	mounted() {
+		// if(JSON.parse( getCookie('isFirst') as any)){
+			openGuide()
+		// }
+		
 		let userInfo:any = getCookie("userInfo")
         this.userInfo = JSON.parse(userInfo);
 		this.store.dispatch('get_clothingType')
@@ -432,6 +437,9 @@ export default defineComponent({
 			let collectionModal: any = this.$refs.collectionModal;
 			this.store.commit("clearAllData");
 			collectionModal.changeCollectionModal(true);
+			nextTick().then(()=>{
+				driverObj__.moveNext();
+			})
 		},
 
 		//recollection

src/views/LibraryPage.vue

@@ -30,19 +30,8 @@
                     <div class="library_body_right">
                         <div class="library_right_header">
                             <div class="library_header_left">
-                                <div  class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
+                                <div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
-                                    <a-upload
+									<div>{{ $t('LibraryPage.Organize') }}</div>
-										v-show="uploadGenerate == 'Upload'"
-                                        :before-upload="beforeUpload"
-                                        :customRequest="customRequest "
-                                        :multiple="selectCode != 'Models'"
-                                        :maxCount="15"
-                                        accept=".jpg,.png,.jpeg,.bmp"
-                                        @change="fileUploadChange"
-                                        >
-                                        <div>{{ $t('LibraryPage.Upload') }}</div>
-                                    </a-upload>
-									<div v-show="uploadGenerate != 'Upload'">{{ $t('LibraryPage.Upload') }}</div>
                                 </div>
 							   <div v-show="selectCode != 'Models'" class='header_operate_item pointer'  :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
                             </div>
@@ -84,6 +73,19 @@
                                 <div class="content_body_header">
 									<div class="content_body_header_left">
 										<div class="content_body_header_right">
+											<div :class="['header_operate_item' , 'fontSize','active']">
+												<a-upload
+													v-show="uploadGenerate == 'Upload'"
+													:before-upload="beforeUpload"
+													:customRequest="customRequest "
+													:multiple="selectCode != 'Models'"
+													:maxCount="15"
+													accept=".jpg,.png,.jpeg,.bmp"
+													@change="fileUploadChange"
+													>
+													<div>{{ $t('LibraryPage.Upload') }}</div>
+												</a-upload>
+											</div>
 											<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
 											<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
 										</div>
@@ -117,17 +119,18 @@
 													:max-collapse-tags=3
 													:props="props" 
 													:collapse-tags-tooltip="true"
-													clearable 
 													ref="cascader"
 													popper-class="libraryPageCascader"
 													@visible-change="dropdownVisibleChange"
 												>
 												</el-cascader>
 											</div>
-											
+											<div class="intersection">
+												<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
+												<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
+											</div>
 											<!-- <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> -->
 											<div class="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
-
 										</div>
 									</div>
                                     <div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
@@ -325,7 +328,6 @@
 					:max-collapse-tags=6
 					:props="props" 
 					:collapse-tags-tooltip="true"
-					clearable 
 				>
 				</el-cascader>
 				<div class="rename_button_list">
@@ -458,7 +460,7 @@ export default defineComponent({
 			value:'id',
 			label:'classificationName',
 		}
-
+		let intersection = ref(1)
 		let isTest = ref()
 		
 	
@@ -496,6 +498,7 @@ export default defineComponent({
 			options,
 			t,
 			props,
+			intersection,
 			isTest,
         }
     },
@@ -981,6 +984,7 @@ export default defineComponent({
 				modelSex:this.sex?this.sex:'',
                 pictureName:this.searchPictureName,
                 size:this.pageSize,
+				intersection:this.intersection,
             }
             this.isShowMark = true
             Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
@@ -1341,7 +1345,7 @@ export default defineComponent({
 						color: #C2C2C2;
 						font-size: 1.6rem;
 						.ant-upload{
-							font-size: 1.6rem;
+							// font-size: 1.6rem;
 							// font-weight: 900;
 						}
 						.ant-upload-list-text{
@@ -1395,7 +1399,8 @@ export default defineComponent({
 							}
 						}
 						.search_cascader{
-							width: 60%;
+							// width: 53%;
+							width: 38rem;
 							display: flex;
 							position: relative;
 							
@@ -1416,6 +1421,10 @@ export default defineComponent({
 								color: #FFFFFF;
 							}
 						}
+						.intersection{
+							margin-left: 3rem;
+							cursor: pointer;
+						}
 						
 					}
 
@@ -1547,6 +1556,7 @@ export default defineComponent({
 												cursor: no-drop;
 											}
 										}
+										
 										.generage_btn{
 											margin: 0 3rem;
 										}

src/views/versions1Guide.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="move_page">
+        <div class="move_click">
+            <div class="move_click_dian" v-for="i in moveDian" :key="i" :style="{'background':i}" @mousedown="AddDian(i)"></div>
+        </div>
+        <div class="img_block" ref="imgbox" @mousemove="startMove($event)">
+            <img ref="img" src="https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF" />
+            <!-- <div class="img_mark"></div> -->
+            <div class="img_click_dian" v-for="item in imgDian" :key="item" :style="{'background':item.color,left:item.left+'px', top:item.top+'px'}" @mousedown="getMouseDown($event,item)"  @mousemove="startMove($event)"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent,h,ref} from "vue";
+export default defineComponent({
+    data(){
+        return{
+            moveDian:['red','yellow'],
+            imgDian:[],
+            intObj:null,
+            startDian:false,
+            currentSign:{},
+            imgBox:{},
+            moveOriginal:{posX: 0, posY: 0}
+        }
+   },
+   mounted(){
+     this.imgBox = {
+        left : this.$refs.imgbox.offsetLeft,
+        top:this.$refs.imgbox.offsetTop,
+        scrollTop:this.$refs.scrollTop || 0,
+     }
+   },   
+   methods:{
+        AddDian(color){
+            this.startDian = true
+            this.intObj = {
+                color:color
+            }   
+        },
+
+        startMove(event){
+            let scrollTop = this.$refs.imgbox.scrollTop;
+            if(this.intObj){
+                this.currentSign.color = this.intObj.color
+                this.currentSign.left = event.clientX - this.imgBox.left
+                this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top
+                this.imgDian.push(this.currentSign)
+                this.intObj = null
+            }else{
+                if(this.startDian){
+                    this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
+                    this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
+                    document.addEventListener('mouseup', this.getMouseOver);
+                    this.$forceUpdate()
+                    this.setBoundarySign()
+                }
+            }
+        },
+
+      
+
+         // 在边界上的签名域处理
+         setBoundarySign() {
+            let height = this.$refs.imgbox.offsetHeight + this.$refs.imgbox.scrollTop;
+            // 2 为签名域的边框
+            let maxPosHeight = height - 30
+            // console.log(height,maxPosHeight,this.currentSign.pos_params.height)
+            let maxPosWidth = this.$refs.imgbox.clientWidth - 30 //+ this.signBox.paddLeft;
+            if (this.currentSign.top <= 0) {
+                this.currentSign.top = 0
+            } else if (this.currentSign.top >= maxPosHeight ) {
+                this.currentSign.top = maxPosHeight;
+            }
+            if (this.currentSign.left <= 0) {
+                this.currentSign.left = 0
+            } else if (this.currentSign.left >= maxPosWidth) {
+                this.currentSign.left = maxPosWidth;
+            }
+        },
+
+        getMouseDown(event,item){
+            this.currentSign = item
+            // 计算出鼠标在签名域上的偏移
+            this.moveOriginal.posX = event.offsetX
+            // this.moveOriginal.posY = mousedownParam.event.clientY - this.currentSign.pos_params.top - this.signBox.boxTop;
+            this.moveOriginal.posY = event.offsetY // 1为边框
+            this.startDian = true
+        },
+     
+        getMouseOver(){
+            this.startDian = false
+            this.currentSign = {}
+            document.removeEventListener('mouseup', this.getMouseOver);
+            document.removeEventListener('touchend', this.getMouseOver);
+        }
+   }
+})
+
+</script>
+<style scoped>
+.move_page{
+    display: flex;
+
+}
+.move_click{
+    width: 60px;
+}
+
+.move_click_dian{
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-bottom: 60px;
+    cursor: pointer;
+    user-select:none; /* CSS3属性 */
+}
+.img_block{
+    position: relative;
+    user-select:none;
+    -moz-user-select:none;
+    overflow-y: auto;
+    background: green;
+}
+.img_mark{
+    width: 1200px;
+    height: 600px;
+    background: #ccc;
+    /* width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0; */
+}
+img{
+    user-select:none;
+    -moz-user-select:none;
+    width: 700px;
+}
+.img_click_dian{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    -moz-user-select:none; /* Firefox私有属性 */
+    -webkit-user-select:none; /* WebKit内核私有属性 */
+    -ms-user-select:none; /* IE私有属性(IE10及以后) */
+    -khtml-user-select:none; /* KHTML内核私有属性 */
+    -o-user-select:none; /* Opera私有属性 */
+    user-select:none; /* CSS3属性 */
+    cursor: pointer;
+}
+</style>