diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 7274c7d..918aad8 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -4,85 +4,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const createPinia: typeof import('pinia')['createPinia']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const defineStore: typeof import('pinia')['defineStore']
-  const effectScope: typeof import('vue')['effectScope']
-  const flexible: typeof import('./src/utils/flexible.js')['default']
-  const getActivePinia: typeof import('pinia')['getActivePinia']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const getLocal: typeof import('./src/utils/local')['getLocal']
-  const getMousePosition: typeof import('./src/utils/tools')['getMousePosition']
-  const getUniversalZoomLevel: typeof import('./src/utils/tools')['getUniversalZoomLevel']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const mapActions: typeof import('pinia')['mapActions']
-  const mapGetters: typeof import('pinia')['mapGetters']
-  const mapState: typeof import('pinia')['mapState']
-  const mapStores: typeof import('pinia')['mapStores']
-  const mapWritableState: typeof import('pinia')['mapWritableState']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const removeLocal: typeof import('./src/utils/local')['removeLocal']
-  const request: typeof import('./src/utils/request')['default']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const setActivePinia: typeof import('pinia')['setActivePinia']
-  const setLocal: typeof import('./src/utils/local')['setLocal']
-  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const storeToRefs: typeof import('pinia')['storeToRefs']
-  const stores: typeof import('./src/stores/index')['default']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useLink: typeof import('vue-router')['useLink']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-}
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+
 }
diff --git a/components.d.ts b/components.d.ts
index 5690aee..dcb10ec 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,17 +9,12 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    HeaderTitle: typeof import('./src/components/HeaderTitle.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SelectItem: typeof import('./src/components/selectStyle/selectItem.vue')['default']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
-    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
+    VanSwipe: typeof import('vant/es')['Swipe']
+    VanSwipeItem: typeof import('vant/es')['SwipeItem']
   }
 }
diff --git a/src/assets/images/entry_bg.png b/src/assets/images/entry_bg.png
new file mode 100644
index 0000000..944e929
Binary files /dev/null and b/src/assets/images/entry_bg.png differ
diff --git a/src/assets/images/female.png b/src/assets/images/female.png
new file mode 100644
index 0000000..0fec1dc
Binary files /dev/null and b/src/assets/images/female.png differ
diff --git a/src/assets/images/login_bg.png b/src/assets/images/login_bg.png
new file mode 100644
index 0000000..d28ae7d
Binary files /dev/null and b/src/assets/images/login_bg.png differ
diff --git a/src/assets/images/male.png b/src/assets/images/male.png
new file mode 100644
index 0000000..4e9873d
Binary files /dev/null and b/src/assets/images/male.png differ
diff --git a/src/assets/images/sginup_bg.png b/src/assets/images/sginup_bg.png
new file mode 100644
index 0000000..5713550
Binary files /dev/null and b/src/assets/images/sginup_bg.png differ
diff --git a/src/assets/images/stylist_bg.png b/src/assets/images/stylist_bg.png
new file mode 100644
index 0000000..fecffd2
Binary files /dev/null and b/src/assets/images/stylist_bg.png differ
diff --git a/src/assets/images/workshop/posture/posture_1.png b/src/assets/images/workshop/posture/posture_1.png
new file mode 100644
index 0000000..dc0cf81
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_1.png differ
diff --git a/src/assets/images/workshop/posture/posture_2.png b/src/assets/images/workshop/posture/posture_2.png
new file mode 100644
index 0000000..f94e3c4
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_2.png differ
diff --git a/src/assets/images/workshop/posture/posture_3.png b/src/assets/images/workshop/posture/posture_3.png
new file mode 100644
index 0000000..70cbe54
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_3.png differ
diff --git a/src/assets/images/workshop/posture/posture_4.png b/src/assets/images/workshop/posture/posture_4.png
new file mode 100644
index 0000000..acfd7d9
Binary files /dev/null and b/src/assets/images/workshop/posture/posture_4.png differ
diff --git a/src/assets/main.css b/src/assets/main.css
index 14121af..78bb472 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -17,6 +17,14 @@ a,
   }
 }
 
