B站首页 — UI 视觉规格标注

A 顶部Header

🔍 搜索感兴趣的内容

B 分类Tab栏 40vp

直播

页面整体

属性	值	说明
屏幕假定宽度	`360vp`
页面背景色	#F4F5F7	卡片列表底色，所有区域外的背景
品牌主色（B站粉）	#FB7299	选中态、导航、下划线、+ 按钮均使用
主文字色	#212121	视频标题
次文字色	#333333	分类 Tab 未选中文字
辅助文字色	#999999	作者名
浅辅助文字色	#AAAAAA	搜索框 placeholder、头像文字
导航图标未选中色	#888888	底部导航未激活图标和文字
内容列表滚动	纵向 `List`	`List.scrollBar(BarState.Off)`
文件结构	`pages/Index.ets` 入口导航 → `components/HomePage.ets` Header + Tab → `components/VideoListContent.ets` Banner + 网格 → `components/VideoCard.ets` 单张卡片 → `viewmodel/VideoData.ets` 数据模型

属性	值	说明
背景色	Color.White	Row `.backgroundColor(Color.White)`
水平内边距	`left: 12vp, right: 12vp`	Row `.padding`
垂直内边距	`top: 8vp, bottom: 8vp`	Row `.padding`
子元素间距	`8vp`	Row `space: 8`
头像
尺寸	`36 × 36vp`	Circle `.width(36).height(36)`
占位背景色	#E8E8E8	Circle `.fill('#E8E8E8')`
占位文字	`"TV"`	fontSize: 10，color: #AAAAAA，Bold
搜索框
高度	`32vp`	Row `.height(32)`
背景色	#F2F2F2	`.backgroundColor('#F2F2F2')`
圆角	`16vp`	`.borderRadius(16)`，高度的一半 → 胶囊形
水平内边距	`left: 8vp, right: 8vp`	`.padding`
图标与文字间距	`8vp`	Row `space: 8`
搜索图标	`🔍` emoji	fontSize: 13，color: #AAAAAA
提示文字	`"搜索感兴趣的内容"`	fontSize: 13，color: #AAAAAA
搜索框伸展	`.layoutWeight(1)`	占满剩余空间
右侧图标
铃铛图标资源	`$r('app.media.ic_bell')`	SVG 文件路径: `resources/base/media/ic_bell.svg`
私信图标资源	`$r('app.media.ic_message')`	SVG 文件路径: `resources/base/media/ic_message.svg`
图标尺寸	`24 × 24vp`	`.width(24).height(24)`

属性	值	说明
容器高度	`40vp`	Tabs `.barHeight(40)`
背景色	Color.White	`.barBackgroundColor(Color.White)`
滚动模式	`BarMode.Scrollable`	超出宽度可横向滑动
Tab 数量	8 个	直播 / 推荐 / 热门 / 动画 / 影视 / 新征程 / 国创 / 番剧
默认激活项	index 1（推荐）	`@State activeCategory: number = 1`
Tab 标签样式
文字字号	`15vp`
未选中文字色	#333333
选中文字色	#FB7299	B站粉
未选中字重	`FontWeight.Normal`
选中字重	`FontWeight.Bold`
选中下划线宽度	`16vp`	Divider `.width(16)`
选中下划线厚度	`2vp`	Divider `.strokeWidth(2)`
选中下划线颜色	#FB7299
未选中下划线	`Color.Transparent`	透明占位，保持高度一致
文字与下划线间距	`4vp`	Column `space: 4`
标签水平内边距	`left: 8, right: 8`	Column `.padding`
标签垂直内边距	`top: 4, bottom: 4`	Column `.padding`

