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

2025-10-16 13:35:38 +08:00
parent cb63e15aec c10a0eb120
commit 7b6fc2b6ed
19 changed files with 475 additions and 302 deletions
--- a/src/views/Workshop/customize/creation.vue
+++ b/src/views/Workshop/customize/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">
-		<button @click="onSave">Save</button>
-		<button @click="onContinue">Continue Creating</button>
-	</div>
+	<footer-navigation is-placeholder />
 </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>
--- a/src/views/Workshop/customize/home.vue
+++ b/src/views/Workshop/customize/home.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;
--- a/src/views/Workshop/customize/index.vue
+++ b/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>
--- a/src/views/Workshop/end/index.vue
+++ b/src/views/Workshop/end/index.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;
-		> * {
-			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;
-			}
-		}
+		background: url('@/assets/images/workshop/bg/end_bg.png') no-repeat center center;
+		background-size: cover;
 		> .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>
--- a/src/views/Workshop/index.vue
+++ b/src/views/Workshop/index.vue
@@ -1,28 +1,42 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-//const props = defineProps({
-//})
-//const emit = defineEmits([
-//])
-let data = reactive({
-})
-onMounted(()=>{
-})
-onUnmounted(()=>{
-})
-defineExpose({})
-const {} = toRefs(data);
+	import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
+	import { useRouter } from 'vue-router'
+	//const props = defineProps({
+	//})
+	//const emit = defineEmits([
+	//])
+	let data = reactive({})
+	onMounted(() => {})
+	onUnmounted(() => {})
+	defineExpose({})
+	const {} = toRefs(data)
+	const workshopContent = ref<HTMLDivElement>()
+	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">
-		<router-view />
+	<div class="workshop" :view-type="viewType">
+		<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>
--- a/src/views/Workshop/customize/library.vue
+++ b/src/views/Workshop/customize/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) => {
-	console.log("检索"+i)
-}
+	onMounted(() => {
+		emit('view-type', 1)
+	})

-const deleteItem = (i: number) => {
-	console.log("删除"+i)
-}
+	const onRetrieveItem = (i: number) => {
+		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%;
-		background-color: #e3e3e3;
+		flex: 1;
+		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;
-					right: 2.91rem;
+					top: 2.5rem;
+					right: 2rem;
 					width: 5.5rem;
 					height: 5.5rem;
 					border: 0.188rem solid #000;
--- a/src/views/Workshop/uploadFace/index.vue
+++ b/src/views/Workshop/uploadFace/index.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 @click="handleFinish">Finish</button>
+			<button class="sandblasted-blurred" @click="handleUploadFace"><span>Upload Face</span></button>
+			<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</span></button>
 		</div>
 	</div>

 	<!-- 展示照片 -->
 	<div class="session session_2" v-show="faceUrl">
 		<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 @click="handleGenerate">Generate</button>
+				<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></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: satoshiRegular;
+				font-family: satoshiMedium;
 				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-size: 8.6rem;
+				font-family: 'satoshiBold';
+				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;