样式修改

zh

2024-11-25 0713d3c230392665762cc778bae65cfbcf839615

样式修改

 src/assets/styles/sidebar.scss

@@ -81,33 +81,33 @@
    }

    // menu hover
    .theme-dark .sub-menu-title-noDropdown,
    .theme-dark .el-sub-menu__title {
    .theme-dark .submenu-title-noDropdown,
    .theme-dark .el-submenu__title {
      &:hover {
        background-color: $base-sub-menu-title-hover !important;
      }
    }
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
      }
    }

    & .theme-dark .is-active > .el-sub-menu__title {
    & .theme-dark .is-active > .el-submenu__title {
      color: $base-menu-color-active !important;
    }

    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
    & .nest-menu .el-submenu > .el-submenu__title,
    & .el-submenu .el-menu-item {
      min-width: $base-sidebar-width !important;
      &:hover {
        background-color: rgba(0, 0, 0, 0.1) !important;
      }
    }

    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .theme-dark .el-sub-menu .el-menu-item {
    & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
    & .theme-dark .el-submenu .el-menu-item {
      background-color: $base-sub-menu-background !important;

      &:hover {
@@ -115,17 +115,17 @@
      }
    }

    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
    & .theme-dark .el-menu-item {
      &:hover {
        // you can use $sub-menuHover
        // you can use $submenuHover
        background-color: $base-menu-hover !important;
      }
    }
    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .nest-menu .el-submenu > .el-submenu__title,
    & .el-menu-item {
      &:hover {
        // you can use $sub-menuHover
        // you can use $submenuHover
        background-color: rgba(0, 0, 0, 0.04) !important;
      }
    }
@@ -140,7 +140,7 @@
      padding-left: 54px;
    }

    .sub-menu-title-noDropdown {
    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;

@@ -153,10 +153,11 @@
      }
    }

    .el-sub-menu {
    .el-submenu {
      background: red;
      overflow: hidden;

      & > .el-sub-menu__title {
      & > .el-submenu__title {
        padding: 0 !important;

        .svg-icon {
@@ -166,8 +167,8 @@
    }

    .el-menu--collapse {
      .el-sub-menu {
        & > .el-sub-menu__title {
      .el-submenu {
        & > .el-submenu__title {
          & > span {
            height: 0;
            width: 0;
@@ -187,7 +188,7 @@
    }
  }

  .el-menu--collapse .el-menu .el-sub-menu {
  .el-menu--collapse .el-menu .el-submenu {
    min-width: $base-sidebar-width !important;
  }


 src/layout/components/Sidebar/index.vue

@@ -1,8 +1,5 @@
<template>
    <div
        :class="{ 'has-logo': showLogo }"
        :style="{ backgroundColor: variables.menuLightBackground }"
    >
    <div :class="{ 'has-logo': showLogo }">
        <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
        <div class="hamburger-container">
            <div class="border">
@@ -22,7 +19,7 @@
            <el-menu
                :default-active="activeMenu"
                :collapse="isCollapse"
                :background-color="variables.menuLightBackground"
                background-color="#F3F7FC"
                :text-color="variables.menuLightColor"
                :unique-opened="true"
                :active-text-color="settings.theme"

 src/layout/index.vue

@@ -80,6 +80,7 @@
        },
        handleClickOutside() {
            this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
            
        }
    }
}