Skip to content

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

优化写法

parent 434bda5c
Showing with 104 additions and 116 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/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