391 lines
10 KiB
Vue
391 lines
10 KiB
Vue
<template>
|
||
<div class="custom-header" v-if="userFaceInfo">
|
||
<img class="new-header" src="/static/imgs/new-header.png" />
|
||
|
||
<div class="custom-pic-box">
|
||
<div class="custom-pic-main">
|
||
<img class="custom-pic-main-bg" src="/static/imgs/main.png" />
|
||
|
||
<div class="card-tags" v-if="userFaceInfo?.purpose || userFaceInfo?.question">
|
||
<div
|
||
class="card-tag"
|
||
style="
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 200rpx;
|
||
display: block;
|
||
line-height: 50rpx;
|
||
"
|
||
v-if="userFaceInfo.purpose">{{ userFaceInfo.purpose }}</div
|
||
>
|
||
<div
|
||
class="card-tag"
|
||
style="
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 200rpx;
|
||
display: block;
|
||
line-height: 50rpx;
|
||
"
|
||
v-if="userFaceInfo.question"
|
||
>{{ userFaceInfo.question }}</div
|
||
>
|
||
</div>
|
||
|
||
<div class="custom-pic-info">
|
||
<img class="pic-border" src="/static/imgs/pic-border.png" />
|
||
|
||
<div class="real-pic">
|
||
<!-- <img src="/static/imgs/temp.png" class="personal-pic" /> -->
|
||
<img :src="userFaceInfo?.avatar_img_url" class="personal-pic" />
|
||
|
||
<!-- <div class="text">优雅风</div> -->
|
||
<div class="text">{{ userFaceInfo?.type }}</div>
|
||
</div>
|
||
|
||
<div class="tag tag1" :data-text="userFaceInfo?.feature">
|
||
<img src="/static/imgs/1.png" />
|
||
</div>
|
||
|
||
<div class="tag tag2" :data-text="userFaceInfo?.eyebrows">
|
||
<img src="/static/imgs/2.png" />
|
||
</div>
|
||
|
||
<div class="tag tag3" :data-text="userFaceInfo?.nasolabial_folds">
|
||
<img src="/static/imgs/3.png" />
|
||
</div>
|
||
|
||
<div class="tag tag4" :data-text="userFaceInfo?.ocular_form">
|
||
<img src="/static/imgs/4.png" />
|
||
</div>
|
||
|
||
<div class="tag tag5" :data-text="userFaceInfo?.three_courts_five_eyes">
|
||
<img src="/static/imgs/2.png" />
|
||
</div>
|
||
|
||
<div class="tag tag6" :data-text="userFaceInfo?.neck_length">
|
||
<img src="/static/imgs/6.png" />
|
||
</div>
|
||
|
||
<!-- <img src="/static/imgs/1.png" class="tag tag1" data-text="abc" />
|
||
<img src="/static/imgs/2.png" class="tag tag2" />
|
||
<img src="/static/imgs/3.png" class="tag tag3" />
|
||
<img src="/static/imgs/4.png" class="tag tag4" />
|
||
<img src="/static/imgs/2.png" class="tag tag5" />
|
||
<img src="/static/imgs/6.png" class="tag tag6" /> -->
|
||
</div>
|
||
|
||
<div class="user-info">
|
||
<div>{{ userFaceInfo?.sex }}｜{{ userFaceInfo?.birthday }}</div>
|
||
<div
|
||
>身高：{{ userFaceInfo.height || '-' }}cm 体重：{{ userFaceInfo.weight || '-' }}kg</div
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps } from 'vue';
|
||
|
||
const props = defineProps({
|
||
userFaceInfo: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.custom-header {
|
||
.new-header {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.card {
|
||
background: rgba(239, 229, 219, 1);
|
||
padding: 50rpx;
|
||
|
||
.card-main {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
height: 800rpx;
|
||
background: #fff;
|
||
display: block;
|
||
border-radius: 20rpx;
|
||
.card-title {
|
||
width: 450rpx;
|
||
display: block;
|
||
margin: 0 auto;
|
||
margin-top: 9rpx;
|
||
}
|
||
|
||
.card-tags {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
|
||
.card-tag {
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
padding-left: 26rpx;
|
||
padding-right: 26rpx;
|
||
background: rgba(239, 229, 219, 1);
|
||
color: rgba(78, 78, 78, 1);
|
||
font-size: 20rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
|
||
.pic {
|
||
width: 327rpx;
|
||
height: 477rpx;
|
||
// margin: 0 auto;
|
||
margin-top: 35rpx;
|
||
.pic-border {
|
||
width: 100%;
|
||
margin-left: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.custom-pic-box {
|
||
width: 100%;
|
||
background: rgba(239, 229, 219, 1);
|
||
|
||
.custom-pic-main {
|
||
position: relative;
|
||
|
||
.custom-pic-main-bg {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.card-tags {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
// background-color: red;
|
||
position: absolute;
|
||
|
||
left: 0;
|
||
top: 230rpx;
|
||
width: 100%;
|
||
|
||
.card-tag {
|
||
height: 50rpx;
|
||
padding-left: 26rpx;
|
||
padding-right: 26rpx;
|
||
background: rgba(239, 229, 219, 1);
|
||
color: rgba(78, 78, 78, 1);
|
||
font-size: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 16rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.custom-pic-info {
|
||
position: absolute;
|
||
top: 300rpx;
|
||
left: 80rpx;
|
||
|
||
// width: 330rpx;
|
||
// height: 100rpx;
|
||
// background-color: red;
|
||
|
||
.tag {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
width: 200rpx;
|
||
transform: translateX(100%);
|
||
|
||
> img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
&.tag1 {
|
||
top: 20rpx;
|
||
|
||
&::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: rotate(-10deg);
|
||
}
|
||
}
|
||
|
||
&.tag2 {
|
||
top: 120rpx;
|
||
|
||
&::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: rotate(10deg);
|
||
}
|
||
}
|
||
|
||
&.tag3 {
|
||
top: 200rpx;
|
||
|
||
&::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: rotate(-10deg);
|
||
}
|
||
}
|
||
|
||
&.tag4 {
|
||
top: 280rpx;
|
||
|
||
&::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: rotate(-10deg);
|
||
}
|
||
}
|
||
|
||
&.tag5 {
|
||
top: 380rpx;
|
||
|
||
&::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: rotate(10deg);
|
||
}
|
||
}
|
||
|
||
&.tag6 {
|
||
top: 470rpx;
|
||
|
||
&::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: white;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: rotate(-10deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.pic-border {
|
||
width: 427rpx;
|
||
// background-color: red;
|
||
z-index: 1;
|
||
}
|
||
|
||
.real-pic {
|
||
position: absolute;
|
||
top: 35rpx;
|
||
left: 55rpx;
|
||
width: 320rpx;
|
||
height: 450rpx;
|
||
// overflow: hidden;
|
||
z-index: 2;
|
||
|
||
.text {
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
right: 0rpx;
|
||
// transform: translateX(-50%);
|
||
font-size: 40rpx;
|
||
color: #333;
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
.personal-pic {
|
||
width: 100%;
|
||
height: 450rpx;
|
||
display: block;
|
||
position: relative;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-info {
|
||
position: absolute;
|
||
bottom: 90rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|