securityHtml/src/views/index/components/nav1.vue

<template>
  <div class="home-nav">
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      :text-color="variables.menuText"
      :unique-opened="false"
      :active-text-color="variables.menuActiveText"
      mode="horizontal"
    >
      <sidebar-item
        v-for="route in routes"
        :key="route.path"
        :item="route"
        :base-path="route.path"
      />
    </el-menu>
  </div>
</template>

<script>
import SidebarItem from "./SidebarItem2";

import { mapGetters } from "vuex";
import variables from "@/styles/variables.scss";

export default {
  name: "nav1",
  components: {
    SidebarItem,
  },

  data() {
    return {};
  },
  computed: {
    ...mapGetters(["sidebar"]),
    routes() {
      return this.$router.options.routes;
    },

    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },

    variables() {
      return variables;
    },

    isCollapse() {
      return !this.sidebar.opened;
    },
  },
};
</script>
<style  lang="scss">
.home-nav {
  left: 1rem;
  display: inline-block;
  position: absolute;

  .el-menu-item:focus,
  .el-menu-item:hover {
    background: rgba(0, 0, 0, 0);
  }

  .el-submenu__title:hover {
    background: rgba(0, 0, 0, 0);

    span {
      color: rgb(92, 136, 250);
      text-align: center;
    }
    //  i{

    //    color:rgb(92, 136, 250)

    //    }
  }

  .el-menu.el-menu--horizontal {
    border-bottom: 0;
    background: rgba(0, 0, 0, 0);
    // border:1px solid pink;
    z-index: 1000;
    // line-height:3.5rem;
    line-height: 2.5rem;
    .el-menu-item,
    .el-submenu__title {
      height: 3.5rem;
      line-height: 3.5rem;
      font-size: 1.8rem;
      span {
        color: #fff;
      }
    }
    .el-submenu__title {
      padding: 0 2rem;

      .el-submenu__icon-arrow {
        display: none;
      }
    }
  }
  .el-menu > div {
    display: inline-block;
  }
}
</style>


<style lang="scss">
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background: #021132;
  text-align: center;
}
.el-menu--horizontal .el-menu--popup {
  min-width: 12rem !important;
  padding: 0;
  .el-menu-item {
    font-size: 1.7rem;
    // color:#000!important;
  }
  .el-menu-item:hover {
    span {
      color: rgb(92, 136, 250);
    }
  }
}
</style>