更新用户指引

src/component/Detail/DesignDetail.vue

@@ -29,8 +29,9 @@
 
 					<div v-show="imgDesignImg" class="detail_modal_body">
 						<div class="detail_modal_body_nav">
-							<div v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
+							<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
 								<img :src="item?.path" alt="">
+								<i v-show="deleteShow" class="fi fi-br-cross" @click.stop="setDelete(index)"></i>
 							</div>
 							<div class="detail_modal_body_Set" @click="setClothesOpen()">
 								+
@@ -41,7 +42,7 @@
 								<img :src="item.imageUrl" alt="">
 							</div>
 							<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
-							<div class="detail_modal_item_front Guide_1_19" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
+							<div class="detail_modal_item_front Guide_1_19" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesOpen(index)">
 								<img :src="item.imageUrl" alt="">
 							</div>
 						</div>
@@ -58,6 +59,9 @@
 						<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
 						<!-- 编辑 -->
 						<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
+						<i v-show="!body && !deleteShow" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
+						<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>
+
 						<!-- 层 -->
 						<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i>
 						<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
@@ -75,8 +79,8 @@
 								<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
 								<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
 							</div>
-							<div class="centent_div" v-if="current?.[currentIndex]?.path" @click="openCurrent(1)">
+							<div class="centent_div" v-if="current?.path" @click="openCurrent(1)">
-								<img :src="current?.[currentIndex]?.path" alt="" class="" @click="openCurrent(1)">
+								<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
 							</div>
 							<i v-else class="fi fi-rr-picture centent" @click="openCurrent(1)"></i>
 
@@ -88,8 +92,8 @@
 								<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
 							</div>
 							<div class="Guide_1_20" :class="[driver__.driver?'showEvents':'']">
-								<div class="centent_div" v-if="current?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
+								<div class="centent_div" v-if="current?.printObject?.prints[0]?.path" @click="openCurrent(2)">
-									<img :src="current?.[currentIndex]?.printObject?.prints[0]?.path" alt="">
+									<img :src="current?.printObject?.prints[0]?.path" alt="">
 								</div>
 								<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
 							</div>
@@ -103,10 +107,10 @@
 							</div>
 							<div class="img_block_item centent" @click.stop="openCurrent(3)">
 								<div class="color_item">
-									<div class="color_content" :style="{background:`rgba(${current?.[currentIndex]?.color?.r},${current?.[currentIndex]?.color?.g},${current?.[currentIndex]?.color?.b},${current?.[currentIndex]?.color?.a?current?.[currentIndex]?.color.a:1})`}"></div>
+									<div class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
 									<div class="color_content_body">
-										<div class="color_des">{{current?.[currentIndex]?.color?.tcx}}</div>
+										<div class="color_des">{{current?.color?.tcx}}</div>
-										<div class="color_des">{{current?.[currentIndex]?.color?.name}}</div>
+										<div class="color_des">{{current?.color?.name}}</div>
 									</div>
 								</div>
 							</div>
