1

components/AppFooter/TabBar/TabBar.vue

@@ -0,0 +1,53 @@
+<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>