100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
<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 faceUrl = ref('')
|
|
// 上传照片
|
|
const handleUploadFace = () => {
|
|
// generateStore.updatePhotoInfo({})
|
|
router.push({ name: 'uploadFace2' })
|
|
}
|
|
// 跳过上传
|
|
const handleFinish = () => {
|
|
generateStore.updatePhotoInfo({})
|
|
generateStore.clearCustomizeInfo()
|
|
generateStore.uploadCustomizeInfo({
|
|
tryOnId: generateStore.originalTryOn.id,
|
|
tryOnUrl: generateStore.originalTryOn.tryOnUrl,
|
|
isFavorite: generateStore.originalTryOn.isLike
|
|
})
|
|
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;
|
|
min-height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
> .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 {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
bottom: 19.7rem;
|
|
> button {
|
|
width: 40rem;
|
|
height: 8.3rem;
|
|
border-radius: 0.7rem;
|
|
margin: 0 1.8rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|