大屏修改

叶松

2023-12-06 df7f58f8141e97b90627e3725f12cf62a8920e94

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

@@ -1,72 +1,44 @@
<!-- 导航菜单 -->
<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-submenu :key="item.name" :index="item.path">
              <template slot="title">
                <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> -->
    <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-for="three in item.children">
                <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" :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">
                    <span slot="title">{{three.meta.title}}</span>
        <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=" three  in  item.children ">
              <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>
                  <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>


            </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 v-else>
                <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>
          <el-menu-item :index="item.path" :key="item.name">
            <span slot="title" >{{ item.meta.title }}</span>
          </el-menu-item>
        </template>

      </template>
    </el-menu>
  </div>
</template>
@@ -77,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
@@ -86,7 +72,7 @@
    // 切换路由
    changeRouter(path) {
      this.$router.push(path).catch(err => {
        console.log(err,"--");
        console.log(err, "--");
      })
    }
  },
@@ -97,66 +83,76 @@
.menu_index {
  height: 100%;
  overflow-y: auto;
  border-top: 1px solid rgba(57,181,254,0.16);
  
  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;
.titles_two {
  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: #3DC8FF;
  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: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 4px;
      height: 100%;
      background: #3DC8FF;
      border-radius: 3px 0 0 3px;
    }
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background: #3DC8FF;
    border-radius: 3px 0 0 3px;
  }
}

.three_item {
  background: #0B5274 !important;
}

/deep/ .el-submenu .el-submenu__title:hover {
  color: #3DC8FF;
  background: rgba(57,181,254,0.7) !important;
  background: rgba(57, 181, 254, 0.7) !important;
}

/deep/ .el-menu-item:hover {