Skip to content

A
angel-angel-mini-game
Commit ea5bbe9a by Hantao
Options

优化写法

parent 434bda5c
Showing with 235 additions and 181 deletions
src/pages/third/components/BottomActionBar.vue
<template> <template>
<view class="bottom-bar"> <view class="bottom-bar">
<image src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp" <image :src="IMAGES.testing"
style="width:0;height:0;opacity:0;position:absolute;pointer-events:none;"></image> style="width:0;height:0;opacity:0;position:absolute;pointer-events:none;"></image>
<image class="bar-bg" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a681444d883d4fe29851d702703302b0Rectangle%203597.webp" mode="scaleToFill"></image> <image class="bar-bg" :src="IMAGES.background" mode="scaleToFill"></image>
<text class="test-status">当前测试: <text class="highlight">{{ statusText }}</text></text> <text class="test-status">当前测试: <text class="highlight">{{ statusText }}</text></text>
<view class="start-btn-wrapper" @click="handleStartTest" :class="{ 'disabled': isDisabled }"> <view class="start-btn-wrapper" @click="handleStartTest" :class="{ 'disabled': isDisabled }">
<image class="start-btn-img" :src="btnImage" mode="scaleToFill"></image> <image class="start-btn-img" :src="btnImage" mode="scaleToFill"></image>
...@@ -12,7 +12,14 @@ ...@@ -12,7 +12,14 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed } from 'vue';
const IMAGES = {
background: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a681444d883d4fe29851d702703302b0Rectangle%203597.webp',
start: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp',
testing: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp',
finish: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/f8df9974d93a478f8c6b760fd32e15aaGroup%20348447439.webp'
};
const props = defineProps({ const props = defineProps({
isTesting: { isTesting: {
...@@ -35,47 +42,34 @@ const props = defineProps({ ...@@ -35,47 +42,34 @@ const props = defineProps({
const emit = defineEmits(['startTest', 'restartTest', 'showFinalCard', 'showCompletionPopup']); const emit = defineEmits(['startTest', 'restartTest', 'showFinalCard', 'showCompletionPopup']);
const isDisabled = ref(false);
const statusText = computed(() => { const statusText = computed(() => {
if (props.isSecondTest) return '2/2'; if (props.isSecondTest) return '2/2';
return props.isTesting ? '1/2' : '0/2'; return props.isTesting ? '1/2' : '0/2';
}); });
const isDisabled = computed(() => {
return props.isTesting && !props.isProgressFinished && !props.isResultShown;
});
const btnImage = computed(() => { const btnImage = computed(() => {
if (props.isSecondTest) { if (props.isSecondTest) {
if (props.isResultShown) { if (props.isResultShown) {
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/f8df9974d93a478f8c6b760fd32e15aaGroup%20348447439.webp'; return IMAGES.finish;
} }
if (props.isTesting) { if (props.isTesting) {
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp'; return IMAGES.testing;
}
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp';
} }
if (props.isTesting && props.isProgressFinished && !props.isResultShown) { return IMAGES.start;
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp';
} }
return props.isTesting
? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp'
: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp';
});
watch(() => props.isTesting, (newVal) => { if (props.isTesting) {
if (newVal) { if (props.isProgressFinished && !props.isResultShown) {
isDisabled.value = true; return IMAGES.testing;
} }
}); return IMAGES.testing;
watch(() => props.isProgressFinished, (newVal) => {
if (newVal) {
isDisabled.value = false;
} }
});
watch(() => props.isResultShown, (newVal) => { return IMAGES.start;
if (newVal) {
isDisabled.value = false;
}
}); });
const handleStartTest = () => { const handleStartTest = () => {
......
src/pages/third/components/TabsInstructionsPanel.vue
...@@ -3,59 +3,80 @@ ...@@ -3,59 +3,80 @@
<view class="tabs-row"> <view class="tabs-row">
<template v-if="!isSecondTest"> <template v-if="!isSecondTest">
<view class="tab-container"> <view class="tab-container">
<image class="tab-btn-active tds-active-tab" :src="activeTabImage" mode="scaleToFill"></image> <image
class="tab-btn-active tds-active-tab"
:src="activeTabImage"
mode="scaleToFill"
/>
</view> </view>
<view class="tab-container"> <view class="tab-container">
<image class="tab-btn" :src="inactiveTabImage" mode="scaleToFill"></image> <image class="tab-btn" :src="inactiveTabImage" mode="scaleToFill" />
</view> </view>
</template> </template>
<template v-else> <template v-else>
<view class="tab-container"> <view class="tab-container">
<image class="tab-btn ph-inactive-tab" :src="inactiveTabImage" mode="scaleToFill"></image> <image
class="tab-btn ph-inactive-tab"
:src="inactiveTabImage"
mode="scaleToFill"
/>
</view> </view>
<view class="tab-container"> <view class="tab-container">
<image class="tab-btn-active ph-active-tab" :src="activeTabImage" mode="scaleToFill"></image> <image
class="tab-btn-active ph-active-tab"
:src="activeTabImage"
mode="scaleToFill"
/>
</view> </view>
</template> </template>
</view> </view>
<view class="instructions-card" v-if="!isTesting"> <view class="instructions-card" v-if="!isTesting">
<image class="card-bg" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp" mode="scaleToFill"></image> <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">操作说明</view>
<view class="card-body"> <view class="card-body">
<text class="instruction-text">{{ instructionText }}</text> <text class="instruction-text">{{ instructionText }}</text>
<image class="ppm-icon" <image
class="ppm-icon"
:class="{ 'ph-icon': isSecondTest }" :class="{ 'ph-icon': isSecondTest }"
:src="instructionIcon" :src="instructionIcon"
:mode="iconMode" :mode="iconMode"
v-if="instructionIcon" v-if="instructionIcon"
@error="handleImageError"></image> @error="handleImageError"
<image class="ph-label-img" />
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/536133e8a44f4482b2848016385d79cbPH.webp" <image
class="ph-label-img"
:src="IMAGES.phLabel"
mode="aspectFit" mode="aspectFit"
v-if="isSecondTest"></image> v-if="isSecondTest"
/>
</view> </view>
</view> </view>
</view> </view>
<view class="progress-panel" v-else> <view class="progress-panel" v-else>
<view class="progress-bar-container" v-if="!showFinalCard"> <view class="progress-bar-container" v-if="!showFinalCard">
<image class="progress-bar-bg result-img" <image
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp" class="progress-bar-bg result-img"
:src="IMAGES.progressResult"
mode="scaleToFill" mode="scaleToFill"
v-if="showResults"></image> v-if="showResults"
<image class="progress-bar-bg initial-img" />
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp" <image
class="progress-bar-bg initial-img"
:src="IMAGES.progressInitial"
mode="scaleToFill" mode="scaleToFill"
v-if="!showResults"></image> v-if="!showResults"
/>
</view> </view>
<view class="result-card" v-if="showFinalCard"> <view class="result-card" v-if="showFinalCard">
<image class="card-bg" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp" mode="scaleToFill"></image> <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">检测结果</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">
<text class="section-title">TDS值对比</text> <text class="section-title">TDS值对比</text>
...@@ -88,7 +109,7 @@ ...@@ -88,7 +109,7 @@
<view class="bar"></view> <view class="bar"></view>
</view> </view>
</view> </view>
<image class="badge-icon" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/44463cae0882429ebd84049240ff5330Group%20348447451.webp" mode="aspectFit"></image> <image class="badge-icon" :src="IMAGES.badgeIcon" mode="aspectFit" />
</view> </view>
</view> </view>
...@@ -102,7 +123,7 @@ ...@@ -102,7 +123,7 @@
</view> </view>
</view> </view>
<image class="ph-warning-icon" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp" mode="aspectFit"></image> <image class="ph-warning-icon" :src="IMAGES.warningIcon" mode="aspectFit" />
<text class="ph-arrow">→</text> <text class="ph-arrow">→</text>
...@@ -114,15 +135,17 @@ ...@@ -114,15 +135,17 @@
</view> </view>
</view> </view>
<image class="ph-success-icon" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp" mode="aspectFit"></image> <image class="ph-success-icon" :src="IMAGES.successIcon" mode="aspectFit" />
</view> </view>
<view class="ph-chart-container"> <view class="ph-chart-container">
<image class="ph-chart-img" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp" mode="widthFix"></image> <image class="ph-chart-img" :src="IMAGES.phChart" mode="widthFix" />
</view> </view>
<view class="ph-footer-row"> <view class="ph-footer-row">
<text class="ph-footer-label">酸碱度：<text class="highlight">已优化</text></text> <text class="ph-footer-label"
>酸碱度：<text class="highlight">已优化</text></text
>
<view class="ph-badge">适合饮用</view> <view class="ph-badge">适合饮用</view>
</view> </view>
</view> </view>
...@@ -132,26 +155,38 @@ ...@@ -132,26 +155,38 @@
<view class="result-boxes" v-if="!showFinalCard"> <view class="result-boxes" v-if="!showFinalCard">
<view class="result-box"> <view class="result-box">
<text class="box-title">污染水</text> <text class="box-title">污染水</text>
<text class="box-value" :style="{ color: showResults ? '#FF3300' : '#25334D' }">{{ resultLabel }}：{{ pollutedValue }}</text> <text
<image class="status-icon" class="box-value"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp" :style="{ color: showResults ? '#FF3300' : '#25334D' }"
>{{ resultLabel }}：{{ pollutedValue }}</text
>
<image
class="status-icon"
:src="IMAGES.warningIcon"
alt="警告" alt="警告"
v-if="showResults"></image> v-if="showResults"
/>
</view> </view>
<view class="result-box"> <view class="result-box">
<text class="box-title">净化水</text> <text class="box-title">净化水</text>
<text class="box-value" :style="{ color: showResults ? '#00CC99' : '#25334D' }">{{ resultLabel }}：{{ purifiedValue }}</text> <text
<image class="status-icon" class="box-value"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp" :style="{ color: showResults ? '#00CC99' : '#25334D' }"
>{{ resultLabel }}：{{ purifiedValue }}</text
>
<image
class="status-icon"
:src="IMAGES.successIconFrame"
alt="通过" alt="通过"
v-if="showResults"></image> v-if="showResults"
/>
</view> </view>
</view> </view>
</view> </view>
<view class="tips-card"> <view class="tips-card">
<view class="tips-header"> <view class="tips-header">
<image class="bulb-icon" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2a7b1b81bff44c2b9099a8d48d9d6f1Frame%282%29.webp" mode="widthFix"></image> <image class="bulb-icon" :src="IMAGES.bulbIcon" mode="widthFix" />
<text class="tips-title">你知道吗？</text> <text class="tips-title">你知道吗？</text>
</view> </view>
<view class="tips-body"> <view class="tips-body">
...@@ -167,16 +202,16 @@ import { computed, ref, watch } from 'vue'; ...@@ -167,16 +202,16 @@ import { computed, ref, watch } from 'vue';
const props = defineProps({ const props = defineProps({
isTesting: { isTesting: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
isSecondTest: { isSecondTest: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
triggerShowFinalCard: { triggerShowFinalCard: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}); });
const emit = defineEmits(['resultShown', 'progressFinished']); const emit = defineEmits(['resultShown', 'progressFinished']);
...@@ -184,16 +219,36 @@ const emit = defineEmits(['resultShown', 'progressFinished']); ...@@ -184,16 +219,36 @@ const emit = defineEmits(['resultShown', 'progressFinished']);
const showResults = ref(false); const showResults = ref(false);
const showFinalCard = ref(false); const showFinalCard = ref(false);
const IMAGES = {
// 两个选项图片
tabActiveTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b91478ab6f2d4c2186a948ae9b614f45Group%20348447426.webp',
tabActivePh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b9c5667e95ea48a1b4c10f2d9ee84db6Group%20348447426.webp',
tabInactiveTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a4bd654c5fd4401bb4d09ce1a8e08aa3Group%20348447427.webp',
tabInactivePh: '/static/1.webp',
// 介绍内部图片
instructionTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/1a62746fad3743d19f01e8b612ed8d42Group%20348447435.webp',
instructionPh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/32ac38db03994072aca53ae518b996eeGroup%20348447450.webp',
phLabel: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/536133e8a44f4482b2848016385d79cbPH.webp',
cardBg: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp',
// 进度条
progressResult: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp',
progressInitial: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp',
// 结果内部图片
warningIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp',
successIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.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',
phChart: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp',
// 灯泡
bulbIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2a7b1b81bff44c2b9099a8d48d9d6f1Frame%282%29.webp',
};
const activeTabImage = computed(() => { const activeTabImage = computed(() => {
return props.isSecondTest return props.isSecondTest ? IMAGES.tabInactivePh : IMAGES.tabActiveTds;
? '/static/1.webp'
: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b91478ab6f2d4c2186a948ae9b614f45Group%20348447426.webp';
}); });
const inactiveTabImage = computed(() => { const inactiveTabImage = computed(() => {
return props.isSecondTest return props.isSecondTest ? IMAGES.tabActivePh : IMAGES.tabInactiveTds;
? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b9c5667e95ea48a1b4c10f2d9ee84db6Group%20348447426.webp'
: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a4bd654c5fd4401bb4d09ce1a8e08aa3Group%20348447427.webp';
}); });
const instructionText = computed(() => { const instructionText = computed(() => {
...@@ -203,21 +258,18 @@ const instructionText = computed(() => { ...@@ -203,21 +258,18 @@ const instructionText = computed(() => {
}); });
const instructionIcon = computed(() => { const instructionIcon = computed(() => {
return props.isSecondTest return props.isSecondTest ? IMAGES.instructionPh : IMAGES.instructionTds;
? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/32ac38db03994072aca53ae518b996eeGroup%20348447450.webp'
: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/1a62746fad3743d19f01e8b612ed8d42Group%20348447435.webp';
}); });
const iconMode = computed(() => { const iconMode = computed(() => {
return props.isSecondTest ? 'aspectFit' : 'heightFix'; return props.isSecondTest ? 'aspectFit' : 'heightFix';
}); });
const handleImageError = (e) => {
console.error('Image load failed:', e.detail.errMsg);
};
const tipsText = computed(() => { const tipsText = computed(() => {
if (props.isSecondTest) { if (props.isSecondTest) {
if (showFinalCard.value) {
return '中性水(pH 7.0)对人体最温和,是理想的饮用水';
}
if (props.isTesting) { if (props.isTesting) {
return 'pH试纸通过颜色变化判断酸碱性'; return 'pH试纸通过颜色变化判断酸碱性';
} }
...@@ -245,7 +297,13 @@ const purifiedValue = computed(() => { ...@@ -245,7 +297,13 @@ const purifiedValue = computed(() => {
return props.isSecondTest ? '7.0' : '15'; return props.isSecondTest ? '7.0' : '15';
}); });
watch(() => props.isTesting, (newVal) => { const handleImageError = (e) => {
console.error('Image load failed:', e.detail.errMsg);
};
watch(
() => props.isTesting,
(newVal) => {
if (newVal) { if (newVal) {
showResults.value = false; showResults.value = false;
showFinalCard.value = false; showFinalCard.value = false;
...@@ -258,14 +316,18 @@ watch(() => props.isTesting, (newVal) => { ...@@ -258,14 +316,18 @@ watch(() => props.isTesting, (newVal) => {
showResults.value = false; showResults.value = false;
showFinalCard.value = false; showFinalCard.value = false;
} }
}); }
);
watch(() => props.triggerShowFinalCard, (newVal) => { watch(
() => props.triggerShowFinalCard,
(newVal) => {
if (newVal) { if (newVal) {
showFinalCard.value = true; showFinalCard.value = true;
emit('resultShown'); emit('resultShown');
} }
}); }
);
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -294,15 +356,17 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -294,15 +356,17 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
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;
margin-top: 10rpx ; margin-top: 10rpx;
} }
} }
...@@ -310,6 +374,7 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -310,6 +374,7 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
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;
...@@ -562,8 +627,6 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -562,8 +627,6 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
} }
} }
} }
} }
.chart-section { .chart-section {
...@@ -610,7 +673,9 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -610,7 +673,9 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
&.red { &.red {
left: 15rpx; left: 15rpx;
.bar-label { color: #D93A12; } .bar-label {
color: #D93A12;
}
.bar { .bar {
height: 80rpx; height: 80rpx;
background: linear-gradient(180deg, #EE6E4E 0%, #D93A12 100%); background: linear-gradient(180deg, #EE6E4E 0%, #D93A12 100%);
...@@ -655,7 +720,6 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -655,7 +720,6 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
gap: 16rpx; gap: 16rpx;
margin-top: 18rpx;
.ph-value-group { .ph-value-group {
display: flex; display: flex;
...@@ -688,8 +752,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -688,8 +752,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
text { text {
color: #fff; color: #fff;
font-size: 16rpx; font-size: 20rpx;
font-weight: 500; font-weight: 600;
line-height: 1; line-height: 1;
} }
...@@ -711,7 +775,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -711,7 +775,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
} }
} }
.ph-warning-icon, .ph-success-icon { .ph-warning-icon,
.ph-success-icon {
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
} }
...@@ -753,18 +818,18 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -753,18 +818,18 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
font-weight: 600; font-weight: 600;
.highlight { .highlight {
color: #B2C849; color: #8CC24A;
} }
} }
.ph-badge { .ph-badge {
background: #B2C849; background: #8CC24A;
color: #fff; color: #fff;
font-size: 24rpx; font-size: 24rpx;
padding: 6rpx 16rpx; padding: 6rpx 16rpx;
border-radius: 36rpx; border-radius: 20rpx;
font-weight: 600; font-weight: 600;
border: 2rpx solid #748A08; border: 2rpx solid #6B9C35;
} }
} }
} }
...@@ -793,7 +858,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => { ...@@ -793,7 +858,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
gap: 10rpx; gap: 10rpx;
position: relative; position: relative;
.box-title, .box-value { .box-title,
.box-value {
font-size: 32rpx; font-size: 32rpx;
color: #25334D; color: #25334D;
line-height: 1.2; line-height: 1.2;
......
src/pages/third/components/beaker.vue
...@@ -3,36 +3,38 @@ ...@@ -3,36 +3,38 @@
<view class="beaker-section"> <view class="beaker-section">
<view class="beaker-item polluted-beaker" :class="{ 'no-transform': isSecondTest }"> <view class="beaker-item polluted-beaker" :class="{ 'no-transform': isSecondTest }">
<view class="beaker-img-wrapper"> <view class="beaker-img-wrapper">
<image class="beaker-img" <image
class="beaker-img"
:class="{ 'img-hidden': isTesting }" :class="{ 'img-hidden': isTesting }"
:src="pollutedImageDefault" :src="IMAGES.pollutedDefault"
mode="aspectFit"> mode="aspectFit"
</image> />
<image class="beaker-img beaker-img-overlay" <image
class="beaker-img beaker-img-overlay"
:class="{ 'img-visible': isTesting }" :class="{ 'img-visible': isTesting }"
:src="pollutedImageTesting" :src="pollutedImageTesting"
mode="aspectFit"> mode="aspectFit"
</image> />
</view> </view>
<view class="beaker-label polluted">污染水</view> <view class="beaker-label polluted">污染水</view>
</view> </view>
<image class="vs-icon" <image class="vs-icon" :src="IMAGES.vsIcon" mode="widthFix" />
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8678ceab4c7b41ac80cc1982054c45f4VS.webp"
mode="widthFix"></image>
<view class="beaker-item"> <view class="beaker-item">
<view class="beaker-img-wrapper"> <view class="beaker-img-wrapper">
<image class="beaker-img" <image
class="beaker-img"
:class="{ 'img-hidden': isTesting }" :class="{ 'img-hidden': isTesting }"
:src="purifiedImageDefault" :src="IMAGES.purifiedDefault"
mode="aspectFit"> mode="aspectFit"
</image> />
<image class="beaker-img beaker-img-overlay" <image
class="beaker-img beaker-img-overlay"
:class="{ 'img-visible': isTesting }" :class="{ 'img-visible': isTesting }"
:src="purifiedImageTesting" :src="purifiedImageTesting"
mode="aspectFit"> mode="aspectFit"
</image> />
</view> </view>
<view class="beaker-label purified">净化水</view> <view class="beaker-label purified">净化水</view>
</view> </view>
...@@ -46,27 +48,31 @@ import { computed } from 'vue'; ...@@ -46,27 +48,31 @@ import { computed } from 'vue';
const props = defineProps({ const props = defineProps({
isTesting: { isTesting: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
isSecondTest: { isSecondTest: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}); });
const pollutedImageDefault = 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2729bd9ca6249728c29c66a6e7f1baf%E7%83%A7%E6%9D%AF_%E6%B1%A1%E6%9F%93%E6%B0%B4%E7%89%88%202.webp'; //烧杯图片
const purifiedImageDefault = 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/048d81b1821442c3b80d312e4ef7c1e4%E7%83%A7%E6%9D%AF_%E6%B0%B4%E9%9D%A2%E5%B9%B3%E6%95%B4%E7%89%88%201.webp'; const IMAGES = {
pollutedDefault: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2729bd9ca6249728c29c66a6e7f1baf%E7%83%A7%E6%9D%AF_%E6%B1%A1%E6%9F%93%E6%B0%B4%E7%89%88%202.webp',
purifiedDefault: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/048d81b1821442c3b80d312e4ef7c1e4%E7%83%A7%E6%9D%AF_%E6%B0%B4%E9%9D%A2%E5%B9%B3%E6%95%B4%E7%89%88%201.webp',
vsIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8678ceab4c7b41ac80cc1982054c45f4VS.webp',
pollutedPh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a277ce4fb175493c9cedd60f6aa788d1%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8%201.webp',
pollutedTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d775e2166f2d426f857e69dc3d115d47%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE2%201.webp',
purifiedPh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b1c0214a1344946908e8de7ddaaea5e%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8_%E5%87%80%E5%8C%96%E6%B0%B4%201.webp',
purifiedTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/c18364684a82445382105028ec6d8f44%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE1%201.webp',
};
const pollutedImageTesting = computed(() => { const pollutedImageTesting = computed(() => {
return props.isSecondTest return props.isSecondTest ? IMAGES.pollutedPh : IMAGES.pollutedTds;
? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a277ce4fb175493c9cedd60f6aa788d1%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8%201.webp'
: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d775e2166f2d426f857e69dc3d115d47%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE2%201.webp';
}); });
const purifiedImageTesting = computed(() => { const purifiedImageTesting = computed(() => {
return props.isSecondTest return props.isSecondTest ? IMAGES.purifiedPh : IMAGES.purifiedTds;
? 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b1c0214a1344946908e8de7ddaaea5e%E7%83%A7%E6%9D%AF_%E6%9C%AA%E4%BD%BF%E7%94%A8%E9%85%B8%E7%A2%B1%E8%AF%95%E7%BA%B8_%E5%87%80%E5%8C%96%E6%B0%B4%201.webp'
: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/c18364684a82445382105028ec6d8f44%E7%83%A7%E6%9D%AF_%E6%97%A0%E6%B0%B4%E6%BB%B4%E5%9B%9B%E8%82%A2_%E5%9B%BE1%201.webp';
}); });
</script> </script>
...@@ -137,13 +143,13 @@ const purifiedImageTesting = computed(() => { ...@@ -137,13 +143,13 @@ const purifiedImageTesting = computed(() => {
z-index: 1; z-index: 1;
&.polluted { &.polluted {
background: linear-gradient(180deg, #B79669 0%, #8C6B46 100%); background: linear-gradient(180deg, #b79669 0%, #8c6b46 100%);
border: 4rpx solid #503F34; border: 4rpx solid #503f34;
} }
&.purified { &.purified {
background: linear-gradient(180deg, #4CAAE4 0%, #3F80D2 100%); background: linear-gradient(180deg, #4caae4 0%, #3f80d2 100%);
border: 4rpx solid #3060AD; border: 4rpx solid #3060ad;
} }
} }
} }
......
src/pages/third/index.vue
<template> <template>
<view class="container"> <view class="container">
<image class="bg" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/963079c98b914f349fe9ff5e600d0f65%E6%B0%B4%E8%B4%A8%E6%A3%80%E6%B5%8B%E7%AB%99_%E7%BA%AF%E8%83%8C%E6%99%AF%201.webp" mode="aspectFill"></image> <image class="bg" :src="assets.bg" mode="aspectFill" />
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }"> <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
<image class="title" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e9ddd6b498fe452b9254e86c04596df3Group%20348447251.webp" mode="heightFix"></image> <image class="title" :src="assets.title" mode="heightFix" />
</view> </view>
<Beaker :isTesting="isTesting" :isSecondTest="isSecondTest"/> <Beaker :isTesting="isTesting" :isSecondTest="isSecondTest" />
<view class="bottom-panel"> <view class="bottom-panel">
<TabsInstructionsPanel
<TabsInstructionsPanel :isTesting="isTesting" :isSecondTest="isSecondTest" :triggerShowFinalCard="triggerShowFinalCard" @resultShown="handleResultShown" @progressFinished="handleProgressFinished"/> :isTesting="isTesting"
:isSecondTest="isSecondTest"
<BottomActionBar :isTesting="isTesting" :isSecondTest="isSecondTest" :isResultShown="isResultShown" :isProgressFinished="isProgressFinished" @startTest="startTest" @restartTest="restartTest" @showFinalCard="handleShowFinalCard" @showCompletionPopup="handleShowCompletion"/> :triggerShowFinalCard="triggerShowFinalCard"
@resultShown="handleResultShown"
@progressFinished="handleProgressFinished"
/>
<BottomActionBar
:isTesting="isTesting"
:isSecondTest="isSecondTest"
:isResultShown="isResultShown"
:isProgressFinished="isProgressFinished"
@startTest="startTest"
@restartTest="restartTest"
@showFinalCard="handleShowFinalCard"
@showCompletionPopup="handleShowCompletion"
/>
</view> </view>
<view class="completion-overlay" v-if="showCompletion" @click="closeCompletion"> <view class="completion-overlay" v-if="showCompletion" @click="closeCompletion">
<image class="completion-img" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d204d71cf2a54b18a6404e6132618cd6%E5%AE%8C%E6%88%90%E5%BC%B9%E7%AA%97.webp" mode="scaleToFill" @click.stop="closeCompletion"></image> <image
class="completion-img"
:src="assets.completionPopup"
mode="scaleToFill"
@click.stop="closeCompletion"
/>
</view> </view>
</view> </view>
</template> </template>
...@@ -28,6 +47,12 @@ import Beaker from './components/beaker.vue'; ...@@ -28,6 +47,12 @@ import Beaker from './components/beaker.vue';
import TabsInstructionsPanel from './components/TabsInstructionsPanel.vue'; import TabsInstructionsPanel from './components/TabsInstructionsPanel.vue';
import BottomActionBar from './components/BottomActionBar.vue'; import BottomActionBar from './components/BottomActionBar.vue';
const assets = {
bg: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/963079c98b914f349fe9ff5e600d0f65%E6%B0%B4%E8%B4%A8%E6%A3%80%E6%B5%8B%E7%AB%99_%E7%BA%AF%E8%83%8C%E6%99%AF%201.webp',
title: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e9ddd6b498fe452b9254e86c04596df3Group%20348447251.webp',
completionPopup: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d204d71cf2a54b18a6404e6132618cd6%E5%AE%8C%E6%88%90%E5%BC%B9%E7%AA%97.webp'
};
const statusBarHeight = ref(20); const statusBarHeight = ref(20);
const isTesting = ref(false); const isTesting = ref(false);
const isSecondTest = ref(false); const isSecondTest = ref(false);
...@@ -41,16 +66,6 @@ onLoad(() => { ...@@ -41,16 +66,6 @@ onLoad(() => {
statusBarHeight.value = systemInfo.statusBarHeight || 20; statusBarHeight.value = systemInfo.statusBarHeight || 20;
}); });
const goBack = () => {
uni.navigateBack({
fail: () => {
uni.reLaunch({
url: '/pages/index/index'
});
}
});
};
const startTest = () => { const startTest = () => {
console.log('Start detection'); console.log('Start detection');
isTesting.value = true; isTesting.value = true;
...@@ -89,7 +104,7 @@ const closeCompletion = () => { ...@@ -89,7 +104,7 @@ const closeCompletion = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: relative; position: relative;
...@@ -98,9 +113,9 @@ const closeCompletion = () => { ...@@ -98,9 +113,9 @@ const closeCompletion = () => {
color: #333; color: #333;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
.bg { .bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -108,50 +123,22 @@ const closeCompletion = () => { ...@@ -108,50 +123,22 @@ const closeCompletion = () => {
height: 100%; height: 100%;
z-index: -1; z-index: -1;
object-fit: cover; object-fit: cover;
} }
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-bottom: 2vh; padding-bottom: 2vh;
flex-shrink: 0; flex-shrink: 0;
.nav-bar {
width: 100%;
height: 44px;
display: flex;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
.back-btn {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.6);
padding: 8rpx 16rpx;
border-radius: 30rpx;
.back-arrow {
font-size: 32rpx;
margin-right: 6rpx;
line-height: 1;
}
.back-text {
font-size: 24rpx;
font-weight: 500;
}
}
}
.title { .title {
height: 120rpx; height: 120rpx;
width: 54rpx; width: 54rpx;
} }
} }
.completion-overlay { .completion-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -166,9 +153,9 @@ const closeCompletion = () => { ...@@ -166,9 +153,9 @@ const closeCompletion = () => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.bottom-panel { .bottom-panel {
width: 100%; width: 100%;
height: 48vh; height: 48vh;
flex-shrink: 0; flex-shrink: 0;
...@@ -186,5 +173,5 @@ const closeCompletion = () => { ...@@ -186,5 +173,5 @@ const closeCompletion = () => {
left: 0; left: 0;
z-index: 10; z-index: 10;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
</style> </style>
\ No newline at end of file
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