调整loding动画细节

src/stores/modules/generate.ts

@@ -2,6 +2,7 @@
 import { defineStore } from 'pinia'
 import MyEvent from '@/utils/myEvent'
 MyEvent.add('clear-generate-state', () => useGenerateStore().clearGenerateData())
+MyEvent.add('clear-client-state', () => useGenerateStore().clearCustomerInfo())
 
 export const useGenerateStore = defineStore({
   id: 'generate', // 必须指明唯一的pinia仓库的id
@@ -176,7 +177,7 @@ export const useGenerateStore = defineStore({
       this.updatePhotoInfo({})
       this.clearCustomizeInfo()
       this.clearCustomizeInfoDemo()
-      this.clearCustomerInfo()
+    //   this.clearCustomerInfo()
       this.setSessionId('')
     },
     setCustomerInfo(data: any) {

src/stores/modules/userInfo.ts

@@ -49,6 +49,7 @@ export const useUserInfoStore = defineStore('userInfo', () => {
       removeLocal('token')
       resetGenerateParams()
       MyEvent.emit('clear-generate-state')
+      MyEvent.emit('clear-client-state')
       MyEvent.emit('clearAllCache')
       resolve('')
     })

src/views/Workshop/creation/creation-list.vue

@@ -10,6 +10,7 @@
 		cancelTryOnEffectFavorite
 	} from '@/api/workshop'
 	import { useRouter } from 'vue-router'
+	import MyEvent from '@/utils/myEvent'
 	const router = useRouter()
 	const emit = defineEmits(['view-type'])
 	const query = computed(() => router.currentRoute.value.query)
@@ -236,6 +237,7 @@
 				hGenerateStore.style.url = selectedItem.url
 				// selectedItem.isFavorite
 			}
+			MyEvent.emit('clear-generate-state')
 			router.push({ name: 'HomeNav', query: { flowType: nav.flowType } })
 		} else {
 			router.push({ name: 'end' })

src/views/Workshop/product.vue

@@ -5,6 +5,7 @@ import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
 import { useGenerateStore, useHGenerateStore } from '@/stores'
 import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite, addTryOnEffectComment  } from '@/api/workshop'
 import { FlowType, IsHistoryFlow } from '@/types/enum'
+import gradientButton from '@/components/gradientButton.vue'
 
 const router = useRouter()
 //const props = defineProps({
@@ -64,7 +65,6 @@ const startGenerate = ()=>{
 		generateStore.originalTryOn.id = res.id
 		generateStore.originalTryOn.tryOnUrl = res.tryOnUrl
 		// generateStore.useStyleGenerate()//生成后需要对选择衣服页面设置不可选中样式
-		generateStore.setIsGenerate(false)
 
 		generateStore.clearCustomizeInfo()
 	}).catch((error)=>{
@@ -121,7 +121,7 @@ const handleSubmit = ()=>{
 
 onMounted(() => {
 	emit('view-type', 1)
-	if (generateStore.isGenerate) {
+	if (!generateStore.originalTryOn.id) {
 		startGenerate()
 	}
 })
@@ -134,7 +134,7 @@ const { isLoading } = toRefs(data);
 	<div class="product" v-if="!isLoading">
 		<div class="text">
 			<div class="title">
-				Go with this Look?
+				Generate Result
 			</div>
 		</div>
 		<div class="selectContent">
@@ -150,14 +150,25 @@ const { isLoading } = toRefs(data);
 					<div class="operation">
 						<div @click="setLike"><SvgIcon :name="`love_${generateStore.originalTryOn.isLike ? '1' : '0'}`" size="35" /></div>
 						<div @click="feedback"><SvgIcon name="pen" size="40" /></div>
-						<div @click="startGenerate"><SvgIcon name="reload" size="35" /></div>
 						<!-- <div><SvgIcon name="download" size="35" /></div> -->
 					</div>
 				</div>
 			</div>
-			<div class="again">
+			<div class="btn">
-				<!-- <div @click="changeModel">Change Model</div> -->
+				<div class="btnItem style1" @click.stop="startGenerate()">
-				<button class="flex flex-center" @click="onContinue" style="margin-left: auto;">Continue</button>
+					<gradientButton>
+						<template #content>
+							<div class="text">
+								<span class="icon">
+									<SvgIcon name="reTry" size="40" />
+								</span>
+								Re-try
+							</div>
+							
+						</template>
+					</gradientButton>
+				</div>
+				<div class="btnItem style2" @click.stop="onContinue">Continue</div>
 			</div>
 		</div>
 	</div>
@@ -190,18 +201,18 @@ const { isLoading } = toRefs(data);
 <style lang="less" scoped>
 	.product{
 		width: 100%;
-		// height: 100%;
+		height: 100%;
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		> .text{
 			text-align: center;
 			width: 100%;
-			margin-top: 4.3rem;
+			margin-top: 4rem;
 			> .title{
 				font-family: satoshiBold;
 				font-weight: 700;
-				font-size: 9.6rem;
+				font-size: 8.6rem;
 				line-height: 124%;
 				color: #000;
 			}
@@ -210,7 +221,7 @@ const { isLoading } = toRefs(data);
 			flex: 1;
 			overflow-y: auto;
 			padding: 0 14.1rem;
-			margin-top: 4.8rem;
+			margin-top: 4.3rem;
 			> .history{
 				width: 30.2rem;
 				height: 6.52rem;
@@ -229,7 +240,7 @@ const { isLoading } = toRefs(data);
 				}
 			}
 			> .modelBox{
-				margin-top: 2.5rem;
+				margin-top: 4.4rem;
 				> .model{
 					border: .2rem solid #D9D9D9;
 					// height: 110rem;
@@ -262,24 +273,36 @@ const { isLoading } = toRefs(data);
 					}
 				}
 			}
-			> .again{
+			> .btn{
-				margin-top: 4.4rem;
 				display: flex;
+				gap: 6.6rem;
 				justify-content: center;
-				> button{
+				margin-top: 5.2rem;
-					border-radius: .7rem;
+				> div {
-					border: 3px solid #000;
+					border-radius: .96rem;
-					background-color: #000;
+					width: 33.7rem;
-					text-align: center;
+					font-size: 4.8rem;
-					color: #fff;
 					font-family: satoshiMedium;
-					font-size: 3.6rem;
+					line-height: 9.2rem;
-					width: 24.6rem;
+					display: flex;
-					line-height: 6.7rem;
+					justify-content: center;
-					height: 6.7rem;
+					&.style1{
-					box-sizing: border-box;
+						--borderRadius: .96rem;
-					&:last-child{
+						--borderWidth: 2px;
-						margin-right: 0;
+						.text{
+							width: 100%;
+							text-align: center;
+							> .icon{
+								left: 4rem;
+								top: 50%;
+								transform: translateY(-50%);
+								position: absolute;
+							}
+						}
+					}
+					&.style2{
+						color: #fff;	
+						background-color: #000;
 					}
 				}
 			}

src/views/asistant/components/GenerateLoading.vue

@@ -68,7 +68,7 @@ const setTl1 = ()=>{
 	nextTick(()=>{
 		let el = dotBox.value
 		let width = el.offsetWidth + el.parentElement.offsetWidth
-		let time = el.parentElement.offsetWidth / 35
+		let time = el.parentElement.offsetWidth / el.offsetWidth / 2
 		console.log(time,width)
 		tl1 = gsap.timeline();
 		tl1.to(el,time, 
@@ -136,7 +136,7 @@ onMounted(() => {
 
 .loading-dot{
 	height: 100%;
-	aspect-ratio: 1/1;
+	aspect-ratio: 1.2/1;
 	background: radial-gradient(ellipse 150% 150% at center, #ffffff,rgba(255,255,255,.4), transparent);
 	border-radius: 50%;
 	position: absolute;