|
|
@@ -79,9 +79,10 @@ async function handleLogout(): Promise<void> {
|
|
|
.app-layout {
|
|
|
height: 100%;
|
|
|
}
|
|
|
+/* 左侧栏:墨蓝深色底(设计源「青屿」--app-side-*),与右侧纸白主区域形成层次 */
|
|
|
.app-layout__aside {
|
|
|
- background: var(--app-bg-card);
|
|
|
- border-right: 1px solid var(--app-bg-page);
|
|
|
+ background: var(--app-side-bg);
|
|
|
+ border-right: none;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
@@ -91,10 +92,36 @@ async function handleLogout(): Promise<void> {
|
|
|
padding: 0 var(--app-spacing-md);
|
|
|
font-size: var(--app-font-lg);
|
|
|
font-weight: 600;
|
|
|
- color: var(--app-text-primary);
|
|
|
+ color: var(--app-side-text);
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
}
|
|
|
.app-layout__menu {
|
|
|
border-right: none;
|
|
|
+ background-color: var(--app-side-bg);
|
|
|
+ /* EP 菜单 CSS 变量(深色侧栏):背景=墨蓝、常态字=次亮、激活/高亮=亮白 */
|
|
|
+ --el-menu-bg-color: var(--app-side-bg);
|
|
|
+ --el-menu-text-color: var(--app-side-dim);
|
|
|
+ --el-menu-active-color: var(--app-side-text);
|
|
|
+ --el-menu-hover-bg-color: var(--app-side-active);
|
|
|
+}
|
|
|
+/* 域分组标题(el-sub-menu__title):深色底 + 高亮亮字、加粗突出 */
|
|
|
+.app-layout__menu :deep(.el-sub-menu__title) {
|
|
|
+ color: var(--app-side-text);
|
|
|
+ font-weight: 600;
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+.app-layout__menu :deep(.el-sub-menu__title:hover) {
|
|
|
+ background-color: var(--app-side-active);
|
|
|
+}
|
|
|
+/* 叶子菜单项:常态偏暗(dim),hover/激活时高亮亮字 + 浅底 */
|
|
|
+.app-layout__menu :deep(.el-menu-item) {
|
|
|
+ color: var(--app-side-dim);
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+.app-layout__menu :deep(.el-menu-item:hover),
|
|
|
+.app-layout__menu :deep(.el-menu-item.is-active) {
|
|
|
+ color: var(--app-side-text);
|
|
|
+ background-color: var(--app-side-active);
|
|
|
}
|
|
|
.app-layout__body {
|
|
|
height: 100%;
|