| 导航栏 |
高度 |
60px |
|
| 背景 |
linear-gradient(→, #2167D9, #3388FF) |
从左到右线性渐变 |
| 左侧内边距 | 20px | |
| Logo |
位置 |
left: 20px |
|
| 尺寸 | 40×40px | |
| 导航标题 |
字号 |
18px · 400 |
Logo 右侧，间距 10px |
| 颜色 |
#FFFFFF |
|
| 一级菜单 |
与标题间距 |
80px |
标题右侧到第一个菜单项左边缘 |
| 字号 | 16px | |
| 两端边距 | padding: 0 20px | 单侧 20px |
| 颜色 / 背景 |
颜色 #FFFFFF |
默认透明；Hover rgba(0,0,0,0.08)；选中 rgba(0,0,0,0.10) |
| 右侧图标 |
图标尺寸 |
24×24px |
更多、帮助、通知，面状图标 |
| 颜色 |
#FFFFFF |
|
| 通知红点 | 8×8px · #FF4433 | 右上角角标 |
| 用户信息 |
头像 |
32×32px 圆形 |
通知图标右侧，分隔线后 |
| 姓名 | 14px · 400 · #FFFFFF | |
| 部门 | 12px · rgba(255,255,255,0.7) | |
| 下拉菜单 |
宽度 / 位置 |
160px，右对齐，距导航底部 4px |
|
| 菜单项 |
个人中心 / 编辑资料 / 系统设置 / 关于我们 / 退出登录 |
退出登录 #FF4433，上方加分隔线 |