From 4296ed8f8b5aa98d78060972e69ad30187630b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 9 Oct 2025 16:25:20 +0800
Subject: [PATCH] 222

---
 src/views/Workshop/customize/home.vue  | 117 +++++++++++++
 src/views/Workshop/customize/index.vue | 217 ++++++++-----------------
 2 files changed, 184 insertions(+), 150 deletions(-)
 create mode 100644 src/views/Workshop/customize/home.vue

diff --git a/src/views/Workshop/customize/home.vue b/src/views/Workshop/customize/home.vue
new file mode 100644
index 0000000..14983fb
--- /dev/null
+++ b/src/views/Workshop/customize/home.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import { ref } from 'vue'
+	const faceUrl = ref('')
+</script>
+
+<template>
+	<header-title />
+	<div class="session">
+		<div class="link">
+			<span>Home</span>
+			<span>Library</span>
+		</div>
+		<div class="title">Customize your Look!</div>
+		<p class="tip">Refine your Look</p>
+		<!-- 照片 -->
+		<div class="picture">
+			<img :src="faceUrl" />
+		</div>
+		<div class="btns">
+			<button @click="handleUploadFace">Re-try</button>
+			<button @click="handleGenerate">Generate</button>
+		</div>
+	</div>
+	<div class="footer">
+		<button>Continue</button>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.header-title {
+		--header-title-color: #fff;
+		--header-title-background: #000;
+	}
+	.session {
+		width: 100%;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .link {
+			padding: 2rem 5.4rem 0;
+			width: 100%;
+			> span {
+				font-family: satoshiRegular;
+				font-size: 3rem;
+				vertical-align: middle;
+				text-decoration: underline;
+				text-underline-offset: 0.8rem;
+				margin-right: 4.4rem;
+			}
+		}
+		> .title {
+			margin-top: 5.4rem;
+			font-family: satoshiBold;
+			font-size: 8.4rem;
+			text-align: center;
+			line-height: 124%;
+		}
+		> .tip {
+			margin-top: 0.56rem;
+			font-family: satoshiRegular;
+			font-size: 3.74rem;
+			line-height: 124%;
+		}
+		> .picture {
+			margin: 7.8rem 0;
+			width: 65.3rem;
+			height: 86.5rem;
+			border-radius: 1rem;
+			backdrop-filter: blur(5.27rem);
+			box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
+			border: 0.439rem solid #fff;
+			// border-image: linear-gradient(90deg,#BF926E94, #ffffff) 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> img {
+				width: 58.9rem;
+				height: 79.2rem;
+				border-radius: 1rem;
+				border: 0.2rem solid #d9d9d9;
+				object-fit: contain;
+			}
+		}
+		> .btns {
+		}
+	}
+	.footer {
+		position: fixed;
+		width: 100%;
+		bottom: 0;
+		left: 0;
+		height: 11.2rem;
+		background-color: #000;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		> button {
+			width: 24.6rem;
+			height: 5.9rem;
+			border-radius: 0.7rem;
+			box-sizing: content-box;
+			border: 0.3rem solid #fff;
+			background: transparent;
+			font-family: satoshiRegular;
+			font-weight: 400;
+			font-size: 4rem;
+			color: #fff;
+			margin-right: 5rem;
+			&:active {
+				opacity: 0.7;
+			}
+		}
+	}
+</style>
diff --git a/src/views/Workshop/customize/index.vue b/src/views/Workshop/customize/index.vue
index 7961a45..12e9e09 100644
--- a/src/views/Workshop/customize/index.vue
+++ b/src/views/Workshop/customize/index.vue
@@ -2,72 +2,19 @@
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import { ref } from 'vue'
 	const faceUrl = ref('')
-	// 上传照片
-	const handleUploadFace = () => {
-		const input = document.createElement('input')
-		input.type = 'file'
-		input.accept = 'image/*'
-		input.capture = 'camera'
-		input.click()
-		input.onchange = (e: any) => {
-			const file = e.target.files[0]
-			if (!file) return
-			const reader = new FileReader()
-			reader.readAsDataURL(file)
-			reader.onload = () => {
-				faceUrl.value = reader.result as string
-			}
-		}
-	}
-	// 完成上传
-	const handleFinish = () => {
-		console.log('完成上传')
-	}
-	// 生成照片
-	const handleGenerate = () => {
-		console.log('生成照片')
-	}
 </script>
 
 <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 @click="handleUploadFace">Upload Face</button>
-			<button @click="handleFinish">Finish</button>
-		</div>
-	</div>
-
-	<!-- 展示照片 -->
-	<div class="session session_2" v-show="faceUrl">
-		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
+	<div class="session">
 		<div class="link">
 			<span>Home</span>
 			<span>Library</span>
 		</div>
