ZZ-official-h5/src/components/BottomNav/index.vue

<!-- src/components/BottomNav.vue -->
<template>
  <el-menu 
    :default-active="activeMenu"
    mode="horizontal"
    class="bottom-nav"
    @select="handleSelect"
  >
    <el-menu-item 
      v-for="item in navItems" 
      :key="item.name"
      :index="item.name"
    >
      <i :class="item.icon"></i>
      <span>{{ item.label }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'BottomNav',
  props: {
    activeMenu: {
      type: String,
      default: 'home'
    }
  },
  data() {
    return {
      navItems: [
        { name: 'home', label: '首页', icon: 'el-icon-house', path: '/home' },
        { name: 'category', label: '新闻资讯', icon: 'el-icon-news', path: '/menuList' },
        { name: 'course', label: '班级课程', icon: 'el-icon-notebook-1', path: '/cart' },
        { name: 'mine', label: '会员中心', icon: 'el-icon-user', path: '/mine' }
      ]
    }
  },
  methods: {
    handleSelect(index) {
      const selectedItem = this.navItems.find(item => item.name === index)
      if (selectedItem) {
        if(selectedItem.name=='course'){
          window.open('https://h.xyyxt.net/pages/course/index');
        }
        else if(selectedItem.name=='mine'){
          window.open('https://h.xyyxt.net/pages/wd/index');
        }
        else{
        this.$router.push(selectedItem.path);
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  height: 90px;
  background-color: #6899e6;
  border-top: 1px solid #e6e6e6;
  z-index: 100;
  color:#fff;
}

.bottom-nav .el-menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 40px;
  padding: 0 10px;
  border-bottom: none !important;
  color:#fff;
}

.bottom-nav .el-menu-item i {
  font-size: 44px !important;
  margin-bottom: 4rpx;
  color:#fff;
}

.bottom-nav .el-menu-item.is-active {
  color: #f8ff39;
  background-color: transparent !important;
  i,span{
    color: #f8ff39;
  }
}
::v-deep .el-menu--horizontal .el-menu-item{
  line-height: 25px;
   color:#fff;
}
</style>