ll

liukangdong

2024-08-23 15b5b761a15805719294e7660f4cb84b35f84af8

 admin/src/components/common/Menu.vue

@@ -4,15 +4,20 @@
      <el-menu
        ref="menu"
        :default-active="activeIndex"
        text-color="#fff"
        active-text-color="#fff"
        text-color="#333333"
        active-text-color="#207FF7"
        :collapse="menuData.collapse"
        :default-openeds="defaultOpeneds"
        :collapse-transition="false"
        unique-opened
        @select="handleSelect"
      >
        <MenuItems v-for="menu in menuData.list" :key="menu.index" :menu="menu" :is-root-menu="true"/>
        <MenuItems
          v-for="menu in menuData.list"
          :key="menu.index"
          :menu="menu"
          :is-root-menu="true"
        />
      </el-menu>
    </scrollbar>
  </div>
@@ -107,46 +112,49 @@
.el-menu {
  border-right: 0 !important;
  user-select: none;
  background: $primary-color !important;
  background: #fff !important;
  .el-menu-item {
    background: $primary-color;
    background: #fff;
    height: 48px;
    line-height: 48px;
    // 选中状态
    &.is-active {
      background: $primary-color-sel !important;
      background: #eff5fe !important;
    }
    // 悬浮
    &:hover {
      background-color: $primary-color-hover;
      background-color: #eff5fe;
    }
    &:focus {
      background: $primary-color;
      background: #eff5fe;
    }
  }
  // 子菜单
  .el-submenu {
    .el-submenu__title{
      background-color: $primary-color;
      background-color: #fff;
    }
    &.is-active {
      .el-submenu__title{
        background-color: $icon-background-color;
        background-color: #fff;
      }
      .el-menu .el-menu-item{
        background-color: $icon-background-color;
        background-color: #fff;
        // 悬浮
        &:hover {
          background-color: $icon-background-color;
          background-color: #eff5fe;
        }
      }
    }
    // 菜单上下箭头
    .el-submenu__title i {
      color: #f7f7f7;
      color: #979797;
      font-size: 14px;
    }
  }
  // 菜单图标
  i:not(.el-submenu__icon-arrow) {
    color: #f7f7f7 !important;
    color: #333333 !important;
    position: relative;
    top: -1px;
    // 自定义图标