diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 5f508a4..450167c 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -129,7 +129,7 @@ aside { width: 100%; background: #fff; box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58); - border-radius: 8px; + border-radius: 8px 8px 0 0px; overflow-y: auto; } diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index d62b148..85f1ec0 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -81,7 +81,8 @@ .submenu-title-noDropdown, .el-submenu__title { &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + color: #f8414d !important; + background-color: rgba(255, 72, 83, 0.2) !important; } } @@ -100,14 +101,15 @@ min-width: $base-sidebar-width !important; &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + color: #f8414d !important; + background-color: rgba(255, 72, 83, 0.2) !important; } } & .theme-dark .nest-menu .el-submenu > .el-submenu__title, & .theme-dark .el-submenu .el-menu-item { // background-color: $base-sub-menu-background !important; - background-color: #faf7f7; + background-color: #faf7f7 !important; &:hover { // background-color: $base-sub-menu-hover !important; @@ -210,7 +212,8 @@ .el-menu-item { &:hover { // you can use $subMenuHover - background-color: rgba(0, 0, 0, 0.06) !important; + color: #f8414d !important; + background-color: rgba(255, 72, 83, 0.2) !important; } } diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 14f4bcd..79b34db 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -9,7 +9,7 @@ $yellow: #fec171; $panGreen: #30b08f; // 默认菜单主题风格 -$base-menu-color: #4c4949; +$base-menu-color: #806e6e; $base-menu-color-active: #f4f4f5; $base-menu-background: #304156; $base-logo-title-color: #ffffff; @@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17; $base-sub-menu-hover:#001528; */ -$base-sidebar-width: 200px; +$base-sidebar-width: 230px; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index 4853fbb..79b451b 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -1,22 +1,47 @@