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 19:06:18 +08:00
parent 1533e492e7
commit a8e6ba7cdd
4 changed files with 153 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/report/component/FirstStyleType/FacialColorLatitude.vue
+59 -33
View File
@@ -27,53 +27,67 @@ const props = defineProps({
<view> <view>
<view class="title">色相</view> <view class="title">色相</view>
<view class="text-en">HUE</view> <view class="text-en">HUE</view>
<ProgressBar :step="Number(hue)"/>
<view class="desc"> <div class="surface-temp">
<view class="flex"> <ProgressBar :step="Number(hue)"/>
<view>冷色</view>
<view>暖色</view> <view class="desc">
<view class="flex">
<view>冷色</view>
<view>暖色</view>
</view>
<view class="flex flex-en">
<view>Cool</view>
<view>Warn</view>
</view>
</view> </view>
<view class="flex flex-en"> </div>
<view>Cool</view>
<view>Warn</view>
</view>
</view>
</view> </view>
<view> <view>
<view class="title">亮度</view> <view class="title">亮度</view>
<view class="text-en">VALUE</view> <view class="text-en">VALUE</view>
<ProgressBar :step="Number(chroma)"/>
<view class="desc">
<view class="flex"> <div class="surface-temp">
<view>暗沉</view> <ProgressBar :step="Number(chroma)"/>
<view>白皙</view> <view class="desc">
<view class="flex">
<view>暗沉</view>
<view>白皙</view>
</view>
<view class="flex flex-en">
<view>Dark</view>
<view>White</view>
</view>
</view> </view>
<view class="flex flex-en"> </div>
<view>Dark</view>
<view>White</view>
</view>
</view>
</view> </view>
<view> <view>
<view class="title">色度</view> <view class="title">色度</view>
<view class="text-en">CHROMA</view> <view class="text-en">CHROMA</view>
<ProgressBar :step="Number(luminance)"/>
<view class="desc"> <div class="surface-temp">
<view class="flex"> <ProgressBar :step="Number(luminance)"/>
<view>柔和</view> <view class="desc">
<view>鲜艳</view> <view class="flex">
<view>柔和</view>
<view>鲜艳</view>
</view>
<view class="flex flex-en">
<view>Soft</view>
<view>Bright</view>
</view>
</view> </view>
<view class="flex flex-en"> </div>
<view>Soft</view>
<view>Bright</view>
</view>
</view>
</view> </view>
<!-- <ProgressBar :step="1" />--> <!-- <ProgressBar :step="1" />-->
</view> </view>
</template> </template>
<style scoped> <style scoped lang="scss">
.container { .container {
padding: 20px; padding: 20px;
text-align: center; text-align: center;
@@ -110,8 +124,20 @@ const props = defineProps({
margin-top: 6px; margin-top: 6px;
} }
.desc { .surface-temp {
margin-top: 4px; // background-color: yellowgreen;
display: flex;
flex-direction: column;
align-items: center;
.desc {
// background-color: blue;
margin-top: 4px;
width: 700rpx;
// margin: 0 auto;
}
} }
</style> </style>
pages/report/component/FirstStyleType/ProgressBar.vue
+15 -5
View File
@@ -33,7 +33,11 @@ watch(
<template> <template>
<view class="progress"> <view class="progress">
<image <!-- <image
:src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/progress.svg'"
class="selectBox"
/> -->
<img
:src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/progress.svg'" :src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/progress.svg'"
class="selectBox" class="selectBox"
/> />
@@ -43,14 +47,17 @@ watch(
<style scoped> <style scoped>
.progress { .progress {
width: 100%; width: 700rpx;
height: 14px; /* height: 14px; */
/* width: 780rpx; */
/* width: 100%; */
position: relative; position: relative;
} }
.selectBox { .selectBox {
width: 100%; width: 100%;
height: 14px; /* height: 14px; */
display: block;
} }
.bolus { .bolus {
@@ -58,9 +65,12 @@ watch(
height: 12px; height: 12px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 2px; /* top: 6px; */
top: 50%;
left: 0; left: 0;
background: #000; background: #000;
/* display: none; */
transform: translateY(-50%);
} }
.p0 { .p0 {
pages/report/component/FirstStyleType/geneticStyle.vue
+11 -8
View File
@@ -64,22 +64,22 @@
</view> </view>
</view> </view>
<view class="pic-container"> <view class="pic-container">
<image <!-- <image
v-for="(pic, index) in picList" v-for="(pic, index) in picList"
:key="index" :key="index"
:src="pic" :src="pic"
class="pic" class="pic"
mode="widthFix" mode="widthFix"
@click="previewImage(pic)" @click="previewImage(pic)"
></image> ></image> -->
<!-- <img <img
v-for="(pic, index) in picList" v-for="(pic, index) in picList"
:key="index" :key="index"
:src="pic" :src="pic"
@click="previewImage(pic)" @click="previewImage(pic)"
class="pic" class="pic"
/> --> />
</view> </view>
<!-- 图片预览遮罩层 --> <!-- 图片预览遮罩层 -->
@@ -117,12 +117,15 @@
padding: 20px 18px; padding: 20px 18px;
} }
/* .pic { .pic {
width: 100px; /* width: 100px;
height: 100px; height: 100px;
background-color: #eee; background-color: #eee;
border-radius: 4px; border-radius: 4px; */
} */ /* width: 80px; */
flex: 1;
width: 30%;
}
/* 预览遮罩层样式 */ /* 预览遮罩层样式 */
.preview-mask { .preview-mask {
pages/report/index.vue
+68 -62
View File
@@ -1,11 +1,12 @@
<template> <template>
<view style="overflow-x: hidden; font-size: 0" :style="{ <view
paddingBottom: isInPptr ? '250px' : 0 style="overflow-x: hidden; font-size: 0"
}"> :style="{
paddingBottom: isInPptr ? '250px' : 0,
}"
>
<Custom-Header :userFaceInfo="collect" v-if="isInPptr" /> <Custom-Header :userFaceInfo="collect" v-if="isInPptr" />
<!-- <img <!-- <img
v-if="isInPptr" v-if="isInPptr"
src="/static/header.png" src="/static/header.png"
@@ -140,20 +141,19 @@
<img :src="pngImgUrl + 'rightRe.png'" alt="" srcset="" /> <img :src="pngImgUrl + 'rightRe.png'" alt="" srcset="" />
</view> </view>
</view> </view>
<swiper :current="current" class="swiper" @change="chageSwiper"> <swiper :current="current" class="swiper" @change="chageSwiper">
<swiper-item v-for="(item, index) in newColorTypeList" :key="index"> <swiper-item v-for="(item, index) in newColorTypeList" :key="index">
<view class="swiper-item"> <view class="swiper-item">
<view class="img-box"> <view class="img-box">
<view style="width: 235px; height: 235px; position: absolute; z-index: 99"> <!-- <view>
<img
:src="item.avatarFrameImgUrl" </view> -->
alt=""
srcset="" <img :src="item.avatarFrameImgUrl" class="bg-image" />
style="width: 235px; height: 235px"
/>
</view>
<view class="avatar"> <view class="avatar">
<img :src="collect?.avatar_img_url" alt="" srcset="" /> <img :src="collect?.avatar_img_url" />
</view> </view>
</view> </view>
</view> </view>
@@ -167,6 +167,7 @@
{{ colorTypeInfo.typeName + '型' === collect.sj_color_type ? '最佳颜色' : '不匹配' }} {{ colorTypeInfo.typeName + '型' === collect.sj_color_type ? '最佳颜色' : '不匹配' }}
</view> </view>
</view> </view>
<view class="content-box"> <view class="content-box">
<view class="padding-top20"> <view class="padding-top20">
<rich-text :nodes="colorTypeText.characteristic"></rich-text> <rich-text :nodes="colorTypeText.characteristic"></rich-text>
@@ -232,7 +233,10 @@
:key="index" :key="index"
:class="index === 1 ? 'avatar-main' : 'avatar-side'" :class="index === 1 ? 'avatar-main' : 'avatar-side'"
> >
<img :src="item.url.includes('1720084773937.png') ? '/static/imgs/site.png' : item.url" @click="previewImage(item.url)" /> <img
:src="item.url.includes('1720084773937.png') ? '/static/imgs/site.png' : item.url"
@click="previewImage(item.url)"
/>
</view> </view>
</view> </view>
<view class="rich-text-content"> <view class="rich-text-content">
@@ -243,14 +247,8 @@
height: userFaceInfo?.gender === '男' ? '150px' : '328px', height: userFaceInfo?.gender === '男' ? '150px' : '328px',
}" }"
> --> > -->
<view <view class="face-img-box" style="margin: 0 auto">
:style="{ <img :src="faceImgUrl" style="object-fit: cover" />
height: collect?.gender === '男' ? '150px' : '328px',
}"
class="face-img-box"
style="margin: 0 auto;"
>
<img :src="faceImgUrl" style="object-fit: cover;" />
</view> </view>
<rich-text :nodes="praiseTextList[1]"></rich-text> <rich-text :nodes="praiseTextList[1]"></rich-text>
<view class="more-hairstyle"> <view class="more-hairstyle">
@@ -280,7 +278,7 @@
<view v-if="isInPptr ? true : activeTab === 3"> <view v-if="isInPptr ? true : activeTab === 3">
<view class="style-type" style="overflow-y: hidden"> <view class="style-type" style="overflow-y: hidden">
<view class="lucky-color-box" style="overflow-y: hidden"> <view class="lucky-color-box" style="overflow-y: hidden">
<view class="shengxiao" > <view class="shengxiao">
<img <img
:src=" :src="
`https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` + `https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
@@ -306,12 +304,14 @@
style="background-color: rgba(62, 166, 123, 1); top: 4.5%; left: 39%" style="background-color: rgba(62, 166, 123, 1); top: 4.5%; left: 39%"
>{{ numToChinese(shengxiaoNumList[1]) }}</view >{{ numToChinese(shengxiaoNumList[1]) }}</view
> >
<view class="numblock" style="background-color: rgba(61, 146, 168, 1); top: 21%;left:0%">{{
numToChinese(shengxiaoNumList[2])
}}</view>
<view <view
class="numblock" class="numblock"
style="background-color: rgba(195, 52, 55, 1); top: 23%;right: 3%" 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: 23%; right: 3%"
>{{ numToChinese(shengxiaoNumList[3]) }}</view >{{ numToChinese(shengxiaoNumList[3]) }}</view
> >
<view <view
@@ -320,10 +320,9 @@
>{{ numToChinese(shengxiaoNumList[4]) }}</view >{{ numToChinese(shengxiaoNumList[4]) }}</view
> >
<view class="five-attribute"> <view class="five-attribute">
<view class="avatorLogo"> <view class="avatorLogo">
<img :src="userFaceInfo?.avatar_img_url" > <img :src="userFaceInfo?.avatar_img_url" />
</view> </view>
<view> <view>
<img <img
@@ -348,11 +347,7 @@
<!-- 图片预览遮罩层 --> <!-- 图片预览遮罩层 -->
<view v-if="showPreview" class="preview-mask" @click="closePreview"> <view v-if="showPreview" class="preview-mask" @click="closePreview">
<view class="preview-container" @click.stop> <view class="preview-container" @click.stop>
<img <img :src="currentPreviewImage" class="preview-image" @click="closePreview" />
:src="currentPreviewImage"
class="preview-image"
@click="closePreview"
>
</view> </view>
</view> </view>
@@ -903,14 +898,12 @@
ress = await getHair(); ress = await getHair();
} else { } else {
try { try {
const uuuress = await pollExchangeHairHistory(taskInfo.requestId); const uuuress = await pollExchangeHairHistory(taskInfo.requestId);
console.log('uuuress: xxxxxxxxxxxx', uuuress); console.log('uuuress: xxxxxxxxxxxx', uuuress);
// await addHair(ress); // await addHair(ress);
avatarList.value = uuuress.result; avatarList.value = uuuress.result;
} catch (error) { } catch (error) {
console.log('error: ', error); console.log('error: ', error);
} }
} }
}); });
@@ -1016,7 +1009,7 @@
}; };
</script> </script>
<style> <style scoped lang="scss">
.report { .report {
padding: 20px 20px 0; padding: 20px 20px 0;
} }
@@ -1073,31 +1066,53 @@
display: flex; display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 235px; // height: 235px;
height: 470rpx;
// background-color: blue;
} }
.avatar { .avatar {
position: absolute; position: absolute;
width: 235px; width: 470rpx;
height: 235px; // height: 235px;
z-index: 9; z-index: 9;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} }
.avatar img { .avatar img {
/* width: 235px; */ /* width: 235px; */
height: 235px; // height: 235px;
height: 370rpx;
// width: 100%;
transform: scale(1.2); transform: scale(1.2);
} }
.swiper { .swiper {
width: 100%; width: 100%;
height: 235px; /* height: 235px; */
margin-top: 20px; height: 470rpx;
} margin-top: 20rpx;
.img-box { .swiper-item {
width: 235px; // height: 235px;
position: relative; // line-height: 28px !important;
text-align: center;
display: flex;
justify-content: center;
}
.img-box {
/* width: 235px; */
position: relative;
.bg-image {
z-index: 10;
position: relative;
height: 470rpx;
}
}
} }
.btn { .btn {
@@ -1124,16 +1139,6 @@
right: 0; right: 0;
} }
.swiper-item {
/* display: block; */
height: 235px;
line-height: 28px !important;
text-align: center;
display: flex;
justify-content: center;
/* background-color: red; */
}
.swiper-instructions { .swiper-instructions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1278,8 +1283,8 @@
} }
.face-img-box img { .face-img-box img {
/* width: 100%; */ width: 100%;
height: 100%; /* height: 100%; */
/* border-radius: 8px; */ /* border-radius: 8px; */
} }
@@ -1345,8 +1350,9 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
top: 25%; top: 25%;
width: 66.5px; width: 133rpx;
height: 66.5px; height: 133rpx;
/* height: 66.5px; */
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
border: 3.22px solid rgba(167, 178, 179, 1); border: 3.22px solid rgba(167, 178, 179, 1);