Skip to content

A
angel-angel-mini-game
Commit 5973401e by Hantao
Options

完成前三张图

parent d734bb62
Showing with 596 additions and 371 deletions
src/pages/third/components/BottomActionBar.vue 0 → 100644
<template>
<view class="bottom-bar">
<image src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/5d0f462d13ec4cbcb6eee7080c637897Group%20348447439.webp"
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>
<text class="test-status">当前测试: <text class="highlight">{{ statusText }}</text></text>
<view class="start-btn-wrapper" @click="handleStartTest">
<image class="start-btn-img" :src="btnImage" mode="scaleToFill"></image>
</view>
</view>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
isTesting: {
type: Boolean,
default: false
}
});
const emit = defineEmits(['startTest']);
const statusText = computed(() => props.isTesting ? '1/2' : '0/2');
const btnImage = computed(() => 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');
const handleStartTest = () => {
emit('startTest');
};
</script>
<style scoped lang="scss">
.bottom-bar {
position: absolute;
bottom: -84rpx;
left: 0;
width: 75%;
padding: 2vh 40rpx;
padding-bottom: calc(2vh + env(safe-area-inset-bottom));
display: flex;
justify-content: flex-end;
align-items: center;
.bar-bg {
position: absolute;
top: 36rpx;
left: -204rpx;
width: 176%;
height: 62%;
z-index: 0;
}
.test-status {
position: absolute;
left: 85rpx;
top: 52%;
transform: translateY(-50%);
z-index: 1;
font-size: 34rpx;
font-weight: 600;
color: #000000;
.highlight {
color: #3481C8;
}
}
.start-btn-wrapper {
position: relative;
z-index: 1;
right: -152rpx;
.start-btn-img {
height: 116rpx;
width: 280rpx;
margin-top: 20rpx;
}
}
}
</style>
src/pages/third/components/TabsInstructionsPanel.vue 0 → 100644
<template>
<view class="tabs-instructions-container">
<view class="tabs-row">
<view class="tab-container">
<image class="tab-btn-active" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b91478ab6f2d4c2186a948ae9b614f45Group%20348447426.webp" mode="aspectFill"></image>
</view>
<view class="tab-container">
<image class="tab-btn" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a4bd654c5fd4401bb4d09ce1a8e08aa3Group%20348447427.webp"></image>
</view>
</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>
<view class="card-content">
<view class="card-title">操作说明</view>
<view class="card-body">
<text class="instruction-text">点击"开始检测"按钮测试TDS值</text>
<image class="ppm-icon" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/1a62746fad3743d19f01e8b612ed8d42Group%20348447435.webp" mode="heightFix"></image>
</view>
</view>
</view>
<view class="progress-panel" v-else>
<view class="progress-bar-container">
<image class="progress-bar-bg result-img"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp"
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"
mode="scaleToFill"
v-if="!showResults"></image>
</view>
<view class="result-boxes">
<view class="result-box">
<text class="box-title">污染水</text>
<text class="box-value" :style="{ color: showResults ? '#FF3300' : '#25334D' }">TDS值：{{ showResults ? '450' : '？？？' }}</text>
<image class="status-icon"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp"
alt="警告"
v-if="showResults"></image>
</view>
<view class="result-box">
<text class="box-title">净化水</text>
<text class="box-value" :style="{ color: showResults ? '#00CC99' : '#25334D' }">TDS值：{{ showResults ? '15' : '？？？' }}</text>
<image class="status-icon"
src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp"
alt="通过"
v-if="showResults"></image>
</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>
<text class="tips-title">你知道吗？</text>
</view>
<view class="tips-body">
<text>{{ tipsText }}</text>
</view>
</view>
</view>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
const props = defineProps({
isTesting: {
type: Boolean,
default: false
}
});
const showResults = ref(false);
const tipsText = computed(() => {
return props.isTesting
? '安吉尔RO反渗透技术可将TDS降至15以下'
: 'TDS代表总溶解固体，数值越低水质越纯净';
});
watch(() => props.isTesting, (newVal) => {
if (newVal) {
showResults.value = false;
setTimeout(() => {
showResults.value = true;
}, 1000);
} else {
showResults.value = false;
}
});
</script>
<style scoped lang="scss">
.tabs-instructions-container {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.tabs-row {
display: flex;
justify-content: center;
gap: 60rpx;
margin-bottom: 0.5vh;
.tab-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.tab-btn-active {
width: 280rpx;
height: 80rpx;
}
.tab-btn {
width: 240rpx;
height: 80rpx;
}
}
.instructions-card {
position: relative;
width: 120%;
max-width: 710rpx;
height: 212rpx;
margin: 1vh 0;
border-radius: 24rpx;
border: 4rpx solid #457AAB;
background: #BEDCF3;
box-sizing: border-box;
flex-shrink: 0;
.card-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 98%;
height: 94%;
z-index: 0;
display: block;
}
.card-content {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.card-title {
text-align: center;
font-size: 34rpx;
font-weight: 600;
color: #25334D;
}
.card-body {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20rpx;
.instruction-text {
font-size: 30rpx;
color: #25334D;
}
.ppm-icon {
height: 84rpx;
margin-left: 10rpx;
}
}
}
}
.progress-panel {
width: 120%;
max-width: 710rpx;
margin: 1vh 0;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
box-sizing: border-box;
.progress-bar-container {
width: 100%;
height: 64rpx;
margin-bottom: 24rpx;
position: relative;
.progress-bar-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.result-img {
z-index: 1;
}
.initial-img {
z-index: 2;
}
}
.result-boxes {
width: 100%;
display: flex;
justify-content: center;
gap: 32rpx;
.result-box {
flex: 1;
height: 140rpx;
border-radius: 24rpx;
border: 2rpx solid #FFF;
background: linear-gradient(180deg, #FAFBFD 0%, #DCEEFD 100%);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 32rpx;
gap: 10rpx;
position: relative;
.box-title, .box-value {
font-size: 32rpx;
color: #25334D;
line-height: 1.2;
}
.status-icon {
position: absolute;
right: 20rpx;
top: 53%;
transform: translateY(-50%);
width: 92rpx;
height: 92rpx;
}
}
}
}
.tips-card {
width: 120%;
max-width: 710rpx;
height: 116rpx;
background: #BEDCF3;
border-radius: 24rpx;
border: 4rpx solid #457AAB;
padding: 20rpx;
position: relative;
box-sizing: border-box;
margin-top: 2vh;
flex-shrink: 0;
.tips-header {
position: absolute;
top: -24rpx;
left: 0;
width: 220rpx;
height: 58rpx;
background: linear-gradient(180deg, #52A5D7 0%, #3E83CE 100%);
border-radius: 48rpx;
border: 4rpx solid #1B5CA3;
box-shadow: 0 0 8rpx 0 #FFF inset;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 10;
.bulb-icon {
position: absolute;
left: -25rpx;
bottom: -10rpx;
width: 80rpx;
height: 80rpx;
z-index: 12;
}
.tips-title {
color: #fff;
font-size: 32rpx;
font-weight: 600;
margin-left: 28rpx;
}
}
.tips-body {
position: absolute;
top: 10rpx;
left: 13rpx;
font-size: 30rpx;
color: #25334D;
padding: 20rpx 16rpx 10rpx 46rpx;
border-radius: 24rpx;
background: linear-gradient(180deg, #FFF 0%, #D9EBF7 100%);
width: 96%;
height: 80%;
box-sizing: border-box;
z-index: 5;
display: flex;
align-items: center;
}
}
</style>
src/pages/third/components/beaker.vue 0 → 100644
<template>
<view class="main-content">
<view class="beaker-section">
<view class="beaker-item polluted-beaker">
<view class="beaker-img-wrapper">
<image class="beaker-img"
:class="{ 'img-hidden': isTesting }"
:src="pollutedImageDefault"
mode="aspectFit">
</image>
<image class="beaker-img beaker-img-overlay"
:class="{ 'img-visible': isTesting }"
:src="pollutedImageTesting"
mode="aspectFit">
</image>
</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>
<view class="beaker-item">
<view class="beaker-img-wrapper">
<image class="beaker-img"
:class="{ 'img-hidden': isTesting }"
:src="purifiedImageDefault"
mode="aspectFit">
</image>
<image class="beaker-img beaker-img-overlay"
:class="{ 'img-visible': isTesting }"
:src="purifiedImageTesting"
mode="aspectFit">
</image>
</view>
<view class="beaker-label purified">净化水</view>
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
isTesting: {
type: Boolean,
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 pollutedImageTesting = '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 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 purifiedImageTesting = '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>
<style scoped lang="scss">
.main-content {
flex: 1;
padding: 0 40rpx;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
justify-content: center;
}
.beaker-section {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
flex-shrink: 1;
.beaker-item {
display: flex;
flex-direction: column;
align-items: center;
.beaker-img-wrapper {
width: 364rpx;
height: 541rpx;
position: relative;
}
.beaker-img {
width: 364rpx;
height: 541rpx;
position: absolute;
bottom: 0;
left: 0;
opacity: 1;
transition: opacity 0.15s ease-in-out;
&.img-hidden {
opacity: 0;
}
}
.beaker-img-overlay {
opacity: 0;
&.img-visible {
opacity: 1;
}
}
&.polluted-beaker .beaker-img-overlay {
transform: scale(1.03) translateY(25rpx);
transform-origin: center bottom;
}
.beaker-label {
padding: 8rpx 32rpx;
border-radius: 48rpx;
color: #fff;
font-size: 34rpx;
position: relative;
top: -60rpx;
z-index: 1;
&.polluted {
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;
}
}
}
.vs-icon {
width: 108rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
}
</style>
src/pages/third/index.vue
<template> <template>
<view class="container"> <view class="container">
<image class="bg" src="/static/game/bg.png" mode="aspectFill"></image> <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>
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }"> <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
<image class="title" src="/static/game/title.png" mode="heightFix"></image> <image class="title" src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e9ddd6b498fe452b9254e86c04596df3Group%20348447251.webp" mode="heightFix"></image>
</view> </view>
<view class="main-content"> <Beaker :isTesting="isTesting"/>
<view class="beaker-section">
<view class="beaker-item">
<image class="beaker-img" src="/static/game/wrs.png"></image>
<view class="beaker-label polluted">污染水</view>
</view>
<image class="vs-icon" src="/static/game/vs.png" mode="widthFix"></image>
<view class="beaker-item">
<image class="beaker-img" src="/static/game/jhs.png"></image>
<view class="beaker-label purified">净化水</view>
</view>
</view>
</view>
<view class="bottom-panel"> <view class="bottom-panel">
<!-- Tabs -->
<view class="tabs-row">
<view class="tab-container">
<image class="tab-btn-active" src="/static/game/active.png" mode="aspectFill"></image>
<view class="tab-overlay">
<image class="tab-icon" src="/static/game/TDS.png" mode="heightFix"></image>
<text class="tab-text active-text">TDS检测</text>
</view>
</view>
<view class="tab-container">
<image class="tab-btn" src="/static/game/default.png"></image>
<view class="tab-overlay">
<image class="tab-icon" src="/static/game/pH.png" mode="heightFix"></image>
<text class="tab-text">pH检测</text>
</view>
</view>
</view>
<!-- Instructions Card -->
<view class="instructions-card ">
<image class="card-bg" src="/static/game/czsm-bg.png" mode="scaleToFill"></image>
<view class="card-content">
<view class="card-title">操作说明</view>
<view class="card-body">
<text class="instruction-text">点击“开始检测”按钮测试TDS值</text>
<image class="ppm-icon" src="/static/game/ppm.png" mode="heightFix"></image>
</view>
</view>
</view>
<view class="tips-card"> <TabsInstructionsPanel :isTesting="isTesting"/>
<view class="tips-header">
<image class="bulb-icon" src="/static/game/deng.png" mode="widthFix"></image>
<text class="tips-title">你知道吗？</text>
</view>
<view class="tips-body">
<text>TDS代表总溶解固体，数值越低水质越纯净</text>
</view>
</view>
<view class="bottom-bar"> <BottomActionBar :isTesting="isTesting" @startTest="startTest"/>
<text class="test-status">当前测试: 0/2</text>
<view class="start-btn-wrapper" @click="startTest">
<button class="start-btn">开始检测</button>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script setup>
export default { import { ref } from 'vue';
data() { import { onLoad } from '@dcloudio/uni-app';
return { import Beaker from './components/beaker.vue';
statusBarHeight: 20 import TabsInstructionsPanel from './components/TabsInstructionsPanel.vue';
} import BottomActionBar from './components/BottomActionBar.vue';
},
onLoad() { const statusBarHeight = ref(20);
const systemInfo = uni.getSystemInfoSync(); const isTesting = ref(false);
this.statusBarHeight = systemInfo.statusBarHeight || 20;
}, onLoad(() => {
methods: { const systemInfo = uni.getSystemInfoSync();
goBack() { statusBarHeight.value = systemInfo.statusBarHeight || 20;
uni.navigateBack({ });
fail: () => {
uni.reLaunch({ const goBack = () => {
url: '/pages/index/index' uni.navigateBack({
}) fail: () => {
} uni.reLaunch({
}) url: '/pages/index/index'
}, });
startTest() {
console.log('Start detection');
uni.showToast({
title: '开始检测...',
icon: 'none'
});
}
} }
} });
};
const startTest = () => {
console.log('Start detection');
isTesting.value = true;
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -165,20 +108,9 @@ ...@@ -165,20 +108,9 @@
.title { .title {
height: 120rpx; height: 120rpx;
width: 54rpx; width: 54rpx;
margin-top: 50rpx;
} }
} }
.main-content {
flex: 1;
padding: 0 40rpx;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
justify-content: center;
}
.bottom-panel { .bottom-panel {
width: 100%; width: 100%;
height: 48vh; height: 48vh;
...@@ -192,272 +124,10 @@ ...@@ -192,272 +124,10 @@
align-items: center; align-items: center;
padding-top: 3vh; padding-top: 3vh;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: absolute;
bottom: 0;
left: 0;
z-index: 10; z-index: 10;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
.beaker-section {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
margin-bottom: 2vh;
position: relative;
flex-shrink: 1;
.beaker-item {
display: flex;
flex-direction: column;
align-items: center;
.beaker-img {
width: 364rpx;
height: 541rpx;
margin-bottom: -10rpx;
}
.beaker-label {
padding: 4rpx 26rpx;
border-radius: 48rpx;
color: #fff;
font-size: 30rpx;
margin-top: 10rpx;
position: relative;
top: -5vh;
z-index: 1;
&.polluted {
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;
}
}
}
.vs-icon {
width: 108rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
}
.tabs-row {
display: flex;
justify-content: center;
gap: 60rpx;
margin-bottom: 2vh;
.tab-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
.tab-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
.tab-icon {
height: 48rpx;
width: 48rpx;
margin-right: 8rpx;
}
.tab-text {
font-size: 28rpx;
color: #6E7585;
font-weight: 600;
&.active-text {
color: #fff;
}
}
}
}
.tab-btn-active {
width: 280rpx;
height: 80rpx;
}
.tab-btn {
width: 240rpx;
height: 80rpx;
}
}
.instructions-card {
position: relative;
width: 90%;
max-width: 678rpx;
height: 180rpx;
margin: 1vh 0;
border-radius: 24rpx;
border: 4rpx solid #457AAB;
background: #BEDCF3;
box-sizing: border-box;
flex-shrink: 0;
.card-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 98%;
height: 94%;
z-index: 0;
display: block;
}
.card-content {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.card-title {
text-align: center;
font-size: 30rpx;
font-weight: bold;
color: #25334D;
margin-top: 10rpx;
}
.card-body {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20rpx;
.instruction-text {
font-size: 26rpx;
color: #25334D;
}
.ppm-icon {
height: 60rpx;
margin-left: 10rpx;
}
}
}
}
.tips-card {
width: 90%;
max-width: 678rpx;
height: 100rpx;
background: #BEDCF3;
border-radius: 24rpx;
border: 4rpx solid #457AAB;
padding: 20rpx;
position: relative;
box-sizing: border-box;
margin-top: 2vh;
flex-shrink: 0;
.tips-header {
position: absolute;
top: -24rpx;
left: 20rpx;
width: 200rpx;
height: 48rpx;
background: linear-gradient(180deg, #52A5D7 0%, #3E83CE 100%);
border-radius: 48rpx;
border: 4rpx solid #1B5CA3;
box-shadow: 0 0 8rpx 0 #FFF inset;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 10;
.bulb-icon {
position: absolute;
left: -20rpx;
bottom: -10rpx;
width: 80rpx;
height: 80rpx;
z-index: 12;
}
.tips-title {
color: #fff;
font-size: 22rpx;
font-weight: bold;
margin-left: 24rpx;
}
}
.tips-body {
position: absolute;
top: 0;
left: 0;
font-size: 24rpx;
color: #333;
line-height: 1.3;
padding: 30rpx 16rpx 10rpx 16rpx;
border-radius: 24rpx;
background: linear-gradient(180deg, #FFF 0%, #D9EBF7 100%);
width: 100%;
height: 100%;
box-sizing: border-box;
z-index: 5;
display: flex;
align-items: center;
}
}
.bottom-bar {
background: #fff;
width: 100%;
padding: 2vh 40rpx;
padding-bottom: calc(2vh + env(safe-area-inset-bottom));
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
border-radius: 30rpx 30rpx 0 0;
margin-top: 2vh;
.test-status {
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.start-btn {
background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
color: white;
border-radius: 40rpx;
padding: 0 50rpx;
font-size: 30rpx;
line-height: 70rpx;
height: 70rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 140, 255, 0.3);
border: none;
&::after {
border: none;
}
}
}
</style> </style>
页面切图.md
## 安吉尔小游戏 ## 安吉尔小游戏
...@@ -49,21 +49,24 @@ ...@@ -49,21 +49,24 @@
- 标签 - 标签
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/1a62746fad3743d19f01e8b612ed8d42Group%20348447435.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/1a62746fad3743d19f01e8b612ed8d42Group%20348447435.webp
- 进度条 - 进度条
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp
- 警告 - 警告
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp
- √ - √
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp
- 徽章 - 徽章
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/44463cae0882429ebd84049240ff5330Group%20348447451.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/44463cae0882429ebd84049240ff5330Group%20348447451.webp
- PH - PH
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/536133e8a44f4482b2848016385d79cbPH.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/536133e8a44f4482b2848016385d79cbPH.webp
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp
- 后 - 后
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/200ccfb61dce458799879093341107f9Group%20348447463.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/200ccfb61dce458799879093341107f9Group%20348447463.webp
- 前 - 前
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8756b9fccb61450a96f34e2b0e938552Group%20348447464.webp - https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8756b9fccb61450a96f34e2b0e938552Group%20348447464.webp
- 完成 - 完成
- 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 - 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
- 边框
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a681444d883d4fe29851d702703302b0Rectangle%203597.webp
- https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp
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