yxh
22 小时以前 a79d67f8a9a9fa02f9d25f987b9611af965c484f
src/assets/styles/sidebar.scss
@@ -67,17 +67,23 @@
      width: 100% !important;
    }
    // 菜单字号:比正文大两号(正文 16px → 菜单 18px)
    .el-menu-item,
    .el-submenu__title {
      font-size: $opo-font-size-menu;
    }
    .el-menu-item, .el-submenu__title {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
    // menu hover
    // menu hover(深色底上用透白,原来 rgba(0,0,0,.06) 在深色上看不出来)
    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
      }
    }
@@ -90,7 +96,7 @@
      min-width: $base-sidebar-width !important;
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
      }
    }
@@ -101,6 +107,36 @@
      &:hover {
        background-color: $base-sub-menu-hover !important;
      }
    }
    // ---- 当前选中菜单高亮 ----
    // 原状:Element 编译出的 .el-menu-item.is-active 是主色文字,
    // 在同样是青色的深色侧边栏上几乎看不见 → 改为"品牌青实底 + 白字 + 左侧亮条"
    & .el-menu-item.is-active {
      position: relative;
      color: #ffffff !important;
      background-color: $opo-primary !important;
      font-weight: 500;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: #ffffff;
      }
      &:hover {
        background-color: $opo-primary !important;
      }
    }
    // 父级分组只是"包含选中项",用弱一点的底色,避免和叶子项一样重
    & .el-submenu.is-active > .el-submenu__title {
      background-color: rgba(255, 255, 255, 0.1) !important;
      color: #ffffff !important;
    }
  }
@@ -198,8 +234,8 @@
  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {
    &:hover {
      // you can use $subMenuHover
      background-color: rgba(0, 0, 0, 0.06) !important;
      // 深色菜单用透白覆盖
      background-color: rgba(255, 255, 255, 0.08) !important;
    }
  }