87 lines
2.8 KiB
Vue
87 lines
2.8 KiB
Vue
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
|
||
// 使用路由信息来高亮当前 Tab，而不是从父组件传递状态
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
const currentTab = computed(() => route.name)
|
||
|
||
const goTab = (name) => {
|
||
if (route.name === name) return
|
||
router.push({ name })
|
||
}
|
||
|
||
const openAdd = () => {
|
||
router.push({ name: 'add' })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="absolute bottom-6 left-4 right-4 h-[72px] bg-white/90 backdrop-blur-md rounded-[24px] shadow-2xl shadow-stone-200/50 flex items-center justify-between px-2 z-20 border border-white/50"
|
||
>
|
||
<button
|
||
class="flex-1 flex flex-col items-center gap-1 transition group"
|
||
@click="goTab('home')"
|
||
>
|
||
<div
|
||
class="p-2 rounded-xl transition-all duration-300"
|
||
:class="currentTab === 'home' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
|
||
>
|
||
<i class="text-2xl" :class="currentTab === 'home' ? 'ph-fill ph-house' : 'ph ph-house'" />
|
||
</div>
|
||
</button>
|
||
|
||
<button
|
||
class="flex-1 flex flex-col items-center gap-1 transition group"
|
||
@click="goTab('list')"
|
||
>
|
||
<div
|
||
class="p-2 rounded-xl transition-all duration-300"
|
||
:class="currentTab === 'list' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
|
||
>
|
||
<i class="text-2xl" :class="currentTab === 'list' ? 'ph-fill ph-scroll' : 'ph ph-scroll'" />
|
||
</div>
|
||
</button>
|
||
|
||
<!-- 中间主操作按钮：跳转到新增记录路由 -->
|
||
<div class="relative -top-6">
|
||
<button
|
||
class="w-16 h-16 bg-gradient-warm rounded-[22px] flex items-center justify-center text-white shadow-xl shadow-orange-300/60 hover:scale-105 active:scale-95 transition-all duration-300 border-[6px] border-[#fffaf8]"
|
||
@click="openAdd"
|
||
>
|
||
<i class="ph-bold ph-plus text-2xl" />
|
||
</button>
|
||
</div>
|
||
|
||
<button
|
||
class="flex-1 flex flex-col items-center gap-1 transition group"
|
||
@click="goTab('analysis')"
|
||
>
|
||
<div
|
||
class="p-2 rounded-xl transition-all duration-300"
|
||
:class="currentTab === 'analysis' ? 'text-purple-600 bg-purple-50' : 'text-stone-400 bg-transparent'"
|
||
>
|
||
<i
|
||
class="text-2xl"
|
||
:class="currentTab === 'analysis' ? 'ph-fill ph-chat-teardrop-text' : 'ph ph-chat-teardrop-text'"
|
||
/>
|
||
</div>
|
||
</button>
|
||
|
||
<button
|
||
class="flex-1 flex flex-col items-center gap-1 transition group"
|
||
@click="goTab('settings')"
|
||
>
|
||
<div
|
||
class="p-2 rounded-xl transition-all duration-300"
|
||
:class="currentTab === 'settings' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
|
||
>
|
||
<i class="text-2xl" :class="currentTab === 'settings' ? 'ph-fill ph-gear' : 'ph ph-gear'" />
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</template>
|