50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { AiOutlineHome, AiOutlineShoppingCart, AiOutlineUser } from 'vue-icons-plus/ai'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const activeTab = ref(0)
|
|
|
|
const tabs = [
|
|
{ label: '列表', route: '/', icon: AiOutlineHome },
|
|
{ label: '已购买', route: '/purchased', icon: AiOutlineShoppingCart },
|
|
{ label: '我的', route: '/profile', icon: AiOutlineUser }
|
|
]
|
|
|
|
const switchTab = (index, route) => {
|
|
activeTab.value = index
|
|
router.push(route)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-screen flex flex-col bg-gray-50">
|
|
<div class="flex-1 overflow-hidden">
|
|
<router-view v-slot="{ Component }">
|
|
<keep-alive>
|
|
<component :is="Component" />
|
|
</keep-alive>
|
|
</router-view>
|
|
</div>
|
|
|
|
<nav class="flex-none bg-white border-t border-gray-200">
|
|
<div class="flex justify-around items-center h-14">
|
|
<div v-for="(tab, index) in tabs" :key="index"
|
|
class="flex flex-col items-center justify-center w-full h-full py-1 focus:outline-none" :class="[
|
|
activeTab === index
|
|
? 'text-blue-600'
|
|
: 'text-gray-600 hover:text-blue-600 active:text-blue-700'
|
|
]" @click="switchTab(index, tab.route)">
|
|
<component :is="tab.icon" class="w-6 h-6" />
|
|
<span class="mt-1 text-xs">{{ tab.label }}</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Remove all existing styles */
|
|
</style>
|