Skip to content

A
angel-angel-mini-game
Commit 70741af1 by Hantao
Options

优化写法，添加缺少的pH值前后显示效果

parent ea5bbe9a
Showing with 112 additions and 45 deletions
src/pages/third/components/TabsInstructionsPanel.vue
...@@ -72,10 +72,10 @@ ...@@ -72,10 +72,10 @@
/> />
</view> </view>
<view class="result-card" v-if="showFinalCard"> <view class="result-card" :class="{ 'ph-result-card': isSecondTest }" v-if="showFinalCard">
<image class="card-bg" :src="IMAGES.cardBg" mode="scaleToFill" /> <image class="card-bg" :src="IMAGES.cardBg" mode="scaleToFill" />
<view class="card-content"> <view class="card-content">
<view class="card-title">检测结果</view> <view class="card-title" :class="{ 'ph-result-title': isSecondTest }">检测结果</view>
<view class="card-body result-body" v-if="!isSecondTest"> <view class="card-body result-body" v-if="!isSecondTest">
<view class="comparison-section"> <view class="comparison-section">
...@@ -138,8 +138,14 @@ ...@@ -138,8 +138,14 @@
<image class="ph-success-icon" :src="IMAGES.successIcon" mode="aspectFit" /> <image class="ph-success-icon" :src="IMAGES.successIcon" mode="aspectFit" />
</view> </view>
<image class="ph-before-img" :src="IMAGES.phBefore" mode="aspectFit" />
<image class="ph-after-img" :src="IMAGES.phAfter" mode="aspectFit" />
<view class="ph-chart-container"> <view class="ph-chart-container">
<image class="ph-chart-img" :src="IMAGES.phChart" mode="widthFix" /> <image class="ph-chart-img" :src="IMAGES.phChart" mode="widthFix" />
<view class="ph-scale-row">
<text v-for="i in 15" :key="i" class="scale-text">{{ i - 1 }}</text>
</view>
</view> </view>
<view class="ph-footer-row"> <view class="ph-footer-row">
...@@ -157,7 +163,7 @@ ...@@ -157,7 +163,7 @@
<text class="box-title">污染水</text> <text class="box-title">污染水</text>
<text <text
class="box-value" class="box-value"
:style="{ color: showResults ? '#FF3300' : '#25334D' }" :class="{ 'text-polluted': showResults, 'text-primary': !showResults }"
>{{ resultLabel }}：{{ pollutedValue }}</text >{{ resultLabel }}：{{ pollutedValue }}</text
> >
<image <image
...@@ -171,7 +177,7 @@ ...@@ -171,7 +177,7 @@
<text class="box-title">净化水</text> <text class="box-title">净化水</text>
<text <text
class="box-value" class="box-value"
:style="{ color: showResults ? '#00CC99' : '#25334D' }" :class="{ 'text-purified': showResults, 'text-primary': !showResults }"
>{{ resultLabel }}：{{ purifiedValue }}</text >{{ resultLabel }}：{{ purifiedValue }}</text
> >
<image <image
...@@ -199,25 +205,32 @@ ...@@ -199,25 +205,32 @@
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
const props = defineProps({
isTesting: { const TEXTS = {
type: Boolean, TDS: {
default: false, instruction: '点击"开始检测"按钮测试TDS值',
tips: {
default: 'TDS代表总溶解固体，数值越低水质越纯净',
testing: '安吉尔RO反渗透技术可将TDS降至15以下',
result: '优质饮用水TDS值应低于50ppm',
}, },
isSecondTest: { label: 'TDS值',
type: Boolean, polluted: '450',
default: false, purified: '15',
}, },
triggerShowFinalCard: { PH: {
type: Boolean, instruction: "点击‘开始检测’测试水的酸碱度",
default: false, tips: {
default: '理想饮用水pH值应在6.5-8.5之间',
testing: 'pH试纸通过颜色变化判断酸碱性',
result: '中性水(pH 7.0)对人体最温和,是理想的饮用水',
}, },
}); label: 'PH值',
polluted: '8.5',
const emit = defineEmits(['resultShown', 'progressFinished']); purified: '7.0',
},
const showResults = ref(false); placeholder: '？？？',
const showFinalCard = ref(false); };
const IMAGES = { const IMAGES = {
// 两个选项图片 // 两个选项图片
...@@ -239,10 +252,32 @@ const IMAGES = { ...@@ -239,10 +252,32 @@ const IMAGES = {
successIconFrame: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp', successIconFrame: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp',
badgeIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/44463cae0882429ebd84049240ff5330Group%20348447451.webp', badgeIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/44463cae0882429ebd84049240ff5330Group%20348447451.webp',
phChart: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp', phChart: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp',
phBefore: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8756b9fccb61450a96f34e2b0e938552Group%20348447464.webp',
phAfter: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/200ccfb61dce458799879093341107f9Group%20348447463.webp',
// 灯泡 // 灯泡
bulbIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2a7b1b81bff44c2b9099a8d48d9d6f1Frame%282%29.webp', bulbIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2a7b1b81bff44c2b9099a8d48d9d6f1Frame%282%29.webp',
}; };
const props = defineProps({
isTesting: {
type: Boolean,
default: false,
},
isSecondTest: {
type: Boolean,
default: false,
},
triggerShowFinalCard: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['resultShown', 'progressFinished']);
const showResults = ref(false);
const showFinalCard = ref(false);
const activeTabImage = computed(() => { const activeTabImage = computed(() => {
return props.isSecondTest ? IMAGES.tabInactivePh : IMAGES.tabActiveTds; return props.isSecondTest ? IMAGES.tabInactivePh : IMAGES.tabActiveTds;
}); });
...@@ -252,9 +287,7 @@ const inactiveTabImage = computed(() => { ...@@ -252,9 +287,7 @@ const inactiveTabImage = computed(() => {
}); });
const instructionText = computed(() => { const instructionText = computed(() => {
return props.isSecondTest return props.isSecondTest ? TEXTS.PH.instruction : TEXTS.TDS.instruction;
? "点击‘开始检测’测试水的酸碱度"
: '点击"开始检测"按钮测试TDS值';
}); });
const instructionIcon = computed(() => { const instructionIcon = computed(() => {
...@@ -266,35 +299,29 @@ const iconMode = computed(() => { ...@@ -266,35 +299,29 @@ const iconMode = computed(() => {
}); });
const tipsText = computed(() => { const tipsText = computed(() => {
if (props.isSecondTest) { const content = props.isSecondTest ? TEXTS.PH : TEXTS.TDS;
if (showFinalCard.value) { if (showFinalCard.value) {
return '中性水(pH 7.0)对人体最温和,是理想的饮用水'; return content.tips.result;
} }
if (props.isTesting) { if (props.isTesting) {
return 'pH试纸通过颜色变化判断酸碱性'; return content.tips.testing;
}
return '理想饮用水pH值应在6.5-8.5之间';
} }
if (!props.isTesting) { return content.tips.default;
return 'TDS代表总溶解固体，数值越低水质越纯净';
}
return showFinalCard.value
? '优质饮用水TDS值应低于50ppm'
: '安吉尔RO反渗透技术可将TDS降至15以下';
}); });
const resultLabel = computed(() => { const resultLabel = computed(() => {
return props.isSecondTest ? 'PH值' : 'TDS值'; return props.isSecondTest ? TEXTS.PH.label : TEXTS.TDS.label;
}); });
const pollutedValue = computed(() => { const pollutedValue = computed(() => {
if (!showResults.value) return '？？？'; if (!showResults.value) return TEXTS.placeholder;
return props.isSecondTest ? '8.5' : '450'; return props.isSecondTest ? TEXTS.PH.polluted : TEXTS.TDS.polluted;
}); });
const purifiedValue = computed(() => { const purifiedValue = computed(() => {
if (!showResults.value) return '？？？'; if (!showResults.value) return TEXTS.placeholder;
return props.isSecondTest ? '7.0' : '15'; return props.isSecondTest ? TEXTS.PH.purified : TEXTS.TDS.purified;
}); });
const handleImageError = (e) => { const handleImageError = (e) => {
...@@ -337,6 +364,7 @@ watch( ...@@ -337,6 +364,7 @@ watch(
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: -32rpx;
} }
.tabs-row { .tabs-row {
...@@ -356,13 +384,11 @@ watch( ...@@ -356,13 +384,11 @@ watch(
width: 280rpx; width: 280rpx;
height: 84rpx; height: 84rpx;
// Specific style for TDS test active image (...426.webp)
&.tds-active-tab { &.tds-active-tab {
width: 280rpx; width: 280rpx;
height: 124rpx; height: 124rpx;
} }
// Specific style for PH test active image (...426.webp)
&.ph-active-tab { &.ph-active-tab {
width: 274rpx; width: 274rpx;
height: 128rpx; height: 128rpx;
...@@ -374,7 +400,6 @@ watch( ...@@ -374,7 +400,6 @@ watch(
width: 240rpx; width: 240rpx;
height: 84rpx; height: 84rpx;
// Specific style for PH test inactive image (/static/1.webp)
&.ph-inactive-tab { &.ph-inactive-tab {
width: 242rpx; width: 242rpx;
height: 94rpx; height: 94rpx;
...@@ -465,7 +490,6 @@ watch( ...@@ -465,7 +490,6 @@ watch(
.progress-panel { .progress-panel {
width: 120%; width: 120%;
max-width: 710rpx; max-width: 710rpx;
margin: 1vh 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -499,6 +523,9 @@ watch( ...@@ -499,6 +523,9 @@ watch(
position: relative; position: relative;
width: 100%; width: 100%;
height: 226rpx; height: 226rpx;
&.ph-result-card {
height: 280rpx;
}
margin-bottom: 24rpx; margin-bottom: 24rpx;
border-radius: 24rpx; border-radius: 24rpx;
border: 4rpx solid #457AAB; border: 4rpx solid #457AAB;
...@@ -532,6 +559,10 @@ watch( ...@@ -532,6 +559,10 @@ watch(
color: #25334D; color: #25334D;
} }
.ph-result-title {
margin-top: 10rpx;
}
.card-body { .card-body {
flex: 1; flex: 1;
display: flex; display: flex;
...@@ -720,6 +751,7 @@ watch( ...@@ -720,6 +751,7 @@ watch(
width: 100%; width: 100%;
justify-content: center; justify-content: center;
gap: 16rpx; gap: 16rpx;
margin-top: 20rpx;
.ph-value-group { .ph-value-group {
display: flex; display: flex;
...@@ -794,15 +826,49 @@ watch( ...@@ -794,15 +826,49 @@ watch(
} }
} }
.ph-before-img {
position: absolute;
top: 128rpx;
left: 399rpx;
width: 34rpx;
height: 34rpx;
z-index: 2;
}
.ph-after-img {
position: absolute;
top: 128rpx;
right: 380rpx;
width: 34rpx;
height: 34rpx;
z-index: 2;
}
.ph-chart-container { .ph-chart-container {
width: 100%; width: 100%;
margin: 10rpx 0; margin: 40rpx 0 30rpx;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
.ph-chart-img { .ph-chart-img {
width: 95%; width: 95%;
} }
.ph-scale-row {
width: 95%;
display: flex;
justify-content: space-between;
margin-left: -24rpx;
.scale-text {
flex: 1;
text-align: center;
font-size: 20rpx;
color: #25334D;
line-height: 1;
}
}
} }
.ph-footer-row { .ph-footer-row {
...@@ -811,6 +877,7 @@ watch( ...@@ -811,6 +877,7 @@ watch(
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10rpx; padding: 0 10rpx;
margin-top: -26rpx;
.ph-footer-label { .ph-footer-label {
font-size: 30rpx; font-size: 30rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment