From 9f5e18cc415cd3fef13f105ffeabae3c01ba9665 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 18 六月 2026 13:02:18 +0800
Subject: [PATCH] 样式修改
---
src/assets/styles/sidebar.scss | 573 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 335 insertions(+), 238 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 88be1a9..d75e1f2 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1,238 +1,335 @@
-#app {
-
- .main-container {
- min-height: 100%;
- transition: margin-left .28s;
- margin-left: $base-sidebar-width;
- position: relative;
- }
-
- .sidebarHide {
- margin-left: 0!important;
- }
-
- .sidebar-container {
- -webkit-transition: width .28s;
- transition: width 0.28s;
- width: $base-sidebar-width !important;
- background-color: $base-menu-background;
- height: 100%;
- position: fixed;
- font-size: 0px;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 1001;
- overflow: hidden;
- -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
- box-shadow: 2px 0 6px rgba(0,21,41,.35);
-
- // reset element-ui css
- .horizontal-collapse-transition {
- transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
- }
-
- .scrollbar-wrapper {
- overflow-x: hidden !important;
- }
-
- .el-scrollbar__bar.is-vertical {
- right: 0px;
- }
-
- .el-scrollbar {
- height: 100%;
- }
-
- &.has-logo {
- .el-scrollbar {
- height: calc(100% - 50px);
- }
- }
-
- .is-horizontal {
- display: none;
- }
-
- a {
- display: inline-block;
- width: 100%;
- overflow: hidden;
- }
-
- .svg-icon {
- margin-right: 16px;
- }
-
- .el-menu {
- border: none;
- height: 100%;
- width: 100% !important;
- }
-
- .el-menu-item, .menu-title {
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- white-space: nowrap !important;
- }
-
- .el-menu-item .el-menu-tooltip__trigger {
- display: inline-block !important;
- }
-
- // menu hover
- .sub-menu-title-noDropdown,
- .el-sub-menu__title {
- &:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
- }
- }
-
- & .theme-dark .is-active > .el-sub-menu__title {
- color: $base-menu-color-active !important;
- }
-
- & .nest-menu .el-sub-menu>.el-sub-menu__title,
- & .el-sub-menu .el-menu-item {
- min-width: $base-sidebar-width !important;
-
- &:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
- }
- }
-
- & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
- & .theme-dark .el-sub-menu .el-menu-item {
- background-color: $base-sub-menu-background !important;
-
- &:hover {
- background-color: $base-sub-menu-hover !important;
- }
- }
- }
-
- .hideSidebar {
- .sidebar-container {
- width: 54px !important;
- }
-
- .main-container {
- margin-left: 54px;
- }
-
- .sub-menu-title-noDropdown {
- padding: 0 !important;
- position: relative;
-
- .el-tooltip {
- padding: 0 !important;
-
- .svg-icon {
- margin-left: 20px;
- }
- }
- }
-
- .el-sub-menu {
- overflow: hidden;
-
- &>.el-sub-menu__title {
- padding: 0 !important;
-
- .svg-icon {
- margin-left: 20px;
- }
-
- }
- }
-
- .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;
- }
- }
- }
- }
- }
-
- .el-menu--collapse .el-menu .el-sub-menu {
- min-width: $base-sidebar-width !important;
- }
-
- // mobile responsive
- .mobile {
- .main-container {
- margin-left: 0px;
- }
-
- .sidebar-container {
- transition: transform .28s;
- width: $base-sidebar-width !important;
- }
-
- &.hideSidebar {
- .sidebar-container {
- pointer-events: none;
- transition-duration: 0.3s;
- transform: translate3d(-$base-sidebar-width, 0, 0);
- }
- }
- }
-
- .withoutAnimation {
-
- .main-container,
- .sidebar-container {
- transition: none;
- }
- }
-}
-
-// when menu collapsed
-.el-menu--vertical {
- &>.el-menu {
- .svg-icon {
- margin-right: 16px;
- }
- }
-
- .nest-menu .el-sub-menu>.el-sub-menu__title,
- .el-menu-item {
- &:hover {
- // you can use $sub-menuHover
- background-color: rgba(0, 0, 0, 0.06) !important;
- }
- }
-
- // the scroll bar appears when the sub-menu is too long
- >.el-menu--popup {
- max-height: 100vh;
- overflow-y: auto;
-
- &::-webkit-scrollbar-track-piece {
- background: #d3dce6;
- }
-
- &::-webkit-scrollbar {
- width: 6px;
- }
-
- &::-webkit-scrollbar-thumb {
- background: #99a9bf;
- border-radius: 20px;
- }
- }
-}
+#app {
+ .main-container {
+ min-height: 100vh;
+ margin-left: var(--sidebar-width);
+ transition: margin-left 0.25s ease;
+ position: relative;
+ background: transparent;
+ }
+
+ .sidebarHide {
+ margin-left: 0 !important;
+ }
+
+ .sidebar-container {
+ transition: width 0.25s ease;
+ width: var(--sidebar-width) !important;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ padding-top: var(--topbar-height);
+ left: 0;
+ z-index: 1001;
+ overflow: hidden;
+ font-size: 0;
+ background: var(--surface-base);
+ border-right: 1px solid var(--surface-border);
+ box-shadow: none;
+
+ > * {
+ position: relative;
+ z-index: 1;
+ }
+
+ .horizontal-collapse-transition {
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+ }
+
+ .scrollbar-wrapper {
+ overflow-x: hidden !important;
+ overflow-y: auto !important;
+ }
+
+ .el-scrollbar__bar.is-vertical {
+ right: 2px;
+ }
+
+ .el-scrollbar {
+ height: 100%;
+ }
+
+ &.has-logo {
+ .el-scrollbar {
+ height: calc(100% - 64px);
+ }
+ }
+
+ .is-horizontal {
+ display: none;
+ }
+
+ a {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ .el-menu {
+ border: none !important;
+ height: 100%;
+ width: 100% !important;
+ padding: 8px 0;
+ background: transparent !important;
+ }
+
+ .el-menu-item,
+ .menu-title {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ }
+
+ .submenu-title-noDropdown,
+ .el-menu-item {
+ display: flex;
+ align-items: center;
+ }
+
+ .submenu-title-noDropdown,
+ .el-sub-menu__title,
+ .el-menu-item {
+ width: 100% !important;
+ margin: 0 !important;
+ height: 44px;
+ line-height: 44px;
+ border-radius: 0;
+ padding-left: 18px !important;
+ padding-right: 18px !important;
+ box-sizing: border-box;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ color: var(--el-color-primary);
+ background: transparent;
+ border: none !important;
+ position: relative;
+ font-size: 14px;
+ border-bottom: 1px dashed rgba(var(--el-color-primary-rgb), 0.35) !important;
+
+ .svg-icon {
+ margin-right: 12px;
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+ flex-shrink: 0;
+ transition: transform 0.3s ease;
+ }
+ }
+
+ .el-sub-menu {
+ &.is-opened {
+ > .el-sub-menu__title {
+ color: var(--el-color-primary) !important;
+ font-weight: 600;
+
+ .el-sub-menu__icon-arrow {
+ transform: rotate(180deg) !important;
+ color: var(--el-color-primary) !important;
+ }
+ }
+ }
+
+ .el-sub-menu__icon-arrow {
+ position: absolute !important;
+ right: 16px !important;
+ top: 50% !important;
+ margin-top: -6px !important;
+ width: 12px !important;
+ height: 12px !important;
+ font-size: 12px !important;
+ display: inline-block !important;
+ transition: transform 0.3s ease !important;
+ color: var(--el-color-primary) !important;
+ z-index: 2;
+ }
+ }
+
+ .submenu-title-noDropdown:hover,
+ .el-sub-menu__title:hover,
+ .el-menu-item:hover {
+ background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
+
+ .svg-icon {
+ color: var(--el-color-primary) !important;
+ }
+
+ .el-sub-menu__icon-arrow {
+ color: var(--el-color-primary) !important;
+ }
+ }
+
+ .el-menu-item.is-active,
+ .el-sub-menu.is-active > .el-sub-menu__title {
+ color: var(--el-color-primary) !important;
+ background: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ box-shadow: none;
+ font-weight: 600;
+
+ .svg-icon {
+ color: var(--el-color-primary) !important;
+ }
+ }
+
+ & .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .el-sub-menu .el-menu-item {
+ height: 44px;
+ line-height: 44px;
+ margin: 0 !important;
+ padding-left: 38px !important;
+ border-radius: 0;
+ font-size: 14px;
+ background-color: transparent !important;
+ border-bottom: 1px dashed rgba(var(--el-color-primary-rgb), 0.3) !important;
+
+ &.is-active {
+ background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ }
+
+ &:hover {
+ background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
+
+ .svg-icon {
+ color: var(--el-color-primary) !important;
+ }
+ }
+ }
+ }
+
+ .hideSidebar {
+ .sidebar-container {
+ width: var(--sidebar-collapsed-width) !important;
+
+ .el-menu-item,
+ .el-sub-menu__title {
+ padding: 0 !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 4px 8px !important;
+ width: calc(var(--sidebar-collapsed-width) - 16px) !important;
+ border-bottom: none !important;
+
+ .svg-icon {
+ margin-right: 0;
+ }
+
+ .menu-title,
+ .el-sub-menu__icon-arrow {
+ display: none;
+ }
+ }
+ }
+
+ .main-container {
+ margin-left: var(--sidebar-collapsed-width);
+ }
+ }
+
+ .el-menu--collapse .el-menu .el-sub-menu {
+ min-width: var(--sidebar-width) !important;
+ }
+
+ .mobile {
+ .main-container {
+ margin-left: 0;
+ }
+
+ .sidebar-container {
+ transition: transform 0.25s;
+ width: var(--sidebar-width) !important;
+ padding-top: 0;
+ z-index: 1004;
+ }
+
+ &.hideSidebar {
+ .sidebar-container {
+ pointer-events: none;
+ transition-duration: 0.3s;
+ transform: translate3d(calc(-1 * var(--sidebar-width)), 0, 0);
+ }
+ }
+ }
+
+ .withoutAnimation {
+ .main-container,
+ .sidebar-container {
+ transition: none;
+ }
+ }
+}
+
+.el-menu--vertical {
+ & > .el-menu {
+ .svg-icon {
+ margin-right: 12px;
+ }
+ }
+
+ .nest-menu .el-sub-menu > .el-sub-menu__title,
+ .el-menu-item {
+ min-width: 0 !important;
+ margin: 0;
+ width: 100%;
+ height: 44px;
+ line-height: 44px;
+ padding-left: 18px !important;
+ padding-right: 18px !important;
+ box-sizing: border-box;
+ border-radius: 0;
+ color: var(--el-color-primary);
+ background: transparent;
+ transition: all 0.2s ease;
+ border-bottom: 1px dashed rgba(var(--el-color-primary-rgb), 0.35);
+
+ &:hover {
+ background: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
+ }
+
+ &.is-active {
+ background: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
+ font-weight: 600;
+ box-shadow: none;
+ }
+ }
+
+ > .el-menu--popup {
+ max-height: 100vh;
+ overflow: hidden;
+ padding: 8px 0;
+ border-radius: 0;
+ border: 1px solid var(--surface-border);
+ box-shadow: var(--shadow-sm);
+ background: var(--surface-base);
+ backdrop-filter: none;
+
+ > .el-menu {
+ max-height: calc(100vh - 16px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ background: transparent !important;
+
+ &::-webkit-scrollbar {
+ width: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--sidebar-muted);
+ border-radius: 4px;
+ }
+ }
+ }
+}
+
+@keyframes sidebarActiveFlow {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
--
Gitblit v1.9.3