xsl/meida_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加pdf状态下的头部样式

Browse Source
This commit is contained in:
kenny
2025-11-24 18:53:19 +08:00
parent 2e6fefcd7f
commit cfc1c4e408
10 changed files with 311 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/report/component/CustomHeader/CustomHeader.vue
+307 -11
View File
@@ -1,20 +1,81 @@
<template>
<div class="custom-header">
<div class="custom-header" v-if="userFaceInfo">
<img class="new-header" src="/static/imgs/new-header.png" />
<view class="card">
<view class="card-main">
<img class="card-title" src="/static/imgs/card-title.png" />
<div class="custom-pic-box">
<div class="custom-pic-main">
<img class="custom-pic-main-bg" src="/static/imgs/main.png" />
<view class="card-tags">
<view class="card-tag">修饰五五分身、腿材</view>
<view class="card-tag">修饰五五分身、腿材</view>
<view class="card-tags" v-if="userFaceInfo?.purpose || userFaceInfo?.question">
<view class="card-tag" v-if="userFaceInfo.purpose">{{ userFaceInfo.purpose }}</view>
<view class="card-tag" v-if="userFaceInfo.question">{{ userFaceInfo.question }}</view>
</view>
</view>
</view>
<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 {
@@ -48,12 +109,12 @@
flex-wrap: wrap;
.card-tag {
height: 64rpx;
height: 50rpx;
padding-left: 26rpx;
padding-right: 26rpx;
background: rgba(239, 229, 219, 1);
color: rgba(78, 78, 78, 1);
font-size: 16rpx;
font-size: 20rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -61,6 +122,241 @@
margin-right: 20rpx;
}
}
.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;
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%;
display: block;
position: relative;
}
}
}
.user-info {
position: absolute;
bottom: 90rpx;
left: 50%;
transform: translateX(-50%);
font-size: 22rpx;
color: #333;
text-align: center;
}
}
}
}
pages/report/index.vue
+4 -4
View File
@@ -1,16 +1,16 @@
<template>
<view style="overflow-x: hidden; font-size: 0">
<!-- <Custom-Header></Custom-Header> -->
<Custom-Header :userFaceInfo="collect" v-if="isInPptr" />
<img
<!-- <img
v-if="isInPptr"
src="/static/header.png"
style="width: 100%; display: block; margin-bottom: -600rpx"
/>
/> -->
<view id="headerBox">
<view id="headerBox" v-if="!isInPptr">
<!-- <Header v-if="!!userFaceInfo" :userFaceInfo="userFaceInfo" /> -->
<Header v-if="collect" :userFaceInfo="collect" />
static/imgs/1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

static/imgs/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

static/imgs/3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

static/imgs/4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

static/imgs/6.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

static/imgs/main.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

static/imgs/pic-border.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

static/imgs/temp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB