From acd6bbae394c997523b5051d019e584db1845c4c Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 17 六月 2026 14:29:04 +0800
Subject: [PATCH] 样式修改
---
src/assets/styles/sidebar.scss | 581 +++++++++++----------------------------------------------
1 files changed, 115 insertions(+), 466 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 685a0eb..677396c 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -23,70 +23,8 @@
padding: 0;
font-size: 0;
background: var(--sidebar-bg);
- border-right: 1px solid rgba(255, 255, 255, 0.08);
- box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08);
- isolation: isolate;
-
- &::before {
- content: "";
- position: absolute;
- inset: -28% -52% -18% -38%;
- z-index: 0;
- pointer-events: none;
- background:
- radial-gradient(circle at 9% 12%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.62), transparent 44%),
- radial-gradient(circle at 87% 18%, rgba(56, 189, 248, 0.4), transparent 48%),
- radial-gradient(circle at 20% 82%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3), transparent 43%),
- radial-gradient(circle at 66% 62%, rgba(125, 211, 252, 0.24), transparent 50%),
- conic-gradient(
- from 210deg at 58% 38%,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.14) 0deg,
- rgba(56, 189, 248, 0.05) 76deg,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.16) 180deg,
- rgba(125, 211, 252, 0.04) 290deg,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.14) 360deg
- );
- filter: blur(7px) saturate(1.24) contrast(1.05);
- opacity: 0.96;
- transform: translate3d(0, 0, 0);
- transform-origin: 44% 58%;
- animation:
- sidebarAuroraDrift 17.9s cubic-bezier(0.31, 0.03, 0.18, 0.99) infinite,
- sidebarAuroraBreath 9.7s ease-in-out infinite,
- sidebarAuroraSkew 6.9s steps(23, end) infinite;
- }
-
- &::after {
- content: "";
- position: absolute;
- inset: 0;
- z-index: 0;
- pointer-events: none;
- background:
- linear-gradient(
- 108deg,
- transparent 10%,
- rgba(255, 255, 255, 0.17) 34%,
- rgba(255, 255, 255, 0.04) 48%,
- transparent 72%
- ),
- linear-gradient(
- 202deg,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24) 0%,
- transparent 34%,
- rgba(56, 189, 248, 0.18) 66%,
- transparent 100%
- ),
- radial-gradient(circle at 74% 12%, rgba(125, 211, 252, 0.25), transparent 50%),
- radial-gradient(circle at 22% 84%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.14), transparent 56%);
- background-size: 236% 100%, 186% 186%, 164% 164%, 180% 180%;
- background-position: 224% 0, 14% 16%, 78% 10%, 18% 82%;
- opacity: 0.52;
- transform: translate3d(0, 0, 0);
- animation:
- sidebarSheenSweep 13.1s linear infinite,
- sidebarSheenJitter 4.7s steps(31, end) infinite;
- }
+ border-right: 1px solid var(--surface-border);
+ box-shadow: var(--shadow-md);
> * {
position: relative;
@@ -112,7 +50,7 @@
&.has-logo {
.el-scrollbar {
- height: calc(100% - 78px);
+ height: calc(100% - 64px);
}
}
@@ -130,117 +68,111 @@
border: none !important;
height: 100%;
width: 100% !important;
- padding: 10px 0 16px;
- border-radius: 0;
+ padding: 12px 0;
background: transparent !important;
- box-shadow: none;
- backdrop-filter: none;
}
.el-menu-item,
- .el-sub-menu__title,
.menu-title {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
- .el-menu-item .el-menu-tooltip__trigger {
- display: inline-flex !important;
- width: 100%;
+ .submenu-title-noDropdown,
+ .el-menu-item {
+ display: flex;
align-items: center;
}
.submenu-title-noDropdown,
.el-sub-menu__title,
.el-menu-item {
- min-width: 0 !important;
- width: calc(100% - 24px) !important;
- margin: 0 12px 8px !important;
- height: 50px;
- line-height: 50px;
- border-radius: 14px;
+ width: calc(100% - 16px) !important;
+ margin: 4px 8px !important;
+ height: 44px;
+ line-height: 44px;
+ border-radius: var(--radius-md);
padding-left: 16px !important;
- padding-right: 36px !important;
+ padding-right: 36px !important; // 棰勭暀绠ご浣嶇疆
box-sizing: border-box;
- transition: all 0.28s ease;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--sidebar-text);
- background: linear-gradient(128deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
- border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ background: transparent;
+ border: none !important;
position: relative;
- overflow: hidden;
+
+ .svg-icon {
+ margin-right: 12px;
+ width: 18px;
+ height: 18px;
+ vertical-align: middle;
+ flex-shrink: 0;
+ transition: transform 0.3s ease;
+ }
}
- .submenu-title-noDropdown::after,
- .el-sub-menu__title::after,
- .el-menu-item::after {
- content: "";
- position: absolute;
- inset: 0;
- background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.16), transparent 78%);
- transform: translateX(-100%);
- opacity: 0;
- transition: transform 0.45s ease, opacity 0.26s ease;
- pointer-events: none;
+ .el-sub-menu {
+ &.is-opened {
+ > .el-sub-menu__title {
+ color: var(--menu-active-text) !important;
+
+ .el-sub-menu__icon-arrow {
+ transform: rotate(180deg) !important;
+ color: var(--menu-active-text) !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(--sidebar-text) !important;
+ z-index: 2;
+ }
}
.submenu-title-noDropdown:hover,
.el-sub-menu__title:hover,
.el-menu-item:hover {
- background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.28), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.08)) !important;
- border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.32) !important;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(8, 36, 76, 0.24);
- transform: translateX(3px);
+ background: var(--menu-hover) !important;
+ color: var(--menu-active-text) !important;
+
+ .svg-icon {
+ transform: scale(1.1);
+ }
}
- .submenu-title-noDropdown:hover::after,
- .el-sub-menu__title:hover::after,
- .el-menu-item:hover::after,
- .el-menu-item.is-active::after,
- .el-sub-menu.is-active > .el-sub-menu__title::after {
- transform: translateX(100%);
- opacity: 1;
- }
+ .el-menu-item.is-active,
+ .el-sub-menu.is-active > .el-sub-menu__title {
+ color: var(--menu-active-text) !important;
+ background: var(--menu-active-bg) !important;
+ box-shadow: var(--menu-active-glow);
+ font-weight: 600;
- & .theme-light .is-active > .el-sub-menu__title,
- & .theme-dark .is-active > .el-sub-menu__title,
- & .el-menu-item.is-active {
- color: #fff !important;
- background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important;
- background-size: 180% 180%;
- box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34));
- border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.5) !important;
- animation: sidebarActiveFlow 4.6s ease infinite;
+ .svg-icon {
+ color: var(--menu-active-text) !important;
+ }
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
- min-width: 0 !important;
- width: calc(100% - 24px) !important;
- margin: 0 12px 8px !important;
- height: 46px;
- line-height: 46px;
- padding-left: 14px !important;
- padding-right: 14px !important;
- border-radius: 12px;
- transition: all 0.24s ease;
- color: var(--sidebar-text);
- border: 1px solid rgba(255, 255, 255, 0.06) !important;
- background: linear-gradient(128deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
-
- &:hover {
- background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.07)) !important;
- border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3) !important;
- transform: translateX(2px);
- }
+ height: 40px;
+ line-height: 40px;
+ margin: 2px 8px !important;
+ padding-left: 44px !important; // 澧炲姞瀛愯彍鍗曠缉杩�
+ border-radius: var(--radius-sm);
+ font-size: 13px;
&.is-active {
- background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important;
- background-size: 180% 180%;
- color: #fff !important;
- font-weight: 500;
- box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34));
- animation: sidebarActiveFlow 4.6s ease infinite;
+ background: var(--menu-active-bg) !important;
}
}
}
@@ -248,99 +180,29 @@
.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;
+
+ .svg-icon {
+ margin-right: 0;
+ }
+
+ .menu-title,
+ .el-sub-menu__icon-arrow {
+ display: none;
+ }
+ }
}
.main-container {
margin-left: var(--sidebar-collapsed-width);
- }
-
- .submenu-title-noDropdown {
- padding: 0 !important;
- position: relative;
- display: flex !important;
- align-items: center;
- justify-content: center;
-
- .svg-icon {
- margin-right: 0;
- }
-
- .el-tooltip {
- padding: 0 !important;
- display: inline-flex !important;
- align-items: center;
- justify-content: center;
- width: 100%;
-
- .svg-icon {
- margin-left: 0;
- }
- }
-
- .el-menu-tooltip__trigger {
- width: 100%;
- display: inline-flex !important;
- align-items: center;
- justify-content: center;
-
- .svg-icon {
- width: 22px;
- height: 22px;
- margin-right: 0;
- flex-shrink: 0;
- }
- }
- }
-
- .el-sub-menu {
- overflow: hidden;
-
- & > .el-sub-menu__title {
- padding: 0 !important;
- display: flex !important;
- align-items: center;
- justify-content: center;
-
- .svg-icon {
- margin-left: 0;
- margin-right: 0;
- }
- }
- }
-
- .el-menu--collapse {
- width: 100% !important;
- padding: 12px 0 16px;
-
- > .el-menu-item,
- .el-sub-menu {
- & > .el-sub-menu__title,
- &.el-menu-item {
- width: calc(100% - 12px) !important;
- margin: 0 6px 8px !important;
- padding-left: 0 !important;
- padding-right: 0 !important;
- box-sizing: border-box;
- display: flex !important;
- align-items: center;
- justify-content: center;
-
- .svg-icon {
- width: 22px;
- height: 22px;
- margin-right: 0;
- flex-shrink: 0;
- }
-
- & > span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- }
- }
}
}
@@ -378,139 +240,61 @@
.el-menu--vertical {
& > .el-menu {
.svg-icon {
- margin-right: 10px;
+ margin-right: 12px;
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
min-width: 0 !important;
- margin: 0 10px 8px;
+ margin: 4px 10px;
width: calc(100% - 20px);
- height: 46px;
- line-height: 46px;
- padding-left: 12px !important;
- padding-right: 12px !important;
+ height: 44px;
+ line-height: 44px;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
box-sizing: border-box;
- border-radius: 12px;
+ border-radius: var(--radius-md);
color: var(--sidebar-text);
- border: 1px solid rgba(255, 255, 255, 0.06) !important;
- background: linear-gradient(128deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
- transition: all 0.24s ease;
+ background: transparent;
+ transition: all 0.2s ease;
&:hover {
- background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.07)) !important;
- border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3) !important;
- transform: translateX(2px);
+ background: var(--menu-hover) !important;
+ color: #fff !important;
}
&.is-active {
- background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important;
- background-size: 180% 180%;
- color: #fff !important;
- border-radius: 12px;
- box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34));
- border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.5) !important;
- animation: sidebarActiveFlow 4.6s ease infinite;
+ background: var(--menu-active-bg) !important;
+ color: var(--menu-active-text) !important;
+ font-weight: 600;
+ box-shadow: var(--menu-active-glow);
}
}
> .el-menu--popup {
max-height: 100vh;
overflow: hidden;
- padding: 10px;
- border-radius: 14px;
- position: relative;
- isolation: isolate;
- border: 1px solid rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.26);
- box-shadow:
- 0 18px 40px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.16),
- var(--shadow-md);
+ padding: 8px;
+ border-radius: var(--radius-lg);
+ border: 1px solid var(--surface-border);
+ box-shadow: var(--shadow-menu);
background: var(--sidebar-bg);
backdrop-filter: blur(16px);
- &::before {
- content: "";
- position: absolute;
- inset: -28% -52% -18% -38%;
- z-index: 0;
- pointer-events: none;
- background:
- radial-gradient(circle at 9% 12%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.62), transparent 44%),
- radial-gradient(circle at 87% 18%, rgba(56, 189, 248, 0.4), transparent 48%),
- radial-gradient(circle at 20% 82%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3), transparent 43%),
- radial-gradient(circle at 66% 62%, rgba(125, 211, 252, 0.24), transparent 50%),
- conic-gradient(
- from 210deg at 58% 38%,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.14) 0deg,
- rgba(56, 189, 248, 0.05) 76deg,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.16) 180deg,
- rgba(125, 211, 252, 0.04) 290deg,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.14) 360deg
- );
- filter: blur(7px) saturate(1.24) contrast(1.05);
- opacity: 0.96;
- transform: translate3d(0, 0, 0);
- transform-origin: 44% 58%;
- animation:
- sidebarAuroraDrift 17.9s cubic-bezier(0.31, 0.03, 0.18, 0.99) infinite,
- sidebarAuroraBreath 9.7s ease-in-out infinite,
- sidebarAuroraSkew 6.9s steps(23, end) infinite;
- }
-
- &::after {
- content: "";
- position: absolute;
- inset: 0;
- z-index: 0;
- pointer-events: none;
- background:
- linear-gradient(
- 108deg,
- transparent 10%,
- rgba(255, 255, 255, 0.17) 34%,
- rgba(255, 255, 255, 0.04) 48%,
- transparent 72%
- ),
- linear-gradient(
- 202deg,
- rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24) 0%,
- transparent 34%,
- rgba(56, 189, 248, 0.18) 66%,
- transparent 100%
- ),
- radial-gradient(circle at 74% 12%, rgba(125, 211, 252, 0.25), transparent 50%),
- radial-gradient(circle at 22% 84%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.14), transparent 56%);
- background-size: 236% 100%, 186% 186%, 164% 164%, 180% 180%;
- background-position: 224% 0, 14% 16%, 78% 10%, 18% 82%;
- opacity: 0.52;
- transform: translate3d(0, 0, 0);
- animation:
- sidebarSheenSweep 13.1s linear infinite,
- sidebarSheenJitter 4.7s steps(31, end) infinite;
- }
-
- > * {
- position: relative;
- z-index: 1;
- }
-
> .el-menu {
- max-height: calc(100vh - 20px);
+ max-height: calc(100vh - 16px);
overflow-y: auto;
overflow-x: hidden;
-
- &::-webkit-scrollbar-track-piece {
- background: var(--surface-muted);
- }
+ background: transparent !important;
&::-webkit-scrollbar {
- width: 5px;
+ width: 4px;
}
&::-webkit-scrollbar-thumb {
- background: var(--accent-light);
- border-radius: 10px;
+ background: var(--sidebar-muted);
+ border-radius: 4px;
}
}
}
@@ -525,140 +309,5 @@
}
100% {
background-position: 0% 50%;
- }
-}
-
-@keyframes sidebarAuroraDrift {
- 0% {
- transform: translate3d(-6.3%, -1.8%, 0) scale(1.05) rotate(-1.8deg);
- }
- 6% {
- transform: translate3d(2.2%, -4.6%, 0) scale(1.08) rotate(0.7deg);
- }
- 17% {
- transform: translate3d(-3.7%, 4.4%, 0) scale(1.11) rotate(2deg);
- }
- 27% {
- transform: translate3d(5.6%, 1.2%, 0) scale(1.03) rotate(-1deg);
- }
- 39% {
- transform: translate3d(-4.8%, -3.1%, 0) scale(1.09) rotate(1.5deg);
- }
- 52% {
- transform: translate3d(2.9%, 4.8%, 0) scale(1.04) rotate(-1.4deg);
- }
- 64% {
- transform: translate3d(-6.4%, 0.3%, 0) scale(1.08) rotate(0.5deg);
- }
- 73% {
- transform: translate3d(4.8%, -3.9%, 0) scale(1.05) rotate(1.6deg);
- }
- 81% {
- transform: translate3d(-2.4%, 2.9%, 0) scale(1.1) rotate(-0.8deg);
- }
- 92% {
- transform: translate3d(3.7%, -1.7%, 0) scale(1.06) rotate(-1.6deg);
- }
- 100% {
- transform: translate3d(-5.9%, 0.8%, 0) scale(1.08) rotate(1.2deg);
- }
-}
-
-@keyframes sidebarAuroraBreath {
- 0% {
- opacity: 0.76;
- filter: blur(5px) saturate(1.08);
- }
- 15% {
- opacity: 1;
- filter: blur(7px) saturate(1.28);
- }
- 37% {
- opacity: 0.84;
- filter: blur(8px) saturate(1.12);
- }
- 61% {
- opacity: 0.98;
- filter: blur(6px) saturate(1.24);
- }
- 83% {
- opacity: 0.86;
- filter: blur(7px) saturate(1.16);
- }
- 100% {
- opacity: 0.94;
- filter: blur(6px) saturate(1.2);
- }
-}
-
-@keyframes sidebarAuroraSkew {
- 0% {
- transform-origin: 44% 58%;
- }
- 21% {
- transform-origin: 62% 42%;
- }
- 43% {
- transform-origin: 31% 66%;
- }
- 66% {
- transform-origin: 68% 74%;
- }
- 100% {
- transform-origin: 39% 45%;
- }
-}
-
-@keyframes sidebarSheenSweep {
- 0% {
- background-position: 232% 0, 10% 18%, 80% 12%, 20% 82%;
- }
- 8% {
- background-position: 186% 0, 16% 30%, 74% 18%, 28% 74%;
- }
- 21% {
- background-position: 116% 0, 34% 10%, 62% 26%, 18% 64%;
- }
- 37% {
- background-position: 52% 0, 50% 24%, 46% 12%, 32% 58%;
- }
- 52% {
- background-position: -4% 0, 34% 54%, 22% 22%, 12% 46%;
- }
- 69% {
- background-position: -62% 0, 14% 36%, 32% 34%, 24% 56%;
- }
- 84% {
- background-position: -106% 0, 20% 20%, 46% 20%, 34% 70%;
- }
- 100% {
- background-position: -136% 0, 10% 18%, 80% 12%, 20% 82%;
- }
-}
-
-@keyframes sidebarSheenJitter {
- 0% {
- opacity: 0.28;
- transform: translate3d(0, 0, 0);
- }
- 17% {
- opacity: 0.56;
- transform: translate3d(1.8%, -0.5%, 0);
- }
- 38% {
- opacity: 0.34;
- transform: translate3d(-1.2%, 0.8%, 0);
- }
- 63% {
- opacity: 0.6;
- transform: translate3d(2.3%, -0.3%, 0);
- }
- 81% {
- opacity: 0.3;
- transform: translate3d(-1.6%, 0.7%, 0);
- }
- 100% {
- opacity: 0.52;
- transform: translate3d(2%, -0.1%, 0);
}
}
--
Gitblit v1.9.3