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

src/assets/css/style.css

@@ -1,10 +1,46 @@
-* {
+button.sandblasted-blurred {
-  padding: 0;
+  box-sizing: content-box;
-  margin: 0;
+  border: 0.4rem solid #fff;
-  list-style: none;
+  font-family: satoshiMedium;
-  box-sizing: border-box;
+  font-weight: 500;
+  font-size: 5.5rem;
+  color: #fff;
+  background-color: transparent;
+  position: relative;
+  overflow: hidden;
 }
-html,
+button.sandblasted-blurred::before,
-body {
+button.sandblasted-blurred::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
   height: 100%;
-}
+}
+button.sandblasted-blurred::after {
+  z-index: 0;
+  backdrop-filter: blur(9.5rem);
+}
+button.sandblasted-blurred::before {
+  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;
+}
+html:root {
+  --van-dialog-width: 90rem;
+  --van-dialog-font-size: 5rem;
+  --van-dialog-header-line-height: 150%;
+  --van-dialog-message-font-size: 3.5rem;
+  --van-dialog-message-line-height: 150%;
+  --van-button-default-font-size: 4rem;
+  --van-dialog-button-height: 9rem;
+  --van-dialog-message-padding: 3rem 2.5rem;
+  --van-dialog-has-title-message-padding-top: 2.5rem;
+}

src/assets/css/style.less

@@ -0,0 +1,54 @@
+button.sandblasted-blurred {
+	box-sizing: content-box;
+	border: 0.4rem solid #fff;
+	font-family: satoshiMedium;
+	font-weight: 500;
+	font-size: 5.5rem;
+	color: #fff;
+	background-color: transparent;
+	position: relative;
+	overflow: hidden;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	&::after {
+		z-index: 0;
+		backdrop-filter: blur(9.5rem);
+	}
+
+	&::before {
+		z-index: 1;
+		opacity: 0.1;
+		background: url('@/assets/images/customer_form_bg.png');
+	}
+
+	>span {
+		z-index: 2;
+	}
+
+	&:active {
+		opacity: 0.7;
+	}
+}
+
+
+// vant dialog
+html:root {
+	--van-dialog-width: 90rem;
+	--van-dialog-font-size: 5rem;
+	--van-dialog-header-line-height: 150%;
+	--van-dialog-message-font-size: 3.5rem;
+	--van-dialog-message-line-height: 150%;
+	--van-button-default-font-size: 4rem;
+	--van-dialog-button-height: 9rem;
+	--van-dialog-message-padding: 3rem 2.5rem;
+	--van-dialog-has-title-message-padding-top: 2.5rem;
+}

src/assets/icons/library_0.svg

