Skip to content

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

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

parent ea5bbe9a
Showing with 115 additions and 48 deletions
src/pages/third/components/TabsInstructionsPanel.vue
......@@ -72,10 +72,10 @@
/>
</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" />
<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="comparison-section">
......@@ -138,8 +138,14 @@
<image class="ph-success-icon" :src="IMAGES.successIcon" mode="aspectFit" />
</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">
<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 class="ph-footer-row">
......@@ -157,7 +163,7 @@
<text class="box-title">污染水</text>
<text
class="box-value"
:style="{ color: showResults ? '#FF3300' : '#25334D' }"
:class="{ 'text-polluted': showResults, 'text-primary': !showResults }"
>{{ resultLabel }}：{{ pollutedValue }}</text
>
<image
......@@ -171,7 +177,7 @@
<text class="box-title">净化水</text>
<text
class="box-value"
:style="{ color: showResults ? '#00CC99' : '#25334D' }"
:class="{ 'text-purified': showResults, 'text-primary': !showResults }"
>{{ resultLabel }}：{{ purifiedValue }}</text
>
<image
......@@ -199,25 +205,32 @@
<script setup>
import { computed, ref, watch } from 'vue';
const props = defineProps({
isTesting: {
type: Boolean,
default: false,
},
isSecondTest: {
type: Boolean,
default: false,
const TEXTS = {
TDS: {
instruction: '点击"开始检测"按钮测试TDS值',
tips: {
default: 'TDS代表总溶解固体，数值越低水质越纯净',
testing: '安吉尔RO反渗透技术可将TDS降至15以下',
result: '优质饮用水TDS值应低于50ppm',
},
label: 'TDS值',
polluted: '450',
purified: '15',
},
triggerShowFinalCard: {
type: Boolean,
default: false,
PH: {
instruction: "点击‘开始检测’测试水的酸碱度",
tips: {
default: '理想饮用水pH值应在6.5-8.5之间',
testing: 'pH试纸通过颜色变化判断酸碱性',
result: '中性水(pH 7.0)对人体最温和,是理想的饮用水',
},
label: 'PH值',
polluted: '8.5',
purified: '7.0',
},
});
const emit = defineEmits(['resultShown', 'progressFinished']);
const showResults = ref(false);
const showFinalCard = ref(false);
placeholder: '？？？',
};
const IMAGES = {
// 两个选项图片
......@@ -239,10 +252,32 @@ const IMAGES = {
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',
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',
};
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(() => {
return props.isSecondTest ? IMAGES.tabInactivePh : IMAGES.tabActiveTds;
});
......@@ -252,9 +287,7 @@ const inactiveTabImage = computed(() => {
});
const instructionText = computed(() => {
return props.isSecondTest
? "点击‘开始检测’测试水的酸碱度"
: '点击"开始检测"按钮测试TDS值';
return props.isSecondTest ? TEXTS.PH.instruction : TEXTS.TDS.instruction;
});
const instructionIcon = computed(() => {
......@@ -266,35 +299,29 @@ const iconMode = computed(() => {
});
const tipsText = computed(() => {
if (props.isSecondTest) {
if (showFinalCard.value) {
return '中性水(pH 7.0)对人体最温和,是理想的饮用水';
}
if (props.isTesting) {
return 'pH试纸通过颜色变化判断酸碱性';
}
return '理想饮用水pH值应在6.5-8.5之间';
const content = props.isSecondTest ? TEXTS.PH : TEXTS.TDS;
if (showFinalCard.value) {
return content.tips.result;
}
if (!props.isTesting) {
return 'TDS代表总溶解固体，数值越低水质越纯净';
if (props.isTesting) {
return content.tips.testing;
}
return showFinalCard.value
? '优质饮用水TDS值应低于50ppm'
: '安吉尔RO反渗透技术可将TDS降至15以下';
return content.tips.default;
});
const resultLabel = computed(() => {
return props.isSecondTest ? 'PH值' : 'TDS值';
return props.isSecondTest ? TEXTS.PH.label : TEXTS.TDS.label;
});
const pollutedValue = computed(() => {
if (!showResults.value) return '？？？';
return props.isSecondTest ? '8.5' : '450';
if (!showResults.value) return TEXTS.placeholder;
return props.isSecondTest ? TEXTS.PH.polluted : TEXTS.TDS.polluted;
});
const purifiedValue = computed(() => {
if (!showResults.value) return '？？？';
return props.isSecondTest ? '7.0' : '15';
if (!showResults.value) return TEXTS.placeholder;
return props.isSecondTest ? TEXTS.PH.purified : TEXTS.TDS.purified;
});
const handleImageError = (e) => {
......@@ -337,6 +364,7 @@ watch(
display: flex;
flex-direction: column;
align-items: center;
margin-top: -32rpx;
}
.tabs-row {
......@@ -356,13 +384,11 @@ watch(
width: 280rpx;
height: 84rpx;
// Specific style for TDS test active image (...426.webp)
&.tds-active-tab {
width: 280rpx;
height: 124rpx;
}
// Specific style for PH test active image (...426.webp)
&.ph-active-tab {
width: 274rpx;
height: 128rpx;
......@@ -374,7 +400,6 @@ watch(
width: 240rpx;
height: 84rpx;
// Specific style for PH test inactive image (/static/1.webp)
&.ph-inactive-tab {
width: 242rpx;
height: 94rpx;
......@@ -465,7 +490,6 @@ watch(
.progress-panel {
width: 120%;
max-width: 710rpx;
margin: 1vh 0 0;
display: flex;
flex-direction: column;
align-items: center;
......@@ -499,6 +523,9 @@ watch(
position: relative;
width: 100%;
height: 226rpx;
&.ph-result-card {
height: 280rpx;
}
margin-bottom: 24rpx;
border-radius: 24rpx;
border: 4rpx solid #457AAB;
......@@ -531,6 +558,10 @@ watch(
font-weight: 600;
color: #25334D;
}
.ph-result-title {
margin-top: 10rpx;
}
.card-body {
flex: 1;
......@@ -720,6 +751,7 @@ watch(
width: 100%;
justify-content: center;
gap: 16rpx;
margin-top: 20rpx;
.ph-value-group {
display: flex;
......@@ -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 {
width: 100%;
margin: 10rpx 0;
margin: 40rpx 0 30rpx;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.ph-chart-img {
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 {
......@@ -811,6 +877,7 @@ watch(
justify-content: space-between;
align-items: center;
padding: 0 10rpx;
margin-top: -26rpx;
.ph-footer-label {
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