zhunong-h5/src/components/TabBar.vue

<template>
  <div class="tab-bar">
    <div
      class="tab-item"
      v-for="tab in tabs"
      :key="tab.path"
      @click="switchTab(tab.path)"
      :class="{ active: currentPath === tab.path }"
    >
      <img
        :src="getIcon(tab)"
        class="tab-icon"
        alt=""
      />
      <span>{{ tab.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  data() {
    return {
      currentPath: '/home',
      tabs: [
        {
          path: '/home',
          title: '首页',
          icon: 'index0.png',
          iconActive: 'index1.png'
        },
        {
          path: '/mall',
          title: '退休计划',
          icon: 'hang0.png',
          iconActive: 'hang1.png'
        },
        {
          path: '/dynamic', //邀请百姓
          // path: '/China', // 红旗中国
          // path: '/Medical', // 红旗医疗
          title: '邀请百姓',
          icon: 'gang0.png',
          iconActive: 'gang1.png'
        },
        {
          path: '/profile',
          title: '我的',
          icon: 'mine0.png',
          iconActive: 'mine1.png'
        }
      ]
    }
  },
  methods: {
    switchTab(path) {
      this.currentPath = path
      this.$router.push(path)
    },
    getIcon(tab) {
      return require(`@/assets/${this.currentPath === tab.path ? tab.iconActive : tab.icon}`)
    }
  },
  created() {
    this.currentPath = this.$route.path
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  z-index: 999;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;

    .tab-icon {
      width: 24px;
      height: 24px;
      margin-bottom: 2px;
    }

    &.active {
      color: rgb(237, 75, 57);
    }
  }
}
</style>