Bit_Wise_World/src/views/HomeIndex.vue

<template>
  <div class="index">
    <router-view />
    <div class="footer-tabbar">
      <div
        class="tabbar-item"
        v-for="(item, index) in tabbarList"
        :key="index"
        @click="tabbarChange(item.key)">
        <img
          class="item-image"
          :src="current === item.key ? item.selectedImage : item.image"
          alt="" />
        <div class="item-text" :class="{ activeClass: current === item.key }">
          {{ item.text }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { useRouter } from "vue-router";
  import { ref } from "vue";

  const router = useRouter();

  const current = ref("index");

  const tabbarChange = (key, path) => {
    current.value = key;
    router.push('/'+key);
  };

  const tabbarList = [
    {
      key: "index",
      path: "/",
      image: require("@/assets/icon/tabbar/home-clicked.png"),
      selectedImage: require("@/assets/icon/tabbar/home-clicked.png"),
      text: "首页",
    },
    {
      key: "market",
      path: "/marketIndex",
      image: require("@/assets/icon/tabbar/bitcoin-circle.png"),
      selectedImage: require("@/assets/icon/tabbar/bitcoin-circle.png"),
      text: "行情",
    },
    {
      key: "bitcoin",
      path: "/bitcoin",
      image: require("@/assets/icon/tabbar/bitcoin-circle.png"),
      selectedImage: require("@/assets/icon/tabbar/bitcoin-circle.png"),
      text: "交易",
    },
    {
      key: "asset",
      path: "/assetIndex",
      image: require("@/assets/icon/tabbar/wallet.png"),
      selectedImage: require("@/assets/icon/tabbar/wallet.png"),
      text: "资产",
    },
    {
      key: "user",
      image: require("@/assets/icon/tabbar/user-circle.png"),
      selectedImage: require("@/assets/icon/tabbar/user-circle.png"),
      text: "我的",
    },
  ];
</script>
<style lang="less" scoped>
  .index {
    width: 100%;

    .footer-tabbar {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 60px;
      background: #fff;

      .tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;

        .item-image {
          margin-bottom: 6px;
          width: 19px;
          height: 19px;
        }

        .item-text {
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          color: #a8a8a8;

          &.activeClass {
            font-family: "PingFang SC";
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            color: #df384c;
          }
        }
      }
    }
  }
</style>