-		<div class="content">
-			<div class="title">
-				Upload your Face<br />
-				to Try-on
-			</div>
-			<!-- 照片 -->
-			<div class="picture">
-				<img :src="faceUrl" />
-			</div>
-			<div class="btns">
-				<button @click="handleUploadFace">Re-try</button>
-				<button @click="handleGenerate">Generate</button>
-			</div>
-		</div>
+		
+	</div>
+	<div class="footer">
+		<button>Continue</button>
 	</div>
 </template>
 
@@ -79,63 +26,13 @@
 	.session {
 		width: 100%;
 		position: relative;
-		color: #fff;
-		> * {
-			position: absolute;
-		}
-		> .bg {
-			position: relative;
-			width: 100%;
-			height: auto;
-		}
-		.btns {
-			width: 100%;
-			display: flex;
-			justify-content: center;
-
-			> button {
-				box-sizing: content-box;
-				width: 40rem;
-				height: 8.3rem;
-				border-radius: 0.7rem;
-				border: 0.4rem solid #fff;
-				background: transparent;
-				font-family: satoshiRegular;
-				font-weight: 500;
-				font-size: 5.5rem;
-				margin: 0 1.8rem;
-				color: #fff;
-				&:active {
-					opacity: 0.7;
-				}
-			}
-		}
-	}
-	.session.session_1 {
-		> .texts {
-			top: 0;
-			left: 0;
-			padding: 9.9rem 0 0 7.2rem;
-			font-family: 'robotoBold';
-			> .title {
-				font-weight: 700;
-				font-size: 8.6rem;
-			}
-			> .desc {
-				font-weight: 500;
-				font-size: 4rem;
-				margin-top: 3rem;
-			}
-		}
-		> .btns {
-			bottom: 23.3rem;
-		}
-	}
-
-	.session.session_2 {
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 		> .link {
-			top: 2rem;
-			left: 5.4rem;
+			padding: 2rem 5.4rem 0;
+			width: 100%;
 			> span {
 				font-family: satoshiRegular;
 				font-size: 3rem;
@@ -145,46 +42,66 @@
 				margin-right: 4.4rem;
 			}
 		}
-		> .content {
-			top: 18.5rem;
-			left: 0;
-			width: 100%;
+		> .title {
+			margin-top: 5.4rem;
+			font-family: satoshiBold;
+			font-size: 8.4rem;
+			text-align: center;
+			line-height: 124%;
+		}
+		> .tip {
+			margin-top: 0.56rem;
+			font-family: satoshiRegular;
+			font-size: 3.74rem;
+			line-height: 124%;
+		}
+		> .picture {
+			margin: 7.8rem 0;
+			width: 65.3rem;
+			height: 86.5rem;
+			border-radius: 1rem;
+			backdrop-filter: blur(5.27rem);
+			box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
+			border: 0.439rem solid #fff;
+			// border-image: linear-gradient(90deg,#BF926E94, #ffffff) 1;
 			display: flex;
-			flex-direction: column;
 			align-items: center;
-			> .title {
-				font-family: satoshiBold;
-				font-size: 11rem;
-				text-align: center;
-				line-height: 124%;
-			}
-			> .picture {
-				margin: 7.8rem 0;
-				width: 65.3rem;
-				height: 86.5rem;
+			justify-content: center;
+			> img {
+				width: 58.9rem;
+				height: 79.2rem;
 				border-radius: 1rem;
-				backdrop-filter: blur(5.27rem);
-				box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
-				border: 0.439rem solid #fff;
-				// border-image: linear-gradient(90deg,#BF926E94, #ffffff) 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				> img {
-					width: 58.9rem;
-					height: 79.2rem;
-					border-radius: 1rem;
-					border: 0.2rem solid #d9d9d9;
-					object-fit: contain;
-				}
+				border: 0.2rem solid #d9d9d9;
+				object-fit: contain;
 			}
-			> .btns {
-				> button {
-					width: 34.5rem;
-					height: 8.6rem;
-					border-radius: 4.3rem;
-					margin: 0 5rem;
-				}
+		}
+		> .btns {
+		}
+	}
+	.footer {
+		position: fixed;
+		width: 100%;
+		bottom: 0;
+		left: 0;
+		height: 11.2rem;
+		background-color: #000;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		> button {
+			width: 24.6rem;
+			height: 5.9rem;
+			border-radius: 0.7rem;
+			box-sizing: content-box;
+			border: 0.3rem solid #fff;
+			background: transparent;
+			font-family: satoshiRegular;
+			font-weight: 400;
+			font-size: 4rem;
+			color: #fff;
+			margin-right: 5rem;
+			&:active {
+				opacity: 0.7;
 			}
 		}
 	}