antissoft / NetworkInformation

  <template>
    <div class="Navs">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        :collapse="true"
        router
      >
        <el-menu-item index="/homePage">

          <i><img src="@/assets/images/meun/首页.png" alt="" /></i>

          <span>首页</span>
          <!-- <span slot="title">首页</span> -->
        </el-menu-item>
        <div v-for="v in navList" :key="v.id">
          <template v-if="v.children && v.children.length">
            <el-submenu :index="v.path">
              <template slot="title">

                <i>
                  <img :src="require(`@/assets/images/meun/${v.fullName}.png`)" alt="photo.text" />
                </i>

                <span slot="title">{{ v.fullName }}</span>
              </template>
              <el-menu-item-group>

                <el-menu-item
                  :index="item.path"
                  v-for="item in v.children"
                  :key="item.id"
                  >{{ item.fullName }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="v.path">
              <i class="el-icon-menu"></i>
              <span>{{ v.fullName }}</span>
            </el-menu-item>
          </template>
        </div>
      </el-menu>
    </div>
  </template>
  
  <script>
  export default {
    name: "Navs",
  
    data() {
      return {
        navList: "",
      };
    },
    mounted() {

      // 显示"E蓉管理PC权限"下的页面

      let meun = this.$store.state.user.menuList.find(
        (v) => v.id == "582459649622541573"
      ).children;

      this.navList = meun;

    },
    computed: {
      // 默认激活的菜单
      activeMenu() {

        return this.$route.path;
      },
    },

    methods: {
    },

  };
  </script>
  <style scoped lang="scss">
  .Navs {
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    :deep(.el-menu--collapse) {
      width: 100%;
    }
    .el-menu-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 30px;
      color: #fff;

      padding: 40px 0px !important;

      &.is-active {

        color: #409EFF;

        background-color: #dfdada34;
      }
      span {
        height: 30px;
        width: 100%;
        overflow: unset;
        visibility: unset;
      }
      &:hover {
        background-color: #dfdada56;
      }
    }
    :deep(.el-menu) {
      background-color: transparent;
      border-right: unset;
      .el-submenu__title {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 30px;
        justify-content: center;
        color: #fff;

        padding: 40px 0px !important;

        &:hover {
          background-color: #dfdada56;
        }
      }
      i {
        color: #fff;

        font-size: 30px;
        width: 30px;

        height: 30px;

        margin: 0;

        img {
          width: 100%;
          height: 100%;
        }

      }
      .el-submenu__icon-arrow.el-icon-arrow-right {
        display: none;
      }
    }
  }

  .el-menu-item-group {
    :deep(.el-menu-item-group__title) {
      display: none;
    }
  }

  </style>