99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
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>
|
|
<!-- 上传照片 -->
|
|
<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>
|
|
</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>
|