1.样式修改

gaoluyang

2 天以前 896d6b7d1962ccd56ce1e30ccc6b68bf2e54b05c

 src/layout/components/Sidebar/index.vue

@@ -2,23 +2,11 @@
  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">

    <logo v-if="showLogo" :collapse="isCollapse" />

    <el-scrollbar wrap-class="scrollbar-wrapper">

      <el-menu

        :default-active="activeMenu"

        :collapse="isCollapse"

        :background-color="getMenuBackground"

        :text-color="getMenuTextColor"

        :unique-opened="true"

        :active-text-color="theme"

        :collapse-transition="false"

        mode="vertical"

        :class="sideTheme"

      >

        <sidebar-item

          v-for="(route, index) in sidebarRouters"

          :key="route.path + index"

          :item="route"

          :base-path="route.path"

        />

      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground"

        :text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false"

        mode="vertical" :class="sideTheme">

        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"

          :base-path="route.path" />

      </el-menu>

    </el-scrollbar>

  </div>

@@ -48,7 +36,8 @@
  if (settingsStore.isDark) {

    return 'var(--sidebar-bg)'

  }

  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg

  // 浅色主题时，直接用主题色

  return sideTheme.value === 'theme-dark' ? variables.menuBg : settingsStore.theme

})



// 获取菜单文字颜色

@@ -71,7 +60,7 @@
<style lang="scss" scoped>

.sidebar-container {

  background-color: v-bind(getMenuBackground);

  


  .scrollbar-wrapper {

    background-color: v-bind(getMenuBackground);

  }

@@ -80,25 +69,41 @@
    border: none;

    height: 100%;

    width: 100% !important;

    
    .el-menu-item, .el-sub-menu__title {

      &:hover {

        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;

      }

    }



    .el-menu-item {

      color: v-bind(getMenuTextColor);

      
      &.is-active {

        color: var(--menu-active-text, #409eff);

        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;

      }

    }

    .el-menu-item,
    .el-sub-menu__title {
      margin-bottom: 6px;
      border-radius: 14px;
      color: v-bind(getMenuTextColor);

      &:hover {
        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
      }
    }

    .el-menu-item {
      &.is-active {
        color: v-bind(theme);
        background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
        font-weight: 600;
      }
    }


    .el-sub-menu__title {

      color: v-bind(getMenuTextColor);

    }

  }

}

</style>

    .el-sub-menu__title {
      color: v-bind(getMenuTextColor);
    }

    :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
      color: v-bind(theme) !important;
      font-weight: 600;
    }

    :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
    :deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon),
    :deep(.el-menu-item.is-active .menu-title),
    :deep(.el-menu-item.is-active .svg-icon) {
      color: v-bind(theme) !important;
    }
  }
}
</style>