演示功能

2025-11-17 17:33:32 +08:00
parent f7922558ec
commit 4598bce188
10 changed files with 196 additions and 26 deletions
--- a/src/views/Workshop/recommended.vue
+++ b/src/views/Workshop/recommended.vue
@@ -0,0 +1,102 @@
+<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'
+	const generateStore = useGenerateStore()
+	const emit = defineEmits(['view-type'])
+	onMounted(() => {
+		emit('view-type', 1)
+	})
+	const router = useRouter()
+	const clickNext = () => {
+		generateStore.updatePhotoInfo({})
+		router.push({ name: 'uploadFace', query: { demo: 1 } })
+	}
+</script>
+
+<template>
+	<header-title />
+	<!-- 上传照片 -->
+	<div class="upload-face-1">
+		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
+		<div class="content">
+			<div class="texts">
+				<p class="title">Recommended<br />Try-on</p>
+				<p class="desc">Come and try face swapping!</p>
+			</div>
+			<div class="image">
+				<img src="../../assets/images/workshop/template.png" />
+			</div>
+			<button class="sandblasted-blurred" @click="clickNext"><span>Next</span></button>
+		</div>
+	</div>
+	<footer-navigation is-placeholder />
+</template>
+
+<style scoped lang="less">
+	.upload-face-1 {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		position: relative;
+		color: #fff;
+		> .bg {
+			position: absolute;
+			width: 100%;
+			height: auto;
+			min-height: 100%;
+			object-fit: cover;
+		}
+		> .content {
+			margin-top: 12rem;
+			text-align: center;
+			> .texts {
+				// left: 0;
+				width: 100%;
+				// padding: 9.9rem 0 0 7.2rem;
+				> .title {
+					font-family: 'satoshiBold';
+					font-size: 11rem;
+					line-height: 124%;
+				}
+				> .desc {
+					font-family: 'satoshiMedium';
+					font-size: 4rem;
+					margin-top: 4rem;
+					line-height: 132%;
+				}
+			}
+			> .image {
+				margin: 4.9rem auto 9.5rem;
+				width: 65.3rem;
+				height: 86.5rem;
+				border-radius: 1rem;
+				backdrop-filter: blur(5.27rem);
+				-webkit-backdrop-filter: blur(5.27rem);
+				-moz-backdrop-filter: blur(5.27rem);
+				-ms-backdrop-filter: blur(5.27rem);
+				-o-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: cover;
+				}
+			}
+			> button {
+				width: 40rem;
+				height: 8.3rem;
+				border-radius: 0.7rem;
+			}
+		}
+	}
+</style>