web苏州:1.3级导航样式修改 2.区域巡检提测 3.消耗统计提测

unknown

2023-11-14 9c331d555ce7e82b4226556770a81c444442bb37

 web/src/views/LayoutIndex/components/LayoutAside.vue

@@ -1,75 +1,43 @@
<!-- 导航菜单 -->
<template>
  <div class="menu_index">
    <el-menu
      unique-opened
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="transparent"
      text-color="#EAEAEA"
      @select="changeRouter">
        <template v-for="item in routerList">
          <template v-if="item.children && item.children.length > 1">
    <el-menu unique-opened :default-active="$route.path" class="el-menu-vertical-demo" background-color="transparent"
      text-color="#EAEAEA" @select="changeRouter">
      <template v-for="(item, index) in  routerList">

        <template v-if="item.children && item.children.length >= 1">
            <el-submenu :key="item.name" :index="item.path">
              <template slot="title">
              <i class="icon"><img :src="menuIcons[index] ? menuIcons[index] : menuIcons[0]"></i>
                <span>{{item.meta.title}}</span>
              </template>
              <!-- <template v-for="items in item.children">
                <el-menu-item :index="items.path" :key="items.name">{{items.meta.title}}</el-menu-item>
              </template> -->


              <template v-for="three in item.children">
                <template v-if="three.children && three.children.length > 1">
              <template v-if="three.children && three.children.length >= 1">
                  <el-submenu :key="three.name" :index="three.path" class="titles_two">
                    <template slot="title">
                      <span>{{three.meta.title}}</span>
                    </template>
                    <template v-for="items in three.children">
                      <el-menu-item
                        :index="items.path" 
                  <el-menu-item class="three-menu-item" v-for=" items in three.children " :index="items.path"
                        :key="items.name">
                        {{items.meta.title}}
                      </el-menu-item>
                    </template>
                  </el-submenu>
                </template>
                <template v-else-if="three.children && three.children.length === 1">
                  <el-submenu :key="three.name" :index="three.path">
                    <template slot="title">
                      <span>{{three.meta.title}}</span>
                    </template>
                    <el-menu-item :index="three.children[0].path" :key="three.children[0].name">{{three.children[0].meta.title}}</el-menu-item>
                  </el-submenu>
                  <!-- <el-menu-item :index="three.children[0].path" :key="three.children[0].name">
                    <span slot="title">{{three.children[0].meta.title}}</span>
                  </el-menu-item> -->
                </template>
                <template v-else>
                  <el-menu-item :index="three.path" :key="three.name">
                <el-menu-item class="two-menu-item" :index="three.path" :key="three.name">
                    <span slot="title">{{three.meta.title}}</span>
                  </el-menu-item>
                </template>
              </template>


            </el-submenu>
          </template>





          <template v-else-if="item.children && item.children.length === 1">
            <el-menu-item :index="item.children[0].path" :key="item.children[0].name">
              <span slot="title">{{item.children[0].meta.title}}</span>
            </el-menu-item>
          </template>
          <template v-else>
            <el-menu-item :index="item.path" :key="item.name">
              <span slot="title">{{item.meta.title}}</span>
            </el-menu-item>
          </template>

        </template>
    </el-menu>
  </div>
@@ -81,7 +49,21 @@
  data() {
    return {
      routerList: [], // 导航栏数据
      menuIcons: []
    };
  },
  created() {
    this.menuIcons = [
      require('@/assets/icon/icon0.png'),
      require('@/assets/icon/icon1.png'),
      require('@/assets/icon/icon2.png'),
      require('@/assets/icon/icon3.png'),
      require('@/assets/icon/icon4.png'),
      require('@/assets/icon/icon5.png'),
      require('@/assets/icon/icon6.png'),
      require('@/assets/icon/icon7.png'),
      require('@/assets/icon/icon8.png'),
    ]
  },
  mounted() {
    this.routerList = this.$router.options.routes
@@ -103,47 +85,53 @@
  overflow-y: auto;
  border-top: 1px solid rgba(57,181,254,0.16);
  
  .icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;

    img {
      width: 65%;
    }
  }

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px transparent;
      background: rgba(57, 181, 254, .6);
  }

  &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px transparent;
      border-radius: 10px;
      background: rgba(57, 181, 254, .5) 5%,;
  }
}

.titles_two{
  padding-left: 15px;
  text-indent: 30px;

  /deep/ .el-menu {
    padding: 14px 0;
    background: rgba(33, 83, 139, .75) !important;
  }
}

/deep/ .el-menu {
  border-right: 0;
}

/deep/ .el-submenu .el-menu-item {
  height: 40px;
  line-height: 40px;
/deep/ .three-menu-item {
  padding-left: 50px !important;
  height: 45px;
  line-height: 45px;
}

/deep/ .two-menu-item {
  height: 45px;
  text-indent: 20px;
  line-height: 45px;
}

/deep/ .el-menu-item.is-active {
  padding-left: 45px!important;
  position: relative;
  // margin-left: 10px;
  color: #EAEAEA;
  border-radius: 3px;
  background: linear-gradient(
  90deg, 
  rgba(57, 181, 254, .5) 5%,
  transparent 95%) !important;
  background: linear-gradient(90deg, rgba(57, 181, 254, .5) 5%, rgba(57, 181, 254, .1) 100%) !important;

    &::before {
      content: '';