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>
<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>
<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>
<view class="start-btn-wrapper" @click="handleStartTest" :class="{ 'disabled': isDisabled }">
<image class="start-btn-img" :src="btnImage" mode="scaleToFill"></image>
......@@ -12,7 +12,14 @@
</template>
<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({
isTesting: {
......@@ -35,47 +42,34 @@ const props = defineProps({
const emit = defineEmits(['startTest', 'restartTest', 'showFinalCard', 'showCompletionPopup']);
const isDisabled = ref(false);
const statusText = computed(() => {
if (props.isSecondTest) return '2/2';
return props.isTesting ? '1/2' : '0/2';
});
const isDisabled = computed(() => {
return props.isTesting && !props.isProgressFinished && !props.isResultShown;
});
const btnImage = computed(() => {
if (props.isSecondTest) {
if (props.isResultShown) {
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/f8df9974d93a478f8c6b760fd32e15aaGroup%20348447439.webp';
return IMAGES.finish;
}
if (props.isTesting) {
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp';
}
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp';
return IMAGES.testing;
}
if (props.isTesting && props.isProgressFinished && !props.isResultShown) {
return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp';
return IMAGES.start;
}
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 (newVal) {
isDisabled.value = true;
if (props.isTesting) {
if (props.isProgressFinished && !props.isResultShown) {
return IMAGES.testing;
}
});
watch(() => props.isProgressFinished, (newVal) => {
if (newVal) {
isDisabled.value = false;
return IMAGES.testing;
}
});
watch(() => props.isResultShown, (newVal) => {
if (newVal) {
isDisabled.value = false;
}
return IMAGES.start;
});
const handleStartTest = () => {
......
src/pages/third/components/TabsInstructionsPanel.vue
......@@ -3,59 +3,80 @@
<view class="tabs-row">
<template v-if="!isSecondTest">
<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 class="tab-container">
<image class="tab-btn" :src="inactiveTabImage" mode="scaleToFill"></image>
<image class="tab-btn" :src="inactiveTabImage" mode="scaleToFill" />
</view>
</template>
<template v-else>
<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 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>
</template>
</view>
<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-title">操作说明</view>
<view class="card-body">
<text class="instruction-text">{{ instructionText }}</text>
<image class="ppm-icon"
<image
class="ppm-icon"
:class="{ 'ph-icon': isSecondTest }"
:src="instructionIcon"
:mode="iconMode"
v-if="instructionIcon"
@error="handleImageError"></image>
<image class="ph-label-img"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/536133e8a44f4482b2848016385d79cbPH.webp"
@error="handleImageError"
/>
<image
class="ph-label-img"
:src="IMAGES.phLabel"
mode="aspectFit"
v-if="isSecondTest"></image>
v-if="isSecondTest"
/>
</view>
</view>
</view>
<view class="progress-panel" v-else>
<view class="progress-bar-container" v-if="!showFinalCard">
<image class="progress-bar-bg result-img"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp"
<image
class="progress-bar-bg result-img"
:src="IMAGES.progressResult"
mode="scaleToFill"
v-if="showResults"></image>
<image class="progress-bar-bg initial-img"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp"
v-if="showResults"
/>
<image
class="progress-bar-bg initial-img"
:src="IMAGES.progressInitial"
mode="scaleToFill"
v-if="!showResults"></image>
v-if="!showResults"
/>
</view>
<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-title">检测结果</view>
<view class="card-body result-body" v-if="!isSecondTest">
<view class="comparison-section">
<text class="section-title">TDS值对比</text>
......@@ -88,7 +109,7 @@
<view class="bar"></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>
......@@ -102,7 +123,7 @@
</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>
......@@ -114,15 +135,17 @@
</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 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 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>
</view>
......@@ -132,26 +155,38 @@
<view class="result-boxes" v-if="!showFinalCard">
<view class="result-box">
<text class="box-title">污染水</text>
<text class="box-value" :style="{ color: showResults ? '#FF3300' : '#25334D' }">{{ resultLabel }}：{{ pollutedValue }}</text>
<image class="status-icon"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp"
<text
class="box-value"
:style="{ color: showResults ? '#FF3300' : '#25334D' }"
>{{ resultLabel }}：{{ pollutedValue }}</text
>
<image
class="status-icon"
:src="IMAGES.warningIcon"
alt="警告"
v-if="showResults"></image>
v-if="showResults"
/>
</view>
<view class="result-box">
<text class="box-title">净化水</text>
<text class="box-value" :style="{ color: showResults ? '#00CC99' : '#25334D' }">{{ resultLabel }}：{{ purifiedValue }}</text>
<image class="status-icon"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp"
<text
class="box-value"
:style="{ color: showResults ? '#00CC99' : '#25334D' }"
>{{ resultLabel }}：{{ purifiedValue }}</text
>
<image
class="status-icon"
:src="IMAGES.successIconFrame"
alt="通过"
v-if="showResults"></image>
v-if="showResults"
/>
</view>
</view>
</view>
<view class="tips-card">
<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>
</view>
<view class="tips-body">
......@@ -167,16 +202,16 @@ import { computed, ref, watch } from 'vue';
const props = defineProps({
isTesting: {
type: Boolean,
default: false
default: false,
},
isSecondTest: {
type: Boolean,
default: false
default: false,
},
triggerShowFinalCard: {
type: Boolean,
default: false
}
default: false,
},
});
const emit = defineEmits(['resultShown', 'progressFinished']);
......@@ -184,16 +219,36 @@ const emit = defineEmits(['resultShown', 'progressFinished']);
const showResults = 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(() => {
return props.isSecondTest
? '/static/1.webp'
: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b91478ab6f2d4c2186a948ae9b614f45Group%20348447426.webp';
return props.isSecondTest ? IMAGES.tabInactivePh : IMAGES.tabActiveTds;
});
const inactiveTabImage = computed(() => {
return props.isSecondTest
? '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';
return props.isSecondTest ? IMAGES.tabActivePh : IMAGES.tabInactiveTds;
});
const instructionText = computed(() => {
......@@ -203,21 +258,18 @@ const instructionText = computed(() => {
});
const instructionIcon = computed(() => {
return props.isSecondTest
? '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';
return props.isSecondTest ? IMAGES.instructionPh : IMAGES.instructionTds;
});
const iconMode = computed(() => {
return props.isSecondTest ? 'aspectFit' : 'heightFix';
});
const handleImageError = (e) => {
console.error('Image load failed:', e.detail.errMsg);
};
const tipsText = computed(() => {
if (props.isSecondTest) {
if (showFinalCard.value) {
return '中性水(pH 7.0)对人体最温和,是理想的饮用水';
}
if (props.isTesting) {
return 'pH试纸通过颜色变化判断酸碱性';
}
......@@ -245,7 +297,13 @@ const purifiedValue = computed(() => {
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) {
showResults.value = false;
showFinalCard.value = false;
......@@ -258,14 +316,18 @@ watch(() => props.isTesting, (newVal) => {
showResults.value = false;
showFinalCard.value = false;
}
});
}
);
watch(() => props.triggerShowFinalCard, (newVal) => {
watch(
() => props.triggerShowFinalCard,
(newVal) => {
if (newVal) {
showFinalCard.value = true;
emit('resultShown');
}
});
}
);
</script>
<style scoped lang="scss">
......@@ -294,15 +356,17 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
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;
margin-top: 10rpx ;
margin-top: 10rpx;
}
}
......@@ -310,6 +374,7 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
width: 240rpx;
height: 84rpx;
// Specific style for PH test inactive image (/static/1.webp)
&.ph-inactive-tab {
width: 242rpx;
height: 94rpx;
......@@ -562,8 +627,6 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
}
}
}
}
.chart-section {
......@@ -610,7 +673,9 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
&.red {
left: 15rpx;
.bar-label { color: #D93A12; }
.bar-label {
color: #D93A12;
}
.bar {
height: 80rpx;
background: linear-gradient(180deg, #EE6E4E 0%, #D93A12 100%);
......@@ -655,7 +720,6 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
width: 100%;
justify-content: center;
gap: 16rpx;
margin-top: 18rpx;
.ph-value-group {
display: flex;
......@@ -688,8 +752,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
text {
color: #fff;
font-size: 16rpx;
font-weight: 500;
font-size: 20rpx;
font-weight: 600;
line-height: 1;
}
......@@ -711,7 +775,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
}
}
.ph-warning-icon, .ph-success-icon {
.ph-warning-icon,
.ph-success-icon {
width: 36rpx;
height: 36rpx;
}
......@@ -753,18 +818,18 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
font-weight: 600;
.highlight {
color: #B2C849;
color: #8CC24A;
}
}
.ph-badge {
background: #B2C849;
background: #8CC24A;
color: #fff;
font-size: 24rpx;
padding: 6rpx 16rpx;
border-radius: 36rpx;
border-radius: 20rpx;
font-weight: 600;
border: 2rpx solid #748A08;
border: 2rpx solid #6B9C35;
}
}
}
......@@ -793,7 +858,8 @@ watch(() => props.triggerShowFinalCard, (newVal) => {
gap: 10rpx;
position: relative;
.box-title, .box-value {
.box-title,
.box-value {
font-size: 32rpx;
color: #25334D;
line-height: 1.2;
......
src/pages/third/components/beaker.vue
......@@ -3,36 +3,38 @@
<view class="beaker-section">
<view class="beaker-item polluted-beaker" :class="{ 'no-transform': isSecondTest }">
<view class="beaker-img-wrapper">
<image class="beaker-img"
<image
class="beaker-img"
:class="{ 'img-hidden': isTesting }"
:src="pollutedImageDefault"
mode="aspectFit">
</image>
<image class="beaker-img beaker-img-overlay"
:src="IMAGES.pollutedDefault"
mode="aspectFit"
/>
<image
class="beaker-img beaker-img-overlay"
:class="{ 'img-visible': isTesting }"
:src="pollutedImageTesting"
mode="aspectFit">
</image>
mode="aspectFit"
/>
</view>
<view class="beaker-label polluted">污染水</view>
</view>
<image class="vs-icon"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8678ceab4c7b41ac80cc1982054c45f4VS.webp"
mode="widthFix"></image>
<image class="vs-icon" :src="IMAGES.vsIcon" mode="widthFix" />
<view class="beaker-item">
<view class="beaker-img-wrapper">
<image class="beaker-img"
<image
class="beaker-img"
:class="{ 'img-hidden': isTesting }"
:src="purifiedImageDefault"
mode="aspectFit">
</image>
<image class="beaker-img beaker-img-overlay"
:src="IMAGES.purifiedDefault"
mode="aspectFit"
/>
<image
class="beaker-img beaker-img-overlay"
:class="{ 'img-visible': isTesting }"
:src="purifiedImageTesting"
mode="aspectFit">
</image>
mode="aspectFit"
/>
</view>
<view class="beaker-label purified">净化水</view>
</view>
......@@ -46,27 +48,31 @@ import { computed } from 'vue';
const props = defineProps({
isTesting: {
type: Boolean,
default: false
default: false,
},
isSecondTest: {
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(() => {
return props.isSecondTest
? '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';
return props.isSecondTest ? IMAGES.pollutedPh : IMAGES.pollutedTds;
});
const purifiedImageTesting = computed(() => {
return props.isSecondTest
? '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';
return props.isSecondTest ? IMAGES.purifiedPh : IMAGES.purifiedTds;
});
</script>
......@@ -137,13 +143,13 @@ const purifiedImageTesting = computed(() => {
z-index: 1;
&.polluted {
background: linear-gradient(180deg, #B79669 0%, #8C6B46 100%);
border: 4rpx solid #503F34;
background: linear-gradient(180deg, #b79669 0%, #8c6b46 100%);
border: 4rpx solid #503f34;
}
&.purified {
background: linear-gradient(180deg, #4CAAE4 0%, #3F80D2 100%);
border: 4rpx solid #3060AD;
background: linear-gradient(180deg, #4caae4 0%, #3f80d2 100%);
border: 4rpx solid #3060ad;
}
}
}
......
src/pages/third/index.vue
<template>
<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' }">
<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>
<Beaker :isTesting="isTesting" :isSecondTest="isSecondTest"/>
<Beaker :isTesting="isTesting" :isSecondTest="isSecondTest" />
<view class="bottom-panel">
<TabsInstructionsPanel :isTesting="isTesting" :isSecondTest="isSecondTest" :triggerShowFinalCard="triggerShowFinalCard" @resultShown="handleResultShown" @progressFinished="handleProgressFinished"/>
<BottomActionBar :isTesting="isTesting" :isSecondTest="isSecondTest" :isResultShown="isResultShown" :isProgressFinished="isProgressFinished" @startTest="startTest" @restartTest="restartTest" @showFinalCard="handleShowFinalCard" @showCompletionPopup="handleShowCompletion"/>
<TabsInstructionsPanel
:isTesting="isTesting"
:isSecondTest="isSecondTest"
: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 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>
</template>
......@@ -28,6 +47,12 @@ import Beaker from './components/beaker.vue';
import TabsInstructionsPanel from './components/TabsInstructionsPanel.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 isTesting = ref(false);
const isSecondTest = ref(false);
......@@ -41,16 +66,6 @@ onLoad(() => {
statusBarHeight.value = systemInfo.statusBarHeight || 20;
});
const goBack = () => {
uni.navigateBack({
fail: () => {
uni.reLaunch({
url: '/pages/index/index'
});
}
});
};
const startTest = () => {
console.log('Start detection');
isTesting.value = true;
......@@ -89,7 +104,7 @@ const closeCompletion = () => {
</script>
<style lang="scss" scoped>
.container {
.container {
width: 100vw;
height: 100vh;
position: relative;
......@@ -98,9 +113,9 @@ const closeCompletion = () => {
color: #333;
overflow: hidden;
box-sizing: border-box;
}
}
.bg {
.bg {
position: absolute;
top: 0;
left: 0;
......@@ -108,50 +123,22 @@ const closeCompletion = () => {
height: 100%;
z-index: -1;
object-fit: cover;
}
}
.header {
.header {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 2vh;
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 {
height: 120rpx;
width: 54rpx;
}
}
}
.completion-overlay {
.completion-overlay {
position: fixed;
top: 0;
left: 0;
......@@ -166,9 +153,9 @@ const closeCompletion = () => {
width: 100%;
height: 100%;
}
}
}
.bottom-panel {
.bottom-panel {
width: 100%;
height: 48vh;
flex-shrink: 0;
......@@ -186,5 +173,5 @@ const closeCompletion = () => {
left: 0;
z-index: 10;
padding-bottom: env(safe-area-inset-bottom);
}
}
</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