feat: 样式兼容pptr

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
@@ -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>
@@ -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 {
@@ -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 {