三角底座的菜单选中效果

菜单效果

<template>
  <div class="appLayout">
    <el-container>
      <el-header>
        <div class="title">
          <img
            src="../../assets/muxianImg/applogo.png"
            style="padding: 14px 20px 0 10px; float: left"
          />
        </div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#00706B"
          text-color="#9CCBC1"
          active-text-color="#fff"
          router
        >
          <template v-for="(item, index) in menusList">
            <!-- 没有二级菜单 -->
            <el-menu-item :index="item.url" :key="index" v-if="!item.children">
              <div style="padding: 0 10px">
                <!-- {{ activeId }} -->
                <img
                  :src="item.url == activeId ? item.activeimg : item.img"
                  style="margin-right: 4px"
                />
                <span>{{ item.text }}</span>
                <div v-if="item.url == activeId">
                  <img
                    src="@/assets/gzfx/sanjiao.png"
                    :class="[
                      (item.url == activeId && item.text === '变比管理') ||
                      item.text === '配置管理'
                        ? 'homeImg2'
                        : 'homeImg'
                    ]"
                  />
                </div>
              </div>
            </el-menu-item>
            <!-- 有二级菜单 -->
            <el-submenu v-else :key="item.url" :index="item.url">
              <template slot="title">
                <img :src="item.url == activeId ? item.activeimg : item.img" />
                {{ item.text }}
                <div v-show="item.url == activeId">
                  <img src="@/assets/gzfx/sanjiao.png" class="ingsty" />
                </div>
              </template>
              <el-menu-item
                v-for="(menu, key) in item.children"
                :index="menu.url"
                :key="key"
                @click="getUrl(menu.url)"
              >
                <span style="font-size: 18px">{{ menu.text }}</span>
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
        <!-- 右侧退出 -->
        <div
          style="float: right; margin-top: -50px; z-index: 999; display: flex"
        >
          <el-dropdown
            class="avatar-container right-menu-item hover-effect"
            trigger="click"
          >
            <div class="avatar-wrapper">
              <el-avatar>
                <img src="../../assets/gzfx/touxiang.png" class="tx"
              /></el-avatar>
              <i class="el-icon-caret-bottom" style="color: #fff" />
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <!-- 主内容 -->
        <keep-alive>
          <router-view />
        </keep-alive>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: {
        menuTitie: true
      },
      activeId: '',
      menusList: [
        {
          text: '故障信息分析',
          url: '/muxian/faultInformation/index',
          img: require('@/assets/muxianImg/gz2.png'),
          activeimg: require('@/assets/muxianImg/gz1.png')
        },
        {
          text: '超限校核与预警',
          url: '/muxian/proofread/index',
          img: require('@/assets/muxianImg/cx2.png'),
          activeimg: require('@/assets/muxianImg/cx1.png')
        },
        {
          text: '统计分析功能',
          url: '/muxian/statisticAnalysis/index',
          img: require('@/assets/muxianImg/tj2.png'),
          activeimg: require('@/assets/muxianImg/tj1.png'),
          children: [
            {
              text: '历年短路电流',
              url: '/muxian/statisticAnalysis/dianliu/index',
              index: '/muxian/statisticAnalysis/dianliu/index'
            },
            {
              text: '历年短路容量',
              url: '/muxian/statisticAnalysis/rongliang/index',
              index: '/muxian/statisticAnalysis/rongliang/index'
            }
          ]
        },
        {
          text: '理论信息审核',
          url: '/muxian/informationAudit/index',
          img: require('@/assets/muxianImg/ll2.png'),
          activeimg: require('@/assets/muxianImg/ll1.png')
        },
        {
          text: '理论信息维护',
          url: '/muxian/informationMaintenance/index',
          img: require('@/assets/muxianImg/wh2.png'),
          activeimg: require('@/assets/muxianImg/wh1.png')
        },
        {
          text: '线路电抗管理',
          url: '/muxian/reactanceManagement/index',
          img: require('@/assets/muxianImg/xld2.png'),
          activeimg: require('@/assets/muxianImg/xld1.png')
        },
        {
          text: '变比管理',
          url: '/muxian/variableManagement/index',
          img: require('@/assets/muxianImg/bianb2.png'),
          activeimg: require('@/assets/muxianImg/bianb1.png')
        },
        {
          text: '配置管理',
          url: '/muxian/configManage/index',
          img: require('@/assets/muxianImg/peiz2.png'),
          activeimg: require('@/assets/muxianImg/peiz1.png')
        }
      ]
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        const paths = val.path.split('/');
        if (paths.length > 3) {
          // 当前活动路由
          this.activeId = paths[0] + '/' + paths[1] + '/' + paths[2] + '/index';
        } else {
          this.activeId = val.path;
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  created() {
    // 解决刷新后页面取不到当前路由图片不高亮问题
    const paths = this.$route.path.split('/');
    if (paths.length > 3) {
      // 当前活动路由
      this.activeId = paths[0] + '/' + paths[1] + '/' + paths[2] + '/index';
    } else {
      this.activeId = this.$route.path;
    }
  },
  mounted() {},
  methods: {
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = process.env.BASE_URL + 'index';
          });
        })
        .catch(() => {});
    },
    getUrl(path, name) {
      // 重复点击报错  在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。
      if (this.$route.path !== path) {
        this.$router.push({ path: path }).catch((err) => {
          console.log(err);
        });
      }
    }
  }
};
</script>
<style scoped>
.ingsty {
  width: 16px;
  height: 10px;
  cursor: pointer;
  margin-top: -76px;
  margin-left: 10px;
}
.homeImg2 {
  width: 16px;
  height: 10px;
  cursor: pointer;
  margin-top: -80px;
  margin-left: 46px;
}
/* .homeImg3 {
  width: 16px;
  height: 10px;
  cursor: pointer;
  margin-top: -80px;
  margin-left: 70px;
} */
.homeImg {
  width: 16px;
  height: 10px;
  cursor: pointer;
  margin-top: -80px;
  margin-left: 58px;
}
.el-menu--popup .el-menu-item span {
  font-size: 14px !important;
}
.title {
  float: left;
  color: #fff;
  font-size: 22px;
}
.el-menu--popup {
  z-index: 100;
  min-width: 100%;
  border: none;
  padding: 5px 0;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-sizing: border-box !important;
  width: 100%;
}
::v-deep .el-submenu__title {
  height: 56px;
  line-height: 56px;
  font-size: 12px;
  color: #303133;
  padding: 0 10px !important;
}
.appLayout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  position: relative;
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
// 固定菜单宽度
::v-deep .el-submenu .el-submenu__title {
  width: 180px;
  text-align: center;
  i {
    display: none;
  }
}
// 去掉菜单下划线样式
::v-deep .el-menu-item.is-active {
  border-bottom-color: transparent !important;
}
::v-deep .el-submenu__title {
  border-bottom-color: transparent !important;
}
.section.el-container.is-vertical span {
  font-size: 14px !important;
}
.el-header {
  height: 68px !important;
  background: #00706b;
  .el-menu {
    flex: 1;
    display: flex;
    justify-content: center;
    // padding: 0 10px;
    border-bottom: none;
    margin-top: 8px;
    // 没二级菜单
    ::v-deep .el-menu-item {
      font-size: 14px !important;
      line-height: 60px;
      font-weight: 550;
      // color: #fff !important;
    }
    ::v-deep .el-submenu__title {
      font-size: 14px;
      line-height: 60px;
      font-weight: 550;
    }
    ::v-deep .el-submenu__title:hover {
      background-color: rgba(0, 0, 0, 0.1) !important;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .el-menu-item:hover {
      background-color: rgba(0, 0, 0, 0.1) !important;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
  }
}
// 选中菜单的底部边框宽度
::v-deep .el-menu--horizontal .el-menu-item.is-active {
  border-bottom: none;
}

.el-main {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  padding: 0;
}
</style>