129 lines
2.9 KiB
Vue
129 lines
2.9 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'
|
|
const emit = defineEmits(['view-type'])
|
|
onMounted(() => {
|
|
emit('view-type', 1)
|
|
})
|
|
const router = useRouter()
|
|
const faceUrl = ref('')
|
|
// 上传照片
|
|
const handleUploadFace = () => {
|
|
const input = document.createElement('input')
|
|
input.type = 'file'
|
|
input.accept = 'image/*'
|
|
input.capture = 'camera'
|
|
input.click()
|
|
input.onchange = (e: any) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(file)
|
|
reader.onload = () => {
|
|
faceUrl.value = reader.result as string
|
|
}
|
|
}
|
|
}
|
|
// 生成照片
|
|
const handleGenerate = () => {
|
|
console.log('生成照片')
|
|
router.push({ name: 'customize' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header-title />
|
|
<!-- 展示照片 -->
|
|
<div class="upload-face-2">
|
|
<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
|
|
<div class="content">
|
|
<div class="title">
|
|
Upload your Face<br />
|
|
to Try-on
|
|
</div>
|
|
<!-- 照片 -->
|
|
<div class="picture" v-if="faceUrl">
|
|
<img :src="faceUrl" />
|
|
</div>
|
|
<div class="btns">
|
|
<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>
|
|
<footer-navigation is-placeholder />
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.upload-face-2 {
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
color: #fff;
|
|
> * {
|
|
position: absolute;
|
|
}
|
|
> .bg {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
> .content {
|
|
top: 0;
|
|
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 {
|
|
width: 65.3rem;
|
|
height: 86.5rem;
|
|
border-radius: 1rem;
|
|
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: contain;
|
|
}
|
|
}
|
|
> .btns {
|
|
margin-top: 7.8rem;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
> button {
|
|
width: 34.5rem;
|
|
height: 8.6rem;
|
|
border-radius: 4.3rem;
|
|
margin: 0 5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|