aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
X1627315083
2025-10-16 14:01:51 +08:00
parent 43c5b3b16e d2a7b76ec9
commit 4bfe662028
5 changed files with 127 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/css/style.css
View File

@@ -18,18 +18,13 @@ button.sandblasted-blurred::after {
width: 100%;
height: 100%;
}
button.sandblasted-blurred::after {
z-index: 0;
button.sandblasted-blurred::before {
backdrop-filter: blur(9.5rem);
}
button.sandblasted-blurred::before {
z-index: 1;
button.sandblasted-blurred::after {
opacity: 0.1;
background: url('@/assets/images/customer_form_bg.png');
}
button.sandblasted-blurred > span {
z-index: 2;
}
button.sandblasted-blurred:active {
opacity: 0.7;
}

11
src/assets/css/style.less
View File

@@ -19,20 +19,15 @@ button.sandblasted-blurred {
height: 100%;
}
&::after {
z-index: 0;
backdrop-filter: blur(9.5rem);
}
&::before {
z-index: 1;
backdrop-filter: blur(9.5rem);
}
&::after {
opacity: 0.1;
background: url('@/assets/images/customer_form_bg.png');
}
>span {
z-index: 2;
}
&:active {
opacity: 0.7;

10
src/router/index.ts
View File

@@ -82,10 +82,16 @@ const router = createRouter({
component: () => import('../views/Workshop/selectModelContinue.vue')
},
{
// 上传照片
// 上传照片1
path: '/workshop/uploadFace',
name: 'uploadFace',
component: () => import('../views/Workshop/uploadFace.vue')
component: () => import('../views/Workshop/uploadFace1.vue')
},
{
// 上传照片2
path: '/workshop/uploadFace2',
name: 'uploadFace2',
component: () => import('../views/Workshop/uploadFace2.vue')
},
{
// 自定义创作

96
src/views/Workshop/uploadFace1.vue Normal file
View File

@@ -0,0 +1,96 @@
<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 emit = defineEmits(['view-type'])
onMounted(() => {
emit('view-type', 1)
})
const router = useRouter()
const faceUrl = ref('')
// 上传照片
const handleUploadFace = () => {
router.push({ name: 'uploadFace2' })
}
// 完成上传
const handleFinish = () => {
router.push({ name: 'customize' })
}
</script>
<template>
<header-title />
<!-- 上传照片 -->
<div class="upload-face-1">
<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
<div class="texts">
<p class="title">Keep Styling with AI?</p>
<p class="desc">
Would you like to keep playing with<br />
our personalized AI tools?
</p>
</div>
<div class="btns">
<button class="sandblasted-blurred" @click="handleUploadFace"><span>Upload Face</span></button>
<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</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;
> * {
position: absolute;
}
> .bg {
position: relative;
width: 100%;
height: auto;
}
.btns {
width: 100%;
display: flex;
justify-content: center;
> button {
width: 40rem;
height: 8.3rem;
border-radius: 0.7rem;
border: 0.4rem solid #fff;
font-family: satoshiMedium;
font-weight: 500;
font-size: 5.5rem;
margin: 0 1.8rem;
color: #fff;
}
}
}
.upload-face-1 {
> .texts {
top: 0;
left: 0;
padding: 9.9rem 0 0 7.2rem;
> .title {
font-family: 'satoshiBold';
font-size: 8.63rem;
}
> .desc {
font-family: 'satoshiMedium';
font-size: 4rem;
margin-top: 2rem;
line-height: 132%;
}
}
> .btns {
bottom: 19.7rem;
}
}
</style>

86
src/views/Workshop/uploadFace.vue → src/views/Workshop/uploadFace2.vue
View File

@@ -26,11 +26,6 @@
}
}
}
// 完成上传
const handleFinish = () => {
console.log('完成上传')
router.push({ name: 'customize' })
}
// 生成照片
const handleGenerate = () => {
console.log('生成照片')
@@ -40,24 +35,8 @@
<template>
<header-title />
<!-- 上传照片 -->
<div class="session session_1" v-show="!faceUrl">
<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
<div class="texts">
<p class="title">Keep Styling with AI?</p>
<p class="desc">
Would you like to keep playing with<br />
our personalized AI tools?
</p>
</div>
<div class="btns">
<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">
<div class="upload-face-2">
<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
<div class="content">
<div class="title">
@@ -65,12 +44,17 @@
to Try-on
</div>
<!-- 照片 -->
<div class="picture">
<div class="picture" v-if="faceUrl">
<img :src="faceUrl" />
</div>
<div class="btns">
<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
<template v-if="faceUrl">
<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
</template>
<button v-else class="sandblasted-blurred" @click="handleUploadFace">
<span>Upload</span>
</button>
</div>
</div>
</div>
@@ -78,7 +62,7 @@
</template>
<style scoped lang="less">
.session {
.upload-face-2 {
width: 100%;
flex: 1;
overflow: hidden;
@@ -92,61 +76,23 @@
width: 100%;
height: auto;
}
.btns {
width: 100%;
display: flex;
justify-content: center;
> button {
width: 40rem;
height: 8.3rem;
border-radius: 0.7rem;
border: 0.4rem solid #fff;
font-family: satoshiMedium;
font-weight: 500;
font-size: 5.5rem;
margin: 0 1.8rem;
color: #fff;
}
}
}
.session.session_1 {
> .texts {
> .content {
top: 0;
left: 0;
padding: 9.9rem 0 0 7.2rem;
> .title {
font-family: 'satoshiBold';
font-size: 8.63rem;
}
> .desc {
font-family: 'satoshiMedium';
font-size: 4rem;
margin-top: 2rem;
line-height: 132%;
}
}
> .btns {
bottom: 19.7rem;
}
}
.session.session_2 {
> .content {
top: 18.5rem;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> .title {
font-family: satoshiBold;
font-size: 11rem;
text-align: center;
line-height: 124%;
margin-bottom: 7.8rem;
}
> .picture {
margin: 7.8rem 0;
width: 65.3rem;
height: 86.5rem;
border-radius: 1rem;
@@ -166,6 +112,10 @@
}
}
> .btns {
margin-top: 7.8rem;
width: 100%;
display: flex;
justify-content: center;
> button {
width: 34.5rem;
height: 8.6rem;