Bladeren bron

style(layout): 侧栏改墨蓝深色底 + 高亮字,与右侧主区域拉开层次

设计源:variables.scss「青屿」已有 --app-side-* 一组(墨蓝 #1e2a54 底 / 亮白字 / dim 偏暗字 / active 浅底)。

改动(layout/index.vue 样式,组件结构零改):
- 侧栏背景:--app-bg-card(白)→ --app-side-bg(墨蓝);顶栏 logo 区同步亮字 + 底部浅分隔线。
- EP 菜单 CSS 变量:--el-menu-bg-color/text-color/active-color/hover-bg-color 映射到 --app-side-*。
- 域分组标题(el-sub-menu__title):亮白加粗突出(深色底上的高亮域)。
- 叶子菜单项:常态 dim(偏暗),hover/is-active 时高亮亮白 + 浅底。
- :deep() 命中 side-menu.vue 子组件内的 EP 菜单元素(scoped 边界)。
Q 2 uur geleden
bovenliggende
commit
b5915d1a97
1 gewijzigde bestanden met toevoegingen van 30 en 3 verwijderingen
  1. 30 3
      src/views/layout/index.vue

+ 30 - 3
src/views/layout/index.vue

@@ -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%;