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

feat: 样式兼容pptr

Browse Source
This commit is contained in:
kenny
2025-12-19 16:59:46 +08:00
parent 1fb39e4721
commit 1533e492e7
23 changed files with 159 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/report/index.vue
+44 -35
View File
@@ -1,5 +1,7 @@
<template>
<view style="overflow-x: hidden; font-size: 0">
<view style="overflow-x: hidden; font-size: 0" :style="{
paddingBottom: isInPptr ? '250px' : 0
}">
<Custom-Header :userFaceInfo="collect" v-if="isInPptr" />
@@ -117,11 +119,11 @@
<!-- 个人分格描述报告-->
<StyleDiagnosticReport :html="customerStyle" />
<!-- <BottomPic
<BottomPic
:style-type="collect?.type"
:psychological-style="collect?.psychological_style"
:gender="collect.sex"
/> -->
/>
</template>
</view>
</view>
@@ -230,7 +232,7 @@
:key="index"
:class="index === 1 ? 'avatar-main' : 'avatar-side'"
>
<img :src="item.url" alt="" srcset="" @click="previewImage(item.url)" />
<img :src="item.url.includes('1720084773937.png') ? '/static/imgs/site.png' : item.url" @click="previewImage(item.url)" />
</view>
</view>
<view class="rich-text-content">
@@ -246,8 +248,9 @@
height: collect?.gender === '男' ? '150px' : '328px',
}"
class="face-img-box"
style="margin: 0 auto;"
>
<img :src="faceImgUrl" alt="" srcset="" style="object-fit: cover" />
<img :src="faceImgUrl" style="object-fit: cover;" />
</view>
<rich-text :nodes="praiseTextList[1]"></rich-text>
<view class="more-hairstyle">
@@ -277,14 +280,12 @@
<view v-if="isInPptr ? true : activeTab === 3">
<view class="style-type" style="overflow-y: hidden">
<view class="lucky-color-box" style="overflow-y: hidden">
<view class="shengxiao">
<view class="shengxiao" >
<img
:src="
`https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
shegnxiaoImgUrl
"
alt=""
srcset=""
@click="
previewImage(
`https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
@@ -297,30 +298,32 @@
<view class="five-attribute-box">
<view
class="numblock"
style="background-color: rgba(193, 156, 45, 1); top: 286px; left: 40px"
style="background-color: rgba(193, 156, 45, 1); top: 45.5%; left: 14%"
>{{ numToChinese(shengxiaoNumList[0]) }}</view
>
<view
class="numblock"
style="background-color: rgba(62, 166, 123, 1); top: 32px; left: 119px"
style="background-color: rgba(62, 166, 123, 1); top: 4.5%; left: 39%"
>{{ numToChinese(shengxiaoNumList[1]) }}</view
>
<view class="numblock" style="background-color: rgba(61, 146, 168, 1); top: 136px">{{
<view class="numblock" style="background-color: rgba(61, 146, 168, 1); top: 21%;left:0%">{{
numToChinese(shengxiaoNumList[2])
}}</view>
<view
class="numblock"
style="background-color: rgba(195, 52, 55, 1); top: 150px; right: 10px"
style="background-color: rgba(195, 52, 55, 1); top: 23%;right: 3%"
>{{ numToChinese(shengxiaoNumList[3]) }}</view
>
<view
class="numblock"
style="background-color: rgba(253, 231, 73, 1); top: 293px; right: 70px"
style="background-color: rgba(253, 231, 73, 1); top: 45.5%; right: 22%"
>{{ numToChinese(shengxiaoNumList[4]) }}</view
>
<view class="five-attribute">
<view class="avatorLogo">
<img :src="userFaceInfo?.avatar_img_url" alt="" srcset="" />
<img :src="userFaceInfo?.avatar_img_url" >
</view>
<view>
<img
@@ -345,12 +348,11 @@
<!-- 图片预览遮罩层 -->
<view v-if="showPreview" class="preview-mask" @click="closePreview">
<view class="preview-container" @click.stop>
<image
<img
:src="currentPreviewImage"
class="preview-image"
mode="widthFix"
@click="closePreview"
></image>
>
</view>
</view>
@@ -1191,7 +1193,7 @@
}
.reference-img-box {
height: 195.5px;
/* height: 195.5px; */
margin-top: 20px;
display: flex;
justify-content: space-between;
@@ -1200,7 +1202,8 @@
.reference-img-box .reference-img1 {
width: 100%;
height: 195.5px;
/* height: 195.5px; */
object-fit: scale-down;
}
.reference-img-box .reference-img2 {
@@ -1226,17 +1229,19 @@
.avatar-warp {
width: 100%;
height: 192px;
/* height: 192px; */
height: 50vw;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-main {
width: 116px;
height: 160px;
margin: 0 10px;
border-radius: 40px;
/* width: 116px; */
/* height: 160px; */
height: 100%;
margin: 0 10rpx;
border-radius: 40rpx;
overflow: hidden;
}
@@ -1247,10 +1252,11 @@
}
.avatar-side {
width: 80px;
height: 120px;
/* width: 80px;
height: 120px; */
height: 80%;
/* background-color: yellow; */
border-radius: 40px;
border-radius: 40rpx;
overflow: hidden;
}
@@ -1265,12 +1271,14 @@
}
.face-img-box {
width: 336px;
height: 338px;
/* width: 336px;
width: 50vw; */
text-align: center;
/* height: 338px; */
}
.face-img-box img {
width: 100%;
/* width: 100%; */
height: 100%;
/* border-radius: 8px; */
}
@@ -1294,7 +1302,7 @@
.shengxiao {
width: 100%;
height: 283px;
/* height: 283px; */
}
.shengxiao img {
@@ -1308,8 +1316,8 @@
}
.numblock {
width: 50px;
height: 50px;
width: 100rpx;
height: 100rpx;
display: flex;
border-radius: 50%;
align-items: center;
@@ -1317,12 +1325,14 @@
position: absolute;
color: white;
z-index: 999;
font-size: 25rpx;
}
.five-attribute {
width: 100%;
/* height: 597px; */
position: relative;
/* opacity: 0; */
}
.five-attribute img {
@@ -1337,7 +1347,6 @@
top: 25%;
width: 66.5px;
height: 66.5px;
background-color: red;
border-radius: 50%;
overflow: hidden;
border: 3.22px solid rgba(167, 178, 179, 1);
@@ -1345,7 +1354,7 @@
.avatorLogo img {
width: 100%;
height: 100%;
/* height: 100%; */
object-fit: cover;
}