@@ -168,6 +172,8 @@ export default defineComponent({
 		// 	return store.state.DesignDetailModule.designItemDetail
 		// })
 		let designItemDetail :any = computed(()=>{
+			console.log(123);
+			
 			return store.state.DesignDetailModule.designItemDetail
 		})
         let parentData:any = ref({
@@ -203,6 +209,8 @@ export default defineComponent({
 		let {t} = useI18n()
 		//创建单件衣服
 		let setClothes:any = ref()
+		//点击删除按钮
+		let deleteShow:any = ref(false)
         return{
             designItemDetail,
             store,
@@ -224,6 +232,7 @@ export default defineComponent({
 			moible,
 			t,
 			setClothes,
+			deleteShow,
         }
     },
     data(){
@@ -239,6 +248,7 @@ export default defineComponent({
 	watch:{
 		designItemDetail:{
 			handler: async function(newVal,oldVal) {
+				console.log(1123);
 				let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 				this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false
 				this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
@@ -372,7 +382,7 @@ export default defineComponent({
 					if(this.driver__.driver){
 						nextTick().then(()=>{ 
 							// driverObj__.moveNext();
-							driverObj__.moveTo(42);
+							driverObj__.moveTo(41);
 						})
 					}
                 }
@@ -536,8 +546,8 @@ export default defineComponent({
 					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
 					id:item.id,
 					path:item.minIOPath,
-					offset:item.layersObject[1].offset == null?[0,0]:item.layersObject[1].offset,
+					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
-					scale:item.layersObject[1].scale?item.layersObject[1].scale:1,
+					scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:1,
 					printObject:{
 						ifSingle:item.printObject.ifSingle == null ? false : item.printObject.ifSingle,
 						// path:item.printObject.path?item.printObject.path :'',
@@ -606,13 +616,15 @@ export default defineComponent({
 		},
 		//按比设置单件衣服宽高位置
 		async setPostition(url:any){
-			let img:any = await loadImage(url)
 			let modal_body:any
-			await nextTick().then(()=>{
+			let num:any
+			let img:any = await loadImage(url).then((img:any)=>{
 				modal_body = document.getElementsByClassName('detail_modal_model')[0]
+				num = modal_body?.offsetWidth / img.width;
 			})
+			// nextTick().then(()=>{
+			// })
 			console.log(modal_body);
-			const num = modal_body?.offsetWidth / img.width;
 			function loadImage(url:any) {
 				return new Promise((resolve, reject) => {
 					const img = new Image();
@@ -672,6 +684,37 @@ export default defineComponent({
             //     this.designShowPrview = 2
             // }
         },
+		deleteNav(num:number){
+			if(num == 0){
+				this.deleteShow = true
+				this.designItemDetail.clothes.forEach((item:any)=>{
+					item.clothesOpen = false
+				})
+				this.designOrder = false
+				let DesignDetailAlter:any = this.$refs.DesignDetailAlter
+				DesignDetailAlter.changePlace()
+			}else{
+				this.deleteShow = false
+				let data = this.setSubmitItem('preview')
+				Https.axiosPost(Https.httpUrls.designSingle, data).then(
+				(rv) => {
+					let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
+					this.loadingShow = false
+					console.log(rv);
+					this.store.commit("setDesignItemDetail", designItemDetail);
+					this.store.commit("setDesignPreviewData", data);
+					this.setRevocation(designItemDetail,data)
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
+				
+			}
+		},
+		setDelete(num:number){
+			this.designItemDetail.clothes.splice(num,1)
+
+		},
 		//图片按下样子
 		mousedownDesignImg(){
 			this.imgDesignImg = false
@@ -689,32 +732,19 @@ export default defineComponent({
 				item.clothesOpen = false
 			})
 			this.designItemDetail.clothes[index].clothesOpen = true
-			console.log(this.designItemDetail);
-			
 		},
 		setClothesOpen(){
 			this.designItemDetail.clothes.forEach((item:any)=>{
 				item.clothesOpen = false
 			})
-			// console.log(designItemDetail);
+			let color = this.designItemDetail.clothes[0].color
-			
 			let aa = {
 				"id": '',
 				"type": "",
 				"level1Type": null,
 				"path": "",
 				"minIOPath": "",
-				"color": {
+				"color": color,
-					"id": 1921,
-					"name": "",
-					"tcx": "#FFFFFF",
-					"r": 255,
-					"g": 255,
-					"b": 255,
-					"h": '',
-					"s": '',
-					"v": ''
-				},
 				"printObject": {
 					"ifSingle": null,
 					"prints": [
@@ -724,27 +754,34 @@ export default defineComponent({
 				"layersObject": [
 				]
 			}
-			this.current = aa
+			// this.designOrder = true
-			this.designOrder = true
+			// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
-			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
+			// DesignDetailAlter.changePlace()
-			DesignDetailAlter.changePlace()
+			if(this.designItemDetail.clothes[this.designItemDetail.clothes.length-1].id){
-			// this.designItemDetail.clothes.push(aa)
+				this.designItemDetail.clothes.push(aa)
+				this.clothesDetail(aa,this.designItemDetail.clothes.length-1)
+				// this.current = aa
+				// this.designOrder = true
+				// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
+				// DesignDetailAlter.changePlace()
+			}else{
+			}
 			
 		},
         //元素替换
         clothesDetail(clothes:any, index:number){
+			
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			this.currentIndex = index
+			this.currentIndex = index?index:0
 			this.designOrder = true
 			this.current = designItemDetail.clothes[this.currentIndex]
-			console.log(this.current);
 			let data:any = this.setSubmitItem('preview')
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
-				id:this.current.id,
+				id:this.current.id?this.current.id:'',
 				path:this.current.minIOPath?this.current.minIOPath:'',
-				offset:this.current.layersObject[1].offset?this.current.layersObject[1].offset:[0,0],
+				offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
-				scale:this.current.layersObject[1].scale?this.current.layersObject[1].scale:1,
+				scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:1,
 				printObject:{
 					ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
 					// prints:this.current?.printObject[0]?.path == null ? [] : [{
@@ -758,6 +795,9 @@ export default defineComponent({
 				},
 				type:this.current.type,
 			}
+			// if(clothes && !clothes.id){
+			// 	data.designSingleItemDTOList.push(clothes)
+			// }
 			this.store.commit('setDesignPreviewData',data)
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.changePlace()
@@ -1001,6 +1041,16 @@ export default defineComponent({
 						top: 3rem;
 						transform: translateX(-120%);
 					}
+					&.fi-rr-trash{
+						left: 0;
+						top: 6rem;
+						transform: translateX(-120%);
+					}
+					&.fi-br-check{
+						left: 0;
+						top: 6rem;
+						transform: translateX(-120%);
+					}
 					&.fi-rr-copy{
 						top: 0;
 						right: 0;
@@ -1025,6 +1075,20 @@ export default defineComponent({
 				.detail_modal_body{
 					.detail_modal_body_nav{
 						transform: translate(-50%,0%);
+						>div{
+							position: relative;
+							.fi{
+								color: #fff;
+								width: 100%;
+								height: 100%;
+								background: #00000033;
+								left: 0;
+								top: 0;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+						}
 					}
 				}
 				div{
@@ -1119,7 +1183,8 @@ export default defineComponent({
 							margin-right: 0;
 						}
 					}
-					&.clothes_detail_item_print{
+					&.clothes_detail_item_print,
+					&.clothes_detail_item_apparel{
 						.fi-rr-picture{
 							display: flex;
 							align-items: center;

src/component/Detail/DesignDetailEnd.vue

@@ -171,6 +171,7 @@ export default defineComponent({
 			this.sketchImg.id_ = v.id
 			this.sketchImg.path = v.url
 			this.sketchImg.minIOPath = v.minIOPath
+			this.sketchImg.type = v.level2Type
 		},
 		//印花
 		systemDesigner(num) {
@@ -235,65 +236,80 @@ export default defineComponent({
             let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
 			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			let bor = false
 			designItemDetail.clothes.forEach((v,ind)=>{
 				if(v.id == this.current.id){
 					index = ind
+					bor = true
 				}
 			})
-			if(this.type_ == 1){
+			console.log(this.current);
+
+			if(this.type_ == 1 && bor){
 				if(data.designSingleItemDTOList[index].path != this.sketchImg.minIOPath && this.sketchImg.id_){
 					data.designSingleItemDTOList[index].offset = [0,0]
 					data.designSingleItemDTOList[index].scale = 1
 				}
 				data.designSingleItemDTOList[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
 				data.designSingleItemDTOList[index].path =this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath
-				// data.designSingleItemDTOList[index].printObject.prints = []
+				data.designSingleItemDTOList[index].type =this.sketchImg.type? this.sketchImg.type: this.current.type
-				// this.current?.printObject?.path == null ? [] : [{
+			}else if(this.type_ == 2 && bor){
-				// 	location:[0,0],
-				// 	angle:0,
-				// 	priority:1,
-				// 	path:this.current?.printObject?.path?this.current.printObject.path :'',
-				// 	minIOPath:this.current?.printObject?.minIOPath?this.current.printObject.minIOPath :'',
-				// }],
-				// data.designSingleItemDTOList[index].printObject.ifSingle = false
-			}else if(this.type_ == 2){
 				data.designSingleItemDTOList[index].printObject.ifSingle = false
 				data.designSingleItemDTOList[index].printObject.prints = []
-			}else if(this.type_ == 3){
+			}else if(this.type_ == 3 && bor){
 				let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
-				// if(this.$parent.selectColor.rgba.r == undefined){
-				// 	return 
-				// }
-				// console.log(this.$parent.selectColor.rgba);
 				data.designSingleItemDTOList[index].color = color
 			}
+			if(!bor){
+				index = designItemDetail.clothes.length
+				let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
+				let obj = {
+						"color": color,
+						"id": this.sketchImg.id_? this.sketchImg.id_:this.current.id_,
+						"path": this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath,
+						"offset": [
+							0,
+							0
+						],
+						"scale": 1,
+						"printObject": {
+							"ifSingle": false,
+							"prints": [
+							]
+						},
+						"type": this.sketchImg.type
+					}
+					return
+				// data.designSingleItemDTOList.push(obj)
+				// designItemDetail.clothes.push(obj)
+			}
+			// return
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 			this.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(
 				(rv) => {
+					rv.clothes.forEach((item)=>{
+						console.log(item.id , designItemDetail.clothes[index].id);
+						if(item.id == this.sketchImg.id_){
+							console.log(item,item.id , designItemDetail.clothes[index].id);
+							designItemDetail.clothes[index].color = item.color
+							designItemDetail.clothes[index].printObject = item.printObject
+							designItemDetail.clothes[index].layersObject = item.layersObject
+							designItemDetail.clothes[index].minIOPath = item.minIOPath
+							designItemDetail.clothes[index].path = item.path
+						}
+					})
 					designItemDetail.currentFullBodyView = rv.currentFullBodyView
-					designItemDetail.clothes[index].color = rv.clothes[index].color
-					designItemDetail.clothes[index].printObject = rv.clothes[index].printObject
-					designItemDetail.clothes[index].layersObject = rv.clothes[index].layersObject
-					designItemDetail.clothes[index].minIOPath = rv.clothes[index].minIOPath
-					designItemDetail.clothes[index].path = rv.clothes[index].path
 					designItemDetail.ifSubmit = true
-					// rv.clothes[0].layersObject.forEach((v)=>{
-					// 	designItemDetail.clothes[index].layersObject[0].imageUrl = rv.clothes[0].layersObject[0].imageUrl
-					// 	designItemDetail.clothes[index].layersObject[0].maskUrl = rv.clothes[0].layersObject[0].maskUrl
-					// 	designItemDetail.clothes[index].layersObject[1].imageUrl = rv.clothes[0].layersObject[1].imageUrl
-					// 	designItemDetail.clothes[index].layersObject[1].maskUrl = rv.clothes[0].layersObject[1].maskUrl
-					// })
 					designItemDetail.clothes.forEach((item,index)=>{
 						let a
-						// console.log(this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id);
 						if(item.layersObject[0].imageCategory.indexOf("back") == -1){
 							a = item.layersObject[0]
 							item.layersObject[0] = item.layersObject[1]
 							item.layersObject[1] = a
 						}
-						item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id
+						item.layersObject[0].id = designItemDetail.clothes[index].layersObject[0].id
-						item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[1].id
+						item.layersObject[1].id = designItemDetail.clothes[index].layersObject[1].id
 					})
 					this.loadingShow = false
 					this.store.commit("setDesignItemDetail", designItemDetail);

src/component/HomePage/Generate.vue

@@ -321,7 +321,7 @@ export default defineComponent({
 		driver__:{
 			handler(newVal,oldVal){
 				if(this.type_.type2 == 'Printboard'){
-					if(newVal.index >= 14 && newVal.index < 16){
+					if(newVal.index >= 14 && newVal.index < 15){
 						this.setKeyword(newVal.index-14)
 					}else{
 					}
@@ -358,7 +358,7 @@ export default defineComponent({
             this.store.commit("addGenerateMaterialFils", data);
 			// console.log(this.fileList);
 			let moodboard = this.store.state.UploadFilesModule.moodboard
-			if(moodboard.length >= 1 && this.driver__.driver){
+			if(moodboard.length >= 2 && this.driver__.driver){
 				driverObj__.moveNext()
 			}
         },
@@ -395,6 +395,8 @@ export default defineComponent({
 			})
 			if(num == 2 || num == 1){
 				if(this.driver__.driver){
+					console.log(213);
+					
 					driverObj__.moveNext()
 				}
 			}
@@ -489,7 +491,7 @@ export default defineComponent({
 						})
 						nextTick().then(()=>{
 							if(this.driver__.driver){
-								driverObj__.moveTo(10)
+								driverObj__.moveNext()
 							}
 						})
 						// if(){

src/component/HomePage/PrintboardUpload.vue

@@ -617,9 +617,11 @@ export default defineComponent({
 						this.generateList.push(arr)
 						this.loadingShow = false
 						})
-						if(this.driver__.driver){
+						nextTick().then(()=>{
-							driverObj__.moveNext()
+							if(this.driver__.driver){
-						}
+								driverObj__.moveNext()
+							}
+						})
 					}
                 }
             ).catch(res=>{
@@ -719,6 +721,9 @@ export default defineComponent({
 			item.resData = JSON.parse(JSON.stringify(item))
 			item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
             this.store.commit("addGenerateMaterialFils", item);
+			if(this.driver__.driver){
+				driverObj__.moveNext()
+			}
 		}
      }
 

src/tool/guide.js

@@ -14,34 +14,33 @@ let data = {
 const driverObj__ = driver({
 	steps: [
 		{ element: '.Guide_1_1_1', popover: { title: 'Title', description: 'Description' } },
-		{ element: '.Guide_1_27', popover: { title: '', description: 'You can change the mannequin and other settings in Workspace.' } },
+		{ element: '.Guide_1_27', popover: { title: '', description: 'You can personalize your design settings right here in the Workspace, including choosing to design for men‘s or women‘s wear, as well as selecting the mannequin to use for your creations.' } },
-		{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.', side: "right",align: 'center' } },
+		{ element: '.Guide_1_28', popover: { title: '', description: 'Select the apparel type you’d like to work on.', side: "right",align: 'center' } },
 		{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.', side: "right",align: 'end' } },
-		{ element: '.Guide_1_29', popover: { title: '', description: 'Select a mannequin of your choice from our system library.' } },
+		{ element: '.Guide_1_29', popover: { title: '', description: 'You can currently select a mannequin from our system library. Later, you can also choose from the user library after registering your own mannequin.' } },
 
 
 		{ element: '.Guide_1_1', popover: { title: '', description: 'Begin your creative journey here. ' } },
-		{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
+		{ element: '.Guide_1_1_2', popover: { title: '', description: 'For the Moodboard, Printboard, or Sketchboard, we provide three different sourcing methods to add images. The first option, as displayed on this page, is to upload directly from your local device. ' } },
-		{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
+		{ element: '.Guide_1_1_2', popover: { title: '', description: "The second method is to select from your library. <br> You might notice that your library page is currently empty; there's no need to worry. All the images you upload will be automatically added to your library. In the future, you won't have to upload each time—you can simply choose from your library instead." } },
 		// { element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
 		// { element: '.Guide_1_3', popover: { title: '', description: 'Description' } },
 		// { element: '.Guide_1_2', popover: { title: '', description: 'Description' } },
-		{ element: '.Guide_1_4', popover: { title: '', description: 'Click here to try the latest image generation technology to create your mood board.' } },
+		{ element: '.Guide_1_4', popover: { title: '', description: 'The third method is to generate images using the latest Image Generation technology.' } },
 		{ element: '.Guide_1_5', popover: { title: '', description: "Enter keywords that capture the mood you wish to express and then click the 'Generate' button." } },
-		{ element: '.Guide_1_6', popover: { title: '', description: 'Select three images for your moodboard.' } },
+		{ element: '.Guide_1_6', popover: { title: '', description: 'Select two images for your moodboard.' } },
 		{ element: '.Guide_1_7', popover: { title: '', description: 'Click here to layout your moodboard.' } },
 		{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
 		//以上moodboard
-		{ element: '.Guide_1_2_1', popover: { title: '', description: 'Upload two print images here' } },
+		{ element: '.Guide_1_2_1', popover: { title: '', description: 'Click here to generate print images.' } },
-		{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_2', popover: { title: '', description: 'We provide three input options for generating images: Image Only, Text Only, and Text-Image.' } },
-		{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_3', popover: { title: '', description: 'Select this option and we will generate four print images using both the picture you upload and the text you enter.' } },
-		{ element: '.Guide_1_2_3', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_4', popover: { title: '', description: 'Choose a generation model here; different models will generate images in various styles.' } },
-		{ element: '.Guide_1_2_4', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_5', popover: { title: '', description: 'Choose a generation model here; different models will generate images in various styles.' } },
-		{ element: '.Guide_1_2_5', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_6', popover: { title: '', description: 'Upload the input picture here.' } },
-		{ element: '.Guide_1_2_6', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_7', popover: { title: '', description: "Click on this image to select it." } },
-		{ element: '.Guide_1_2_7', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_8', popover: { title: '', description: "Enter keywords about the print you wish to create and then click the 'Generate' button." } },
-		{ element: '.Guide_1_2_8', popover: { title: '', description: 'Crop the uploaded image here.' } },
+		{ element: '.Guide_1_2_9', popover: { title: '', description: 'Select the generated prints you like best.' } },
-		{ element: '.Guide_1_2_9', popover: { title: '', description: 'Crop the uploaded image here.' } },
 		{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
 		{ element: '.Guide_1_10', popover: { title: '', description: 'Click here to extract primary colors from image.' } },
 		{ element: '.Guide_1_11', popover: { title: '', description: 'Select the color you want from these color blocks as the first color.' } },
@@ -50,14 +49,14 @@ const driverObj__ = driver({
 		{ element: '.Guide_1_11_2', popover: { title: '', description: 'Choose the color you want from these color blocks.' } },
 
 		{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
-		{ element: '.Guide_1_9', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
+		{ element: '.Guide_1_9', popover: { title: '', description: 'Click here to generate clothing sketches.' } },
-		{ element: '.Guide_1_9_1', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
+		{ element: '.Guide_1_9_1', popover: { title: '', description: 'Using text only option for generation.' } },
-		{ element: '.Guide_1_9_2', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
+		{ element: '.Guide_1_9_2', popover: { title: '', description: "Enter keywords about the sketch you wish to create and then click the 'Generate' button." } },
 
-		{ element: '.Guide_1_13', popover: { title: '', description: 'Click here to choose a category for the uploaded sketch.' } },
+		{ element: '.Guide_1_13', popover: { title: '', description: 'Click here to choose a category for the generated sketch.' } },
 		{ element: '.Guide_1_13_1', popover: { title: '', description: 'Choose correct category for the sketch.' } },
-		{ element: '.Guide_1_13_2', popover: { title: '', description: 'Choose correct category for the sketch.' } },
+		{ element: '.Guide_1_13_2', popover: { title: '', description: 'Select the generated sketches you like best.' } },
-		{ element: '.Guide_1_14', popover: { title: '', description: 'After you have confirmed categories of sketches are correct, click here to complete the uploading process.' } },
+		{ element: '.Guide_1_14', popover: { title: '', description: 'Cick here to complete the uploading process.' } },
 		//开始design
 		{ element: '.Guide_1_15', popover: { title: '', description: 'Click here to let AI generate design illustrations.' } },
 		{ element: '.Guide_1_16', popover: { title: '', description: 'Please wait a few seconds.' } },
@@ -113,7 +112,7 @@ const driverObj__ = driver({
 		if(
 			// options.state.activeIndex >=  2 && options.state.activeIndex < 3 || 
 			options.state.activeIndex >=  6 && options.state.activeIndex < 9 || 
-			options.state.activeIndex >= 14 && options.state.activeIndex < 16 || 
+			options.state.activeIndex >= 14 && options.state.activeIndex < 15 || 
 			// options.state.activeIndex >= 24 && options.state.activeIndex < 25 ||
 			driverObj__.isLastStep()
 		){
@@ -141,7 +140,6 @@ const driverObj__ = driver({
 	},
 	//销毁前
 	onDestroyStarted:()=>{
-		console.log(213123123);
 		data = {
 			index : driverIndex__,
 			driver : false,
@@ -206,12 +204,12 @@ const openGuide = () =>{
 			driver:false,
 		}
 	}
-	driverObj__.destroy();
+	// driverObj__.destroy();
-	// driverObj__.drive();
+	driverObj__.drive();
 
 	data = {
 		index:driverIndex__,
-		driver:false,
+		driver:true,
 	}
 	store = useStore()
 	// driverObj__.moveTo(18);