54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<div class="hidden-sm-and-up tab-bar flex justify-around items-center bg-white w-full fixed bottom-0 pt-2 pb-5 border-t border-gray-100 border-solid">
|
|
<template v-for="(item,index) in list">
|
|
<nuxt-link class="item flex flex-col justify-center items-center hover:text-green-700 block" @click="onLink(item,index)">
|
|
<component :is="item.icon" :style="{ fontSize: '18px',color: currentIndex == index ? '#15803DFF' : '#333333' }" />
|
|
<span :style="{ color: currentIndex == index ? '#15803DFF' : '#333333'}" class="py-1">{{ item.name }}</span>
|
|
</nuxt-link>
|
|
</template>
|
|
</div>
|
|
<div class="hidden-sm-and-up h-[80px]"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { HomeOutlined, MessageOutlined, ShopOutlined, AppstoreOutlined, ReadOutlined } from '@ant-design/icons-vue';
|
|
|
|
const currentIndex = ref<number>()
|
|
|
|
const list = ref([
|
|
{
|
|
name: '首页',
|
|
icon: HomeOutlined,
|
|
path: '/'
|
|
},
|
|
{
|
|
name: '产品',
|
|
icon: AppstoreOutlined,
|
|
path: '/market'
|
|
},
|
|
{
|
|
name: '文档',
|
|
icon: ReadOutlined,
|
|
path: '/docs'
|
|
},
|
|
{
|
|
name: '店铺',
|
|
icon: ShopOutlined,
|
|
path: '/user'
|
|
}
|
|
])
|
|
|
|
const onLink = (item: any,index: number) => {
|
|
if(item.path == '/'){
|
|
// 回到页面顶部
|
|
window.scrollTo(0, 0)
|
|
}
|
|
currentIndex.value = index
|
|
navigateTo(item.path)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|