114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { showToast } from 'vant'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const active = ref('home')
|
|
|
|
watch(() => route.name, (n) => {
|
|
if (n) {
|
|
const nm = n.toLowerCase()
|
|
if (['home', 'meal', 'grow', 'my'].includes(nm)) active.value = nm
|
|
}
|
|
}, { immediate: true })
|
|
|
|
function go(name) {
|
|
router.push({ name: name.charAt(0).toUpperCase() + name.slice(1) })
|
|
}
|
|
|
|
function onCall() {
|
|
showToast({ message: '如需帮助请联系前台工作人员 📞', position: 'bottom', duration: 2000 })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout">
|
|
<router-view />
|
|
<div class="tabbar">
|
|
<div class="tab-item" :class="{ active: active === 'home' }" @click="go('home')">
|
|
<van-icon name="home-o" size="23" />
|
|
<span>首页</span>
|
|
</div>
|
|
<div class="tab-item" :class="{ active: active === 'meal' }" @click="go('meal')">
|
|
<van-icon name="fire-o" size="23" />
|
|
<span>用膳</span>
|
|
</div>
|
|
<!-- 中央呼叫按钮 -->
|
|
<div class="tab-center">
|
|
<div class="center-btn" @click="onCall">
|
|
<van-icon name="phone-o" size="25" color="white" />
|
|
</div>
|
|
</div>
|
|
<div class="tab-item" :class="{ active: active === 'grow' }" @click="go('grow')">
|
|
<van-icon name="flower-o" size="23" />
|
|
<span>成长</span>
|
|
</div>
|
|
<div class="tab-item" :class="{ active: active === 'my' }" @click="go('my')">
|
|
<van-icon name="contact-o" size="23" />
|
|
<span>我的</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layout {
|
|
min-height: 100vh;
|
|
padding-bottom: 72px;
|
|
}
|
|
.tabbar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 68px;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
z-index: 999;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3px;
|
|
cursor: pointer;
|
|
color: #9ca3af;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
padding: 6px 0 0;
|
|
transition: color 0.2s;
|
|
}
|
|
.tab-item.active { color: #f43f5e; }
|
|
.tab-center {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
padding-bottom: 14px;
|
|
}
|
|
.center-btn {
|
|
width: 54px;
|
|
height: 54px;
|
|
background: linear-gradient(145deg, #f87171, #f43f5e);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 6px 20px rgba(244, 63, 94, 0.45);
|
|
cursor: pointer;
|
|
position: relative;
|
|
bottom: 8px;
|
|
transition: transform 0.15s;
|
|
}
|
|
.center-btn:active { transform: scale(0.93); }
|
|
</style>
|