feat: 样式兼容pptr
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user