| 层级 | 属性 | 规格值 | 说明 |
|---|---|---|---|
| 一级菜单 | 侧边栏宽度 | min-width: 200px |
随文字内容自动撑宽 |
| 容器内边距 | 8px(四周) | ||
| 字号 / 图标 | 14px · 图标 16×16px | 线状图标,图标与文字间距 8px | |
| 默认颜色 | #223355 |
图标与文字同色 | |
| 文字起始位置 | padding-left: 8px 后,图标占 16px + gap 8px | 文字从第 32px 开始 | |
| 二级菜单 | 文字缩进 | padding-left: 40px |
相比一级文字位置后缩 8px(32+8),无图标 |
| 默认颜色 | #6B7A99 |
||
| 图标 | 无 | ||
| 三级菜单 | 文字缩进 | padding-left: 48px |
相比二级文字位置再后缩 8px(40+8),无图标 |
| 默认颜色 | #6B7A99 |
||
| 图标 | 无 | ||
| 所有层级 | 菜单项高度 | 36px |
|
| 菜单间距 | 8px | 相邻菜单项之间,无分隔线 | |
| Hover 背景 | #F5F7FA |
||
| 选中背景 / 颜色 | #F0F9FF |
图标与文字变为 #3388FF |
|
| 展开箭头 | 折叠状态 | 朝下 ↓(默认) | 有子菜单时显示,靠右对齐 |
| 展开状态 | 朝上 ↑(rotate 180°) | 子菜单展开时翻转 |