Skip to content

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

优化写法

parent 434bda5c
Showing with 297 additions and 308 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'; return IMAGES.start;
}
if (props.isTesting && props.isProgressFinished && !props.isResultShown) {
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 (newVal) {
isDisabled.value = true;
} }
});
if (props.isTesting) {
watch(() => props.isProgressFinished, (newVal) => { if (props.isProgressFinished && !props.isResultShown) {
if (newVal) { return IMAGES.testing;
isDisabled.value = false; }
} return IMAGES.testing;
});
watch(() => props.isResultShown, (newVal) => {
if (newVal) {
isDisabled.value = false;
} }
return IMAGES.start;
}); });
const handleStartTest = () => { const handleStartTest = () => {
......
src/pages/third/components/beaker.vue
<template> <template>
<view class="main-content"> <view class="main-content">
<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="{ 'img-hidden': isTesting }" class="beaker-img"
:src="pollutedImageDefault" :class="{ 'img-hidden': isTesting }"
mode="aspectFit"> :src="IMAGES.pollutedDefault"
</image> mode="aspectFit"
<image class="beaker-img beaker-img-overlay" />
:class="{ 'img-visible': isTesting }" <image
:src="pollutedImageTesting" class="beaker-img beaker-img-overlay"
mode="aspectFit"> :class="{ 'img-visible': isTesting }"
</image> :src="pollutedImageTesting"
</view> mode="aspectFit"
<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>
<view class="beaker-label polluted">污染水</view>
</view>
<image class="vs-icon" :src="IMAGES.vsIcon" mode="widthFix" />
<view class="beaker-item">
<view class="beaker-img-wrapper">
<image
class="beaker-img"
:class="{ 'img-hidden': isTesting }"
:src="IMAGES.purifiedDefault"
mode="aspectFit"
/>
<image
class="beaker-img beaker-img-overlay"
:class="{ 'img-visible': isTesting }"
:src="purifiedImageTesting"
mode="aspectFit"
/>
</view>
<view class="beaker-label purified">净化水</view>
</view>
</view> </view>
</view>
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'; 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>
<style scoped lang="scss"> <style scoped lang="scss">
.main-content { .main-content {
flex: 1; flex: 1;
padding: 0 40rpx; padding: 0 40rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
justify-content: center; justify-content: center;
} }
.beaker-section { .beaker-section {
width: 100%; width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
flex-shrink: 1;
.beaker-item {
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: flex-end; align-items: center;
position: relative;
flex-shrink: 1; .beaker-img-wrapper {
width: 364rpx;
.beaker-item { height: 541rpx;
display: flex; position: relative;
flex-direction: column; }
align-items: center;
.beaker-img {
.beaker-img-wrapper { width: 364rpx;
width: 364rpx; height: 541rpx;
height: 541rpx; position: absolute;
position: relative; bottom: 0;
} left: 0;
opacity: 1;
.beaker-img { transition: opacity 0.15s ease-in-out;
width: 364rpx;
height: 541rpx; &.img-hidden {
position: absolute; opacity: 0;
bottom: 0; }
left: 0; }
opacity: 1;
transition: opacity 0.15s ease-in-out; .beaker-img-overlay {
opacity: 0;
&.img-hidden {
opacity: 0; &.img-visible {
} opacity: 1;
} }
}
.beaker-img-overlay {
opacity: 0; &.polluted-beaker:not(.no-transform) .beaker-img-overlay {
transform: scale(1.03) translateY(25rpx);
&.img-visible { transform-origin: center bottom;
opacity: 1;
}
}
&.polluted-beaker:not(.no-transform) .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 { .beaker-label {
width: 108rpx; padding: 8rpx 32rpx;
position: absolute; border-radius: 48rpx;
left: 50%; color: #fff;
top: 50%; font-size: 34rpx;
transform: translate(-50%, -50%); position: relative;
z-index: 99; 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> </style>
\ No newline at end of file
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"
</view> @resultShown="handleResultShown"
@progressFinished="handleProgressFinished"
<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>
</view> <BottomActionBar
</view> :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="assets.completionPopup"
mode="scaleToFill"
@click.stop="closeCompletion"
/>
</view>
</view>
</template> </template>
<script setup> <script setup>
...@@ -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);
...@@ -37,154 +62,116 @@ const triggerShowFinalCard = ref(false); ...@@ -37,154 +62,116 @@ const triggerShowFinalCard = ref(false);
const showCompletion = ref(false); const showCompletion = ref(false);
onLoad(() => { onLoad(() => {
const systemInfo = uni.getSystemInfoSync(); const systemInfo = uni.getSystemInfoSync();
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;
isProgressFinished.value = false; isProgressFinished.value = false;
triggerShowFinalCard.value = false; triggerShowFinalCard.value = false;
}; };
const handleResultShown = () => { const handleResultShown = () => {
isResultShown.value = true; isResultShown.value = true;
}; };
const handleProgressFinished = () => { const handleProgressFinished = () => {
isProgressFinished.value = true; isProgressFinished.value = true;
}; };
const handleShowFinalCard = () => { const handleShowFinalCard = () => {
triggerShowFinalCard.value = true; triggerShowFinalCard.value = true;
}; };
const restartTest = () => { const restartTest = () => {
console.log('Restart detection'); console.log('Restart detection');
isTesting.value = false; isTesting.value = false;
isResultShown.value = false; isResultShown.value = false;
isProgressFinished.value = false; isProgressFinished.value = false;
triggerShowFinalCard.value = false; triggerShowFinalCard.value = false;
isSecondTest.value = true; isSecondTest.value = true;
}; };
const handleShowCompletion = () => { const handleShowCompletion = () => {
showCompletion.value = true; showCompletion.value = true;
}; };
const closeCompletion = () => { const closeCompletion = () => {
showCompletion.value = false; showCompletion.value = false;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
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;
width: 100%; width: 100%;
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 { .title {
width: 100%; height: 120rpx;
height: 44px; width: 54rpx;
display: flex; }
align-items: center; }
padding: 0 20rpx;
box-sizing: border-box; .completion-overlay {
position: fixed;
.back-btn { top: 0;
display: flex; left: 0;
align-items: center; right: 0;
background: rgba(255, 255, 255, 0.6); bottom: 0;
padding: 8rpx 16rpx; z-index: 9999;
border-radius: 30rpx; display: flex;
justify-content: center;
.back-arrow { align-items: center;
font-size: 32rpx;
margin-right: 6rpx; .completion-img {
line-height: 1; width: 100%;
} height: 100%;
}
.back-text { }
font-size: 24rpx;
font-weight: 500; .bottom-panel {
} width: 100%;
} height: 48vh;
} flex-shrink: 0;
border-radius: 24rpx 24rpx 0 0;
.title { border-top: 4rpx solid #728FAF;
height: 120rpx; background: linear-gradient(180deg, #E0EBF6 0%, #C3D3E4 100%);
width: 54rpx; box-shadow: 0 10rpx 0 0 #FFF inset;
} display: flex;
} flex-direction: column;
align-items: center;
.completion-overlay { padding-top: 3vh;
position: fixed; box-sizing: border-box;
top: 0; position: absolute;
left: 0; bottom: 0;
right: 0; left: 0;
bottom: 0; z-index: 10;
z-index: 9999; padding-bottom: env(safe-area-inset-bottom);
display: flex; }
justify-content: center; </style>
align-items: center; \ No newline at end of file
.completion-img {
width: 100%;
height: 100%;
}
}
.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: absolute;
bottom: 0;
left: 0;
z-index: 10;
padding-bottom: env(safe-area-inset-bottom);
}
</style>
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