更改头部标题和底部导航

src/assets/css/style.css

@@ -71,6 +71,7 @@ html:root {
   padding: 0 2rem;
   min-height: fit-content;
 }
+button.general,
 .general_button {
   border-radius: 0.7rem;
   border: 3px solid #000;
@@ -79,11 +80,13 @@ html:root {
   color: #fff;
   font-family: satoshiMedium;
 }
+button.general.smail,
 .general_button.smail {
   font-size: 3.6rem;
   width: 24.6rem;
   line-height: 6.7rem;
 }
+button.general.big,
 .general_button.big {
   font-size: 3.8rem;
   line-height: 7.4rem;

src/assets/css/style.less

@@ -83,6 +83,7 @@ html:root {
 	min-height: fit-content;
 }
 
+button.general,
 .general_button{
 	border-radius: .7rem;
 	border: 3px solid #000;

src/components/FooterNavigation.vue

@@ -33,7 +33,7 @@
 	const navs = [
 		{ label: 'Home', icon: 'home', size: 73, path: '/homeNav' },
 		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
-		{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
+		// { label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
 	]
 	const onNavClick = (nav) => {
 		if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : nav.path && router.push(nav.path)
@@ -49,10 +49,10 @@
 			@click="onNavClick(nav)"
 		>
 			<SvgIcon :name="`${nav.icon}_${currentRoute === nav.path ? '1' : '0'}`" size="55" />
-			<span class="label">{{ nav.label }}</span>
+			<!-- <span class="label">{{ nav.label }}</span> -->
 		</div>
 	</div>
-	<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
+	<!-- <div class="footer-navigation placeholder" v-show="isPlaceholder"></div> -->
 </template>
 
 <style scoped lang="less">
@@ -61,9 +61,9 @@
 		height: var(--footer-navigation-height, 14.9rem);
 	}
 	.footer-navigation.main {
-		position: fixed;
+		// position: fixed;
-		bottom: 0;
+		// bottom: 0;
-		z-index: var(--footer-navigation-z-index, 999);
+		// 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;

src/components/HeaderTitle.vue

@@ -4,76 +4,56 @@
 
 	defineProps({
 		title: { type: String, default: 'AI STYLING ASSISTANT' },
-		hasSetting: { type: Boolean, default: false },
-		styleType: { type: String, default: '1' },//1低 2高 3-12rem
-		isPlaceholder: { type: Boolean, default: true },
 	})
 
-	defineEmits(['clickReturn'])
+	const emit = defineEmits(['clickReturn', 'clickProfile'])
 
 	const handleClickReturn = () => {
 		router.back()
 		// emit('clickReturn')
 	}
+	const handleClickProfile = () => {
+		// router.push('/workshop/profile')
+		emit('clickProfile')
+	}
 </script>
 
 <template>
-	<div class="header-title" :style-type="styleType">
+	<div class="header-title">
-		<div class="main">
+		<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
-			<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
+		<span class="title">{{ title }}</span>
-			<span class="title">{{ title }}</span>
+		<div class="profile" @click="handleClickProfile"><SvgIcon name="profile" size="45" /></div>
-			<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="44" /></div>
-		</div>
-		<div class="placeholder" v-if="isPlaceholder"></div>
 	</div>
 </template>
 
 <style scoped lang="less">
 	.header-title {
 		width: 100%;
-		&[style-type="2"] {
+		height: var(--header-title-height, 14.6rem);
-			--header-title-height: 14.5rem;
+		border-bottom-style: solid;
-			--header-title-border-bottom-width: 0.2rem;
+		border-bottom-width: var(--header-title-border-bottom-width, 0.2rem);
-			--header-title-return-left: 7.8rem;
+		border-bottom-color: var(--header-title-border-bottom-color, #d5d5d5);
-		}
+		z-index: var(--header-title-z-index, 999);
-		&[style-type="3"] {
+		background-color: var(--header-title-background, #fff);
-			--header-title-height: 12rem;
+		display: flex;
-			--header-title-border-bottom-width: 0.2rem;
+		align-items: center;
-		}
+		justify-content: center;
-		> div {
-			width: 100%;
-			height: var(--header-title-height, 9.9rem);
-			border-bottom-width: var(--header-title-border-bottom-width, 0);
-			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 {
+		> .return {
-				position: absolute;
+			position: absolute;
-				left: var(--header-title-return-left, 3.2rem);
+			left: 7rem;
-				display: inline-block;
+			display: inline-block;
-				--svg-icon-color: var(--header-title-color, #000);
+		}
-			}
+		> .title {
-			> .title {
+			font-size: 4.8rem;
-				font-size: 4.8rem;
+			color: var(--header-title-color, #000);
-				color: var(--header-title-color, #000);
+			font-family: 'boskaRegular';
-				font-family: 'boskaRegular';
+		}
-			}
+		> .profile {
-			> .setting {
+			position: absolute;
-				position: absolute;
+			right: 7rem;
-				right: 3.2rem;
+			display: inline-block;
-				display: inline-block;
+			color: var(--header-title-color, #000);
-				color: var(--header-title-color, #000);
-			}
 		}
-		
 	}
 </style>

src/types/enum.ts

@@ -0,0 +1,13 @@
+/** 流程类型 */
+export const FlowType = {
+	/** 主流程 */
+	MAIN: 'main',
+	/** 历史流程 */
+	HISTORICAL: 'historical',
+	/** 历史流程-Outfit */
+	H_OUTFIT: 'historical-outfit',
+	/** 历史流程-Tryon */
+	H_TRYON: 'historical-tryon',
+	/** 历史流程-AI */
+	H_AI: 'historical-ai',
+}

src/views/Workshop/creation/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 	import { ref, reactive, onMounted, watch, computed } from 'vue'
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import CreationList from '@/views/Workshop/creation/creation-list.vue'
 	import CreationDetails from '@/views/Workshop/creation/creation-details.vue'
 
@@ -20,10 +18,8 @@
 </script>
 
 <template>
-	<header-title style-type="2" />
 	<creation-list v-show="!styleUrl" />
 	<creation-details v-if="styleUrl" />
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/customize.vue

@@ -91,6 +91,7 @@
 				})
 				.catch((err) => {
 					console.error(err)
+					if(data['customerPhotoId']) router.back()
 					loading.value = false
 				})
 		}
@@ -299,24 +300,21 @@
 		}
 		> .btns {
 			margin-top: 5rem;
-			width: 70%;
+			width: 68%;
 			display: flex;
 			// justify-content: center;
 			justify-content: space-between;
 			> button {
+				padding: 0;
 				box-sizing: content-box;
 				font-family: satoshiRegular;
-				// margin: 0 1.8rem;
 				border: none;
-				// margin: 0 5.2rem 0 auto;
-				// min-width: 18rem;
 				width: 34rem;
-				// padding: 0 3.5rem;
+				height: 7.4rem;
-				height: 6.9rem;
 				border-radius: 1.3rem;
 				background: #000;
 				font-weight: 400;
-				font-size: 3.89rem;
+				font-size: 3.8rem;
 				color: #fff;
 				&:active {
 					opacity: 0.7;

src/views/Workshop/end.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
@@ -14,7 +12,6 @@
 </script>
 
 <template>
-	<header-title />
 	<div class="end">
 		<div class="content">
 			<div class="title">Thank you.</div>
@@ -23,7 +20,6 @@
 			</div>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/home.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
-import HeaderTitle from '@/components/HeaderTitle.vue'
-import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 import { showConfirmDialog } from 'vant'
@@ -48,7 +46,6 @@ defineExpose({})
 // const {  } = toRefs(data);
 </script>
 <template>
-	<header-title style-type="2" />
 	<div class="homeNavPage">
 		<div class="title">
 			Welcome Back,
@@ -74,7 +71,6 @@ defineExpose({})
 			</div>
 		</div>
 	</div>
-	<footer-navigation />
 </template>
 <style lang="less" scoped>
 	.header-title {

src/views/Workshop/index.vue

@@ -1,10 +1,36 @@
 <script setup lang="ts">
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	import { ref } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import RouteCache from '@/components/RouteCache.vue'
+	import profile from './profile.vue'
 	//const props = defineProps({
 	//})
 	//const emit = defineEmits([
 	//])
+	const profileRef = ref(null)
+	const handleClickProfile = () => {
+		profileRef.value.open()
+	}
 </script>
 <template>
-	<RouteCache />
+	<div class="workshop">
-</template>
+		<header-title @clickProfile="handleClickProfile" />
+		<RouteCache />
+		<footer-navigation />
+	</div>
+	<profile ref="profileRef" />
+</template>
+<style scoped lang="less">
+	.workshop {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .routeCache {
+			flex: 1;
+		}
+	}
+</style>

src/views/Workshop/library.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 	import { ref, reactive, onMounted, inject } from 'vue'
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import MyList from '@/components/MyList.vue'
 	import router from '@/router'
 	import { FormatDate } from '@/utils/tools'
@@ -67,7 +65,6 @@
 </script>
 
 <template>
-	<header-title style-type="2" />
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
@@ -87,7 +84,6 @@
 			</my-list>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/profile.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
 	import { ref, reactive, onMounted, inject } from 'vue'
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import router from '@/router'
 	import { showConfirmDialog } from 'vant'
-	import { useUserInfoStore } from '@/stores'
+	import { useUserInfoStore, useOverallStore } from '@/stores'
 	import { LogOut } from '@/api/login'
 	const userInfoStore = useUserInfoStore()
+	const overallStore = useOverallStore()
 	const emit = defineEmits(['view-type'])
+	const show = ref(false)
+	const isEdit = ref(false)
 	const form = reactive({
-		name: { edit: false, msg: '', value: userInfoStore.state.userInfo.username },
+		name: { msg: '', value: userInfoStore.state.userInfo.username },
-		email: { edit: false, msg: '', value: userInfoStore.state.userInfo.email },
+		email: { msg: '', value: userInfoStore.state.userInfo.email },
-		password: { show: false, edit: false, msg: '', value: userInfoStore.state.userInfo.password }
+		password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
 	})
-
+	const open = () => {
+		isEdit.value = false
+		show.value = true
+	}
+	const close = () => {
+		show.value = false
+	}
 	const onEditItem = (item) => {
 		if (!form[item]) return
 		form[item].edit = true
@@ -22,6 +29,19 @@
 		if (!form[item]) return
 		form[item].edit = false
 	}
+	const switchCustomer = () => {
+		console.log('switchCustomer')
+	}
+	const edit = () => {
+		isEdit.value = true
+	}
+	const confirm = () => {
+		overallStore.setLoading(true)
+		setTimeout(() => {
+			overallStore.setLoading(false)
+			isEdit.value = false
+		}, 1000)
+	}
 	const logout = () => {
 		showConfirmDialog({
 			title: 'Log out',
@@ -37,207 +57,205 @@
 			})
 			.catch(() => {})
 	}
+	defineExpose({ open })
 </script>
 
 <template>
-	<header-title style-type="2" :is-placeholder="false" />
+	<van-popup class="van-popup" v-model:show="show" position="bottom" round>
-	<div class="profile">
-		<div class="header-bg">
-			<svg
-				width="1079"
-				height="572"
-				viewBox="0 0 1079 572"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M0 -6H1079V504.057C1079 504.057 751.757 572.269 536.733 571.999C323.838 571.733 0 504.057 0 504.057V-6Z"
-					fill="#EBF0F0"
-				/>
-			</svg>
-		</div>
 		<div class="profile">
-			<!-- <div class="edit"><SvgIcon name="edit" size="37" /></div> -->
+			<div class="header">
+				<span class="title">Profile</span>
+				<van-icon name="cross" class="close" @click="close" />
+			</div>
+			<div class="box">
+				<div class="form-item">
+					<div class="label">Your Name</div>
+					<label class="input">
+						<div class="icon"><SvgIcon name="user" size="64" /></div>
+						<input
+							type="text"
+							placeholder="Enter your name"
+							v-model="form.name.value"
+							:readonly="!isEdit"
+						/>
+						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
+							<SvgIcon name="confirmation" size="37" />
+						</div>
+						<div class="icon" v-else @click="onEditItem('name')">
+							<SvgIcon name="edit" size="37" />
+						</div> -->
+					</label>
+					<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
+				</div>
+				<div class="form-item">
+					<div class="label">Your Email</div>
+					<label class="input">
+						<div class="icon"><SvgIcon name="email" size="64" /></div>
+						<input
+							type="email"
+							placeholder="Enter your email"
+							v-model="form.email.value"
+							:readonly="!isEdit"
+							required
+						/>
+						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
+							<SvgIcon name="confirmation" size="37" />
+						</div>
+						<div class="icon" v-else @click="onEditItem('email')">
+							<SvgIcon name="edit" size="37" />
+						</div> -->
+					</label>
+					<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
+				</div>
+				<div class="form-item">
+					<div class="label">Password</div>
+					<label class="input">
+						<div class="icon" @click="form.password.show = !form.password.show">
+							<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
+						</div>
+						<input
+							:type="form.password.show ? 'text' : 'password'"
+							placeholder="Enter your password"
+							v-model="form.password.value"
+							:readonly="!isEdit"
+						/>
+						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
+							<SvgIcon name="confirmation" size="37" />
+						</div>
+						<div class="icon" v-else @click="onEditItem('password')">
+							<SvgIcon name="edit" size="37" />
+						</div> -->
+					</label>
+					<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
+				</div>
+
+				<template v-if="isEdit">
+					<button class="confirm" @click="confirm">Confirm</button>
+					<p class="tip">Powered by AiDLab for Lane Crawford</p>
+				</template>
+				<template v-else>
+					<button class="switch" @click="switchCustomer">Switch Customer</button>
+					<button class="edit" @click="edit">Edit Profile</button>
+					<button class="logout" @click="logout">Log out</button>
+				</template>
+			</div>
 		</div>
-		<div class="title">Momo Fashion</div>
+	</van-popup>
-		<p class="sub">Fashion Design</p>
-		<div class="form-item">
-			<div class="label">Your Name</div>
-			<label class="input">
-				<div class="icon"><SvgIcon name="user" size="50" /></div>
-				<input
-					type="text"
-					placeholder="Enter your name"
-					v-model="form.name.value"
-					:readonly="!form.name.edit"
-				/>
-				<!-- <div class="icon" v-if="form.name.edit" @click.stop="onSaveItem('name')">
-						<SvgIcon name="confirmation" size="37" />
-					</div>
-					<div class="icon" v-else @click="onEditItem('name')">
-						<SvgIcon name="edit" size="37" />
-					</div> -->
-			</label>
-			<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
-		</div>
-		<div class="form-item">
-			<div class="label">Your Email</div>
-			<label class="input">
-				<div class="icon"><SvgIcon name="email" size="50" /></div>
-				<input
-					type="email"
-					placeholder="Enter your email"
-					v-model="form.email.value"
-					:readonly="!form.email.edit"
-					required
-				/>
-				<!-- <div class="icon" v-if="form.email.edit" @click.stop="onSaveItem('email')">
-					<SvgIcon name="confirmation" size="37" />
-				</div>
-				<div class="icon" v-else @click="onEditItem('email')">
-					<SvgIcon name="edit" size="37" />
-				</div> -->
-			</label>
-			<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
-		</div>
-		<!-- <div class="form-item">
-			<div class="label">Password</div>
-			<label class="input">
-				<div class="icon" @click="form.password.show = !form.password.show">
-					<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="50" />
-				</div>
-				<input
-					:type="form.password.show ? 'text' : 'password'"
-					placeholder="Enter your password"
-					v-model="form.password.value"
-					:readonly="!form.password.edit"
-				/>
-				<div class="icon" v-if="form.password.edit" @click.stop="onSaveItem('password')">
-					<SvgIcon name="confirmation" size="37" />
-				</div>
-				<div class="icon" v-else @click="onEditItem('password')">
-					<SvgIcon name="edit" size="37" />
-				</div>
-			</label>
-			<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
-		</div> -->
-		<button class="logout" @click="logout">Log out</button>
-	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">
+	.van-popup {
+		max-height: 90%;
+		--van-popup-round-radius: 7.8rem;
+	}
 	.profile {
-		width: 100%;
+		margin: 6.5rem 0;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		> .header-bg {
+		> .header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			width: 100%;
-			min-height: 57rem;
+			padding: 0 7rem;
-			> svg {
+			margin-bottom: 8rem;
-				width: 100%;
+			> .title {
-				height: auto;
-			}
-		}
-		> .profile {
-			margin-top: -23rem;
-			width: 28.9rem;
-			height: 28.9rem;
-			border-radius: 50%;
-			background-color: #d9d9d9;
-			position: relative;
-			> .edit {
-				position: absolute;
-				right: 1.9rem;
-				bottom: 0;
-				width: 6.4rem;
-				height: 6.4rem;
-				border-radius: 50%;
-				background-color: #74716d;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				--svg-icon-color: #fff;
-			}
-		}
-		> .title {
-			margin-top: 3.7rem;
-			font-family: 'satoshiBold';
-			font-size: 4.1rem;
-			line-height: 120%;
-			color: #262422;
-		}
-		> .sub {
-			font-family: satoshiRegular;
-			font-size: 2.9rem;
-			line-height: 120%;
-			margin-top: 1.6rem;
-			margin-bottom: 2.4rem;
-			color: #ababab;
-		}
-		> .form-item {
-			margin: 4.2rem auto 0;
-			width: 68rem;
-			> .label {
-				margin-bottom: 2.5rem;
 				font-family: satoshiBold;
-				font-size: 2.9rem;
+				font-size: 4.6rem;
-				line-height: 120%;
+				color: #181725;
-				color: #262422;
 			}
-			> .input {
+			> .close {
-				width: 100%;
+				margin-left: auto;
-				height: 11.5rem;
+				font-size: 5rem;
-				border-radius: 2.5rem;
+				color: #a1a1a1;
-				border: 0.2rem solid #f1ecec;
-				box-sizing: content-box;
-				display: flex;
-				align-items: center;
-				overflow: hidden;
-				padding: 0 2.5rem;
-				> * {
-					margin-right: 2.5rem;
-					&:last-child {
-						margin-right: 0;
-					}
-				}
-				> .icon {
-					// margin: 0 2.5rem;
-					--svg-icon-color: #ababab;
-				}
-				> input {
-					width: 0;
-					flex: 1;
-					height: 100%;
-					font-family: satoshiMedium;
-					font-size: 2.9rem;
-					color: #000;
-					border: none;
-					&::placeholder {
-						color: #ababab;
-					}
-				}
-			}
-			> .error {
-				margin-top: 1rem;
-				font-family: satoshiRegular;
-				font-size: 2.5rem;
-				line-height: 120%;
-				color: #ff0000;
 			}
 		}
-		> .logout {
+		> .box {
-			margin-top: 7rem;
+			width: 100%;
-			width: 68rem;
+			padding: 0 13rem;
-			height: 11.5rem;
+			> div {
-			border-radius: 2.5rem;
+				width: 100%;
-			background-color: transparent;
+				margin-top: 5.1rem;
-			border: 0.2rem solid #3b3b3b;
+				&:first-child {
-			font-family: satoshiBold;
+					margin-top: 0;
-			font-size: 3.32rem;
+				}
-			line-height: 120%;
+			}
-			color: #222;
+			> button {
+				margin-top: 8.5rem;
+				width: 100%;
+				height: 14.5rem;
+				border-radius: 2rem;
+				font-size: 4rem;
+				border: 0.2rem solid #3b3b3b;
+				font-family: satoshiBold;
+			}
+			> .form-item {
+				> .label {
+					margin-bottom: 2.5rem;
+					font-family: satoshiBold;
+					font-size: 2.9rem;
+					line-height: 120%;
+					color: #262422;
+				}
+				> .input {
+					// width: 100%;
+					height: 13.9rem;
+					border-radius: 2.5rem;
+					border: 0.2rem solid #f1ecec;
+					box-sizing: content-box;
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					padding: 0 2.5rem;
+					> * {
+						margin-right: 2.5rem;
+						&:last-child {
+							margin-right: 0;
+						}
+					}
+					> .icon {
+						// margin: 0 2.5rem;
+						--svg-icon-color: #ababab;
+					}
+					> input {
+						width: 0;
+						flex: 1;
+						height: 100%;
+						font-family: satoshiMedium;
+						font-size: 3.5rem;
+						color: #000;
+						border: none;
+						&::placeholder {
+							color: #ababab;
+						}
+					}
+				}
+				> .error {
+					margin-top: 1rem;
+					font-family: satoshiRegular;
+					font-size: 2.5rem;
+					line-height: 120%;
+					color: #ff0000;
+				}
+			}
+			> .switch {
+				background-color: transparent;
+				color: #222;
+			}
+			> .confirm,
+			> .edit,
+			> .logout {
+				background-color: #000;
+				color: #fff;
+			}
+			> .tip {
+				font-family: satoshiRegular;
+				text-align: center;
+				font-size: 3rem;
+				color: #a1a1a1;
+				margin-top: 17.8rem;
+			}
 		}
 	}
 </style>

src/views/Workshop/recommended.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	import { useGenerateStore } from '@/stores'
@@ -17,7 +15,6 @@
 </script>
 
 <template>
-	<header-title />
 	<!-- 上传照片 -->
 	<div class="upload-face-1">
 		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
@@ -32,7 +29,6 @@
 			<button class="sandblasted-blurred" @click="clickNext"><span>Next</span></button>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/uploadFace1.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, onMounted, computed } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import { useGenerateStore } from '@/stores'
@@ -36,7 +34,6 @@
 </script>
 
 <template>
-	<header-title />
 	<!-- 上传照片 -->
 	<div class="upload-face-1">
 		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
@@ -54,7 +51,6 @@
 			<button class="sandblasted-blurred" @click="handleFinish" v-if="!isDemo"><span>Finish</span></button>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">

src/views/Workshop/uploadFace2.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import { ref, reactive, onMounted, computed } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import { uploadCustomerPhoto } from '@/api/workshop'
@@ -59,7 +57,6 @@
 </script>
 
 <template>
-	<header-title />
 	<!-- 展示照片 -->
 	<div class="upload-face-2">
 		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
@@ -83,7 +80,6 @@
 			</div>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
 </template>
 
 <style scoped lang="less">