From 5d36e1f987ef21e44ded2e8a1d06c28094ec1e76 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期六, 19 四月 2025 12:39:47 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
zhitan-vue/src/assets/styles/sidebar.scss | 149 +++++++++++++++++++++++++++++--------------------
1 files changed, 87 insertions(+), 62 deletions(-)
diff --git a/zhitan-vue/src/assets/styles/sidebar.scss b/zhitan-vue/src/assets/styles/sidebar.scss
index ea9eb7e..0d8d071 100644
--- a/zhitan-vue/src/assets/styles/sidebar.scss
+++ b/zhitan-vue/src/assets/styles/sidebar.scss
@@ -1,8 +1,9 @@
.themeDark {
#app {
.el-menu-item.is-active {
- background: #3271eb !important;
- border-radius: 30px 30px 30px 30px !important;
+ // background: #3271eb !important;
+ // border-radius: 30px 30px 30px 30px !important;
+ color: #fff;
}
.el-scrollbar {
@@ -10,11 +11,9 @@
margin: 0 auto;
}
- // .is-active .menu-title {
- // color: #fff !important;
- // }
.main-container {
+ background-color: #110f2e !important;
height: 100%;
transition: margin-left 0.28s;
margin-left: $base-sidebar-width;
@@ -30,16 +29,16 @@
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
- height: 100%;
+ height: calc(100% - 60px) !important;
position: fixed;
- top: 0;
+ top: 60px;
bottom: 0;
left: 0;
- z-index: 1001;
+ z-index: 999;
overflow: hidden;
+ background-color: #002866 !important;
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-
font-family: OPPOSans, OPPOSans;
font-weight: 500;
font-size: 18px;
@@ -53,10 +52,11 @@
.scrollbar-wrapper {
overflow-x: hidden !important;
+ height: calc(100% - 290px) !important;
}
.el-scrollbar__bar.is-vertical {
- right: 0px;
+ right: 0 !important;
}
.el-scrollbar {
@@ -81,12 +81,13 @@
.svg-icon {
margin-right: 16px;
+ font-size: 14px;
}
.el-menu {
border: none;
height: 100%;
- width: 95%;
+ // width: 95%;
margin: 0 auto;
}
@@ -94,7 +95,7 @@
.menu-title {
overflow: hidden !important;
font-weight: 400 !important;
- font-size: 18px !important;
+ font-size: 14px !important;
}
// @media (min-width: 1440px) {
@@ -127,12 +128,13 @@
.sub-menu-title-noDropdown,
.el-sub-menu__title {
&:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
+ background-color: rgba(0, 0, 0, 0.2) !important;
}
}
& .theme-dark .is-active > .el-sub-menu__title {
color: $base-menu-color-active !important;
+ background-color: rgba(0, 0, 0, 0.2) !important;
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -141,18 +143,18 @@
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
- border-radius: 30px 30px 30px 30px !important;
+ // border-radius: 30px 30px 30px 30px !important;
}
}
// 瀛愮骇item
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
- border-radius: 30px 30px 30px 30px !important;
+ // border-radius: 30px 30px 30px 30px !important;
&:hover {
background-color: $base-sub-menu-hover !important;
- border-radius: 30px 30px 30px 30px !important;
+ // border-radius: 30px 30px 30px 30px !important;
}
}
}
@@ -192,22 +194,32 @@
}
.el-menu--collapse {
- .el-sub-menu {
- & > .el-sub-menu__title {
- & > span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- & > i {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
+ width: 54px !important;
+
+ /* 娓呴櫎鍚庝唬閫夋嫨鍣ㄤ腑骞叉壈灞呬腑鐨勬牱寮� */
+ .el-sub-menu, .el-menu-item {
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 100% !important;
+
+ /* 璁╁浘鏍囧拰鑿滃崟椤瑰眳涓� */
+ .el-menu-item, .el-sub-menu__title {
+ width: 36px !important;
+ min-width: 36px !important;
+ height: 38px !important;
+ line-height: 38px !important;
+ margin: 4px 9px !important; /* 绮剧‘璁＄畻灞呬腑杈硅窛 */
+ padding: 0 !important;
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ border-radius: 4px !important;
+ }
+
+ /* 纭繚鍥炬爣灞呬腑 */
+ .svg-icon, .el-icon {
+ margin: 0 !important;
+ padding: 0 !important;
}
}
}
@@ -285,8 +297,8 @@
.themeLight {
#app {
.el-menu-item.is-active {
- background: #e0eafc !important;
- border-radius: 30px 30px 30px 30px !important;
+
+ // border-radius: 30px 30px 30px 30px !important;
}
.el-scrollbar {
@@ -295,6 +307,7 @@
}
.main-container {
+ background-color: #f7f8fa;
height: 100%;
transition: margin-left 0.28s;
margin-left: $base-sidebar-width;
@@ -310,12 +323,12 @@
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
- height: 100%;
+ height: calc(100% - 60px) !important;
position: fixed;
- top: 0;
+ top: 60px;
bottom: 0;
left: 0;
- z-index: 1001;
+ z-index: 999;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
box-shadow: none;
@@ -358,19 +371,19 @@
display: inline-block;
width: 100%;
overflow: hidden;
- border-radius: 30px;
+ // border-radius: 30px;
}
.svg-icon {
margin-right: 16px;
- font-size: 18px;
+ font-size: 14px;
color: #C3C3C3;
}
.el-menu {
border: none;
height: 100%;
- width: 95%;
+ // width: 95%;
margin: 0 auto;
}
@@ -378,7 +391,7 @@
.menu-title {
overflow: hidden !important;
font-weight: 400 !important;
- font-size: 18px !important;
+ font-size: 14px !important;
}
// @media (min-width: 1440px) {
@@ -415,8 +428,10 @@
}
}
- & .theme-dark .is-active > .el-sub-menu__title {
- // color: $base-menu-color-active !important;
+
+ & .theme-light .is-active > .el-sub-menu__title {
+ color: $--color-primary !important;
+ // background-color: #eaeff8 !important;
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -425,7 +440,7 @@
&:hover {
background-color: #E0EAFC !important;
- border-radius: 30px 30px 30px 30px !important;
+ // border-radius: 30px 30px 30px 30px !important;
}
}
@@ -433,11 +448,11 @@
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
background-color: #E0EAFC !important;
- border-radius: 30px 30px 30px 30px !important;
+ // border-radius: 30px 30px 30px 30px !important;
&:hover {
background-color: #E0EAFC !important;
- border-radius: 30px 30px 30px 30px !important;
+ // border-radius: 30px 30px 30px 30px !important;
}
}
}
@@ -477,22 +492,32 @@
}
.el-menu--collapse {
- .el-sub-menu {
- & > .el-sub-menu__title {
- & > span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- & > i {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
+ width: 54px !important;
+
+ /* 娓呴櫎鍚庝唬閫夋嫨鍣ㄤ腑骞叉壈灞呬腑鐨勬牱寮� */
+ .el-sub-menu, .el-menu-item {
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 100% !important;
+
+ /* 璁╁浘鏍囧拰鑿滃崟椤瑰眳涓� */
+ .el-menu-item, .el-sub-menu__title {
+ width: 36px !important;
+ min-width: 36px !important;
+ height: 38px !important;
+ line-height: 38px !important;
+ margin: 4px 9px !important; /* 绮剧‘璁＄畻灞呬腑杈硅窛 */
+ padding: 0 !important;
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ border-radius: 4px !important;
+ }
+
+ /* 纭繚鍥炬爣灞呬腑 */
+ .svg-icon, .el-icon {
+ margin: 0 !important;
+ padding: 0 !important;
}
}
}
--
Gitblit v1.9.3