A 搜索栏 54vp
B 排序Tab 42vp
C 筛选标签 42vp
全部
5G手机
新品
百亿补贴
自营
D 品牌推荐区
品牌推荐
更多 ›
苹
苹果华
华为小
小米荣
荣耀v
vivoO
OPPO
E 商品卡片
vivo X300 12GB+256GB 幸运彩 国家补贴 蔡司2亿超级主摄 APO超级长焦
自营
国家补贴
¥
2399
已售 3.2万
包邮
+
vivo官方旗舰店
Apple/苹果 iPhone 17 256GB 白色 支持移动联通电信5G
自营
以旧换新
¥
5999
已售 1.8万
包邮
+
Apple官方旗舰店
A 搜索栏
| 属性 | 值 | 说明 |
|---|---|---|
| 区域高度 | 54vp | Row 容器 .height(54) |
| 背景色 | #FFFFFF | Color.White |
| 水平内边距 | left: 14vp, right: 14vp | Row .padding({ left: 14, right: 14 }) |
| 子元素间距 | 10vp | Row space: 10 |
| 返回箭头尺寸 | 22 × 22vp | Image .width(22).height(22) |
| 搜索输入区高度 | 34vp | Row .height(34) |
| 搜索输入区背景 | #F4F4F4 | 内嵌 Row 背景色 |
| 搜索输入区圆角 | 17vp | .borderRadius(17)，高度的一半 → 胶囊形 |
| 输入区水平内边距 | left: 10vp, right: 10vp | .padding({ left: 10, right: 10 }) |
| 搜索图标尺寸 | 15 × 15vp | Image .width(15).height(15) |
| 搜索图标颜色 | #9CA3AF | 灰色 |
| 输入框字号 | 13vp | TextInput .fontSize(13) |
| placeholder 颜色 | #9CA3AF | .placeholderColor |
| 输入文字颜色 | #1A1A1A | .fontColor |
| 光标颜色 | #E4393C | .caretColor |
| 搜索按钮字号 | 14vp | Text .fontSize(14) |
| 搜索按钮颜色 | #E4393C | 京东红 |
| 搜索按钮字重 | FontWeight.Medium | |
| 底部分割线 | 0.5vp / #EEEEEE | Divider .strokeWidth(0.5) |
| 返回图标资源 | $r('app.media.ic_arrow_left') | Image组件，宽高 22×22vp |
| 搜索图标资源 | $r('app.media.ic_search') | Image组件，宽高 15×15vp |
B 排序 / 筛选 Tab 栏
| 属性 | 值 | 说明 |
|---|---|---|
| 区域高度 | 42vp | Row .height(42) |
| 背景色 | #FFFFFF | |
| Tab 数量 | 4 个（等宽） | .layoutWeight(1) 均分宽度 |
| 未选中文字颜色 | #333333 | .fontColor |
| 选中文字颜色 | #E4393C | 京东红 |
| 文字字号 | 13vp | |
| 未选中字重 | FontWeight.Normal | |
| 选中字重 | FontWeight.Bold | |
| 选中下划线宽度 | 32vp | Divider .width(32) |
| 选中下划线厚度 | 2vp | Divider .strokeWidth(2) |
| 选中下划线颜色 | #E4393C | |
| 未选中下划线 | Color.Transparent | 透明，占位保持高度一致 |
| 图标↕箭头字号 | 7vp | 价格 Tab 上下箭头 |
| 箭头行高 | 10vp | |
| 筛选图标尺寸 | 12 × 12vp | |
| 文字与下划线间距 | 3vp | Column space: 3 |
| 底部分割线 | 0.5vp / #EEEEEE | |
| 筛选图标资源 | $r('app.media.ic_filter') | Image组件，宽高 12×12vp，用于「筛选」Tab |
C 快捷筛选标签行
| 属性 | 值 | 说明 |
|---|---|---|
| 区域高度 | 42vp | Scroll .height(42) |
| 背景色 | #FFFFFF | |
| 行水平内边距 | left: 12vp, right: 12vp | Row .padding({ left: 12, right: 12 }) |
| 滚动方向 | 水平 ScrollDirection.Horizontal | |
| 标签字号 | 12vp | |
| 未选中文字色 | #555555 | |
| 未选中背景色 | #F4F4F4 | |
| 选中文字色 | Color.White | |
| 选中背景色 | #E4393C | |
| 标签圆角 | 14vp | 胶囊形 |
| 标签内边距 | top: 5, bottom: 5, left: 12, right: 12 | |
| 标签间距（右边距） | margin-right: 8vp | |
| 底部分割线 | 0.5vp / #F0F0F0 |
D 品牌推荐区
| 属性 | 值 | 说明 |
|---|---|---|
| 背景色 | #FFFFFF | |
| 标题栏内边距 | top: 10, bottom: 6, left: 12, right: 12 | |
| 标题字号 | 12vp | |
| 标题字重 | FontWeight.Bold | |
| 标题颜色 | #1A1A1A | |
| "更多"文字字号 | 11vp | |
| "更多"文字颜色 | #9CA3AF | |
| 品牌行内边距 | left: 12, right: 12, bottom: 10 | |
| 滚动方向 | 水平 ScrollDirection.Horizontal | |
| 品牌圆圈尺寸 | 44 × 44vp | 圆角 22vp → 完整圆 |
| 圆圈内首字母字号 | 16vp | |
| 圆圈文字颜色 | Color.White | |
| 圆圈文字字重 | FontWeight.Bold | |
| 品牌名称字号 | 10vp | |
| 品牌名称颜色 | #333333 | |
| 圆圈与名称间距 | 4vp | Column space: 4 |
| 品牌项间距（右） | margin-right: 16vp | |
| 品牌背景色列表 | 苹果 #1C1C1E / 华为 #CF0A2C / 小米 #FF6900 / 荣耀 #0052CC / vivo #415FFF / OPPO #1D1D1D / 三星 #1428A0 / 一加 #F5000F | |
| 底部分割线 | 0.5vp / #F0F0F0 |
E 商品卡片
| 属性 | 值 | 说明 |
|---|---|---|
| 卡片背景（正常） | Color.White | stateStyles.normal |
| 卡片背景（按压） | #F5F5F5 | stateStyles.pressed |
| 卡片内边距 | left: 12, right: 12, top: 12, bottom: 12 | @Styles cardBase() |
| 商品图片尺寸 | 116 × 116vp | 正方形 |
| 图片圆角 | 4vp | |
| 图片缩放模式 | ImageFit.Cover | 裁剪填满容器 |
| 图片占位背景 | #F5F5F5 | 图片加载前显示 |
| 图片与文字间距 | margin-left: 10vp | 文字区 .margin({ left: 10 }) |
| 右侧信息区高度 | 116vp | 与图片等高 |
| 信息区子项间距 | 5vp | Column space: 5 |
| 商品名称字号 | 13vp | |
| 商品名称行高 | 18vp | |
| 商品名称颜色 | #1A1A1A | |
| 商品名称最大行数 | 2 | 超出显示 … |
| 标签间距 | 4vp | Row space: 4 |
| 描边标签字号 | 10vp | tagOutline() |
| 描边标签颜色 | #E4393C | 文字 + 边框同色 |
| 描边标签边框 | 0.5vp | |
| 描边标签圆角 | 2vp | |
| 描边标签内边距 | top:1, bottom:1, left:3, right:3 | |
| 填充标签背景 | #FFF2F2 | tagFill() |
| 价格符号字号 | 12vp | 小字 "¥" |
| 价格数字字号 | 22vp | 大号红字 |
| 价格颜色 | #E4393C | |
| 价格字重 | FontWeight.Bold | |
| 销量字号 | 11vp | |
| 销量颜色 | #9CA3AF | |
| 包邮颜色 | #FF6000 | |
| 加购按钮尺寸 | 26 × 26vp | |
| 加购按钮圆角 | 13vp | 完整圆 |
| 加购按钮背景 | #E4393C | |
| 加购按钮字号 | 17vp | "+" 号 |
| 店铺行上边距 | 6vp | .margin({ top: 6 }) |
| 店铺名称字号 | 11vp | |
| 店铺名称颜色 | #9CA3AF | |
| 店铺emoji字号 | 11vp | 🏪 |
| 卡片间分割线 | 0.5vp / #F0F0F0 | margin: { left: 12, right: 12 } |
| 商品图片资源 |
$r('app.media.jd_product_1')$r('app.media.jd_product_2')$r('app.media.jd_product_3')$r('app.media.jd_product_4')$r('app.media.jd_product_5')$r('app.media.jd_product_6')
| 6 张商品缩略图，存放于 entry/src/main/resources/base/media/ |
页面整体
| 属性 | 值 | 说明 |
|---|---|---|
| 屏幕假定宽度 | 360vp | |
| 页面背景色 | #F4F4F4 | 商品列表底色 / 列表 Scroll 背景 |
| 主品牌色（京东红） | #E4393C | 选中态、价格、标签、加购按钮均使用 |
| 商品列表滚动 | 纵向 ScrollDirection.Vertical | Scroll 包裹 Column |
| 列表区自动填充 | .layoutWeight(1) | 挤占搜索栏/Tab/筛选区下方全部高度 |
| 重量级分割线颜色 | #EEEEEE | 搜索栏 / Tab 栏下方 |
| 轻量级分割线颜色 | #F0F0F0 | 品牌区 / 卡片间 |