@@ -0,0 +1,9 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="53" height="53" fill="url(#pattern0_557_1170)" fill-opacity="0.8"/>
+<defs>
+<pattern id="pattern0_557_1170" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_557_1170" transform="scale(0.0208333)"/>
+</pattern>
+<image id="image0_557_1170" width="48" height="48" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOsSURBVHgB7VrNahRBEK5dBRE16GJWElEJQbyYkJziTRRBX0OfQRB8AQmaHLwYX8CD68Z4U/AlBK/JNepBIdElcbOz9me6dntqeqa7JzOTPewHlR5nquuv/6prJRqipqmh6LWibUWRon4K9TQPeJtG/ywwz5Sij4r2tCy0nxXNGjyXLTyfFF1RVJe6Tuq2pZmzDE+jdSErDcspOnq6XVX0IoXnQLfPjYAMPNk0GPJQV9GWKVjghKKn5A5O5MkDWXVW1hbG9wIMPxDPLYsD+PdESr/ICEDfwSMDfA7CL1ki2VE0R+45vaBo36J8UvStacciEaBr+vt1i4Esc0rz3BR90b7EhzUheF93qJMbzNMRgt9ZeHco7uSS0R/Ta5aSIzCjvzHPHfH9G+k/5ssFo5MPwDsnZOxY+KRxNvD8RxC6lu91m5zIQ7ALNXIbKPXULMbdouEozqfwyJ3LKzI+cMn5aTiB9jYlp2k95RmAMw8oHogtH8W+cMlZofg6+WUY5gLz7BkyeCutxAEYcIbse7nPesNo4ICT2+gpl+IQuOTAiTcWI25QthM42ZcoeT60tWOVOgBENHSC27NkT0HwrkHx/f/AkF/zUewLHzkwaIaGU8g8sE5TfCTwPCF4uA9GbbDIXdtbkQ6wYQ8F71/dNrWT4LkqjGcHHpEYrW0hbI78TmEGeBeFjF1HHwTpGcVzLjYUZ8Fdik8XNn6ZLAFeo/j21jEM8zEe2BfKNsgPKxTPPk2HzO0StKr7JBxoUDx6XW3QImUDgjBaHUomc9Pkv78/pvj8llst2ieUcWHiTNE0IuReIDPIdQpbRxjF+xZZ/HzPJc+80HQDDLc5silk+gKL8oKiLzRM5r4qOk+eiSUztSnccJ6rLcOYPLAZGrKZDC7KmL/vKZm/2wg8yP35ApN3Cy4UeYwYCcPHGBVUNYXyrJkEf90i8CIdLkyfRYyU4QMNDy7fw4v1tAL1TKXpqaoyV4qeIitzWQdZaRXAmvaqzMpcqXqaFg+RoM1TsZW56RQ9R6kAIhH9Xx6vojK3QfHIF6HnFV5WVZnbKUHPNoYO0ZfDHQqWI9+Z6Du+59HTT/zSkRN9qgaJIASlq6OIsQPHjbEDxw3+wcBEVberQnY/OPBdvMSPaaGVuQXx7reFb7cEPT/wp6rKXLsEPbD9yJW5P+SuzOF5sgQ9TWZ4S+VX5orW0ybLfzUoszJXqp6qKnOl6uHLMuYV8myk2Vl31kjzgLdB4Zf6UD1rNj3/ANvoQHJNUkmmAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

src/assets/icons/library_1.svg

@@ -0,0 +1,13 @@
+<svg width="53" height="57" viewBox="0 0 53 57" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="4" width="53" height="53" fill="url(#pattern0_557_1231)" fill-opacity="0.8"/>
+<rect x="3" y="7" width="18" height="17" fill="#333333"/>
+<rect x="3" y="36" width="18" height="17" fill="#333333"/>
+<rect x="32" y="36" width="18" height="17" fill="#333333"/>
+<path d="M32.0005 8.77619C34.0431 6.73381 37.355 6.73389 39.3975 8.77619L40.0701 9.44877L40.742 8.77688C42.7846 6.73429 46.0964 6.73429 48.139 8.77688C50.1814 10.8195 50.1815 14.1314 48.139 16.1739L47.4671 16.8458L47.5341 16.9127L40.1371 24.3097L40.0701 24.2428L40.0025 24.3104L32.6055 16.9134L32.6731 16.8458L32.0005 16.1732C29.9582 14.1306 29.958 10.8187 32.0005 8.77619Z" fill="#333333"/>
+<defs>
+<pattern id="pattern0_557_1231" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_557_1231" transform="scale(0.0208333)"/>
+</pattern>
+<image id="image0_557_1231" width="48" height="48" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOsSURBVHgB7VrNahRBEK5dBRE16GJWElEJQbyYkJziTRRBX0OfQRB8AQmaHLwYX8CD68Z4U/AlBK/JNepBIdElcbOz9me6dntqeqa7JzOTPewHlR5nquuv/6prJRqipqmh6LWibUWRon4K9TQPeJtG/ywwz5Sij4r2tCy0nxXNGjyXLTyfFF1RVJe6Tuq2pZmzDE+jdSErDcspOnq6XVX0IoXnQLfPjYAMPNk0GPJQV9GWKVjghKKn5A5O5MkDWXVW1hbG9wIMPxDPLYsD+PdESr/ICEDfwSMDfA7CL1ki2VE0R+45vaBo36J8UvStacciEaBr+vt1i4Esc0rz3BR90b7EhzUheF93qJMbzNMRgt9ZeHco7uSS0R/Ta5aSIzCjvzHPHfH9G+k/5ssFo5MPwDsnZOxY+KRxNvD8RxC6lu91m5zIQ7ALNXIbKPXULMbdouEozqfwyJ3LKzI+cMn5aTiB9jYlp2k95RmAMw8oHogtH8W+cMlZofg6+WUY5gLz7BkyeCutxAEYcIbse7nPesNo4ICT2+gpl+IQuOTAiTcWI25QthM42ZcoeT60tWOVOgBENHSC27NkT0HwrkHx/f/AkF/zUewLHzkwaIaGU8g8sE5TfCTwPCF4uA9GbbDIXdtbkQ6wYQ8F71/dNrWT4LkqjGcHHpEYrW0hbI78TmEGeBeFjF1HHwTpGcVzLjYUZ8Fdik8XNn6ZLAFeo/j21jEM8zEe2BfKNsgPKxTPPk2HzO0StKr7JBxoUDx6XW3QImUDgjBaHUomc9Pkv78/pvj8llst2ieUcWHiTNE0IuReIDPIdQpbRxjF+xZZ/HzPJc+80HQDDLc5silk+gKL8oKiLzRM5r4qOk+eiSUztSnccJ6rLcOYPLAZGrKZDC7KmL/vKZm/2wg8yP35ApN3Cy4UeYwYCcPHGBVUNYXyrJkEf90i8CIdLkyfRYyU4QMNDy7fw4v1tAL1TKXpqaoyV4qeIitzWQdZaRXAmvaqzMpcqXqaFg+RoM1TsZW56RQ9R6kAIhH9Xx6vojK3QfHIF6HnFV5WVZnbKUHPNoYO0ZfDHQqWI9+Z6Du+59HTT/zSkRN9qgaJIASlq6OIsQPHjbEDxw3+wcBEVberQnY/OPBdvMSPaaGVuQXx7reFb7cEPT/wp6rKXLsEPbD9yJW5P+SuzOF5sgQ9TWZ4S+VX5orW0ybLfzUoszJXqp6qKnOl6uHLMuYV8myk2Vl31kjzgLdB4Zf6UD1rNj3/ANvoQHJNUkmmAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

