📋 Listing 页组件
产品详情页 A+ 内容组件，丰富产品页面内容展示。
组件列表 (8个)
| # | 组件 | 中文名称 | Figma 链接 | 状态 |
|---|---|---|---|---|
| 1 | AplusDesc | Aplus 图文结合模块-资源位 | 查看设计稿 | 已经发布（figma待更新） |
| 2 | DownLoad | Aplus下载组件 | 查看设计稿 | 已经发布（figma待更新） |
| 3 | Features | Aplus图文混排模块（图文叠加1） | 查看设计稿 | 已经发布（figma待更新） |
| 4 | FootCharger | Aplus底部充电器组件 | 查看设计稿 | 已经发布（figma待更新） |
| 5 | GiftBox | Aplus礼盒模块 | 查看设计稿 | 已经发布（figma待更新） |
| 6 | GraphicMore | Aplus图文展示模块（ksp） | 查看设计稿 | 已经发布（figma待更新） |
| 7 | SelectStore | Aplus选择门店模块 | 查看设计稿 | 已经发布（figma待更新） |
| 8 | ProductNav | 产品导航 | 查看设计稿 | 已经发布 |
使用场景
Listing 页组件适用于：
- ✅ 产品详情页（Amazon、独立站）
- ✅ A+ 内容
- ✅ 产品说明页
- ✅ 品牌旗舰店
页面结构建议
import {
ProductNav,
AplusDesc,
Features,
GraphicMore,
DownLoad,
GiftBox
} from '@anker-in/headless-ui/biz'
export default function ProductDetailPage() {
return (
<>
<ProductNav data={navData} />
<AplusDesc data={descData} />
<Features data={featuresData} />
<GraphicMore data={kspData} />
<DownLoad data={downloadData} />
<GiftBox data={giftData} />
</>
)
}Amazon A+ 规范
- 图片尺寸: 970px 宽度（推荐）
- 模块高度: 适中，避免过长
- 文字可读性: 足够大的字号
- 移动端优化: 确保移动端可读
注意事项
⚠️ Figma 需要更新的组件:
- AplusDesc
- DownLoad
- Features
- FootCharger
- GiftBox
- GraphicMore
- SelectStore
建议先与设计团队确认 Figma 更新状态再使用。
Last updated on