ZartUI · 主系统顶部导航规范预览

组件演示

完整导航栏（点击用户名可展开下拉菜单）

智慧城市管理平台

林

林晓勇

规格参数

区域	属性	规格值	说明
导航栏容器	宽度	`1860px`
	高度	`48px`
	背景	`linear-gradient(91deg, #ffffffe6 0%, #ffffffe6 51%, #f0f8ffe6 100%)`	半透明磨砂渐变
	边框	`1px solid #FFFFFF`
	阴影	`4px 4px 40px 0 #0072ff1a`
左侧	全部菜单图标	`20×20px`，9宫格方块，颜色 `#6B7A99`	左侧边距 `20px`
左侧	导航标题	`18px · 400 · #6B7A99`	图标右侧，间距 `12px`
右侧	铃铛图标	`20×20px`，线状，颜色 `#6B7A99`	线状 stroke 图标
	头像	`32×32px`，圆形	铃铛右侧，间距 `16px`
	用户名	`14px · 400 · #223355`	头像右侧，间距 `8px`
下拉菜单	宽度 / 位置	`168px`，右对齐，距导航底部 `6px`	圆角 `8px`，内边距 `8px`
下拉菜单	菜单项	个人中心 / 编辑资料 / 系统设置 / 关于我们 / 退出登录	退出登录文字与图标色均为 `#FF4433`，上方加 `1px #E9ECF2` 分隔线

返回组件首页