From 0713d3c230392665762cc778bae65cfbcf839615 Mon Sep 17 00:00:00 2001
From: zh <314079846@qq.com>
Date: 星期一, 25 十一月 2024 12:38:12 +0800
Subject: [PATCH] 样式修改
---
src/assets/styles/sidebar.scss | 39 ++++++++++++++++++++-------------------
src/layout/index.vue | 1 +
src/layout/components/Sidebar/index.vue | 7 ++-----
3 files changed, 23 insertions(+), 24 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 2db4a1e..57e3b43 100644
--- a/src/assets/styles/sidebar.scss
+++ b/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;
}
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 8ee9d82..af96eeb 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3d5c4ef..a4542d5 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -80,6 +80,7 @@
},
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+
}
}
}
--
Gitblit v1.8.0