From 6c59718662d772c5eaeda72826711b39a2e01c1d Mon Sep 17 00:00:00 2001
From: hailin <1356886193@qq.com>
Date: 星期二, 08 八月 2023 13:27:34 +0800
Subject: [PATCH] 最后 一舞
---
src/styles/sidebar.scss | 156 +++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 136 insertions(+), 20 deletions(-)
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index c803516..5d56d60 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -69,11 +69,38 @@
}
// menu hover
- .submenu-title-noDropdown,
- .el-submenu__title {
+
+ .el-submenu__title,.el-tooltip{
+ border-radius: 8px;
+ overflow: hidden;
&:hover {
- background-color: $menuHover !important;
+ background-color: $menuHover !important;
+ color: $menuActiveText !important;
}
+ }
+ .submenu-title-noDropdown{
+ &:hover {
+ background-color:transparent !important;
+ // background-color: $menuBg !important;
+ // border-radius: 8px;
+ // overflow: hidden;
+ color: $menuActiveText !important;
+
+ }
+ }
+ .el-submenu.is-active{
+ .popMenu{
+ background-color: #fff !important;
+ }
+ .el-submenu__title{
+ background-color: #ffffff !important;
+ color: $menuActiveText !important;
+ &:has(.is-active){
+ background-color: #ffffff !important;
+ color: $menuActiveText !important;
+ }
+ }
+
}
@@ -84,30 +111,58 @@
background-color: $subMenuBg !important;
&:hover {
+
background-color: $subMenuHover !important;
}
}
+ // .is-active.el-submenu{
+ // color: $subMenuActiveText !important;
+
+ // }
.is-active.el-menu-item {
- color: $subMenuActiveText !important;
- border-right: 3px solid $menuActiveText;
- background-color: $menuHover !important;
+ // color: $subMenuActiveText !important;
+ // border-right: 3px solid $menuActiveText;
+ // background-color: $menuHover !important;
+ // background: #fff !important;
+ .el-tooltip{
+ color: $subMenuActiveText !important;
+ // border-right: 3px solid $menuActiveText;
+ background-color: $menuHover !important;
+ border-radius: 8px;
+ }
+
}
}
.hideSidebar {
.sidebar-container {
- width: 54px !important;
+ // width: 54px !important;//鍘熸潵鐨勬牱寮�
+ width: 100px !important;//淇敼鍚庣殑鏍峰紡
}
.main-container {
- margin-left: 54px;
+ // margin-left: 54px;//鍘熸潵鐨勬牱寮�
+ margin-left: 100px;//淇敼鍚庣殑鏍峰紡
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
+ .el-tooltip{
+ width: 80px !important;
+ line-height: normal;
+ height: 80px !important;
+ padding: 0 !important;
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ line-height: normal;
+ justify-content: center;
+ position: static !important;
+
+ }
.el-tooltip {
padding: 0 !important;
@@ -116,28 +171,70 @@
}
.sub-el-icon {
- margin-left: 19px;
+ font-size: 30px;
+ margin: 0px;
}
}
}
.el-submenu {
overflow: hidden;
-
- &>.el-submenu__title {
+
+ &>.el-submenu__title{
+ // width: auto;
+ // height: auto;
+ width: 80px;
+ line-height: normal;
+ height: 80px !important;
padding: 0 !important;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
.svg-icon {
margin-left: 20px;
}
.sub-el-icon {
- margin-left: 19px;
+ // margin-left: 19px;
+ font-size: 30px;
+ margin: 0px;
+
}
.el-submenu__icon-arrow {
display: none;
}
+ }
+ &>.el-menu--vertical.popMenu{
+ .el-menu{
+ width: 60px;
+ height: 60px !important;
+ line-height: normal !important;
+ // >a{
+ // width: 100%;
+ // height: 60px !important;
+ // }
+ }
+ .nest-menu{
+ width: 60px;
+ height: 60px !important;
+ line-height: normal !important;
+ background-color: #fff !important;
+ // margin: 0 auto;
+ // >a {
+ // height: 100%;
+ // }
+ .el-menu-item{
+ padding: 0px !important;
+ width: 60px;
+ height: 30px !important;
+ line-height: normal !important;
+ margin: 0 auto;
+ }
+ }
+
}
}
@@ -145,11 +242,12 @@
.el-submenu {
&>.el-submenu__title {
&>span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
+ // height: 0;
+ // width: 0;
+ // overflow: hidden;
+ // visibility: hidden;
+ // display: inline-block;
+ // 涓婇潰鏄殣钘忔枃瀛�
}
}
}
@@ -192,6 +290,7 @@
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
+ background-color: $subMenuBg !important;
.svg-icon {
margin-right: 16px;
}
@@ -200,12 +299,29 @@
margin-left: -2px;
}
}
-
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
+ width: 100px;
+ height: 30px !important;
+ min-width: 100px !important;
+ line-height: 30px;
+ text-align: left !important;
+ font-size: 10px;
+ justify-content: start !important;
+ background-color: $subMenuBg !important;
+ color: $subMenuHover !important;
+ .svg-icon{
+ margin-right: 0px;
+ display: none;
+ }
+ span{
+ text-align: center;
+ }
&:hover {
// you can use $subMenuHover
- background-color: $menuHover !important;
+ background-color: $subMenuHover !important;
+ color: $subMenuBg !important;
+ // background-color: red !important;
}
}
@@ -213,7 +329,7 @@
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
-
+ background-color: #fff;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
--
Gitblit v1.9.3