TabBarLayout.vue

<template>
  <div class="tabbar-layout">
    <div class="content">
      <router-view v-slot="{ Component }">
        <component :is="Component"/>
      </router-view>
    </div>

    <div class="tab-view">
      <div 
        v-for="item in tabItems" 
        :key="item.path"
        :class="route.name === item.name ? 'tab-item tab-item-active' : 'tab-item'" 
        @click="handleChange(item.path)"
      >
       <img class="tab-item-icon" v-if="route.name === item.name" :src="item.iconActive" alt="">
       <img class="tab-item-icon" v-else :src="item.icon" alt="">
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import tab1 from '@/static/tabbar/1.png';
import tab1Active from '@/static/tabbar/a1.png';
import tab2 from '@/static/tabbar/2.png';
import tab2Active from '@/static/tabbar/a2.png';
import tab3 from '@/static/tabbar/3.png';
import tab3Active from '@/static/tabbar/a3.png';
import tab4 from '@/static/tabbar/4.png';
import tab4Active from '@/static/tabbar/a4.png';
const router = useRouter();
const route = useRoute();


const tabItems = [
  { name: 'home', path: '/home', title: '首页', icon: tab1, iconActive: tab1Active },
  { name: 'smtx', path: '/smtx', title: '实名提现', icon: tab2, iconActive: tab2Active },
  { name: 'gbjy', path: '/gbjy', title: '国币交易', icon: tab3, iconActive: tab3Active },
  // { name: 'gbcp', path: '/gbcp', title: '国币持仓', icon: tab4, iconActive: tab4Active },
  { name: 'user', path: '/user', title: '我的', icon: tab4, iconActive: tab4Active },
];

const handleChange = (path: string) => {
  router.push(path);
};
</script>

<style lang="scss" scoped>
.tabbar-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content {
    height: calc(100% - 50px);
    overflow-y: auto;
    background-color: var(--bg-color);
  }
  
  .tab-view {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 999;

    .tab-item {
      flex: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .tab-item-icon{
        width: 25px;
        height: 25px;
      }
      span {
        margin-top: 3px;
        font-size: 14px;
        color: #666;
      }
    }

    .tab-item-active {
      flex: 1;
      text-align: center;
     
      span {
        color: red;
      }
    }
  }
}
</style>