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