Merge branch 'master' of https://gitee.com/lvYeJu/lane-crawford-3

src/assets/css/style.css

@@ -18,18 +18,13 @@ button.sandblasted-blurred::after {
   width: 100%;
   height: 100%;
 }
-button.sandblasted-blurred::after {
+button.sandblasted-blurred::before {
-  z-index: 0;
   backdrop-filter: blur(9.5rem);
 }
-button.sandblasted-blurred::before {
+button.sandblasted-blurred::after {
-  z-index: 1;
   opacity: 0.1;
   background: url('@/assets/images/customer_form_bg.png');
 }
-button.sandblasted-blurred > span {
-  z-index: 2;
-}
 button.sandblasted-blurred:active {
   opacity: 0.7;
 }

src/assets/css/style.less

@@ -19,20 +19,15 @@ button.sandblasted-blurred {
 		height: 100%;
 	}
 
-	&::after {
-		z-index: 0;
-		backdrop-filter: blur(9.5rem);
-	}
 
 	&::before {
-		z-index: 1;
+		backdrop-filter: blur(9.5rem);
+	}
+	&::after {
 		opacity: 0.1;
 		background: url('@/assets/images/customer_form_bg.png');
 	}
 
-	>span {
-		z-index: 2;
-	}
 
 	&:active {
 		opacity: 0.7;

src/router/index.ts

@@ -82,10 +82,16 @@ const router = createRouter({
           component: () => import('../views/Workshop/selectModelContinue.vue')
         },
         {
-          // 上传照片
+          // 上传照片1
           path: '/workshop/uploadFace',
           name: 'uploadFace',
-          component: () => import('../views/Workshop/uploadFace.vue')
+          component: () => import('../views/Workshop/uploadFace1.vue')
+        },
+        {
+          // 上传照片2
+          path: '/workshop/uploadFace2',
+          name: 'uploadFace2',
+          component: () => import('../views/Workshop/uploadFace2.vue')
         },
         {
           // 自定义创作

src/views/Workshop/uploadFace1.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import { ref, onMounted } from 'vue'
+	import { useRouter } from 'vue-router'
+	const emit = defineEmits(['view-type'])
+	onMounted(() => {
+		emit('view-type', 1)
+	})
+	const router = useRouter()
+	const faceUrl = ref('')
+	// 上传照片
+	const handleUploadFace = () => {
+		router.push({ name: 'uploadFace2' })
+	}
+	// 完成上传
+	const handleFinish = () => {
+		router.push({ name: 'customize' })
+	}
+</script>
+
+<template>
+	<header-title />
+	<!-- 上传照片 -->
+	<div class="upload-face-1">
+		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
+		<div class="texts">
+			<p class="title">Keep Styling with AI?</p>
+			<p class="desc">
+				Would you like to keep playing with<br />
+				our personalized AI tools?
+			</p>
+		</div>
+		<div class="btns">
+			<button class="sandblasted-blurred" @click="handleUploadFace"><span>Upload Face</span></button>
+			<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</span></button>
+		</div>
+	</div>
+	<footer-navigation is-placeholder />
+</template>
+
+<style scoped lang="less">
+	.upload-face-1 {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		position: relative;
+		color: #fff;
+		> * {
+			position: absolute;
+		}
+		> .bg {
+			position: relative;
+			width: 100%;
+			height: auto;
+		}
+		.btns {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+
+			> button {
+				width: 40rem;
+				height: 8.3rem;
+				border-radius: 0.7rem;
+				border: 0.4rem solid #fff;
+				font-family: satoshiMedium;
+				font-weight: 500;
+				font-size: 5.5rem;
+				margin: 0 1.8rem;
+				color: #fff;
+			}
+		}
+	}
+	.upload-face-1 {
+		> .texts {
+			top: 0;
+			left: 0;
+			padding: 9.9rem 0 0 7.2rem;
+			> .title {
+				font-family: 'satoshiBold';
+				font-size: 8.63rem;
+			}
+			> .desc {
+				font-family: 'satoshiMedium';
+				font-size: 4rem;
+				margin-top: 2rem;
+				line-height: 132%;
+			}
+		}
+		> .btns {
+			bottom: 19.7rem;
+		}
+	}
+
+</style>

src/views/Workshop/uploadFace2.vue

@@ -26,11 +26,6 @@
 			}
 		}
 	}
-	// 完成上传
-	const handleFinish = () => {
-		console.log('完成上传')
-		router.push({ name: 'customize' })
-	}
 	// 生成照片
 	const handleGenerate = () => {
 		console.log('生成照片')
@@ -40,24 +35,8 @@
 
 <template>
 	<header-title />
-	<!-- 上传照片 -->
-	<div class="session session_1" v-show="!faceUrl">
-		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
-		<div class="texts">
-			<p class="title">Keep Styling with AI?</p>
-			<p class="desc">
-				Would you like to keep playing with<br />
-				our personalized AI tools?
-			</p>
-		</div>
-		<div class="btns">
-			<button class="sandblasted-blurred" @click="handleUploadFace"><span>Upload Face</span></button>
-			<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</span></button>
-		</div>
-	</div>
-
 	<!-- 展示照片 -->
-	<div class="session session_2" v-show="faceUrl">
+	<div class="upload-face-2">
 		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
 		<div class="content">
 			<div class="title">
@@ -65,12 +44,17 @@
 				to Try-on
 			</div>
 			<!-- 照片 -->
-			<div class="picture">
+			<div class="picture" v-if="faceUrl">
 				<img :src="faceUrl" />
 			</div>
 			<div class="btns">
-				<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
+				<template v-if="faceUrl">
-				<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
+					<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
+					<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
+				</template>
+				<button v-else class="sandblasted-blurred" @click="handleUploadFace">
+					<span>Upload</span>
+				</button>
 			</div>
 		</div>
 	</div>
@@ -78,7 +62,7 @@
 </template>
 
 <style scoped lang="less">
-	.session {
+	.upload-face-2 {
 		width: 100%;
 		flex: 1;
 		overflow: hidden;
@@ -92,61 +76,23 @@
 			width: 100%;
 			height: auto;
 		}
-		.btns {
+		> .content {
-			width: 100%;
-			display: flex;
-			justify-content: center;
-
-			> button {
-				width: 40rem;
-				height: 8.3rem;
-				border-radius: 0.7rem;
-				border: 0.4rem solid #fff;
-				font-family: satoshiMedium;
-				font-weight: 500;
-				font-size: 5.5rem;
-				margin: 0 1.8rem;
-				color: #fff;
-			}
-		}
-	}
-	.session.session_1 {
-		> .texts {
 			top: 0;
 			left: 0;
-			padding: 9.9rem 0 0 7.2rem;
-			> .title {
-				font-family: 'satoshiBold';
-				font-size: 8.63rem;
-			}
-			> .desc {
-				font-family: 'satoshiMedium';
-				font-size: 4rem;
-				margin-top: 2rem;
-				line-height: 132%;
-			}
-		}
-		> .btns {
-			bottom: 19.7rem;
-		}
-	}
-
-	.session.session_2 {
-		> .content {
-			top: 18.5rem;
-			left: 0;
 			width: 100%;
+			height: 100%;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			justify-content: center;
 			> .title {
 				font-family: satoshiBold;
 				font-size: 11rem;
 				text-align: center;
 				line-height: 124%;
+				margin-bottom: 7.8rem;
 			}
 			> .picture {
-				margin: 7.8rem 0;
 				width: 65.3rem;
 				height: 86.5rem;
 				border-radius: 1rem;
@@ -166,6 +112,10 @@
 				}
 			}
 			> .btns {
+				margin-top: 7.8rem;
+				width: 100%;
+				display: flex;
+				justify-content: center;
 				> button {
 					width: 34.5rem;
 					height: 8.6rem;