油烟

zhanghua

2023-09-28 fa1c7589a74d3f48d74a7a9ee98ac57335b4502a

 src/views/layout/components/Menu/index.vue

@@ -5,10 +5,12 @@
      <h2 class="siderbar-title" @click="toHome()">遂昌执法平台</h2>
      <el-scrollbar>
        <!-- 路由 -->
        <el-menu router
                <el-menu
                    router
                 class="el-menu-vertical"
                 :default-active="$route.path.name"
                 @select="handleSelect">
                    @select="handleSelect"
                >
          <el-submenu
            :index="String(menu.id)"
            v-for="menu in menuList"
@@ -17,21 +19,37 @@
          >
            <template slot="title">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon class="icon-title" :icon-class="menu.icon"></svg-icon>
                                <svg-icon
                                    class="icon-title"
                                    v-bind:class="menu.icon"
                                    :icon-class="menu.icon"
                                ></svg-icon>
              </span>
              <span class="fisrtSpan">{{ menu.title }}</span>
            </template>
            <template v-if="menu.menuVoArrayList.length > 0">
              <template v-for="secondMenu in menu.menuVoArrayList">
                            <template
                                v-for="secondMenu in menu.menuVoArrayList"
                            >
                <el-submenu
                  :key="secondMenu.id"
                  v-if="secondMenu.menuVoArrayList.length > 0"
                  :index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
                                    :index="
                                        secondMenu.url
                                            ? secondMenu.url
                                            : secondMenu.id.toString()
                                    "
                  class="secondMenu"
                  :class="secondMenu.menuVoArrayList.length > 0?'is-Active':'none-Active'"
                                    :class="
                                        secondMenu.menuVoArrayList.length > 0
                                            ? 'is-Active'
                                            : 'none-Active'
                                    "
                >
                  <template slot="title">
                    <span class="secondSpan">{{ secondMenu.title }}</span>
                                        <span class="secondSpan">{{
                                            secondMenu.title
                                        }}</span>
                  </template>
                  <el-menu-item
                    v-for="thirdMenu in secondMenu.menuVoArrayList"
@@ -49,7 +67,8 @@
                  v-else
                  :index="`${secondMenu.id}`"
                  :route="{ name: secondMenu.url }"
                  >{{ secondMenu.title }}</el-menu-item>
                                    >{{ secondMenu.title }}</el-menu-item
                                >
              </template>
            </template>
            <el-menu-item
@@ -115,6 +134,9 @@
    height: 36px;
  }
}
.smoke {
    padding: 5px;
}
.el-aside {
  background: #313350;
  color: #e9eef3;
@@ -164,7 +186,7 @@
        }
        .el-menu{
          .is-active {
            background-color: #409EFF;
                        background-color: #409eff;
            color: #fff;
          }
          .is-Active{
@@ -179,7 +201,7 @@
          // border-bottom: 0.5px solid #7c7979;
        }
        .el-menu-item:hover {
          background-color: #409EFF;
                    background-color: #409eff;
          color: #22d3eb;
        }
        .is-opened{
@@ -190,13 +212,12 @@
        .secondMenu{
          //border-bottom:1px solid #ccc ;
          .is-active {
            background-color: #409EFF;
                        background-color: #409eff;
            color: #22d3eb;
          }
        }
      }
      .secondMenu {

        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }
@@ -211,7 +232,7 @@
          }
        }
        .is-active {
          background-color: #409EFF;
                    background-color: #409eff;
          color: #fff;
        }
      }