Skip to content

A
angel-angel-mini-game
Commit 747d4a3b by Hantao
Options

修改配置

parent ca86bd74
Showing with 547 additions and 1 deletions
index.html
......@@ -15,6 +15,6 @@
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "angel-mini-game",
"version": "0.0.0",
"scripts": {
"dev:app": "uni -p app",
"dev:app-android": "uni -p app-android",
"dev:app-ios": "uni -p app-ios",
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:app": "uni build -p app",
"build:app-android": "uni build -p app-android",
"build:app-ios": "uni build -p app-ios",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-weixin": "uni build -p mp-weixin",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-3090620231104001",
"@dcloudio/uni-app-plus": "3.0.0-3090620231104001",
"@dcloudio/uni-components": "3.0.0-3090620231104001",
"@dcloudio/uni-h5": "3.0.0-3090620231104001",
"@dcloudio/uni-mp-alipay": "3.0.0-3090620231104001",
"@dcloudio/uni-mp-baidu": "3.0.0-3090620231104001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-3090620231104001",
"@dcloudio/uni-mp-lark": "3.0.0-3090620231104001",
"@dcloudio/uni-mp-qq": "3.0.0-3090620231104001",
"@dcloudio/uni-mp-toutiao": "3.0.0-3090620231104001",
"@dcloudio/uni-mp-weixin": "3.0.0-3090620231104001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3090620231104001",
"vue": "^3.2.45",
"vue-i18n": "^9.1.9"
},
"devDependencies": {
"@dcloudio/types": "^3.3.2",
"@dcloudio/uni-automator": "3.0.0-3090620231104001",
"@dcloudio/uni-cli-shared": "3.0.0-3090620231104001",
"@dcloudio/uni-stacktracey": "3.0.0-3090620231104001",
"@dcloudio/vite-plugin-uni": "3.0.0-3090620231104001",
"vite": "^4.0.3",
"sass": "^1.77.8"
}
}
\ No newline at end of file
pages.json → src/pages.json
......@@ -5,6 +5,12 @@
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/third/index",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
src/pages/third/index.vue 0 → 100644
<template>
<view class="container">
<image class="bg" src="/static/game/bg.png" mode="aspectFill"></image>
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
<image class="title" src="/static/game/title.png" mode="heightFix"></image>
</view>
<view class="main-content">
<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">
<!-- 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">
<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">
<text class="test-status">当前测试: 0/2</text>
<view class="start-btn-wrapper" @click="startTest">
<button class="start-btn">开始检测</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 20
}
},
onLoad() {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight || 20;
},
methods: {
goBack() {
uni.navigateBack({
fail: () => {
uni.reLaunch({
url: '/pages/index/index'
})
}
})
},
startTest() {
console.log('Start detection');
uni.showToast({
title: '开始检测...',
icon: 'none'
});
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
color: #333;
overflow: hidden;
box-sizing: border-box;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
}
.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: 8vh;
width: auto;
margin-top: 1vh;
}
}
.main-content {
flex: 1;
padding: 0 40rpx;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
justify-content: center; /* Center content vertically if space allows */
}
.bottom-panel {
width: 100%;
height: 48vh;
flex-shrink: 0;
border-radius: 24rpx 24rpx 0 0;
border-top: 4rpx solid #728FAF;
background: linear-gradient(180deg, #E0EBF6 0%, #C3D3E4 100%);
box-shadow: 0 10rpx 0 0 #FFF inset;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3vh;
box-sizing: border-box;
position: relative;
z-index: 10;
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: 28vh;
height: 42vh;
max-width: 300rpx;
max-height: 445rpx;
margin-bottom: -10rpx;
object-fit: contain;
}
.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: 80rpx;
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: 40rpx;
width: 40rpx;
margin-right: 8rpx;
}
.tab-text {
font-size: 28rpx;
color: #6E7585;
font-weight: 600;
&.active-text {
color: #fff;
}
}
}
}
.tab-btn-active {
width: 240rpx;
height: 70rpx;
}
.tab-btn {
width: 200rpx;
height: 70rpx;
}
}
.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: 50rpx;
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: -16rpx;
bottom: -8rpx;
width: 64rpx;
height: 64rpx;
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>
vite.config.js 0 → 100644
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
],
})
\ 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