src/components/FooterNavigation.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useRouter } from 'vue-router'
+	import { Dialog } from 'vant'
+	import { showConfirmDialog } from 'vant'
+
+	const router = useRouter()
+	const currentRoute = computed(() => router.currentRoute.value.path)
+
+	defineProps({
+		/** 是否显示占位符 */
+		isPlaceholder: { type: Boolean, default: false }
+	})
+
+	const handleClickReturn = () => {
+		router.back()
+		// emit('clickReturn')
+	}
+	const onHome = (nav) => {
+		showConfirmDialog({
+			title: 'Tip',
+			message: 'The current page has not been saved. Do you want to return to the home page?'
+		})
+			.then(() => {
+				router.push(nav.path)
+			})
+			.catch(() => {})
+	}
+	const navs = [
+		{ label: 'Home', icon: 'home', size: 73, path: '/welcome', on: onHome },
+		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
+		{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
+	]
+	const onNavClick = (nav) => {
+		if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : router.push(nav.path)
+	}
+</script>
+
+<template>
+	<div class="footer-navigation main">
+		<div
+			v-for="nav in navs"
+			:key="nav.path"
+			:class="{ active: currentRoute === nav.path }"
+			@click="onNavClick(nav)"
+		>
+			<SvgIcon :name="`${nav.icon}_${currentRoute === nav.path ? '1' : '0'}`" size="55" />
+			<span class="label">{{ nav.label }}</span>
+		</div>
+	</div>
+	<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
+</template>
+
+<style scoped lang="less">
+	.footer-navigation {
+		width: 100%;
+		height: var(--footer-navigation-height, 14.9rem);
+	}
+	.footer-navigation.main {
+		position: fixed;
+		bottom: 0;
+		z-index: var(--footer-navigation-z-index, 999);
+		background-color: var(--footer-navigation-background, #fff);
+		box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+		> div {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			// &.active > * {
+			// 	color: #0d99ff;
+			// }
+			> .label {
+				margin-top: 1.6rem;
+				font-family: satoshiRegular;
+				font-weight: 500;
+				font-size: 2.4rem;
+				line-height: 89%;
+			}
+		}
+	}
+</style>

src/components/HeaderTitle.vue

@@ -4,8 +4,8 @@
 
 	defineProps({
 		title: { type: String, default: 'AI STYLING ASSISTANT' },
-		light: { type: Boolean,default:false },
+		hasSetting: { type: Boolean, default: false },
-		hasSetting: { type: Boolean,default:false }
+		styleType: { type: String, default: '1' },//1低 2高
 	})
 
 	defineEmits(['clickReturn'])
@@ -17,49 +17,57 @@
 </script>
 
 <template>
-	<div class="header-title main" :class="{ 'light': light }">
+	<div class="header-title" :style-type="styleType">
-		<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
+		<div class="main">
-		<span class="title">{{ title }}</span>
+			<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
-		<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div>
+			<span class="title">{{ title }}</span>
+			<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div>
+		</div>
+		<div class="placeholder"></div>
 	</div>
-	<div class="header-title placeholder"></div>
 </template>
 
 <style scoped lang="less">
 	.header-title {
 		width: 100%;
-		height: var(--header-title-height, 9.9rem);
+		&[style-type="2"] {
-	}
+			--header-title-height: 14.5rem;
-	.header-title.main {
+			--header-title-border-bottom-width: 0.2rem;
-		position: fixed;
+			--header-title-return-left: 7.8rem;
-		top: 0;
+		}
-		z-index: var(--header-title-z-index, 999);
+		> div {
-		background-color: var(--header-title-background, #000000);
+			width: 100%;
-		display: flex;
+			height: var(--header-title-height, 9.9rem);
-		align-items: center;
+			border-bottom-width: var(--header-title-border-bottom-width, 0);
-		justify-content: center;
+			border-bottom-style: solid;
+			border-bottom-color: var(--header-title-border-bottom-color, #D5D5D5);
+		}
+		> .main {
+			position: fixed;
+			top: 0;
+			z-index: var(--header-title-z-index, 999);
+			background-color: var(--header-title-background, #fff);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			> .return {
+				position: absolute;
+				left: var(--header-title-return-left, 3.2rem);
+				display: inline-block;
+				--svg-icon-color: var(--header-title-color, #000);
+			}
+			> .title {
+				font-size: 4.8rem;
+				color: var(--header-title-color, #000);
+				font-family: 'boskaRegular';
+			}
+			> .setting {
+				position: absolute;
+				right: 3.2rem;
+				display: inline-block;
+			}
+		}
 		
-		> .return {
-			position: absolute;
-			left: 3.2rem;
-			display: inline-block;
-			--svg-icon-color: var(--header-title-color, #ffffff);
-		}
-		> .title {
-			font-size: 4.8rem;
-			color: var(--header-title-color, #ffffff);
-			font-family: 'boskaRegular';
-		}
-		>.setting{
-			position: absolute;
-			right: 3.2rem;
-			display: inline-block;
-		}
-	
-		&.light {
-			--header-title-color: #000000;
-			--svg-icon-color: #000000;
-			--header-title-background: #ffffff;
-		}
 	}
 </style>

src/main.ts

@@ -7,7 +7,12 @@ import 'normalize.css/normalize.css'
 import './assets/css/style.css'
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import "virtual:svg-icons-register";
+
+// vant组件库
 import 'vant/lib/index.css'
+import { Locale } from 'vant';
+import enUS from 'vant/es/locale/lang/en-US';
+Locale.use('en-US', enUS);
 
 
 import flexible from "./utils/flexible.js";

src/router/index.ts

@@ -85,36 +85,31 @@ const router = createRouter({
           // 上传照片
           path: '/workshop/uploadFace',
           name: 'uploadFace',
-          component: () => import('../views/Workshop/uploadFace/index.vue')
+          component: () => import('../views/Workshop/uploadFace.vue')
         },
         {
           // 自定义创作
           path: '/workshop/customize',
           name: 'customize',
-          component: () => import('../views/Workshop/customize/index.vue'),
+          component: () => import('../views/Workshop/customize.vue'),
-          children: [
-            {
-              path: '/workshop/customize',
-              name: 'customizeHome',
-              component: () => import('../views/Workshop/customize/home.vue')
-            },
-            {
-              path: '/workshop/customize/library',
-              name: 'customizeLibrary',
-              component: () => import('../views/Workshop/customize/library.vue')
-            },
-            {
-              path: '/workshop/customize/creation',
-              name: 'customizeCreation',
-              component: () => import('../views/Workshop/customize/creation.vue')
-            }
-          ]
         },
+        {
+          // library
+          path: '/workshop/library',
+		  name: 'library',
+		  component: () => import('../views/Workshop/library.vue'),
+        },
+		{
+		  // creation
+		  path: '/workshop/creation',
+		  name: 'creation',
+		  component: () => import('../views/Workshop/creation.vue'),
+		},
         {
           // 完成创建
           path: '/workshop/end',
           name: 'end',
-          component: () => import('../views/Workshop/end/index.vue')
+          component: () => import('../views/Workshop/end.vue')
         }
       ]
     }

src/views/Workshop/creation.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, onMounted } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
+	const emit = defineEmits(['view-type'])
+
+	onMounted(() => {
+		emit('view-type', 1)
+	})
 	const onSave = () => {
 		// console.log('保存')
 		router.push({ name: 'end' })
@@ -13,6 +21,7 @@
 </script>
 
 <template>
+	<header-title style-type="2" />
 	<div class="creation">
 		<div class="title">Your Creation</div>
 		<div class="list">
@@ -20,39 +29,19 @@
 				<img src="@/assets/images/workshop/posture/posture_1.png" />
 			</div>
 		</div>
+		<div class="btns">
+			<button @click="onSave">Save</button>
+			<button @click="onContinue">Continue</button>
+		</div>
 	</div>
-	<div class="creation_btns">
+	<footer-navigation is-placeholder />
-		<button @click="onSave">Save</button>
-		<button @click="onContinue">Continue Creating</button>
-	</div>
 </template>
 
 <style scoped lang="less">
-	.creation_btns {
-		margin: 5.5rem 1rem 0;
-		display: flex;
-		justify-content: center;
-
-		> button {
-			box-sizing: content-box;
-			flex: 1;
-			height: 8rem;
-			border-radius: 0.7rem;
-			border: 0.3rem solid #000;
-			background: transparent;
-			font-family: satoshiRegular;
-			font-weight: 400;
-			font-size: 4rem;
-			margin: 0 2rem;
-			color: #000;
-			&:active {
-				opacity: 0.7;
-			}
-		}
-	}
 	.creation {
 		width: 100%;
-		height: 90%;
+		flex: 1;
+		overflow: hidden;
 		background-color: #e3e3e3;
 		border-radius: 1rem;
 		position: relative;
@@ -65,7 +54,7 @@
 			text-align: center;
 			line-height: 124%;
 			font-weight: 500;
-			margin: 5rem;
+			margin: 7.2rem 0;
 		}
 		> .list {
 			flex: 1;
@@ -90,5 +79,26 @@
 				}
 			}
 		}
+		> .btns {
+			margin: 9rem 0;
+			display: flex;
+			justify-content: center;
+
+			> button {
+				box-sizing: content-box;
+				font-family: satoshiRegular;
+				width: 35rem;
+				height: 8rem;
+				border-radius: 1.3rem;
+				background: #000;
+				font-weight: 400;
+				font-size: 4.2rem;
+				margin: 0 3.25rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
 	}
 </style>

src/views/Workshop/customize.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
 </script>
 
 <template>
-	<div class="home">
+	<header-title style-type="2" />
+	<div class="customize">
 		<div class="title">Customize your Look!</div>
 		<p class="tip">Refine your Look</p>
 		<div class="input-box">
@@ -24,10 +27,12 @@
 			</div>
 		</div>
 	</div>
+	<footer-navigation />
 </template>
 
 <style scoped lang="less">
-	.home {
+	
+	.customize {
 		width: 100%;
 		position: relative;
 		color: #000;
@@ -39,6 +44,7 @@
 			font-size: 8.4rem;
 			text-align: center;
 			line-height: 124%;
+			margin-top: 3.6rem;
 		}
 		> .tip {
 			margin-top: 0.56rem;
@@ -88,7 +94,8 @@
 			width: 79.8rem;
 			height: 107.4rem;
 			border-radius: 2rem;
-			box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
+			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
+			border: 0.2rem solid #D9D9D9;
 			overflow: hidden;
 			> * {
 				position: absolute;
@@ -107,16 +114,15 @@
 				border: 0.24rem solid #000;
 				display: flex;
 				align-items: center;
-				>.icon{
+				> .icon {
 					margin: 0 1.8rem;
 				}
-				>.label{
+				> .label {
 					flex: 1;
 					font-family: satoshiRegular;
 					font-size: 2.97rem;
 					color: #000;
 				}
-
 			}
 			> .icons {
 				bottom: 0.27rem;

src/views/Workshop/customize/index.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import { computed } from 'vue'
-	import { useRouter } from 'vue-router'
-	const router = useRouter()
-	const currentRouteName = computed(() => router.currentRoute.value.name)
-	import { ref } from 'vue'
-	const onHome = () => {
-		// router.push({ name: 'customizeHome' })
-		router.push({ path: '/signup' })
-	}
-	const onLibrary = () => {
-		router.push({ name: 'customizeLibrary' })
-	}
-	const onContinue = () => {
-		router.push({ name: 'customizeCreation' })
-	}
-</script>
-
-<template>
-	<header-title />
-	<div class="link">
-		<span @click="onHome">Home</span>
-		<span @click="onLibrary">Library</span>
-	</div>
-	<div class="session"><RouterView /></div>
-	<div class="footer">
-		<button v-if="currentRouteName === 'customizeHome'" @click="onContinue">Continue</button>
-	</div>
-</template>
-
-<style scoped lang="less">
-	.header-title {
-		--header-title-color: #fff;
-		--header-title-background: #000;
-	}
-	.link {
-		width: 100%;
-		padding: 2rem 5.4rem 0;
-		> span {
-			font-family: satoshiRegular;
-			font-size: 3rem;
-			vertical-align: middle;
-			text-decoration: underline;
-			text-underline-offset: 0.8rem;
-			margin-right: 4.4rem;
-		}
-	}
-	.session {
-		margin-top: 5.6rem;
-		width: 100%;
-		height: 155rem;
-		overflow: hidden;
-		padding: 0 2.5rem;
-	}
-	.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>

src/views/Workshop/end.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import { ref } from 'vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
-
+	const emit = defineEmits(['view-type'])
+	onMounted(() => {
+		emit('view-type', 1)
+	})
 	const onExit = () => {
 		console.log('exit')
 	}
@@ -12,19 +16,14 @@
 <template>
 	<header-title />
 	<div class="end">
-		<img src="@/assets/images/workshop/bg/end_bg.png" class="bg" />
-		<div class="link">
-			<span>Home</span>
-			<span>Library</span>
-		</div>
 		<div class="content">
 			<div class="title">Thank you.</div>
 			<div class="tip">
 				We are starting to learn your preferences, Looking forward to see you again,
 			</div>
 		</div>
-		<button class="exit" @click="onExit">Exit</button>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
@@ -34,29 +33,13 @@
 	}
 	.end {
 		width: 100%;
+		flex: 1;
 		position: relative;
 		color: #fff;
-		> * {
+		background: url('@/assets/images/workshop/bg/end_bg.png') no-repeat center center;
-			position: absolute;
+		background-size: cover;
-		}
-		> .bg {
-			position: relative;
-			width: 100%;
-			height: auto;
-		}
-		> .link {
-			top: 2rem;
-			left: 5.4rem;
-			> span {
-				font-family: satoshiRegular;
-				font-size: 3rem;
-				vertical-align: middle;
-				text-decoration: underline;
-				text-underline-offset: 0.8rem;
-				margin-right: 4.4rem;
-			}
-		}
 		> .content {
+			position: absolute;
 			top: 12.9rem;
 			left: 6rem;
 			// width: 100%;
@@ -75,23 +58,5 @@
 				line-height: 132%;
 			}
 		}
-		> .exit {
-			position: fixed;
-			bottom: 2.5rem;
-			right: 4.8rem;
-			box-sizing: content-box;
-			width: 19rem;
-			height: 5.9rem;
-			border-radius: 0.7rem;
-			border: 0.3rem solid #000;
-			background: transparent;
-			font-family: satoshiRegular;
-			font-weight: 500;
-			font-size: 4rem;
-			color: #000;
-			&:active {
-				opacity: 0.7;
-			}
-		}
 	}
 </style>

src/views/Workshop/index.vue

@@ -1,28 +1,42 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+	import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
-//const props = defineProps({
+	import { useRouter } from 'vue-router'
-//})
+	//const props = defineProps({
-//const emit = defineEmits([
+	//})
-//])
+	//const emit = defineEmits([
-let data = reactive({
+	//])
-})
+	let data = reactive({})
-onMounted(()=>{
+	onMounted(() => {})
-})
+	onUnmounted(() => {})
-onUnmounted(()=>{
+	defineExpose({})
-})
+	const {} = toRefs(data)
-defineExpose({})
+	const workshopContent = ref<HTMLDivElement>()
-const {} = toRefs(data);
+	const router = useRouter()
+
+	const viewType = ref(0)
+	watch(
+		() => router.currentRoute.value,
+		() => (viewType.value = 0)
+	)
+	const changeViewType = (v: number) => {
+		viewType.value = v
+	}
 </script>
 <template>
-	<div class="workshop">
+	<div class="workshop" :view-type="viewType">
-		<router-view />
+		<router-view @view-type="changeViewType" />
 	</div>
 </template>
 <style lang="less" scoped>
-	.workshop{
+	.workshop {
 		width: 100%;
 		height: 100%;
 		position: relative;
 		font-family: 'satoshiRegular';
+		&[view-type='1'] {
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+		}
 	}
 </style>

src/views/Workshop/library.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+	import { ref, onMounted, inject } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	const emit = defineEmits(['view-type'])
 
-const onRetrieveItem = (i: number) => {
+	onMounted(() => {
-	console.log("检索"+i)
+		emit('view-type', 1)
-}
+	})
 
-const deleteItem = (i: number) => {
+	const onRetrieveItem = (i: number) => {
-	console.log("删除"+i)
+		console.log('检索' + i)
-}
+	}
+
+	const deleteItem = (i: number) => {
+		console.log('删除' + i)
+	}
 </script>
 
 <template>
+	<header-title style-type="2" />
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
@@ -19,6 +27,7 @@ const deleteItem = (i: number) => {
 					<img src="@/assets/images/workshop/posture/posture_1.png" />
 				</div>
 				<div class="content">
+					<span class="userID">User ID: 1234567890</span>
 					<span class="datetime">7/22/2025 18:20</span>
 					<span class="lastopened">Last opened 18:20</span>
 					<button @click="onRetrieveItem(i)">Retrieve</button>
@@ -27,24 +36,43 @@ const deleteItem = (i: number) => {
 			</div>
 		</div>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
+	.workshop {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 	.library {
 		width: 100%;
-		height: 100%;
+		flex: 1;
-		background-color: #e3e3e3;
+		overflow: hidden;
+		background-color: #fff;
 		border-radius: 1rem;
 		position: relative;
 		color: #000;
 		display: flex;
 		flex-direction: column;
+		&::before {
+			content: '';
+			position: absolute;
+			width: 92rem;
+			height: 92rem;
+			z-index: 0;
+			top: -40rem;
+			right: -40rem;
+			background: linear-gradient(88.42deg, #ffffff 32.58%, #d9d9d9 94.9%);
+			transform: rotate(-45deg);
+
+		}
+
 		> .title {
 			font-family: satoshiRegular;
 			font-size: 9rem;
 			text-align: left;
 			line-height: 124%;
-			font-weight: 500;
 			margin: 5rem;
 		}
 		> .list {
@@ -78,20 +106,28 @@ const deleteItem = (i: number) => {
 					margin-left: 5.6rem;
 					display: flex;
 					flex-direction: column;
-					height: 80%;
+					height: 90%;
+					> .userID {
+						font-family: satoshiRegular;
+						font-weight: 500;
+						font-size: 3.8rem;
+						line-height: 89%;
+						color: #000;
+					}
 					> .datetime {
+						margin-top: 1.8rem;
 						font-family: satoshiRegular;
 						font-weight: 400;
-						font-size: 3.29rem;
+						font-size: 3.2rem;
 						line-height: 89%;
 						color: #000;
 					}
 					> .lastopened {
-						margin-top: 2.23rem;
+						margin-top: 1rem;
 						font-family: satoshiRegular;
 						font-weight: 400;
 						font-style: Regular;
-						font-size: 2.63rem;
+						font-size: 2.6rem;
 						line-height: 89%;
 						color: #6f6f6f;
 					}
@@ -115,8 +151,8 @@ const deleteItem = (i: number) => {
 				}
 				> .delete {
 					position: absolute;
-					top: 5.57rem;
+					top: 2.5rem;
-					right: 2.91rem;
+					right: 2rem;
 					width: 5.5rem;
 					height: 5.5rem;
 					border: 0.188rem solid #000;

src/views/Workshop/uploadFace.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import { ref } from '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('')
 	// 上传照片
@@ -24,12 +29,12 @@
 	// 完成上传
 	const handleFinish = () => {
 		console.log('完成上传')
-		router.push({ name: 'customizeHome' })
+		router.push({ name: 'customize' })
 	}
 	// 生成照片
 	const handleGenerate = () => {
 		console.log('生成照片')
-		router.push({ name: 'customizeHome' })
+		router.push({ name: 'customize' })
 	}
 </script>
 
@@ -46,18 +51,14 @@
 			</p>
 		</div>
 		<div class="btns">
-			<button @click="handleUploadFace">Upload Face</button>
+			<button class="sandblasted-blurred" @click="handleUploadFace"><span>Upload Face</span></button>
-			<button @click="handleFinish">Finish</button>
+			<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</span></button>
 		</div>
 	</div>
 
 	<!-- 展示照片 -->
 	<div class="session session_2" v-show="faceUrl">
 		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
-		<div class="link">
-			<span>Home</span>
-			<span>Library</span>
-		</div>
 		<div class="content">
 			<div class="title">
 				Upload your Face<br />
@@ -68,20 +69,19 @@
 				<img :src="faceUrl" />
 			</div>
 			<div class="btns">
-				<button @click="handleUploadFace">Re-try</button>
+				<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
-				<button @click="handleGenerate">Generate</button>
+				<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
 			</div>
 		</div>
 	</div>
+	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
-	.header-title {
-		--header-title-color: #000;
-		--header-title-background: #fff;
-	}
 	.session {
 		width: 100%;
+		flex: 1;
+		overflow: hidden;
 		position: relative;
 		color: #fff;
 		> * {
@@ -98,20 +98,15 @@
 			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: satoshiMedium;
-				font-family: satoshiRegular;
 				font-weight: 500;
 				font-size: 5.5rem;
 				margin: 0 1.8rem;
 				color: #fff;
-				&:active {
-					opacity: 0.7;
-				}
 			}
 		}
 	}
@@ -120,35 +115,23 @@
 			top: 0;
 			left: 0;
 			padding: 9.9rem 0 0 7.2rem;
-			font-family: 'robotoBold';
 			> .title {
-				font-weight: 700;
+				font-family: 'satoshiBold';
-				font-size: 8.6rem;
+				font-size: 8.63rem;
 			}
 			> .desc {
-				font-weight: 500;
+				font-family: 'satoshiMedium';
 				font-size: 4rem;
-				margin-top: 3rem;
+				margin-top: 2rem;
+				line-height: 132%;
 			}
 		}
 		> .btns {
-			bottom: 23.3rem;
+			bottom: 19.7rem;
 		}
 	}
 
 	.session.session_2 {
-		> .link {
-			top: 2rem;
-			left: 5.4rem;
-			> span {
-				font-family: satoshiRegular;
-				font-size: 3rem;
-				vertical-align: middle;
-				text-decoration: underline;
-				text-underline-offset: 0.8rem;
-				margin-right: 4.4rem;
-			}
-		}
 		> .content {
 			top: 18.5rem;
 			left: 0;