+.safe-area-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.safe-area-bottom{
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
 /* @media (min-width: 1024px) {
   body {
     display: flex;
diff --git a/src/main.ts b/src/main.ts
index 0901b59..ed8dfe2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import 'normalize.css/normalize.css'
 import './assets/css/style.css'
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import "virtual:svg-icons-register";
+import 'vant/lib/index.css'
 
 
 import flexible from "./utils/flexible.js";
diff --git a/src/router/index.ts b/src/router/index.ts
index 89d96ed..98d15b3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,51 +1,85 @@
 import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
   history: createWebHistory('/'),
-//   history: createWebHistory(import.meta.env.VITE_APP_URL),
+  //   history: createWebHistory(import.meta.env.VITE_APP_URL),
   routes: [
     {
-		path: '/',
-		redirect: "/workshop",
-	},
-	{
-		path: '/workshop',
-		name: 'Workshop',
-		component: () => import('../views/Workshop/index.vue'),
-		children: [
-			// {
-			// 	path: '',
-			// 	name: 'activitiesWorkshop',
-			// 	redirect: "/activities/workshop",	
-			// },
+      path: '/',
+      redirect: '/workshop'
+    },
+    {
+      path: '/login',
+      component: () => import('@/views/login/LoginPage.vue')
+    },
+    {
+      path: '/signup',
+      component: () => import('@/views/login/SignupPage.vue')
+    },
+    { path: '/welcome', component: () => import('@/views/login/WelcomePage.vue') },
+    {
+      path: '/stylist',
+      component: () => import('@/views/stylist/index.vue')
+    },
+    {
+      path: '/workshop',
+      name: 'Workshop',
+      component: () => import('../views/Workshop/index.vue'),
+      children: [
+        // {
+        // 	path: '',
+        // 	name: 'activitiesWorkshop',
+        // 	redirect: "/activities/workshop",
+        // },
 
-			{
-				path: '/workshop/selectStyle',
-				name: 'SelectStyle',
-				component: () => import('../views/Workshop/selectStyle.vue'),
-			},
-			{
-				path: '/workshop/selectModel',
-				name: 'SelectModel',
-				component: () => import('../views/Workshop/selectModel.vue'),
-			},
-			{
-				path: '/workshop/selectModelContinue',
-				name: 'SelectModelContinue',
-				component: () => import('../views/Workshop/selectModelContinue.vue'),
-			},
-			
-			{
-				path: '/workshop/uploadFace',
-				name: 'uploadFace',
-				component: () => import('../views/Workshop/uploadFace/index.vue'),
-			},
-			{
-				path: '/workshop/customize',
-				name: 'customize',
-				component: () => import('../views/Workshop/customize/index.vue'),
-			},
-		]
-	},
+        {
+          path: '/workshop/selectStyle',
+          name: 'SelectStyle',
+          component: () => import('../views/Workshop/selectStyle.vue')
+        },
+        {
+          path: '/workshop/selectModel',
+          name: 'SelectModel',
+          component: () => import('../views/Workshop/selectModel.vue')
+        },
+        {
+          path: '/workshop/selectModelContinue',
+          name: 'SelectModelContinue',
+          component: () => import('../views/Workshop/selectModelContinue.vue')
+        },
+				{// 上传照片
+					path: '/workshop/uploadFace',
+					name: 'uploadFace',
+					component: () => import('../views/Workshop/uploadFace/index.vue'),
+				},
+				{// 自定义创作
+					path: '/workshop/customize',
+					name: 'customize',
+					component: () => import('../views/Workshop/customize/index.vue'),
+					children: [
+						{
+							path: '/workshop/customize/home',
+							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'),
+						},
+					],
+				},
+				{// 完成创建
+					path: '/workshop/end',
+					name: 'end',
+					component: () => import('../views/Workshop/end/index.vue'),
+				},
+      ]
+    }
   ]
 })
 
diff --git a/src/views/Workshop/customize/creation.vue b/src/views/Workshop/customize/creation.vue
new file mode 100644
index 0000000..6bdd2d0
--- /dev/null
+++ b/src/views/Workshop/customize/creation.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const onSave = () => {
+		// console.log('保存')
+		router.push({ name: 'end' })
+	}
+
+	const onContinue = () => {
+		console.log('继续创建')
+	}
+</script>
+
+<template>
+	<div class="creation">
+		<div class="title">Your Creation</div>
+		<div class="list">
+			<div class="item" v-for="i in 10" :key="i">
+				<img src="@/assets/images/workshop/posture/posture_1.png" />
+			</div>
+		</div>
+	</div>
+	<div class="creation_btns">
+		<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%;
+		background-color: #e3e3e3;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		> .title {
+			font-family: satoshiRegular;
+			font-size: 9rem;
+			text-align: center;
+			line-height: 124%;
+			font-weight: 500;
+			margin: 5rem;
+		}
+		> .list {
+			flex: 1;
+			overflow-y: auto;
+			padding: 0 6rem;
+			margin: 0 3.8rem;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			// justify-content: space-around;
+			> .item {
+				width: 47%;
+				height: 52.9rem;
+				overflow: hidden;
+				border-radius: 2rem;
+				background-color: #fff;
+				margin-bottom: 4rem;
+				> img {
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/Workshop/customize/home.vue b/src/views/Workshop/customize/home.vue
index 14983fb..25dcd1b 100644
--- a/src/views/Workshop/customize/home.vue
+++ b/src/views/Workshop/customize/home.vue
@@ -1,58 +1,23 @@
 <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="home">
 		<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 {
+	.home {
 		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;
@@ -64,54 +29,5 @@
 			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 12e9e09..7969760 100644
--- a/src/views/Workshop/customize/index.vue
+++ b/src/views/Workshop/customize/index.vue
@@ -1,20 +1,30 @@
 <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 faceUrl = ref('')
+	const onHome = () => {
+		router.push({ name: 'customizeHome' })
+	}
+	const onLibrary = () => {
+		router.push({ name: 'customizeLibrary' })
+	}
+	const onContinue = () => {
+		router.push({ name: 'customizeCreation' })
+	}
 </script>
 
 <template>
 	<header-title />
-	<div class="session">
-		<div class="link">
-			<span>Home</span>
-			<span>Library</span>
-		</div>
-		
+	<div class="link">
+		<span @click="onHome">Home</span>
+		<span @click="onLibrary">Library</span>
 	</div>
+	<div class="session"><RouterView /></div>
 	<div class="footer">
-		<button>Continue</button>
+		<button v-if="currentRouteName === 'customizeHome'" @click="onContinue">Continue</button>
 	</div>
 </template>
 
@@ -23,61 +33,25 @@
 		--header-title-color: #fff;
 		--header-title-background: #000;
 	}
-	.session {
+	.link {
 		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;
+		padding: 2rem 5.4rem 0;
+		> span {
 			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 {
+			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%;
diff --git a/src/views/Workshop/customize/library.vue b/src/views/Workshop/customize/library.vue
new file mode 100644
index 0000000..f43280b
--- /dev/null
+++ b/src/views/Workshop/customize/library.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const onRetrieveItem = (i: number) => {
+	console.log("检索"+i)
+}
+
+const deleteItem = (i: number) => {
+	console.log("删除"+i)
+}
+</script>
+
+<template>
+	<div class="library">
+		<div class="title">Library</div>
+		<div class="list">
+			<div class="item" v-for="i in 10" :key="i">
+				<div class="image">
+					<img src="@/assets/images/workshop/posture/posture_1.png" />
+				</div>
+				<div class="content">
+					<span class="datetime">7/22/2025 18:20</span>
+					<span class="lastopened">Last opened 18:20</span>
+					<button @click="onRetrieveItem(i)">Retrieve</button>
+				</div>
+				<div class="delete" @click="deleteItem(i)"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.library {
+		width: 100%;
+		height: 100%;
+		background-color: #e3e3e3;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		> .title {
+			font-family: satoshiRegular;
+			font-size: 9rem;
+			text-align: left;
+			line-height: 124%;
+			font-weight: 500;
+			margin: 5rem;
+		}
+		> .list {
+			flex: 1;
+			overflow-y: auto;
+			padding: 0 3.8rem;
+			margin: 0 3rem;
+			> .item {
+				position: relative;
+				padding: 2.8rem;
+				width: 100%;
+				height: 34.4rem;
+				border-radius: 1.88rem;
+				margin-bottom: 7.66rem;
+				background-color: #f3f3f3;
+				display: flex;
+				align-items: center;
+				> .image {
+					width: 21.4rem;
+					height: 100%;
+					overflow: hidden;
+					border-radius: 2rem;
+					background-color: #fff;
+					> img {
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+				> .content {
+					margin-left: 5.6rem;
+					display: flex;
+					flex-direction: column;
+					height: 80%;
+					> .datetime {
+						font-family: satoshiRegular;
+						font-weight: 400;
+						font-size: 3.29rem;
+						line-height: 89%;
+						color: #000;
+					}
+					> .lastopened {
+						margin-top: 2.23rem;
+						font-family: satoshiRegular;
+						font-weight: 400;
+						font-style: Regular;
+						font-size: 2.63rem;
+						line-height: 89%;
+						color: #6f6f6f;
+					}
+					> button {
+						margin-top: auto;
+						width: 12.3rem;
+						height: 3.8rem;
+						border-radius: 0.5rem;
+						box-sizing: content-box;
+						border: 0.193rem solid #000;
+						background: transparent;
+						font-family: satoshiRegular;
+						font-weight: 400;
+						font-size: 2.576rem;
+						color: #000;
+						margin-right: 5rem;
+						&:active {
+							opacity: 0.7;
+						}
+					}
+				}
+				> .delete {
+					position: absolute;
+					top: 5.57rem;
+					right: 2.91rem;
+					width: 5.5rem;
+					height: 5.5rem;
+					border: 0.188rem solid #000;
+					border-radius: 1.88rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					&:active {
+						opacity: 0.7;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/Workshop/end/index.vue b/src/views/Workshop/end/index.vue
new file mode 100644
index 0000000..3cee985
--- /dev/null
+++ b/src/views/Workshop/end/index.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import { ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+
+	const onExit = () => {
+		console.log('exit')
+	}
+</script>
+
+<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>
+</template>
+
+<style scoped lang="less">
+	.header-title {
+		--header-title-color: #000;
+		--header-title-background: #fff;
+	}
+	.end {
+		width: 100%;
+		position: relative;
+		color: #fff;
+		> * {
+			position: absolute;
+		}
+		> .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 {
+			top: 12.9rem;
+			left: 6rem;
+			// width: 100%;
+			display: flex;
+			flex-direction: column;
+			> .title {
+				font-family: satoshiBold;
+				font-size: 14.7rem;
+				line-height: 124%;
+			}
+			> .tip {
+				margin-top: 2.5rem;
+				width: 58.2rem;
+				font-family: satoshiRegular;
+				font-size: 4.1rem;
+				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>
diff --git a/src/views/Workshop/uploadFace/index.vue b/src/views/Workshop/uploadFace/index.vue
index 78881aa..bd16636 100644
--- a/src/views/Workshop/uploadFace/index.vue
+++ b/src/views/Workshop/uploadFace/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import { ref } from 'vue'
-	import {useRouter} from 'vue-router'
-		const router = useRouter()
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
 	const faceUrl = ref('')
 	// 上传照片
 	const handleUploadFace = () => {
@@ -24,12 +24,12 @@
 	// 完成上传
 	const handleFinish = () => {
 		console.log('完成上传')
-		router.push({name:'customize'})
+		router.push({ name: 'customizeHome' })
 	}
 	// 生成照片
 	const handleGenerate = () => {
 		console.log('生成照片')
-		router.push({name:'customize'})
+		router.push({ name: 'customizeHome' })
 	}
 </script>
 
diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
new file mode 100644
index 0000000..678c013
--- /dev/null
+++ b/src/views/login/LoginPage.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="login-page">
+
+    <!-- 主要内容区域 -->
+    <div class="content">
+      <!-- 返回按钮 -->
+      <div class="back-button" @click="goBack">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M15 18L9 12L15 6"
+            stroke="white"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <!-- 标题区域 -->
+      <div class="header">
+        <h1 class="title">Log in.</h1>
+        <p class="subtitle">Redefine the styling experience with AI.</p>
+        <p class="description">Use Styling Angel to speed up your fashion journey.</p>
+      </div>
+
+      <!-- 登录表单容器 -->
+      <div class="login-container">
+        <form @submit.prevent="handleLogin" class="login-form">
+          <!-- 邮箱输入框 -->
+          <div class="input-group">
+            <input
+              type="email"
+              v-model="formData.email"
+              placeholder="Email"
+              class="input-field"
+              required
+            />
+          </div>
+
+          <!-- 密码输入框 -->
+          <div class="input-group pwd">
+            <input
+              type="password"
+              v-model="formData.password"
+              placeholder="Your Password"
+              class="input-field"
+              required
+            />
+          </div>
+
+          <!-- 登录按钮 -->
+          <button type="submit" class="login-button">Log in</button>
+
+          <!-- 忘记密码链接 -->
+          <div class="forgot-password" @click="handleForgotPassword">
+            Forgot Password?
+          </div>
+
+          <!-- Google登录按钮 -->
+          <button type="button" class="google-button" @click="handleGoogleLogin">
+            <div class="google-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24">
+                <path
+                  fill="#4285F4"
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                />
+                <path
+                  fill="#34A853"
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                />
+                <path
+                  fill="#FBBC05"
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                />
+                <path
+                  fill="#EA4335"
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                />
+              </svg>
+            </div>
+            Sign in with Google
+          </button>
+
+          <!-- 注册链接 -->
+          <div class="signup-link">
+            Don't have an account?
+            <a href="#" @click.prevent="handleSignup">Sign Up</a>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- 底部版权信息 -->
+    <div class="footer">
+      <p>Powered by AiDLab for Lane Crawford</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+
+const router = useRouter()
+
+// 表单数据
+const formData = reactive({
+  email: '',
+  password: ''
+})
+
+// 表单验证状态
+const formErrors = reactive({
+  email: '',
+  password: ''
+})
+
+// 加载状态
+const isLoading = ref(false)
+
+// 表单验证规则
+const validateEmail = (email: string) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+const validatePassword = (password: string) => {
+  return password.length >= 6
+}
+
+// 验证表单
+const validateForm = () => {
+  let isValid = true
+
+  // 重置错误信息
+  formErrors.email = ''
+  formErrors.password = ''
+
+  // 验证邮箱
+  if (!formData.email) {
+    formErrors.email = '请输入邮箱地址'
+    isValid = false
+  } else if (!validateEmail(formData.email)) {
+    formErrors.email = '请输入有效的邮箱地址'
+    isValid = false
+  }
+
+  // 验证密码
+  if (!formData.password) {
+    formErrors.password = '请输入密码'
+    isValid = false
+  } else if (!validatePassword(formData.password)) {
+    formErrors.password = '密码至少需要6位字符'
+    isValid = false
+  }
+
+  return isValid
+}
+
+// 计算属性：表单是否有效
+const isFormValid = computed(() => {
+  return (
+    formData.email &&
+    formData.password &&
+    validateEmail(formData.email) &&
+    validatePassword(formData.password)
+  )
+})
+
+// 返回上一页
+const goBack = () => {
+  router.go(-1)
+}
+
+// 处理登录
+const handleLogin = async () => {
+  if (!validateForm()) {
+    showToast('请检查输入信息')
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    // 模拟登录API调用
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    // 这里添加实际的登录API调用
+    // const response = await loginAPI(formData)
+
+    showToast('登录成功')
+
+    // 登录成功后跳转到主页或工作台
+    router.push('/workshop')
+  } catch (error) {
+    console.error('登录失败:', error)
+    showToast('登录失败，请重试')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 处理忘记密码
+const handleForgotPassword = () => {
+  showToast('忘记密码功能开发中...')
+  console.log('11111111111')
+  // 这里可以跳转到忘记密码页面
+  // router.push('/forgot-password')
+}
+
+// 处理Google登录
+const handleGoogleLogin = async () => {
+  try {
+    isLoading.value = true
+    showToast('Google登录功能开发中...')
+
+    // 这里添加Google OAuth登录逻辑
+    // const response = await googleLoginAPI()
+  } catch (error) {
+    console.error('Google登录失败:', error)
+    showToast('Google登录失败，请重试')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 处理注册
+const handleSignup = () => {
+  router.push('/signup')
+}
+
+// 实时验证输入
+const handleEmailInput = () => {
+  if (formData.email && !validateEmail(formData.email)) {
+    formErrors.email = '请输入有效的邮箱地址'
+  } else {
+    formErrors.email = ''
+  }
+}
+
+const handlePasswordInput = () => {
+  if (formData.password && !validatePassword(formData.password)) {
+    formErrors.password = '密码至少需要6位字符'
+  } else {
+    formErrors.password = ''
+  }
+}
+</script>
+
+<style scoped lang="less">
+.login-page {
+  position: relative;
+  color: #fff;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-image: url('@/assets/images/login_bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+
+
+.content {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  padding-top: 6rem; /* 为状态栏留出空间 */
+}
+
+.back-button {
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  width: 4rem;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 3;
+}
+
+.header {
+  margin-bottom: 4rem;
+  color: white;
+}
+
+.title {
+  font-size: 3.2rem;
+  font-weight: bold;
+  margin-bottom: 0.8rem;
+  color: white;
+}
+
+.subtitle {
+  font-size: 1.6rem;
+  margin-bottom: 0.4rem;
+  color: white;
+  opacity: 0.9;
+}
+
+.description {
+  font-size: 1.4rem;
+  color: white;
+  opacity: 0.8;
+}
+
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20%;
+   .login-form {
+     position: relative;
+     width: 100%;
+     /* max-width: 70rem; */
+     background: rgba(255, 255, 255, 0.05);
+     backdrop-filter: blur(4rem);
+     border: 0.1rem solid rgba(255, 255, 255, 0.15);
+     border-radius: 2rem;
+     padding: 8rem 4rem;
+     box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
+     overflow: hidden;
+     margin: 0 10rem;
+     height: 80rem;
+   }
+
+   .login-form::before {
+     content: '';
+     position: absolute;
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+     filter: blur(3rem);
+     z-index: -1;
+     transform: scale(1.1);
+   }
+
+  .input-field {
+    width: 100%;
+    padding: 16px 20px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 25px;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    font-size: 1.6rem;
+    outline: none;
+    transition: all 0.3s ease;
+  }
+
+  .input-field::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .input-field:focus {
+    border-color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .input-group {
+    margin-bottom: 3rem;
+    &.pwd {
+      margin-bottom: 5rem;
+    }
+  }
+  .login-button {
+    width: 100%;
+    padding: 1.6rem;
+    background: #000;
+    color: white;
+    border: none;
+    border-radius: 25px;
+    font-size: 1.6rem;
+    margin-bottom: 1rem;
+  }
+}
+
+ .forgot-password {
+   text-align: center;
+   text-decoration: none;
+   font-size: 1.6rem;
+   text-decoration: underline;
+   text-underline-offset: 0.5rem;
+   margin-bottom: 20rem;
+ }
+
+
+.google-button {
+  width: 100%;
+  padding: 16px;
+  background: transparent;
+  color: #000;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 25px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: rgba(255, 255, 255, 0.9);
+  margin-bottom: 1rem;
+}
+
+.google-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.signup-link {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+}
+
+.signup-link a {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.signup-link a:hover {
+  text-decoration: underline;
+}
+
+.footer {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  padding: 20px;
+  color: white;
+  font-size: 12px;
+  opacity: 0.8;
+}
+</style>
diff --git a/src/views/login/SignupPage.vue b/src/views/login/SignupPage.vue
new file mode 100644
index 0000000..10899af
--- /dev/null
+++ b/src/views/login/SignupPage.vue
@@ -0,0 +1,397 @@
+<template>
+  <div class="login-page">
+    <div class="content">
+      <div class="back-button" @click="goBack">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M15 18L9 12L15 6"
+            stroke="white"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <div class="header">
+        <h1 class="title">Sign up.</h1>
+        <p class="subtitle">Redefine the styling experience with AI.</p>
+        <p class="description">Use Styling Angel to speed up your fashion journey.</p>
+      </div>
+      <div class="login-container">
+        <form @submit.prevent="handleSignup" class="login-form">
+          <div class="input-group">
+            <input
+              type="email"
+              v-model="formData.email"
+              placeholder="Email"
+              class="input-field"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="text"
+              v-model="formData.name"
+              placeholder="Name"
+              class="input-field"
+              required
+            />
+          </div>
+          <div class="input-group pwd">
+            <input
+              type="password"
+              v-model="formData.password"
+              placeholder="Your Password"
+              class="input-field"
+              required
+            />
+          </div>
+          <button type="submit" class="signup-btn">Sign up</button>
+          <button type="button" class="google-button" @click="handleGoogleLogin">
+            <div class="google-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24">
+                <path
+                  fill="#4285F4"
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                />
+                <path
+                  fill="#34A853"
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                />
+                <path
+                  fill="#FBBC05"
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                />
+                <path
+                  fill="#EA4335"
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                />
+              </svg>
+            </div>
+            Sign up with Google
+          </button>
+        </form>
+      </div>
+    </div>
+    <div class="footer">
+      <p>Powered by AiDLab for Lane Crawford</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+
+const router = useRouter()
+
+// 表单数据
+const formData = reactive({
+  email: '',
+  password: '',
+  name:''
+})
+
+// 表单验证状态
+const formErrors = reactive({
+  email: '',
+  password: ''
+})
+
+// 加载状态
+const isLoading = ref(false)
+
+// 表单验证规则
+const validateEmail = (email: string) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+const validatePassword = (password: string) => {
+  return password.length >= 6
+}
+
+// 验证表单
+const validateForm = () => {
+  let isValid = true
+
+  // 重置错误信息
+  formErrors.email = ''
+  formErrors.password = ''
+  formErrors.name = ''
+
+  if (!formData.name) {
+    formErrors.name = '请输入姓名'
+    isValid = false
+  }
+
+  // 验证邮箱
+  if (!formData.email) {
+    formErrors.email = '请输入邮箱地址'
+    isValid = false
+  } else if (!validateEmail(formData.email)) {
+    formErrors.email = '请输入有效的邮箱地址'
+    isValid = false
+  }
+
+  // 验证密码
+  if (!formData.password) {
+    formErrors.password = '请输入密码'
+    isValid = false
+  } else if (!validatePassword(formData.password)) {
+    formErrors.password = '密码至少需要6位字符'
+    isValid = false
+  }
+
+  return isValid
+}
+
+// 计算属性：表单是否有效
+const isFormValid = computed(() => {
+  return (
+    formData.name &&
+    formData.email &&
+    formData.password &&
+    validateEmail(formData.email) &&
+    validatePassword(formData.password)
+  )
+})
+
+// 返回上一页
+const goBack = () => {
+  router.go(-1)
+}
+
+// 处理登录
+const handleSignup = async () => {
+  if (!validateForm()) {
+    showToast('请检查输入信息')
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    // 模拟登录API调用
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    // 这里添加实际的登录API调用
+    // const response = await loginAPI(formData)
+
+    showToast('注册成功')
+
+    // 登录成功后跳转到主页或工作台
+    router.push('/workshop')
+  } catch (error) {
+    console.error('注册失败:', error)
+    showToast('注册失败，请重试')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 处理Google登录
+const handleGoogleLogin = async () => {
+  try {
+    isLoading.value = true
+    showToast('Google注册功能开发中...')
+
+    // 这里添加Google OAuth登录逻辑
+    // const response = await googleLoginAPI()
+  } catch (error) {
+    console.error('Google注册失败:', error)
+    showToast('Google注册失败，请重试')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+
+// 实时验证输入
+const handleEmailInput = () => {
+  if (formData.email && !validateEmail(formData.email)) {
+    formErrors.email = '请输入有效的邮箱地址'
+  } else {
+    formErrors.email = ''
+  }
+}
+
+const handlePasswordInput = () => {
+  if (formData.password && !validatePassword(formData.password)) {
+    formErrors.password = '密码至少需要6位字符'
+  } else {
+    formErrors.password = ''
+  }
+}
+</script>
+
+<style scoped lang="less">
+.login-page {
+  position: relative;
+  color: #fff;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-image: url('@/assets/images/sginup_bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  padding-top: 6rem; /* 为状态栏留出空间 */
+}
+
+.back-button {
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  width: 4rem;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 3;
+}
+
+.header {
+  margin-bottom: 4rem;
+  color: white;
+}
+
+.title {
+  font-size: 3.2rem;
+  font-weight: bold;
+  margin-bottom: 0.8rem;
+  color: white;
+}
+
+.subtitle {
+  font-size: 1.6rem;
+  margin-bottom: 0.4rem;
+  color: white;
+  opacity: 0.9;
+}
+
+.description {
+  font-size: 1.4rem;
+  color: white;
+  opacity: 0.8;
+}
+
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30%;
+  .login-form {
+    position: relative;
+    width: 100%;
+    /* max-width: 70rem; */
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(30px);
+    border: 0.1rem solid rgba(255, 255, 255, 0.1);
+    border-radius: 2rem;
+    padding: 10rem 4rem;
+    box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    margin: 0 10rem;
+    height: 115rem;
+  }
+
+  .input-field {
+    width: 100%;
+    padding: 16px 20px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 25px;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    font-size: 1.6rem;
+    outline: none;
+    transition: all 0.3s ease;
+  }
+
+  .input-field::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .input-field:focus {
+    border-color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .input-group {
+    margin-bottom: 5rem;
+    
+  }
+  .signup-btn {
+    width: 100%;
+    padding: 1.6rem;
+    background: #000;
+    color: white;
+    border: none;
+    border-radius: 25px;
+    font-size: 1.6rem;
+    margin-bottom: 37rem;
+  }
+}
+
+.google-button {
+  width: 100%;
+  padding: 16px;
+  background: transparent;
+  color: #000;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 25px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: rgba(255, 255, 255, 0.9);
+  margin-bottom: 1rem;
+}
+
+.google-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.signup-link {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+}
+
+.signup-link a {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.signup-link a:hover {
+  text-decoration: underline;
+}
+
+.footer {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  padding: 20px;
+  color: white;
+  font-size: 12px;
+  opacity: 0.8;
+}
+</style>
diff --git a/src/views/login/WelcomePage.vue b/src/views/login/WelcomePage.vue
new file mode 100644
index 0000000..59534a0
--- /dev/null
+++ b/src/views/login/WelcomePage.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="welcome-page safe-area-top safe-area-bottom">
+    <div class="content">
+      <div class="title">AI STYLING <br/> ASSISTANT</div>
+      <p class="subtitle">Redefine the styling experience with AI.</p>
+      <div class="sign-btn" @click="goToSignup">Sign up</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goToSignup = () => {
+  router.push('/login')
+}
+</script>
+
+<style scoped lang="less">
+.welcome-page {
+  width: 100%;
+  height: 100%;
+  background: url('/src/assets/images/entry_bg.png') no-repeat center center;
+  background-size: cover;
+  padding-left: 10rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.content {
+  letter-spacing: 0;
+  position: relative;
+  // flex: 1;
+  font-size: 8rem;
+  color: #fff;
+  font-weight: 400;
+  padding-bottom: 20rem;
+  .title{
+    font-family: Boska;
+    line-height: 7.55rem;
+  }
+  .subtitle{
+    font-size: 3rem;
+    font-family: Satoshi;
+    margin: 2rem 0;
+  }
+  .sign-btn{
+   background: transparent;
+   color: #fff;
+   width: 25rem;
+   font-size: 3rem;
+   height: 5rem;
+   line-height: 5rem;
+   border: 1px solid #fff;
+   text-align: center;
+  //  padding: 2rem 1.3rem;
+   box-sizing: content-box;
+  }
+}
+</style>
diff --git a/src/views/stylist/index.vue b/src/views/stylist/index.vue
new file mode 100644
index 0000000..413a163
--- /dev/null
+++ b/src/views/stylist/index.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="stylist-page">
+    <!-- 主要内容区域 -->
+    <div class="content">
+      <!-- 标题 -->
+      <div class="header">
+        <div class="title">CHOOSE YOUR STYLIST</div>
+      </div>
+
+      <!-- 轮播容器 -->
+      <div class="carousel-container">
+        <!-- 左箭头 -->
+        <div class="nav-arrow left" @click="handleChangeSwiper('prev')">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M15 18L9 12L15 6"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+
+        <van-swipe  touchable ref="swiperRef">
+          <van-swipe-item v-for="item in stylists" :key="item.id">
+            <div class="swiper-container">
+              <img :src="item.image" />
+              <div class="text-container">
+                <div class="name">{{ item.name }}</div>
+                <div class="description">
+                  {{ item.description }}
+                </div>
+              </div>
+            </div>
+          </van-swipe-item>
+        </van-swipe>
+
+        <div class="nav-arrow right" @click="handleChangeSwiper('next')">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M9 18L15 12L9 6"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- Continue按钮 -->
+    <div class="continue-button" @click="handleContinue">Continue</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// stylist数据
+const stylists = ref([
+  {
+    id: 1,
+    name: 'Vera Lo',
+    description: 'Contemporary, Classic, Simple Silhouettes, Statement Pieces',
+    image: '/src/assets/images/female.png'
+  },
+  {
+    id: 2,
+    name: 'Sarah Chen',
+    description: 'Modern, Edgy, Bold Colors, Street Style',
+    image: '/src/assets/images/male.png'
+  },
+  {
+    id: 3,
+    name: 'Emma Wilson',
+    description: 'Elegant, Feminine, Vintage Inspired, Soft Tones',
+    image: '/src/assets/images/female.png'
+  },
+  {
+    id: 4,
+    name: 'Alex Johnson',
+    description: 'Minimalist, Professional, Neutral Palette, Clean Lines',
+    image: '/src/assets/images/male.png'
+  }
+])
+
+const swiperRef = ref(null)
+
+const handleChangeSwiper = (type: 'next' | 'prev') => {
+  if (type === 'next') {
+    swiperRef.value.next()
+  } else {
+    swiperRef.value.prev()
+  }
+}
+
+const handleContinue = () => {
+  // 跳转到下一个页面
+  router.push('/workshop')
+}
+</script>
+
+<style scoped lang="less">
+.stylist-page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  background: url('@/assets/images/stylist_bg.png') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  padding-top: 6rem;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 4rem;
+  .title {
+    font-size: 15rem;
+    font-weight: 400;
+    color: white;
+  }
+}
+
+
+.carousel-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  margin: 2rem 0;
+}
+
+.nav-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 5rem;
+  height: 5rem;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 3;
+  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1),
+    inset 0 0.1rem 0.2rem rgba(255, 255, 255, 0.3);
+  border: 0.1rem solid rgba(255, 255, 255, 0.2);
+
+  &:active {
+    transform: translateY(-50%) scale(0.95);
+    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
+  }
+
+  &.left {
+    left: 1rem;
+  }
+
+  &.right {
+    right: 1rem;
+  }
+}
+
+.van-swipe {
+  .van-swipe-item {
+    display: flex;
+    justify-content: center;
+    .swiper-container {
+      width: 66rem;
+      height: 100rem;
+      border: 2px solid #fff;
+      border-radius: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 4.25rem 0 2.65rem;
+      img {
+        width: 59rem;
+        height: 63rem;
+        object-fit: cover;
+      }
+      .text-container {
+        padding: 0 5.25rem;
+        width: 100%;
+        font-weight: 400;
+        .name {
+          line-height: 6rem;
+          font-size: 4.8rem;
+          margin: 2.6rem 0 2.2rem;
+        }
+        .description {
+          // line-height: 3rem;
+          font-size: 2.8rem;
+          // width: 100%;
+        }
+      }
+    }
+  }
+  :deep(.van-swipe__indicators) {
+    bottom: 2.65rem;
+    background: #fff;
+    border-radius: 25px;
+    padding: 1rem 2rem;
+    .van-swipe__indicator {
+      width: 1rem;
+      height: 1rem;
+      background-color: #d9d9d9;
+      opacity: 1;
+    }
+    .van-swipe__indicator--active {
+      background-color: #000;
+      opacity: 1;
+      width: 3rem;
+      border-radius: 3px;
+    }
+  }
+}
+
+.continue-button {
+  position: absolute;
+  bottom: 3rem;
+  right: 2rem;
+  padding: 1.2rem 2.4rem;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 1rem;
+  color: white;
+  font-size: 1.6rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 3;
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 4a8153e..128a084 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,13 +19,9 @@ export default defineConfig({
     // ...
     AutoImport({
       resolvers: [VantResolver()],
-      imports: ['vue', 'vue-router', 'pinia'],
-      dts: true,
-      dirs: ['src/stores', 'src/utils']
     }),
     Components({
       resolvers: [VantResolver()],
-      dts: false
     }),
     createSvgIconsPlugin({
       // 指定需要缓存的图标文件夹