From b945f5a17664823e5ab2967e61bc3f3d38aa4087 Mon Sep 17 00:00:00 2001
From: hailin <1356886193@qq.com>
Date: 星期二, 18 七月 2023 08:57:18 +0800
Subject: [PATCH] 修改侧边导航栏
---
src/styles/sidebar.scss | 153 ++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 134 insertions(+), 19 deletions(-)
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index c803516..19c677f 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{
+
&:hover {
background-color: $menuHover !important;
+ border-radius: 8px;
+ overflow: hidden;
+ 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;
+ border-radius: 8px;
+ overflow: hidden;
+ color: $menuActiveText !important;
+ }
+
}
@@ -88,26 +115,53 @@
}
}
+ // .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 +170,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 +241,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 +289,7 @@
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
+ background-color: $subMenuBg !important;
.svg-icon {
margin-right: 16px;
}
@@ -200,12 +298,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 +328,7 @@
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
-
+ background-color: #fff;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
--
Gitblit v1.9.3