部分页面样式调整

src/assets/images/icon/alipay.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721207879119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2179" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="2180"></path></svg>

src/assets/style/style.css

@@ -2247,7 +2247,12 @@ textarea:focus {
 .generage_btn_box .fi-bs-magic-wand.forbidden {
   cursor: no-drop;
 }
+.generage_btn_box.white .generage_btn {
+  background-color: #fff;
+  color: #000;
+}
 .generage_btn_box .generage_btn {
+  border: 2px solid #000;
   margin-left: 2rem;
   display: flex;
   font-size: 1.6rem;
@@ -2257,9 +2262,6 @@ textarea:focus {
   line-height: 5.4rem;
   height: 5.4rem;
 }
-.generage_btn_box .generage_btn {
-  width: 10rem;
-}
 .generage_btn_box .icon-xiala {
   margin-left: 1rem;
   transition: all 0.3s;
@@ -2271,24 +2273,26 @@ textarea:focus {
 .generage_btn_box .content {
   position: absolute;
   top: 100%;
-  width: calc(100% - 2rem);
+  width: min-content;
-  left: 0rem;
+  min-width: 8rem;
   text-align: center;
   border-radius: calc(1rem*1.2);
   overflow: hidden;
   z-index: 3;
   margin-top: 0.2rem;
-  margin-left: 2rem;
+  right: 0;
+  left: auto;
 }
 .generage_btn_box .content > div {
   background: #cccccc;
   line-height: 2;
-  font-size: 1.8rem;
+  font-size: 1.4rem;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #fff;
+  padding: 0.4rem 1.2rem;
 }
 .generage_btn_box .content > div.active {
   background-color: #000;

src/assets/style/style.less

@@ -2169,8 +2169,15 @@ textarea:focus{
 			cursor: no-drop;
 		}
 	}
+	&.white{
+		.generage_btn{
+			background-color: #fff;
+			color: #000;
+		}
+	}
 	.generage_btn{
 		// margin: 0 auto;
+		border: 2px solid #000;
 		margin-left: 2rem;
 		display: flex;
 		font-size: 1.6rem;
@@ -2181,7 +2188,7 @@ textarea:focus{
 		height: 5.4rem;
 	}
 	.generage_btn{
-		width: 10rem;
+		// width: 10rem;
 	}
 	.icon-xiala{
 		margin-left: 1rem;
@@ -2194,23 +2201,26 @@ textarea:focus{
 	.content{
 		position: absolute;
 		top: 100%;
-		width: calc(100% - 2rem);
+		// width: calc(100% - 2rem);
-		left: 0rem;
+		width: min-content;
+		min-width: 8rem;
 		text-align: center;
 		border-radius: calc(1rem* 1.2);
 		overflow: hidden;
 		z-index: 3;
 		margin-top: .2rem;
-		margin-left: 2rem;
+		right: 0;
+		left: auto;
 		>div{
 			background: #cccccc;
 			line-height: 2;
-			font-size: 1.8rem;
+			font-size: 1.4rem;
 			cursor: pointer;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			color: #fff;
+			padding: .4rem 1.2rem;
 			&.active{
 				background-color: #000;
 			}

src/component/Canvas/canvasExample.vue

@@ -80,7 +80,8 @@ const loadImageUrlToLayer = async () => {
   try {
     const imageUrl =
       "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABrQAAAZNCAYAAACENbGaAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3Yt208YaBtCflkuhhXLv+z/e4X6HQiFnfbYmTIwDsRM7srS91ixJY8WW9kjjVh8jXS";
-    const layerId = await canvasEditor?.value?.addImageToLayer?.(imageUrl);
+    const layerId = await canvasEditor?.value?.addImageToLayer?.(imageUrl,{layerId:canvasEditor?.value.layers[0].id});
+    // const layerId = await canvasEditor?.value?.addImageToLayer?.(imageUrl);
     console.log("新图层ID：", layerId);
   } catch (error) {
     console.error("加载图片到图层失败：", error);

src/component/DetailCopy/canvas/index.vue

@@ -19,13 +19,22 @@
 				</div> -->
 				<div class="contet">
 					<div class="canvas" v-if="!isEditFrontBack" @click.stop>
-						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad && currentView === 'canvasEditor'" :config="canvasConfig" 
 							:clothingImageUrl="selectDetail.undividedLayer" 
 							isFixedErasable
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							ref="editCanvas"></editCanvas>
+							ref="editCanvas">
+							<template #customTools="{ toolButtonProps }">
+								<!-- 也可以直接使用普通的按钮 -->
+								 {{toolButtonProps}}
+								<div class="custom-tool-btn" @click="setCurrentView('redGreenExample')">
+									<i class="fi fi-sr-layers"></i>
+									<div class="tool-tooltip">Edit the front and back sections</div>
+								</div>
+							</template>
+						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
 					</div>
 					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
@@ -35,7 +44,7 @@
 							
 							ref="editFrontBack">
 						</editFrontBack> -->
-						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad && currentView === 'redGreenExample'" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
 							:clothingImageUrl="selectDetail.undividedLayer" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@@ -43,7 +52,14 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							ref="editCanvasBackFront"></editCanvas>
+							ref="editCanvasBackFront">
+							<template #customTools="{ toolButtonProps }">
+								<div class="custom-tool-btn" @click="setCurrentView('canvasEditor')">
+									<i class="fi fi-sr-layers"></i>
+									<div class="tool-tooltip">Edit the front and back sections</div>
+								</div>
+							</template>
+						</editCanvas>
 					</div>
 				</div>
 				
@@ -111,6 +127,7 @@ export default defineComponent({
 			canvasLoad:false,
 			canvasConfig:{
 			} as any,
+			currentView:'canvasEditor',
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -215,6 +232,9 @@ export default defineComponent({
 			})
 
 		}
+		const setCurrentView = (str:string)=>{
+			detailData.currentView = str
+		}
 		onBeforeUnmount(()=>{
 			console.log(12312)
 			sessionStorage.removeItem('frontBackEdit');
@@ -237,6 +257,7 @@ export default defineComponent({
 			privewDetail,
 			setFrontBackColor,
 			frontBackChange,
+			setCurrentView,
         }
     },
 	provide() {
@@ -338,4 +359,56 @@ export default defineComponent({
 		}
 		
 	}
+	
+.custom-tool-btn {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #333;
+  transition: all 0.2s ease;
+}
+
+.custom-tool-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.custom-tool-btn:hover .tool-tooltip {
+  display: block;
+}
+
+.tool-tooltip {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-left: 8px;
+  white-space: nowrap;
+  font-size: 12px;
+  z-index: 10;
+}
+
+.tool-tooltip:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
+}
+
 </style>

src/component/DetailCopy/designDetail.vue

@@ -48,6 +48,9 @@
 				<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
 					<detailLeft v-if="currentDetailType"></detailLeft>
 					<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
+					 <div class="btn" v-show="currentDetailType == 'color'">
+						<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
+					</div>
 				</div>
 
 				<div class="item model">
@@ -59,9 +62,9 @@
 						@revocation="revocation"
 						@oppositeRevocation="oppositeRevocation"
 					></model>
-					<div class="btn">
+					<div class="btn" style="margin-left: 0;">
 						<div class="gallery_btn" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
-						<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
+						<!-- <div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div> -->
 					</div>
 				</div>
 				<div class="item detailRight">
@@ -69,6 +72,17 @@
 					</div>
 					<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
 						<detailRight ref="detailRight"></detailRight>
+						<div class="btn" 
+							v-show="
+								currentDetailType !== 'color' &&
+								(currentDetailType === 'element' ||
+								currentDetailType === 'print' ||
+								(currentDetailType === 'sketch' && selectDetail?.newDetail?.[currentDetailType])|| 
+								(currentDetailType === 'models' && designDetail?.newModel))
+								"
+						>
+							<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
+						</div>
 					</div>
 					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
 						<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
@@ -76,8 +90,6 @@
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
 					</div> -->
-					<div class="submit bottom">
-					</div>
 				</div>
 			</div>
 			
@@ -500,6 +512,8 @@ export default defineComponent({
 				overflow: hidden;
 				&.detailLeft{
 					width: 34rem;
+					display: flex;
+					flex-direction: column;
 				}
 				&.isEditPattern{width: 0px;}
 				&.model{
@@ -512,14 +526,19 @@ export default defineComponent({
 					flex: 1;
 					display: flex;
 					flex-direction: column;
-					padding-bottom: calc(6rem + 1rem);
+					// padding-bottom: calc(6rem + 1rem);
 					overflow: hidden;
 					> .contentRight{
+						text-align: center;
 						display: flex;
 						flex: 1;
+						flex-direction: column;
 						overflow: hidden;
 					}
 				}
+				.btn{
+					margin-top: auto;
+				}
 				> .submit{
 					display: flex;
 					justify-content: flex-end;

src/component/DetailCopy/detailLeft/colorBox/index.vue

@@ -24,9 +24,10 @@
 			<div class="generalModel_state">
 				<div class="generalModel_state_item">
 					<input class="search_input" placeholder="Tcx value（e.g:19-4052)" v-model="tcxToColor" style="width: 100%;" @keydown.enter="getTcxColor()">
+					<i class="fi fi-br-search" @click="getTcxColor"></i>
 				</div>
 			</div>
-			<div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div>
+			<!-- <div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div> -->
 		</div>
     </div>
     
@@ -106,32 +107,49 @@ export default defineComponent({
 			}else{
 				return
 			}
-			
 			let isNoSelect = false
-			let isOneChecked = false
+			let pushIndex = 0
 			for (let index = 0; index < 9; index++) {
 				colorData.allBoardData.colorBoards
 				let item:any = {}
 				item = colorData.allBoardData.colorBoards[index]
+				let color = colorData.allBoardData.colorBoards?.[index]
+				if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
+
 				if(
 					colorData.allBoardData.colorBoards?.[index] &&
-					colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
+					colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
-					colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
+					colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
-					colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
+					colorData.selectDetail.color.rgba?.b == color?.rgba?.b &&
-					JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
+					JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient)
 					&& colorData.selectDetail.color.rgba?.r
 				){
-					if(!isOneChecked){
+					isNoSelect = true
-						isOneChecked = true
-						if(colorData.allBoardData.colorBoards?.[index].gradient){
-							item.gradient = colorData.allBoardData.colorBoards?.[index].gradient
-						} 
 					colorData.selectColor = item
 					colorData.colorList.index = index
-					}
+				}else if(color?.rgba?.r){
-				}else if(colorData.selectDetail.color.rgba?.r){
+					pushIndex = index
-					if(!isNoSelect){
 					item = {
+						hex:rgbaToHex([color?.rgba.r,color?.rgba.g,color?.rgba.b]),
+						id:color?.id,
+						rgba:{
+							r:color?.rgba.r,
+							g:color?.rgba.g,
+							b:color?.rgba.b,
+						},
+						tcx:color?.tcx,
+						name:color?.name,
+					}
+					if(color?.gradient){
+						item.gradient = color?.gradient
+					} 
+					colorData.colorList.index = index
+					colorData.selectColor = item
+				}
+				colorData.colorList.list[newVal].push(item)
+			}
+			if(!isNoSelect){
+				let item = {
 					hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
 					id:colorData.selectDetail.color.id,
 					rgba:{
@@ -141,19 +159,61 @@ export default defineComponent({
 					},
 					tcx:colorData.selectDetail.color.tcx,
 					name:colorData.selectDetail.color.name,
-						}
+				} as any
 				if(colorData.selectDetail.color.gradient){
 					item.gradient = colorData.selectDetail.color.gradient
 				} 
-						colorData.colorList.index = index
 				colorData.selectColor = item
-						isNoSelect = true
+				colorData.colorList.index = pushIndex + 1
-					}else{
+				colorData.colorList.list[newVal][pushIndex + 1] = item
-						item = {}
-					}
-				}
-				colorData.colorList.list[newVal].push(item)
 			}
+
+			// for (let index = 0; index < 9; index++) {
+			// 	colorData.allBoardData.colorBoards
+			// 	let item:any = {}
+			// 	item = colorData.allBoardData.colorBoards[index]
+			// 	if(
+			// 		colorData.allBoardData.colorBoards?.[index] &&
+			// 		colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.r &&
+			// 		colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.g &&
+			// 		colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.b &&
+			// 		JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
+			// 		&& colorData.selectDetail.color.rgba?.r
+			// 	){
+			// 		console.log(13212)
+			// 		if(!isOneChecked){
+			// 			isOneChecked = true
+			// 			if(colorData.allBoardData.colorBoards?.[index].gradient){
+			// 				item.gradient = colorData.allBoardData.colorBoards?.[index].gradient
+			// 			} 
+			// 			colorData.selectColor = item
+			// 			colorData.colorList.index = index
+			// 		}
+			// 	}else if(colorData.selectDetail.color.rgba?.r){
+			// 		if(!isNoSelect){
+			// 			item = {
+			// 				hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
+			// 				id:colorData.selectDetail.color.id,
+			// 				rgba:{
+			// 					r:colorData.selectDetail.color.rgba.r,
+			// 					g:colorData.selectDetail.color.rgba.g,
+			// 					b:colorData.selectDetail.color.rgba.b,
+			// 				},
+			// 				tcx:colorData.selectDetail.color.tcx,
+			// 				name:colorData.selectDetail.color.name,
+			// 			}
+			// 			if(colorData.selectDetail.color.gradient){
+			// 				item.gradient = colorData.selectDetail.color.gradient
+			// 			} 
+			// 			colorData.colorList.index = index
+			// 			colorData.selectColor = item
+			// 			isNoSelect = true
+			// 		}else{
+			// 			item = {}
+			// 		}
+			// 	}
+			// 	colorData.colorList.list[newVal].push(item)
+			// }
 		},{immediate: true})
 		const selectImgItem = ()=>{
 
@@ -316,7 +376,22 @@ export default defineComponent({
 				> .generalModel_state_item{
 					width: 100%;
 					margin: 0;
+					border-radius: 1rem;
+					border: 1px solid;
+					overflow: hidden;
+					display: flex;
 					input{
+						border: none;
+						background: #f4f4f4;
+					}
+					i{
+						width: 5rem;
+						border-left: 1px solid;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						cursor: pointer;
+						height: 100%;
 						background: #f4f4f4;
 					}
 				}

src/component/DetailCopy/detailLeft/index.vue

@@ -70,5 +70,7 @@ export default defineComponent({
 		width: 34rem;
 		// width: 100%;
 		height: 100%;
+		display: flex;
+		flex-direction: column;
 	}
 </style>

src/component/DetailCopy/detailLeft/module/currentList.vue

@@ -51,7 +51,6 @@ export default defineComponent({
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 
 		})
-		
 		const getDetailListData = reactive({
 			
 		})

src/component/DetailCopy/detailLeft/module/libraryList.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="libraryList">
-		<div class="generalModel_state" v-if="type != 'element'">
+		<div class="generalModel_state">
-			<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" style="width: 40%;">
+			<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" :style="{'width':(level1Type == 'DesignElements'?'100%':'40%')}">
 				<a-select
 					v-model:value="designType"
 					:options="(designTypeList || catecoryList)"
@@ -87,10 +87,10 @@
 					></template>
 				</a-select>
 			</div>
-			<div class="generalModel_state_item" style="width: 35%; flex: 1;margin-right: 2%;" v-if="level1Type != 'Models'">
+			<div class="generalModel_state_item" style="width: 35%; flex: 1;margin-right: 2%;" v-if="level1Type != 'Models' && level1Type != 'DesignElements'">
 				<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
 			</div>
-			<div  class="generalModel_state_item" style="width: auto;">
+			<div  class="generalModel_state_item" style="width: auto;" v-show="level1Type != 'DesignElements'">
 				<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
 			</div>
 			<!-- clothesPrint -->
@@ -98,8 +98,8 @@
 		<div class="libraryList_box">
 			<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
 				<div class="content_img_item_block" :class="{active:file?.checked}">
-					<img v-lazy="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
+					<img :src="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
-					<sketchCategory v-if="level1Type != 'Models'" :isSpread="catecoryList.length == 0" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
+					<sketchCategory v-if="level1Type != 'Models' && level1Type != 'DesignElements'" :isSpread="catecoryList.length == 0" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
 				</div>
 			</div>
 			<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>

src/component/DetailCopy/detailLeft/module/selectList.vue

@@ -8,7 +8,7 @@
 					:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
 					v-if="deReconstructionList.length == 0"
 				>
-					<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+					<span class="detailText">{{ $t('DesignDetailAlter.inProject') }}</span>
 				</div>
 				<div
 					v-if="isUpload"

src/component/DetailCopy/detailRight/editPrintElement.vue

@@ -28,6 +28,19 @@
 				</a-slider>
 			</div>
 		</div>
+		<div class="printElementList" ref="printElementList">
+			<div class="itemList" :style="{width:prentWidth || 0}">
+				<div class="imgItem" 
+					v-for="item in printStyleList[type][stateOverallSingle]" 
+					:key="item"
+					@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
+					@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
+				>
+					<img :src="item.path" alt="">
+					<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
+				</div>
+			</div>
+		</div>
 		<div class="editPrintElementBox">
 			<div class="designOpenrtion_centent" id="designOpenrtionCentent">
 			<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
@@ -122,6 +135,24 @@ export default defineComponent({
 				scale:0,
 			},
 			loadingShow:false,
+			printElementList:null as any,
+		})
+		const collItemSize = reactive({
+			collValue:18,
+			num:1,
+			prentWidth:0 as any,
+			padding:10,
+			likeStyle:{
+				
+			},
+			itemStyle:{
+				width:0,
+				height:0,
+			},
+			collTime:null as any,
+			isMove:false,
+			elList:[] as any,
+			selectIndex:0,
 		})
 		
 		const setOveralSingle = ()=>{
@@ -177,6 +208,7 @@ export default defineComponent({
 				scale,
 			}
 			getItemPosition(item)
+			setItemPosition()
 			store.commit('DesignDetailCopy/setCurrentPrintElement',null)
 		}
 		const previewDetailPrintData = ()=>{
@@ -256,16 +288,13 @@ export default defineComponent({
 			let pattern = {
 				centers:{left:0,top:0},
 				style:{
-					// left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
-					// top:(boor?top:Math.trunc(Math.random()*y)+1)+"px",
 					left:left+'px',
 					top:top+'px',
 					right:"auto",
 					bottom:"auto",
 					width:editPrintElementData.sketchWH.width*item.scale[0]+'px',
 					height:editPrintElementData.sketchWH.height*item.scale[1]+'px',
-					zIndex:item.priority,
+					// zIndex:item.priority,
-						// zIndex:this.printZIndex++
 				},
 				transform:{
 					rotateZ:item.angle?item.angle:0
@@ -280,6 +309,7 @@ export default defineComponent({
 				editPrintElementData.printStyleList[props.type].overall = []
 				editPrintElementData.printStyleList[props.type].overall.push(item)
 			}
+
 		}
 		const setPosition = ()=>{
 			nextTick(()=>{
@@ -309,6 +339,7 @@ export default defineComponent({
 							}
 							getItemPosition(item)
 						})
+						setItemPosition()
 					}
 					if(props.type == 'print'){
 						editPrintElementData.overallSingle = state
@@ -345,7 +376,7 @@ export default defineComponent({
 			let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
-			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
+			// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
 				scale:scale,
 				rotateZ:rotateZ?rotateZ:0,
@@ -479,10 +510,8 @@ export default defineComponent({
 				top:editPrintElementDom.imgDom.offsetTop+'px',
 				height:editPrintElementDom.imgDom.offsetHeight+'px',
 				width:editPrintElementDom.imgDom.offsetWidth+'px',
-				zIndex:editPrintElementData.printZIndex
+				// zIndex:editPrintElementData.printZIndex
 			}
-			// document.removeEventListener("mouseup", sizeMouseup);
-			// document.removeEventListener("mousemove", sizeMousemove);
 			document.removeEventListener('mousemove',sizeMouseMove)
 			document.removeEventListener('touchmove',sizeTouchmove)
 			document.removeEventListener('mouseup',sizeMouseup) 
@@ -490,8 +519,6 @@ export default defineComponent({
 		}
 		const mouseup = (e:any)=>{
 
-			// document.removeEventListener("mouseup", mouseup);
-			// document.removeEventListener("mousemove", moveMousemove);
 			document.removeEventListener('mousemove',mouseMove)
 			document.removeEventListener('touchmove',touchmove)
 			document.removeEventListener('mouseup',mouseup) 
@@ -500,6 +527,191 @@ export default defineComponent({
 		const clearOverall = ()=>{
 			editPrintElementData.printStyleList[props.type].overall = []
 		}
+
+
+		const designMousedown = (e:any,uniqueId:number,str:string)=>{
+			let item:any  = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
+			if(!item)return
+			const pEl = editPrintElementData.printElementList;
+			item.el.style.zIndex = 2;
+			item.el.style.transition = 'all 0s';
+			let startX = e.clientX,
+			startY = e.clientY,
+			startSL = + pEl.scrollLeft,
+			left = item.el.offsetLeft,
+			top = item.el.offsetTop;
+			collItemSize.isMove = false;
+			const elWidth = item.el.offsetWidth;
+
+			
+			var toMovePx = 1;
+			var toMoveType = "";//left right
+			let moveFun = (e:any) => {
+				collItemSize.isMove = true
+				let X = e.clientX - startX + (pEl.scrollLeft - startSL) + left;
+				let Y = 0;
+				if(X < 0) X = 0;
+				const maxLeft = parseInt(collItemSize.prentWidth) - elWidth - collItemSize.padding ;
+				if(X > maxLeft) X = maxLeft;
+				item.el.style.left = `${X}px`;
+				item.el.style.top = `${Y}px`;
+
+				const pElBCR = pEl.getBoundingClientRect();
+				var num = 2;
+				if(X < pEl.scrollLeft){
+					toMoveType = "left";
+					num = pElBCR.x-e.clientX;
+				}else if(X > pEl.scrollLeft + pEl.clientWidth - elWidth){
+					toMoveType = "right";
+					num = e.clientX - pElBCR.x - pElBCR.width;
+				}else{
+					toMoveType = "";
+				}
+				toMovePx = num / 20;
+				if(toMovePx < 2) toMovePx = 2;
+
+
+				reRange(item, X, Y,str);
+			};
+
+			const updataFun = ()=>{
+				if(toMoveType == "left"){
+					let left = pEl.scrollLeft - toMovePx;
+					if(left < 0)left = 0;
+					item.el.style.left = `${left}px`;
+					pEl.scrollLeft = left;
+					reRange(item, left, 0);
+				}else if(toMoveType == "right"){
+					let left = pEl.scrollLeft + toMovePx;
+					if(left > pEl.scrollWidth - pEl.clientWidth)left = pEl.scrollWidth - pEl.clientWidth;
+					const elLeft = left + pEl.clientWidth - elWidth - collItemSize.padding;
+					item.el.style.left = `${elLeft}px`;
+					pEl.scrollLeft = left;
+					reRange(item, elLeft, 0);
+				}else if(toMoveType == "stop"){
+					return;
+				}
+				requestAnimationFrame(updataFun);
+			}
+			updataFun();
+
+			let mouseUpFun = ()=>{
+				toMoveType = "stop"
+				document.removeEventListener('mousemove',mouseMove)
+				document.removeEventListener('touchmove',touchmove)
+
+				document.removeEventListener('mouseup',mouseUpFun) 
+				document.removeEventListener('touchend',mouseUpFun) 
+				item.el.style.zIndex = 1;
+				item.el.style.transition = 'top .5s';
+				moveItem();
+				sortDesignCollection()
+			}
+			let mouseMove = function(event:any){
+				let e = getMousePosition(event,false)
+				moveFun(e)
+			}
+			let touchmove = function(event:any){
+				let e = getMousePosition(event,true)
+				moveFun(e)
+			}
+
+			document.addEventListener('mousemove',mouseMove)
+			document.addEventListener('touchmove',touchmove)
+
+			document.addEventListener('mouseup',mouseUpFun) 
+			document.addEventListener('touchend',mouseUpFun) 
+		}
+		//排序  从大到小
+		const sortDesignCollection = ()=> {
+		
+		}
+		const reRange = (item:any, x:number, y:number,str?:string)=>{
+			let elList:any = collItemSize.elList
+			let index = collItemSize.selectIndex
+			let width,height,num
+			num = collItemSize.num
+			width = collItemSize.itemStyle.width
+			height = collItemSize.itemStyle.height
+			
+			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
+			moveIndex = elList.length - 1 - moveIndex
+			moveIndex = moveIndex < 0 ? 0 : moveIndex;
+			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
+			if(moveIndex != index){
+				collItemSize.selectIndex = moveIndex;
+				let currentSort = item.sort;
+				for(let i = 0;i < elList.length;i++){
+					if(currentSort < moveIndex){
+						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
+							elList[i].sort -= 1;
+						};
+					}else if(currentSort > moveIndex){
+						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
+							elList[i].sort += 1;
+						};
+					}
+				};
+				elList[item.index].sort = moveIndex;
+				moveItem();
+			}
+		}
+		const moveItem = ()=>{
+			let value = collItemSize.num
+			for(let i = 0;i < collItemSize.elList.length;i++){
+				let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.width +collItemSize.padding) + 'px';
+				collItemSize.elList[i].el.style.left = height
+			}
+			setZIndex()
+		}
+		const navDelete = (item:any)=>{
+			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
+			let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
+			arr.splice(index,1)
+			setItemPosition()
+		}
+		const setZIndex = ()=>{
+			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
+			collItemSize.elList.forEach((elItem:any)=>{
+				let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
+				arr[clothesIndex].pattern.style.zIndex = elItem.sort
+				// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
+				// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
+				// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
+				// editPrintElementData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
+			})
+		}
+		const setItemPosition = async ()=>{
+			// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
+			await nextTick()
+			let parent = editPrintElementData.printElementList.offsetWidth
+			let elArr = editPrintElementData.printElementList.querySelectorAll('.imgItem')
+			let value = collItemSize.num
+			const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+			const remValue = 8 * htmlFontSize;
+			//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
+			collItemSize.itemStyle.width = remValue
+			collItemSize.elList = []
+			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
+
+			arr.forEach((item,index) => {item.uniqueId  = `${Date.now()}_${index}`});
+
+			const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
+			const sortMap = {} as any;
+			sortedArray.forEach((item, index) => {
+				sortMap[item.priority] = index ; // 1, 2, 3, 4...
+			});
+			for(let i = 0;i < elArr.length;i++){
+				collItemSize.elList.push({
+					el: elArr[i], 
+					// sort: elArr.length - i -1, 
+					sort: sortMap[arr[i].priority],
+					index: i,
+					uniqueId:arr[i]?.uniqueId || 99999,
+				});
+			}
+			collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
+		} 
 		onMounted(()=>{
 			if(props.type == 'element'){
 				editPrintElementData.stateOverallSingle = 'single'
@@ -513,6 +725,7 @@ export default defineComponent({
 			getMousePosition,
 			...toRefs(editPrintElementDom),
 			...toRefs(editPrintElementData),
+			...toRefs(collItemSize),
 			setOveralSingle,
 			formatter,
 			itemMoveMousedown,
@@ -520,6 +733,8 @@ export default defineComponent({
 			deletePrint,
 			previewDetailPrintData,
 			clearOverall,
+			designMousedown,
+			navDelete,
         }
     },
 	directives:{
@@ -656,6 +871,35 @@ export default defineComponent({
 				}
 			}
 		}
+		> .printElementList{
+			width: 100%;
+			height: 10rem;
+			position: relative;
+			overflow-x: auto;
+			.itemList{
+				height: 100%;
+			}
+			.imgItem{
+				width: 8rem;
+				height: 8rem;
+				position: absolute;
+				cursor: pointer;
+				border-radius: 1rem;
+				overflow: hidden;
+				> img{
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+				> i{
+					position: absolute;
+					right: 1rem;
+					top: 1rem;
+					color: #fff;
+					text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
+				}
+			}
+		}
 		> .editPrintElementBox{
 			flex: 1;
 			overflow: hidden;

src/component/DetailCopy/detailRight/elementType.vue

@@ -1,45 +0,0 @@
-<template>
-    <div class="sketchType">
-    </div>
-    
-</template>
-<script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
-// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { Https } from "@/tool/https";
-import { useStore } from "vuex";
-import { useI18n } from 'vue-i18n'
-export default defineComponent({
-    components:{
-    },
-    setup(props,{emit}) {
-        const store = useStore();
-		const detailData = reactive({
-			
-		})
-		const getDetailListData = reactive({
-		
-		})
-		const getDetailListDom = reactive({
-		})
-        return{
-			...toRefs(detailData),
-			...toRefs(getDetailListData),
-			...toRefs(getDetailListDom),
-
-        }
-    },
-
-	provide() {
-		return {
-		}
-	},
-		
-})
-</script>
-<style lang="less" scoped>
-    .sketchType{
-		
-	}
-</style>

src/component/DetailCopy/detailRight/index.vue

@@ -6,7 +6,6 @@
 		</div> -->
 		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
 		<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
-		<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
 		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
 		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
 		<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
@@ -20,15 +19,15 @@ import { useStore } from "vuex";
 import sketchType from './sketchType.vue'
 import printType from './printType.vue'
 import editPrintElement from './editPrintElement.vue'
-import elementType from './elementType.vue'
 import modelsType from './modelsType.vue'
 export default defineComponent({
     components:{
-		sketchType,printType,elementType,editPrintElement,modelsType
+		sketchType,printType,editPrintElement,modelsType
     },
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
+		    designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			editPrintElement:null as any,
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
@@ -55,6 +54,7 @@ export default defineComponent({
 		display: flex;
 		flex: 1;
 		overflow: hidden;
+		flex-direction: column;
 		> .detailText{
 			margin-bottom: 1rem;
 		}

src/component/DetailCopy/detailRight/modelsType.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sketchType" v-show="designDetail?.newModel">
-		<div class="detailText">{{$t('DesignPrintOperation.NewPrint')}}</div>
+		<div class="detailText">{{$t('DesignPrintOperation.NewModel')}}</div>
 		<div class="sketchContent">
 			<img :src="designDetail.newModel?.url" alt="">
 		</div>

src/component/DetailCopy/model/modelNav.vue

@@ -1,9 +1,16 @@
 <template>
-    <div class="modelNav">
+   <div class="modelNavBox">
-		<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+	<div class="modelNav" ref="modelNav" :style="{height:prentHeight}">
+		<div class="modelNav_item item" 
+			v-for="item,index in designDetail.clothes" 
+			:class="{active:(selectDetail && item.id == selectDetail.id)}" 
+			@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
+			@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
+			@click="selectDetailItem(item,index)">
 			<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			<img :src="item.path" alt="">
 		</div>
+    </div>
 	<div v-show="singleOveral.value == 'overall'" v-if="currentDetailType == 'sketch' || currentDetailType == '' " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
 		+
 	</div>
@@ -18,6 +25,7 @@ import { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import position from './modelPosition.vue';
+import { getMousePosition } from "@/tool/mdEvent"
 export default defineComponent({
     components:{
 		position,
@@ -31,15 +39,33 @@ export default defineComponent({
 			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
-			frontBack:{} as any,
 			isEditPattern:inject('isEditPattern') as any,
 			singleOveral:inject('singleOveral') as any,
 			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
+			modelNav:null as any,
+		})
+		const collItemSize = reactive({
+			collValue:18,
+			num:1,
+			prentHeight:0 as any,
+			padding:10,
+			likeStyle:{
 				
+			},
+			itemStyle:{
+				width:0,
+				height:0,
+			},
+			collTime:null as any,
+			isMove:false,
+			elList:[] as any,
+			selectIndex:0,
 		})
-		watch(()=>detailData.frontBack_,(newFollowVue)=>{
+		watch(()=>detailData.designDetail.clothes.length,(newVal)=>{
-			detailData.frontBack = newFollowVue
+			nextTick(()=>{
+				setItemPosition()
 			})
+		},{immediate:true})
 		const selectDetailItem = (item:any,index:number)=>{
 			new Promise((resolve, reject) => {
 				if(detailData.isEditPattern.value && 
@@ -80,14 +106,147 @@ export default defineComponent({
 			store.commit('DesignDetailCopy/addDesignColthes')
 			emit('addSketch')
 		}
+
+
+
+		const designMousedown = (e:any,uniqueId:number,str:string)=>{
+			let item:any  = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
+			if(!item)return
+			item.el.style.zIndex = 2;
+			item.el.style.transition = 'all 0s';
+			let startX = e.clientX,
+			startY = e.clientY,
+			top = item.el.offsetTop;
+			collItemSize.isMove = false
+			let moveFun = (e:any) => {
+				collItemSize.isMove = true
+				let X = 0;
+				let Y = e.clientY - startY + top;
+				item.el.style.left = `${X}px`;
+				item.el.style.top = `${Y}px`;
+				reRange(item, X, Y,str);
+			};
+			let mouseUpFun = ()=>{
+				document.removeEventListener('mousemove',mouseMove)
+				document.removeEventListener('touchmove',touchmove)
+
+				document.removeEventListener('mouseup',mouseUpFun) 
+				document.removeEventListener('touchend',mouseUpFun) 
+				item.el.style.zIndex = 1;
+				item.el.style.transition = 'top .5s';
+				moveItem();
+				sortDesignCollection()
+			}
+			let mouseMove = function(event:any){
+				let e = getMousePosition(event,false)
+				moveFun(e)
+			}
+			let touchmove = function(event:any){
+				let e = getMousePosition(event,true)
+				moveFun(e)
+			}
+
+			document.addEventListener('mousemove',mouseMove)
+			document.addEventListener('touchmove',touchmove)
+
+			document.addEventListener('mouseup',mouseUpFun) 
+			document.addEventListener('touchend',mouseUpFun) 
+		}
+		//排序  从大到小
+		const sortDesignCollection = ()=> {
+		
+		}
+		const reRange = (item:any, x:number, y:number,str:string)=>{
+			let elList:any = collItemSize.elList
+			let index = collItemSize.selectIndex
+			let width,height,num
+			num = collItemSize.num
+			width = collItemSize.itemStyle.width
+			height = collItemSize.itemStyle.height
+			
+			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
+			moveIndex = elList.length - 1 - moveIndex
+			moveIndex = moveIndex < 0 ? 0 : moveIndex;
+			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
+			if(moveIndex != index){
+				collItemSize.selectIndex = moveIndex;
+				let currentSort = item.sort;
+				for(let i = 0;i < elList.length;i++){
+					if(currentSort < moveIndex){
+						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
+							elList[i].sort -= 1;
+						};
+					}else if(currentSort > moveIndex){
+						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
+							elList[i].sort += 1;
+						};
+					}
+				};
+				elList[item.index].sort = moveIndex;
+				moveItem();
+			}
+		}
+		const moveItem = ()=>{
+			let value = collItemSize.num
+			for(let i = 0;i < collItemSize.elList.length;i++){
+				let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +collItemSize.padding) + 'px';
+				collItemSize.elList[i].el.style.top = height
+			}
+			setZIndex()
+		}
+		const setZIndex = ()=>{
+			collItemSize.elList.forEach((elItem:any)=>{
+				let clothesIndex = detailData.designDetail.clothes.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
+				let clothesId = detailData.designDetail.clothes[clothesIndex].id
+				detailData.designDetail.clothes[clothesIndex].priority = elItem.sort
+				let frontIndex = detailData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
+				detailData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
+				// detailData.frontBack_.back[frontIndex].style.zIndex = elItem.sort + 1
+			})
+		}
+		const setItemPosition = ()=>{
+			let parent = detailData.modelNav.offsetWidth
+			let elArr = detailData.modelNav.querySelectorAll('.item')
+			let value = collItemSize.num
+			const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+			const remValue = 12 * htmlFontSize;
+			//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
+			collItemSize.itemStyle.height = remValue
+			collItemSize.elList = []
+			let arr:any = detailData.designDetail.clothes
+			arr.forEach((item,index) => {item.uniqueId  = `${Date.now()}_${index}`});
+
+			const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
+			const sortMap = {} as any;
+			sortedArray.forEach((item, index) => {
+				sortMap[item.priority] = index ; // 1, 2, 3, 4...
+			});
+			for(let i = 0;i < elArr.length;i++){
+				collItemSize.elList.push({
+					el: elArr[i], 
+					// sort: elArr.length - i -1, 
+					sort: sortMap[arr[i].priority],
+					index: i,
+					uniqueId:arr[i]?.uniqueId || 99999,
+				});
+			}
+			collItemSize.prentHeight = (collItemSize.padding + remValue) * elArr.length + 'px'
+			moveItem()
+		} 
+		onMounted(()=>{
+			
+		})
 		// onBeforeUnmount(()=>{
 		// 	detailData.selectIndex = -1
 		// })
         return{
 			...toRefs(detailData),
+			...toRefs(collItemSize),
 			selectDetailItem,
 			deleteDetailItem,
+			designMousedown,
 			addSketch,
+			getMousePosition,
         }
     },
 
@@ -99,8 +258,8 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
-    .modelNav{
+	.modelNavBox{
-		> .modelNav_item{
+		.modelNav_item{
 			width: 12rem;
 			height: 12rem;
 			padding: 1rem;
@@ -108,7 +267,9 @@ export default defineComponent({
 			border: 2px solid #B4B4B4;
 			margin-bottom: 1.5rem;
 			cursor: pointer;
-			position: relative;
+			position: absolute;
+			background: #fff;
+			transition: top .3s;
 			&:hover{
 				> i{
 					display: block;
@@ -137,8 +298,14 @@ export default defineComponent({
 				font-size: 8rem;
 				display: flex;
 				align-items: center;
+				position: absolute;
 				justify-content: center;
 			}
 		}
 	}
+    .modelNav{
+		position: relative;
+		width: 12rem;
+		
+	}
 </style>

src/component/DetailCopy/model/modelPosition.vue

@@ -18,7 +18,7 @@
 			</div>
 		</div>
 		<div class="designOpenrtion_imgMask" v-else>
-			<img :src="selectDetail.undividedLayer" alt="">
+			<img :src="selectDetail.undividedLayer" style="object-fit: cover;" alt="">
 		</div>
     </div>
 	<div class="molepositon" :class="{active:imgDesignImg}">
@@ -144,9 +144,10 @@ export default defineComponent({
 				top:selectItem.imgDom.offsetTop+'px',
 				height:selectItem.imgDom.offsetHeight+'px',
 				width:selectItem.imgDom.offsetWidth+'px',
-				zIndex:selectItem.printZIndex
+				zIndex:selectItem.imgDom.style.zIndex,
+				// zIndex:selectItem.printZIndex
 			}
-			detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
+			// detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
 			document.removeEventListener('mousemove',sizeMouseMove)
 			document.removeEventListener('touchmove',sizeTouchmove)
 			document.removeEventListener('mouseup',sizeMouseup) 
@@ -271,8 +272,8 @@ export default defineComponent({
 			let event = e||window.event
 			selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
 			detailData.frontBack.front[index].designOpenrtionBtn = true
-			detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
+			// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
-			detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
+			// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
 			let imgDomWH = selectItem.imgDom.getBoundingClientRect()
 			let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
 			let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
@@ -346,8 +347,8 @@ export default defineComponent({
 				v.designOpenrtionBtn = false
 			})
 			detailData.frontBack.front[index].designOpenrtionBtn = true
-			detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
+			// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
-			detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
+			// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
 			clothesOpenActive(index)
 		}
 		const updataPosition = ()=>{
@@ -473,11 +474,6 @@ export default defineComponent({
 				position: absolute;
 				top: 0;
 			}
-			.designOpenrtion_print{
-				img{
-					object-fit: cover;
-				}
-			}
 			.detail_modal_item_front,.designOpenrtion_print{
 				z-index: 2;
 				height: 100%;

src/component/HomePage/ColorboardUpload.vue

@@ -915,6 +915,7 @@ export default defineComponent({
 				position: relative;
 				padding-right: calc(3rem*1.2);
 				margin-right: 2.4rem;
+				width: 24rem;
 				.upload_centetn{
 					// overflow-x: hidden;
 					height: calc(100% - 4.4rem*1.2);

src/component/HomePage/Generate.vue

@@ -334,6 +334,7 @@ export default defineComponent({
 		})
 		const setSpeed = (item:any)=>{
 			speed.speedState = false
+			document.removeEventListener('click',openSpeed)
 			speed.speedData = item
 		}
         return {

src/component/HomePage/PrintboardUpload.vue

@@ -211,6 +211,9 @@ export default defineComponent({
 		let printCatecoryList:any = computed(()=>{
 			return store.state.UserHabit.printType
 		})
+		let printboardList = computed(()=>{
+			return  store.state.UploadFilesModule.printboard
+		})
         return {
             fileList,
             printImgList,
@@ -225,6 +228,7 @@ export default defineComponent({
 			scene,
 			openMenu,
 			printCatecoryList,
+			printboardList,
         }
     },
     computed:{
@@ -253,9 +257,7 @@ export default defineComponent({
             cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
             currentFileNum:0, //当前上传的文件数
             isUpload:false,
-			printboardList:computed(()=>{
+		
-				return  useStore().state.UploadFilesModule.printboard
-			}),
 			isTextarea:false,
 			isInputFocus:false,
         }

src/component/HomePage/renew.vue

@@ -5,7 +5,7 @@
     :get-container="() => $refs.renew"
     v-model:visible="renewModel"
     :footer="null"
-    width="130rem"
+    width="110rem"
     height="auto"
     :maskClosable="false"
     :centered="true"
@@ -49,90 +49,64 @@
     </div>
     <div class="renewContent">
       <div class="left">
-        <div class="title">Unlock the Pro Advantage</div>
+		<div class="video">
+			<video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
+			<div class="mask"></div>
+		</div>
+        <div class="title">{{ $t("Renew.Strengths") }}</div>
         <div class="content">
-          <div class="benefits">
+          <div class="benefitsItem">
-            <div>Benefits</div>
+            <div class="describe">
-            <div class="contrast">
+              <div class="icon">
-              <div>Free</div>
+				<img src="@/assets/images/icon/paymentIntroduce1.png" alt="">
-              <div>PRO</div>
+              </div>
+              <div class="text">
+                <p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
+                <p class="info">
+					{{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
+                </p>
+              </div>
             </div>
           </div>
           <div class="benefitsItem">
             <div class="describe">
               <div class="icon">
-                <img
+				<img src="@/assets/images/icon/paymentIntroduce2.png" alt="">
-                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
-                />
               </div>
               <div class="text">
-                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
+                <p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p>
                 <p class="info">
-                  More accurate answers with multiple latest AI models
+					{{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
                 </p>
               </div>
             </div>
-            <div class="contrast">
-              <div>√</div>
-              <div>×</div>
-            </div>
           </div>
           <div class="benefitsItem">
             <div class="describe">
               <div class="icon">
-                <img
+				<img src="@/assets/images/icon/paymentIntroduce3.png" alt="">
-                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
-                />
               </div>
               <div class="text">
-                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
+                <p class="title"></p>
+                <p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p>
                 <p class="info">
-                  More accurate answers with multiple latest AI models
+					{{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
                 </p>
               </div>
             </div>
-            <div class="contrast">
-              <div>√</div>
-              <div>×</div>
-            </div>
           </div>
           <div class="benefitsItem">
             <div class="describe">
               <div class="icon">
-                <img
+				<img src="@/assets/images/icon/paymentIntroduce4.png" alt="">
-                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
-                />
               </div>
               <div class="text">
-                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
+                <p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p>
                 <p class="info">
-                  More accurate answers with multiple latest AI models
+					{{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
                 </p>
               </div>
             </div>
-            <div class="contrast">
-              <div>√</div>
-              <div>×</div>
-            </div>
-          </div>
-          <div class="benefitsItem">
-            <div class="describe">
-              <div class="icon">
-                <img
-                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
-                />
-              </div>
-              <div class="text">
-                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
-                <p class="info">
-                  More accurate answers with multiple latest AI models
-                </p>
-              </div>
-            </div>
-            <div class="contrast">
-              <div>√</div>
-              <div>×</div>
-            </div>
           </div>
         </div>
       </div>
@@ -140,7 +114,7 @@
         <div class="title">
           {{ $t("Renew.title") }}
         </div>
-        <div class="info">Get started today for unlimited access!</div>
+        <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
         <div class="content">
           <div
             class="productItem"
@@ -232,25 +206,34 @@
             </div>
           </div>
           <div class="gallery_btn gallery_btn_radius" @click="payment">
-            Continue
+                {{ $t("Renew.Continue") }}
           </div>
           <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
             <label>
-              <input type="checkbox" v-model="clause" />
+              <!-- <input type="checkbox" v-model="clause" /> -->
               <span class="generalModelDescription"
-                >{{ $t("upgradePlan.policy1")
+                >{{ $t("upgradePlan.policy")}}
-                }}<a
+				<!-- <a
                   href="https://code-create.com.hk/aida-terms-and-conditions/"
                   target="_blank"
                   >{{ $t("upgradePlan.policy2") }}</a
-                >{{ $t("upgradePlan.policy3")
+                >{{ $t("upgradePlan.policy3")}}
-                }}<a
+				<a
                   href="https://code-create.com.hk/aida-subscription-agreement/"
                   target="_blank"
                   >{{ $t("upgradePlan.policy4") }}</a
-                >. *</span
+                > -->
+				<!-- . * -->
+				</span
               >
             </label>
+			<label class="secure">
+				<span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span>
+			</label>
+			<label class="payIcon">
+				<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
+				<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
+			</label>
           </div>
           <!-- <div class="paySecure">
 						<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
@@ -315,7 +298,7 @@ export default defineComponent({
           activity: false, //活动打折
           type: {
             value: "Month",
-            label: "Month",
+            label: "Monthly",
           },
           PaymentType: "",
           promotionData: {
@@ -332,7 +315,7 @@ export default defineComponent({
           typeValue: "year",
           type: {
             value: "Year",
-            label: "Year",
+            label: "Yearly",
           },
           PaymentType: "",
           promotionData: {
@@ -410,23 +393,18 @@ export default defineComponent({
       renewData.current.PaymentType = str;
     };
     const payment = () => {
-      if (!payMethodData.clause) {
+    //   if (!payMethodData.clause) {
-        let labelDisclaimer: any = payMethodData.labelDisclaimer;
+    //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
-        if (!labelDisclaimer.classList.contains("animation")) {
+    //     if (!labelDisclaimer.classList.contains("animation")) {
-          labelDisclaimer.classList.add("animation");
+    //       labelDisclaimer.classList.add("animation");
-          setTimeout(() => {
+    //       setTimeout(() => {
-            labelDisclaimer.classList.remove("animation");
+    //         labelDisclaimer.classList.remove("animation");
-          }, 1000);
+    //       }, 1000);
-        }
+    //     }
-        return;
+    //     return;
-      }
+    //   }
       if (!renewData.current.PaymentType)
         return message.info(t("Renew.PleaseSelectPayment"));
-      // let data = {
-      // 	autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
-      // 	productName:'Subscription',
-      // 	subscribeType,//yearly为年费，monthly为月费
-      // }
       let url = window.location.origin + "/paySucceed";
       let data = {
         autoRenewal: renewData.current.PaymentType != "Alipay", //false为不自动续费
@@ -565,6 +543,7 @@ export default defineComponent({
         font-size: 3.2rem;
         font-weight: 600;
         line-height: 4rem;
+		position: relative;
       }
       > .info {
         text-align: center;
@@ -572,85 +551,89 @@ export default defineComponent({
         font-weight: 400;
         margin-top: 0.8rem;
         font-size: 1.6rem;
+		position: relative;
       }
       > .content {
         margin-top: 2rem;
         display: flex;
         flex-direction: column;
+		position: relative;
       }
     }
     > .left {
-      width: 60%;
+      width: 50%;
       background: #0f0f0f;
       color: #fff;
       padding: 4rem 3.2rem;
+	  position: relative;
+	  > .video{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		> video{
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+		> .mask{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			background: rgba(0,0,0,.5);
+		}
+	  }
+	 
       > .title {
-        opacity: 0.6;
+        opacity: 1;
+		// color: #fff;	
       }
       > .content {
-        > .benefits,
+		flex-wrap: wrap;
+		flex-direction: row;
         > .benefitsItem {
           display: flex;
-          > .contrast {
+		  width: 50%;
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            > div {
-              width: 8rem;
-              text-align: center;
-            }
-            > div:nth-child(1) {
-              margin-right: 2.4rem;
-              opacity: 0.5;
-            }
-            > div:nth-child(2) {
-              opacity: 1;
-              color: #38c793;
-              text-shadow: 0 4px 27.1px #38c793b3;
-            }
-          }
-        }
-        > .benefits {
-          > div:nth-child(1) {
-            opacity: 0.5;
-          }
-          font-weight: 600;
-          font-size: 2rem;
-          margin: 1rem 0;
-          padding: 0 1.6rem;
         }
+      
         > .benefitsItem {
-          border: 1px solid #27272a;
           border-radius: 2.4rem;
           margin-bottom: 1.6rem;
           padding: 1.6rem;
+		justify-content: center;
           > .describe {
             display: flex;
             align-items: center;
+			flex-direction: column;
             > .icon {
-              border: 1px solid #27272a;
+            //   border: 1px solid #27272a;
-              background: linear-gradient(#1d1d1d, #000);
+            //   background: linear-gradient(#1d1d1d, #000);
-              border-radius: 1.4rem;
+            //   border-radius: 1.4rem;
-              margin-right: 1.6rem;
+            //   margin-right: 1.6rem;
-              padding: 1.4rem;
+            //   padding: 1.4rem;
               > img {
-                width: 3.5rem;
+                width: 12rem;
-                height: 3.5rem;
+                height: 12rem;
               }
             }
             > .text {
+				text-align: center;
               > p {
                 margin: 0;
               }
               > .title {
-                font-size: 1.8rem;
+                font-size: 2.1rem;
                 font-weight: 600;
+				line-height: 1;
               }
               > .info {
-                font-weight: 400;
+                font-weight: 600;
                 margin-top: 0.4rem;
-                font-size: 1.6rem;
+                font-size: 1.2rem;
-                opacity: 0.5;
+                // opacity: 0.5;
               }
             }
           }
@@ -658,7 +641,7 @@ export default defineComponent({
       }
     }
     > .right {
-      width: 40%;
+      width: 50%;
       flex-direction: column;
       align-items: center;
       padding: 4rem 3.2rem;
@@ -808,9 +791,14 @@ export default defineComponent({
         > .gallery_btn {
           width: 100%;
           margin: 2rem 0;
+		  margin-bottom: .5rem;
           margin-top: 1rem;
         }
         > .payMethod_payAffirm_clause {
+			text-align: center;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
           label {
             input {
               margin-right: 1rem;
@@ -826,6 +814,30 @@ export default defineComponent({
               }
             }
           }
+		  > .secure{
+			border: 1px solid #ededed;
+			background: #f1fbf9;
+			color: #1cb36c;
+			padding: .4rem .8rem;
+			border-radius: .5rem;
+			margin-top: 4rem;
+			> span{
+				display: flex;
+				align-items: center;
+			}
+			i{
+				display: flex;
+				margin-right: .5rem;
+			}
+		  }
+		  > .payIcon{
+			height: 2rem;
+			margin-top: 1rem;
+			img{
+				margin: 0 .3rem;
+				height: 100%;
+			}
+		  }
           &.animation {
             animation: shake 0.3s linear;
             @keyframes shake {

src/component/HomePage/scaleImage.vue

@@ -257,6 +257,7 @@ export default defineComponent({
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
 			speed.speedState = false
+			document.removeEventListener('click',openSpeed)
 		}
         let scaleImage: any = ref(false);
 		let isShowMark = ref(false)

src/component/home/chat/index.vue

@@ -164,7 +164,7 @@ export default defineComponent({
 				}else if(eventData.type == 'think'){
 					data.chatList[data.chatList.length-1].content.think+=eventData.content
 				}else if(eventData.type == "tools_response"){
-					let nameList = ['moodboard','printboard','sketchboard','generate_color_code','search_sketch_img']
+					let nameList = ['moodboard','printboard','sketchboard','colorboard','search_sketch_img']
 					let nameData = {
 						moodboard:'moodBoard',
 						printboard:'printBoard',
@@ -173,7 +173,7 @@ export default defineComponent({
 					let getData = ''
 					if(nameList.indexOf(eventData.tools_name) > -1){
 						if(data.chatList[data.chatList.length - 1].content.message)data.chatList.push({content:{message:''},role:'system'})
-						if(eventData.tools_name == 'generate_color_code'){
+						if(eventData.tools_name == 'colorboard'){
 							data.chatList[data.chatList.length-1].content.color = JSON.parse(JSON.parse(event.data).content).receiveCollectionElementList
 							getData = 'colorBoard'
 						}else{

src/component/home/design/collection/ColorboardUpload.vue

@@ -900,7 +900,7 @@ export default defineComponent({
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		
+		width: 24rem;
 		.upload_centetn{
 			height: 100%;
 			display: flex;

src/component/home/design/collection/MoodboardUpload.vue

@@ -185,6 +185,9 @@ export default defineComponent({
 		let modalImg:any= computed(()=>{
 			return store.state.UploadFilesModule.disposeMoodboard
 		})
+		let moodboarList=computed(()=>{
+			return  store.state.UploadFilesModule?.moodboard
+		})
 		let uploading:any = ref([])
 		let edieShow:any = ref()
 		let {t} = useI18n()
@@ -205,6 +208,7 @@ export default defineComponent({
 			uploading,
 			edieShow,
 			t,
+			moodboarList,
         };
     },
     data() {
@@ -226,9 +230,7 @@ export default defineComponent({
             moodTemplateId: "", //模板id
             store: useStore(),
 			moodb_:moodb.moodb_,
-			moodboarList:computed(()=>{
+			
-				return  useStore().state.UploadFilesModule?.moodboard
-			}),
         };
     },
 	// watcheffect(){

src/component/home/design/collection/PrintboardUpload.vue

@@ -221,6 +221,9 @@ export default defineComponent({
 		let printCatecoryList:any = computed(()=>{
 			return store.state.UserHabit.printType
 		})
+		let printboardList = computed(()=>{
+			return  store.state.UploadFilesModule.printboard
+		})
         return {
             fileList,
             printImgList,
@@ -235,6 +238,7 @@ export default defineComponent({
 			scene,
 			openMenu,
 			printCatecoryList,
+			printboardList,
         }
     },
     computed:{
@@ -263,9 +267,7 @@ export default defineComponent({
             cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
             currentFileNum:0, //当前上传的文件数
             isUpload:false,
-			printboardList:computed(()=>{
+			
-				return  useStore().state.UploadFilesModule.printboard
-			}),
 			isTextarea:false,
 			isInputFocus:false,
         }
@@ -607,6 +609,7 @@ export default defineComponent({
                 }
                 this.fileList.push(data)
             }
+			console.log(this.fileList)
             this.store.commit('setPrintboardFile',this.fileList)
             
         },

src/component/home/design/collection/more.vue

@@ -109,6 +109,7 @@ export default defineComponent({
 			font-size: 1.4rem;
 			// width: 12rem;
 			text-align: left;
+			z-index: 99;
 			> .item{
 				display: flex;
 				align-items: center;

src/component/home/design/editDesignType/index.vue

@@ -285,6 +285,7 @@ setup(props:any,{emit}) {
 	}
 	const setSpeed = (item:any)=>{
 		speed.speedData = item
+		document.removeEventListener('click',openSpeed)
 		speed.speedState = false
 	}
 	let scaleImage: any = ref(false);

src/component/home/design/index.vue

@@ -28,9 +28,6 @@
 							</div>
 							<!-- 有图状态 end-->
 						</div>
-						<div class="designPage_left_bottom" @click="setShowHide('domHidden')" >
-							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
-						</div>
 					</div>
 					<div class="designPage_right">
 						<div class="right_top">
@@ -39,14 +36,14 @@
 								<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
 									{{ $t('HomeView.Design') }}
 								</div>
-								<div class="generage_btn_box">
+								<div class="generage_btn_box white">
 									<div class="generage_btn started_btn" style="margin-left: 2rem;">
 										<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
 											{{ $t('Header.Tools') }}
 										</div>
 										<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
 										<div class="content" v-show="speedState">
-											<div v-for="item in speedList" :key="item.value" style="font-size: 1.6rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+											<div v-for="item in speedList" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 										</div>
 									</div>
 								</div>
@@ -76,33 +73,80 @@
 												</span>
 										</div>
 										<div class="generalModel_state" v-show="likeDesignTools">
-											<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
+											<div>
-												<span>{{ $t('Header.Type') }} :</span>
+												<selectMenu 
-												<a-select
+													:selectList="resultTypeList" 
-													v-model:value="resultType"
-													size="large"
-													style="width: 15rem"
-													placeholder="Please select"
-													:options="resultTypeList"
 													@change="changeResultType" 
+													:isBtnOpen='true'
+													:style="{
+														'border-radius':'0rem',
+														'border':'none',
+														'font-weight': '900',
+														'border-right':'2px solid rgba(0,0,0,.2)',
+														'line-height': '3rem',
+														'height': '3rem',
+														'background': 'rgba(0,0,0,0)',
+													}"
+													v-model:select="resultType"
 													>
-												</a-select>
+													<template v-slot:btnText>
+														Classify
+													</template>
+												</selectMenu>
 											</div>
-											<div class="generalModel_state_item smail" style="margin-right: 1rem;">
+											<div>
+												<selectMenu 
+													:selectList="[
+														{
+															label:'Unfold',
+															value:true,
+														},
+														{
+															label:'Merge',
+															value:false,
+														},
+													]" 
+													@change="setUnfold" 
+													:isBtnOpen='true'
+													:style="{
+														'border-radius':'0rem',
+														'border':'none',
+														'font-weight': '900',
+														'border-right':'2px solid rgba(0,0,0,.2)',
+														'line-height': '3rem',
+														'height': '3rem',
+														'background': 'rgba(0,0,0,0)',
+													}"
+													v-model:select="isUnfold"
+													>
+													<template v-slot:btnText>
+														{{ $t('Header.Unfold') }}
+													</template>
+												</selectMenu>
+											</div>
+											<!-- <div class="generalModel_state_item smail" style="margin-right: 1rem;">
 												<span>{{ $t('Header.Unfold') }} :</span>
 												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
-											</div>
+											</div> -->
-											<div class="generalModel_state_item smail" style="margin-right: 0;">
+											<div>
-												<span>{{ $t('Header.Size') }} :</span>
+												<selectMenu 
-												<a-select
+													:selectList="widthList" 
-													v-model:value="widthValue.value"
-													size="large"
-													style="width: 15rem"
-													placeholder="Please select"
-													:options="widthList"
 													@change="setSystemDesigner(500)" 
+													:isBtnOpen='true'
+													:style="{
+														'border-radius':'0rem',
+														'border':'none',
+														'font-weight': '900',
+														'line-height': '3rem',
+														'height': '3rem',
+														'background': 'rgba(0,0,0,0)',
+													}"
+													v-model:select="widthValue.value"
 													>
-												</a-select>
+													<template v-slot:btnText>
+														{{ $t('Header.Size') }}
+													</template>
+												</selectMenu>
 											</div>
 										</div>
 									</div>
@@ -168,8 +212,15 @@
 										</div>
 									</div>
 								</div>
+								<div class="designPage_left_bottom left" @click="setShowHide('domHidden')" >
+									<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
+								</div>
+								<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
+									<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
+								</div>
 							</div>
 							<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
+								
 								<div class="right_content_body">
 									<div class="right_content_header">
 										<div class="content_header_left">
@@ -218,9 +269,7 @@
 								</div>
 								
 							</div>
-							<div class="designPage_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
+							
-								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
-							</div>
 						</div>
 					</div>
 				</div>
@@ -294,6 +343,7 @@ import { getMousePosition } from "@/tool/mdEvent";
 import { removeClass } from "element-plus/es/utils";
 import collectionModal from './collection.vue'
 import designTools from './tools.vue'
+import selectMenu from '@/component/modules/selectMenu.vue'
 
 export default defineComponent({
 	name: "homePage",
@@ -306,6 +356,7 @@ export default defineComponent({
 		DesignDetailcopy,
 		editDesignType,
 		designTools,
+		selectMenu,
 	},
 	emits:['setTask'],
 	 activated() {
@@ -436,6 +487,7 @@ export default defineComponent({
 		}
 		const setSpeed = (item:any)=>{
 			speed.speedState = false
+			document.removeEventListener('click',openSpeed)
 			speed.speedData = item
 		}
 		const openEditTools = ()=>{
@@ -2002,35 +2054,7 @@ export default defineComponent({
 		position: relative;
 		
 		
-		.designPage_left_bottom{
-			position: absolute;
-			width: 3rem;
-			height: 7rem;
-			background: #fff;
-			border: 2px solid;
-			border-right: none;
-			border-radius: 2rem 0 0 2rem;
-			top: 50%;
-			transform: translate(-100%,-50%);
-			left: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 2;
-			cursor: pointer;
-			transition: width .3s;
-			&:hover{
-				width: 4rem;
-			}
-			>span{
-				transition: all .3s;
-				transform: rotate(90deg);
-				&.active{
-					transform: rotate(270deg);
-				}
-			}
 		
-		}
 		.page_content_body {
 			position: absolute;
 			width: 100%;
@@ -2162,6 +2186,33 @@ export default defineComponent({
 					justify-content: space-between;
 					position: relative;
 					.designPage_left_bottom{
+						position: absolute;
+						width: 3rem;
+						height: 7rem;
+						background: #fff;
+						border: 2px solid;
+						border-right: none;
+						border-radius: 2rem 0 0 2rem;
+						top: 50%;
+						transform: translate(-100%,-50%);
+						left: 0;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						z-index: 2;
+						cursor: pointer;
+						transition: width .3s;
+						&:hover{
+							width: 4rem;
+						}
+						>span{
+							transition: all .3s;
+							transform: rotate(90deg);
+							&.active{
+								transform: rotate(270deg);
+							}
+						}
+						&.right{
 							border-radius: 0 2rem 2rem 0rem;
 							left: 2rem;
 							top: 50%;
@@ -2172,13 +2223,16 @@ export default defineComponent({
 							border: 2px solid;
 							border-left: none;
 							flex-direction: column;
+							
 							&.active{
-							left: 44rem;
+								// left: 44rem;
-							transform: translate(0, -50%);
 							}
 						}
+					}
+					
 					.right_top {
 						padding: 1rem 3.2rem 2rem 1.2rem;
+						padding-right: 0;
 						display: flex;
 						justify-content: space-between;
 						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
@@ -2214,11 +2268,11 @@ export default defineComponent({
 					.right_content_block_box{
 						flex: 1;
 						display: flex;
-						overflow: hidden;
 					}
 					.right_content_block {
 						flex: 1;
 						display: flex;
+						position: relative;
 						width: 0;
 						flex-direction: column;
 						&.recycleBin{

src/component/home/index.vue

@@ -164,6 +164,7 @@ export default defineComponent({
 					label:rv.workspaceVO?.positionEnum?.value,
 					value:rv.workspaceVO?.positionEnum?.name
 				},
+				workspaceId:rv.workspaceVO?.id,
 				positionList:[],
 				publishData:{
 					id:rv.portfolioDTO?.id?rv.portfolioDTO?.id:'',

src/component/home/newProject/setting.vue

@@ -107,6 +107,7 @@ export default defineComponent({
 					value:rv.workspaceVO.positionEnum.name
 				},
 				positionList:[],
+				workspaceId:rv.workspaceVO?.id,
 				publishData:{
 					id:rv.portfolioDTO.id?rv.portfolioDTO.id:'',
 					portfolioDes:rv.portfolioDTO.portfolioDes?rv.portfolioDTO.portfolioDes:'',

src/component/home/newProject/workspace.vue

@@ -196,6 +196,7 @@ export default defineComponent({
 				styleId:data.show.style?data.selectObject.styleId:null,
 				id:data.selectObject.id,
 				workspace:{
+					id:data.selectObject.workspaceId,
 					sex:data.selectObject.sex,
 					// sex:data.show.gender?data.selectObject.sex:null,
 					systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
@@ -230,6 +231,7 @@ export default defineComponent({
 							label:rv.workspaceVO?.positionEnum?.value,
 							value:rv.workspaceVO?.positionEnum?.name
 						},
+						workspaceId:rv.workspaceVO?.id,
 						positionList:[],
 						publishData:{
 							id:rv.portfolioDTO?.id?rv.portfolioDTO?.id:'',

src/component/home/tools/patternMaking3D/index.vue

@@ -83,6 +83,7 @@
 			<download ref="download"></download>
 		</div>
 		<collection ref="collection" :isNext="false"></collection>
+		<scaleImage ref="scaleImage"></scaleImage>
 	</div>
 </template>
 <script lang="ts">
@@ -234,7 +235,6 @@ export default defineComponent({
 		
 		const openScaleImage = ()=>{
 			let scaleImage:any = dataDom.scaleImage
-			scaleImage.isLike = false
 			scaleImage.init([{imgUrl:data.selectModel.threeDPatternLayoutUrl}],0)
 		}
 		const setPrint = async (item:any)=>{
@@ -468,6 +468,7 @@ export default defineComponent({
 						top: 2rem;
 						> i{
 							cursor: pointer;
+							font-size: 2rem;
 						}
 					}
 					img{

src/component/home/tools/poseTransfer/index.vue

@@ -482,6 +482,7 @@ export default defineComponent({
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
 			speed.speedState = false
+			document.removeEventListener('click',openSpeed)
 		}
 		const setUploadDelete = (item:any,index:any)=>{
 			let value = {

src/component/home/tools/toProduct/index.vue

@@ -801,6 +801,7 @@ export default defineComponent({
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
 			speed.speedState = false
+			document.removeEventListener('click',openSpeed)
 		}
         return {
 			upload,

src/component/modules/generalMiniCanvas.vue

@@ -3,9 +3,7 @@
 		<div class="canvasBox" ref="canvasBox">
 			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 				@canvasInit="canvasInit"
-				:clothing-image-opts="{
+				
-					imageMode:'contains',
-				}"
 				ref="editCanvas"></editCanvas>
 		</div>
 		<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</div>
@@ -56,11 +54,16 @@ export default defineComponent({
 			data.canvasLoad = true
 		}
 		const canvasLoadAddImg = (url,id)=>{
-			dataDom.editCanvas.addImageToLayer(url,{layerId:id,undoable:false})
+			console.log(url,{layerId:id,undoable:false})
+			dataDom.editCanvas.layers[0].id
+			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas,imageMode:'contains',undoable:false})
 		}
 		const canvasInit = (value)=>{
 			// return
+			console.log(value,123123)
+			setTimeout(()=>{
 				canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
+			},1000)
 		}
 		const getCanvasData = ()=>{
 			

src/component/modules/selectMenu.vue

@@ -0,0 +1,172 @@
+
+
+<script lang="ts" setup>
+import { defineComponent,watch, h, defineProps ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+import { message,Modal } from "ant-design-vue";
+import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
+
+// import domTurnImg from '@/tool/domTurnImg'
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+	selectList:{
+		type:Array,
+		default:()=>[]
+	},
+	isBtnOpen:{
+		type: Boolean,
+		default: false
+	},
+	select:{
+		type: [String,Boolean,Number,],
+		default: ''
+	},
+	style:{
+		type: Object,
+		default:()=>{}
+	}
+})
+const emit = defineEmits(['update:select','changeSelect','bentClick','change']);
+const selectMenu = reactive({
+  speedState: false
+})
+
+const openSpeed = (event?: MouseEvent) => {
+  	event?.stopPropagation()
+ 	selectMenu.speedState = !selectMenu.speedState
+  	if(selectMenu.speedState){
+		document.addEventListener('click',openSpeed)
+	}else{
+		document.removeEventListener('click',openSpeed)
+	}
+}
+const setSpeed = (item: any) => {
+  selectMenu.speedState = false
+  emit('update:select', item.value)
+  emit('change')
+  document.removeEventListener('click', openSpeed)
+}
+const openEditTools = ()=>{
+	emit('bentClick')
+}
+// 组件卸载时移除事件监听
+onBeforeUnmount(() => {
+	document.removeEventListener('click',openSpeed)
+})
+
+// 暴露给模板的响应式属性
+const { speedState } = toRefs(selectMenu)
+
+defineExpose({})
+</script>
+<template>
+	<div class="selectMenu white">
+		<div class="btnBox" :style="style">
+			<div class="" v-if="isBtnOpen" @click.stop="openSpeed" style="margin-left: 1rem;">
+				<slot name="btnText">
+				</slot>
+			</div>
+			<div class="" v-else @click.stop="openEditTools()" style="margin-left: 1rem;">
+				<slot name="btnText">
+				</slot>
+			</div>
+			<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
+			<div class="content" :class="{active:isBtnOpen}" v-show="speedState">
+				<div v-for="item in selectList" :key="item.value" :class="{active:item.value == select}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" >
+.selectMenu{
+	position: relative;
+	display: flex;
+	align-items: center;
+	.btnBox{
+		color: #fff;
+		background-color: #000000;
+		cursor: pointer;
+		zoom: 1;
+		white-space: nowrap;
+		display: flex;
+		font-size: 1.6rem;
+		box-sizing: content-box;
+		justify-content: center;
+		padding: 0 2rem;
+		line-height: 5.4rem;
+		height: 5.4rem;
+		border-radius: 4rem;
+		border: 2px solid #000;
+	}
+	&.white{
+		.btnBox{
+			background-color: #fff;
+			color: #000;
+		}
+	}
+	.fi-bs-magic-wand{
+		margin-right:1rem;
+		display: flex;
+		cursor: pointer;
+		transition: all .3s;
+		position: relative;
+		z-index: 4;
+		width: 4rem;
+		align-items: center;
+		background-color: #fff;
+		justify-content: center;
+		&.fi-br-loading{
+			height: 100%;
+			background-color: rgba(0, 0, 0, 0);
+		}
+		&.active{
+			transform: rotate(180deg);
+		}
+		&.forbidden{
+			cursor: no-drop;
+		}
+	}
+	
+	
+	.icon-xiala{
+		margin-left: 1rem;
+		transition: all .3s;
+		cursor: pointer;
+		&.active{
+			transform: rotate(180deg);
+		}
+	}
+	.content{
+		position: absolute;
+		top: 100%;
+		// width: calc(100% - 2rem);
+		width: min-content;
+		min-width: 8rem;
+		text-align: center;
+		border-radius: calc(1rem* 1.2);
+		overflow: hidden;
+		z-index: 3;
+		margin-top: .2rem;
+		&.active{
+			right: 2rem;
+		}
+		left: auto;
+		>div{
+			background: #cccccc;
+			line-height: 2;
+			font-size: 1.4rem;
+			cursor: pointer;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			color: #fff;
+			padding: .4rem 1.2rem;
+			&.active{
+				background-color: #000;
+			}
+		}
+		>div:hover{
+			background: #000;
+		}
+	}
+}
+</style>

src/lang/cn.ts

@@ -140,6 +140,7 @@ export default {
 		Payment:'付款',
 		PurchasePoints:'购买',
 		paymentmethod:'请选择付款方式',
+		policy:'继续注册账号即表示您同意我们的使用条款与服务协议。',
 		policy1:'我承认我已阅读并同意',
 		policy2:'条款和条件',
 		policy3:'(包括服务范围)及',
@@ -557,6 +558,7 @@ export default {
 	},
 	DesignDetailAlter:{
 		current:'当前使用',
+		inProject:'项目使用',
 		Upload:'上传',
 		Library:'收藏',
 		inputContent1:'输入名字进行搜索',
@@ -779,6 +781,25 @@ export default {
 		HKDYear:'HKD / 年',
 		automatically:'是否自动续费',
 		activity1:'限时优惠，仅限今日！',
+		Strengths:'我们的优势',
+		StrengthsTitle1:'无限的灵感创意',
+		StrengthsTitle1_1:'',
+		StrengthsInfo1:'灵感生成只需几分钟',
+		StrengthsInfo1_1:'',
+		StrengthsTitle2:'可持续且具成本效',
+		StrengthsTitle2_1:'',
+		StrengthsInfo2:'精简流程，减少浪费',
+		StrengthsInfo2_1:'',
+		StrengthsTitle3:'适用于所有级别的群体',
+		StrengthsTitle3_1:'',
+		StrengthsInfo3:'易操作简便且功能强大，',
+		StrengthsInfo3_1:'适合各级别的设计师使用',
+		StrengthsInfo3_2:'',
+		StrengthsTitle4:'从灵感到成衣',
+		StrengthsTitle4_1:'',
+		StrengthsInfo4:'AiDA 全程助力',
+		StrengthsInfo4_1:'你的时尚设计旅程',
+		unlimited:'立即订阅!',
 	},
 	cancelRenewal:{
 		cancelling:'您取消AiDA的原因是什么？',

src/lang/en.ts

@@ -140,6 +140,7 @@ export default {
 		Payment:'Payment',
 		PurchasePoints:'Purchase points',
 		paymentmethod:'select a payment method',
+		policy:'By continuing an account, you agree to our Terms & Conditions',
 		policy1:'I acknowledge that I have read, understand, and agree with the ',
 		policy2:'Terms and Conditions',
 		policy3:' (including the Scope of service) and the ',
@@ -557,6 +558,7 @@ export default {
 	},
 	DesignDetailAlter:{
 		current:'Selected',
+		inProject:'In-Project',
 		Upload:'Upload',
 		Library:'Library',
 		inputContent1:'Please input',
@@ -779,6 +781,25 @@ export default {
 		HKDYear:'HKD / Year',
 		automatically:'Whether to renew automatically',
 		activity1:'Limited time offer, today only!',
+		Strengths:'Our Core Strengths',
+		StrengthsTitle1:'Unlimited',
+		StrengthsTitle1_1:'creativity',
+		StrengthsInfo1:'Generate ideas in minutes,',
+		StrengthsInfo1_1:'not hours.',
+		StrengthsTitle2:'Sustainable &',
+		StrengthsTitle2_1:'Cost-efficient',
+		StrengthsInfo2:'Streamline your process,',
+		StrengthsInfo2_1:'reduce waste.',
+		StrengthsTitle3:'AI design tool',
+		StrengthsTitle3_1:'for all levels',
+		StrengthsInfo3:'Easy to use with powerful AI features',
+		StrengthsInfo3_1:'to make design accessible and',
+		StrengthsInfo3_2:'efficient for everyone.',
+		StrengthsTitle4:'From Idea',
+		StrengthsTitle4_1:'to Garment',
+		StrengthsInfo4:'Support your entire',
+		StrengthsInfo4_1:'fashion design journey.',
+		unlimited:'Subscribe Now!',
 	},
 	cancelRenewal:{
 		cancelling:'What is your reason for cancelling AiDA?',

src/store/workspace/workspace.ts

@@ -32,6 +32,7 @@ const Workspace : Module<DesignDetail,RootState> = {
 			userBrandDna:'',//用户品牌
 			userBrandDnaImg:'',//用户品牌图片
 			userBrandDnaName:'',//用户品牌名字
+			workspaceId:-1,//worspaceId
 			publishData:{
 				id:'',
 				portfolioDes:'',
@@ -87,6 +88,7 @@ const Workspace : Module<DesignDetail,RootState> = {
 				userBrandDna:'',//用户品牌
 				userBrandDnaImg:'',//用户品牌图片
 				userBrandDnaName:'',//用户品牌名字
+				workspaceId:-1,//worspaceId
 				publishData:{
 					id:'',
 					portfolioDes:'',

src/views/HomeMain.vue

@@ -125,7 +125,7 @@
 						<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
 					</div>
 				</div>
-				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" @click="openUpgradeToPro" class="gallery_btn gallery_btn_radius" style="width: 100%;">Upgrade to Pro</div>
+				<div v-if="userDetail.systemUser != 0 || userDetail.systemUser == 3" @click="openUpgradeToPro" class="gallery_btn gallery_btn_radius" style="width: 100%;">Upgrade to Pro</div>
 			</div>
 		</div>
 		<div class="rightBox">

src/views/HomeView/library.vue

@@ -751,6 +751,7 @@ export default defineComponent({
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
 			speed.speedState = false
+			document.removeEventListener('click',openSpeed)
 		}
 		watch(()=>scene,(newVal,oldVal)=>{
 			console.log(newVal)

src/views/Login.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="loginPage">
     <div class="left">
-      <!-- :isScroll="!isMask" -->
+		<div class="imgBox">
-      <Works :autoscroll="true" :position="'login'"></Works>
+			<img src="@/assets/images/homePage/loginLeftImg1.png" alt="">
+			<img src="@/assets/images/homePage/loginLeftImg2.png" alt="">
+		</div>
+      <!-- <Works :autoscroll="true" :position="'login'"></Works>
       <div class="mask" v-show="isMask" @click="() => (isMask = !isMask)">
         <div class="content">
           <div class="userNum">
@@ -11,28 +14,27 @@
           </div>
           <div class="info">AI that millions trust, every single day</div>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="right">
       <div class="Text" v-show="!loginType">
-        <div class="title">Join millions <br />using AI every day</div>
+        <div class="title">Welcome to AiDA <br />Bloom Your Creativity</div>
         <div class="info">
-			Enjoy secure, clutter-free AI support designed to help you grow, create, and 
+			AiDA, a first-to-market technology that empowers fashion designers, based on their creative inspirations, to work with AI to create original designs. 
-			succeed
         </div>
       </div>
       <div class="loginBox">
         <div class="selectType" v-show="!loginType">
-          <div class="text">Continue as:</div>
+          <div class="text">Continue with one of these：</div>
           <div class="typeList">
             <div class="gallery_btn white" @click="setLoginType('personal')">
-				Personal User 
+				Individual
             </div>
             <div class="gallery_btn white" @click="setLoginType('school')">
-				School/Education
+				Enterprise
             </div>
             <div class="gallery_btn white" @click="setLoginType('enterprise')">
-				Business
+				Academic
             </div>
           </div>
         </div>
@@ -119,6 +121,19 @@ export default defineComponent({
     width: 60%;
     background: #f7f8fa;
     position: relative;
+	background: #fff;
+	> .imgBox{
+		width: 70%;
+		background: #fff;
+		margin: 0 auto;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		> img{
+			width: 100%;
+		}
+	}
     > .mask {
       position: absolute;
       width: 100%;