属性	值	说明
外层容器内边距	`8vp（四边）`	Column `.padding({ left:8, right:8, top:8, bottom:8 })`
外层背景色	#F4F5F7	与页面背景一致，形成视觉边距
Swiper 高度	`192vp`	Swiper `.height(192)`
圆角	`4vp`	Swiper `.borderRadius(4).clip(true)`
自动播放	`true`	Swiper `.autoPlay(true)`
切换间隔	`3000ms`	Swiper `.interval(3000)`
循环播放	`true`	Swiper `.loop(true)`
指示器颜色	#66FFFFFF（40%透明白）	非激活圆点颜色
指示器选中色	Color.White
封面数量	3 张	`BANNER_COVERS` 数组，与 `BANNER_TITLES` 下标一一对应
封面图片
图片宽度	`100%`	Image `.width('100%')`
图片高度	`192vp`	Image `.height(192)`
图片缩放模式	`ImageFit.Cover`	裁剪填满容器
底部标题浮层（渐变遮罩）
渐变方向	`GradientDirection.Top`	从底部向上由黑到透明
遮罩起始色	#CC000000（80%黑）
标题内边距	`left:8, right:8, top:16, bottom:28`	bottom:28 确保文字不被指示器遮挡
标题字号	`13vp`
标题颜色	Color.White
标题字重	`FontWeight.Medium`
标题前缀	`"正在推荐 · "`	硬编码前缀 + `BANNER_TITLES[index]`

属性	值	说明
卡片背景色	Color.White	Column `.backgroundColor(Color.White)`
圆角	`4vp`	Column `.borderRadius(4).clip(true)`
布局方式	两列等宽	Row `space:8` + 每卡片 `.layoutWeight(1)`
行外边距	`left:8, right:8, bottom:8`	ListItem Row `.padding`
封面图片层
宽高比	`1.78 (16:9)`	Image `.aspectRatio(1.78)`
缩放模式	`ImageFit.Cover`	裁剪填满
占位背景色	#E8E8E8	图片加载前显示
信息浮层（Stack 底部对齐）
渐变方向	`GradientDirection.Top`	从底部向上
遮罩起始色	#BB000000（73%黑）
浮层内边距	`left:8, right:8, top:16, bottom:4`	Row `.padding`
文字字号	`10vp`	播放量 / 弹幕数 / 时长
文字颜色	Color.White
排列方式	播放量靠左，弹幕+时长靠右	Row 中间使用 `Blank()`
标题区
区域高度	`40vp`	Column `.height(40)`（固定，保证对齐）
内边距	`left:8, right:8, top:8`	Column `.padding`
文字字号	`13vp`
文字颜色	#212121
行高	`20vp`	Text `.lineHeight(20)`
最大行数	`2`	超出用 `…` 截断
作者行
内边距	`8vp（四边）`	Row `.padding({ left:8, right:8, top:8, bottom:8 })`
子元素间距	`4vp`	Row `space: 4`
圆点尺寸	`4 × 4vp`	Circle `.width(4).height(4)`
圆点颜色	#FB7299	Circle `.fill('#FB7299')`
作者名字号	`11vp`
作者名颜色	#999999
作者名最大行数	`1`	超出截断

属性	值	说明
高度	`56vp`	Row `.height(56)`
背景色	Color.White
顶部分割线	`0.5vp / #E8E8E8`	Row `.border({ width: { top: 0.5 }, color: '#E8E8E8' })`
Tab 分布	5 项（4 个 Tab + 1 个 + 按钮）	全部 `.layoutWeight(1)`
Tab 索引	0=首页 1=关注（+跳过） 3=会员购 4=我的	索引 2 为 + 按钮，不切换页面
普通导航项（@Builder navItem）
图标尺寸	`24 × 24vp`	Image `.width(24).height(24)`
图标与文字间距	`4vp`	Column `space: 4`
文字字号	`10vp`
未选中文字色	#888888
选中文字色	#FB7299	B站粉
图标资源（首页）	`$r('app.media.tab_home_normal/selected')`	SVG 格式，normal=#888888，selected=#FB7299
图标资源（关注）	`$r('app.media.tab_follow_normal/selected')`	同上
图标资源（会员购）	`$r('app.media.tab_vip_normal/selected')`	同上
图标资源（我的）	`$r('app.media.tab_me_normal/selected')`	同上
中间 + 发布按钮
按钮宽度	`48vp`	Row `.width(48)`
按钮高度	`32vp`	Row `.height(32)`
背景色	#FB7299
圆角	`8vp`	Row `.borderRadius(8)`
+ 字号	`22vp`	Text `.fontSize(22)`
+ 文字色	Color.White
+ 字重	`FontWeight.Bold`