BrandEquity (品牌权益)

用于展示品牌优势、服务保障、客户权益等信息，支持响应式设计和多种布局形式。【✅ 已发布】

场景:

视口:

加载中...

当前视口: 1920px × 600px场景: 六项品牌权益展示

打开链接

功能特性

✅ 响应式设计 - PC 端网格展示，移动端轮播适配
✅ 双类型展示 - 支持图标（icon）或头像列表（avatar）两种展示类型
✅ 智能网格布局 - PC端采用10列网格系统，特定卡片自动占据更大空间
✅ 形状切换 - 支持方形（square）和圆形（round）两种卡片样式
✅ 轮播功能 - 移动端内置 Swiper 滑动，每页展示3个卡片
✅ 曝光埋点 - 内置曝光追踪功能，自动上报用户浏览行为
✅ 可选标题 - 支持显示组件标题
✅ 灵活内容 - 支持纯文本描述或富文本HTML内容

Props 参数

BrandEquityProps

Prop	类型	默认值	必需	说明
`data`	`BrandEquityData`	-	✅	品牌权益数据配置对象
`className`	`string`	`''`	-	自定义根容器类名

BrandEquityData 配置

参数	类型	默认值	必需	说明
`items`	`BrandEquityItemProps[]`	-	✅	权益卡片列表数据
`title`	`string`	-	-	组件标题
`itemShape`	`'round' \| 'square'`	`'square'`	-	卡片形状

BrandEquityItemProps 配置

参数	类型	必需	说明
`title`	`string`	✅	卡片标题
`description`	`string`	✅	卡片描述文本
`icon`	`Img`	-	图标图片（type为icon时使用）
`type`	`'icon' \| 'avatar'`	-	展示类型：图标或头像列表
`avatarList`	`{ avatar: Img }[]`	-	头像列表（type为avatar时使用）
`descText`	`string`	-	富文本HTML描述（替代description）

使用示例

最简示例


import { BrandEquity } from '@anker-in/headless-ui/biz'
 
<BrandEquity
  data={{
    items: [
      {
        icon: {
          url: 'https://images.unsplash.com/photo-1...',
          alt: 'Hassle-Free Warranty',
        },
        title: 'Hassle-Free Warranty',
        description: 'Comprehensive warranty protection on all purchases.',
      },
      {
        icon: {
          url: 'https://images.unsplash.com/photo-2...',
          alt: 'Our Happy Customers',
        },
        title: 'Our Happy Customers',
        description: 'Join millions of satisfied users worldwide.',
      },
    ],
  }}
/>

带标题的展示


<BrandEquity
  data={{
    title: 'Why Choose Us',
    items: [
      {
        icon: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Warranty Icon',
        },
        title: 'Hassle-Free Warranty',
        description: 'Comprehensive warranty protection on all purchases.',
      },
      {
        icon: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Customer Icon',
        },
        title: 'Our Happy Customers',
        description: 'Join millions of satisfied users worldwide.',
      },
      {
        icon: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Rewards Icon',
        },
        title: 'Rewards Program',
        description: 'Buy more, save more, and earn more.',
      },
    ],
    itemShape: 'round',
  }}
  className="bg-gray-50 py-12"
/>

头像列表展示


<BrandEquity
  data={{
    items: [
      {
        type: 'avatar',
        title: 'We are Here to Help',
        description: 'Contact our expert team for assistance.',
        avatarList: [
          {
            avatar: {
              url: 'https://images.unsplash.com/photo-avatar-1...',
              alt: 'Team Member 1',
            },
          },
          {
            avatar: {
              url: 'https://images.unsplash.com/photo-avatar-2...',
              alt: 'Team Member 2',
            },
          },
          {
            avatar: {
              url: 'https://images.unsplash.com/photo-avatar-3...',
              alt: 'Team Member 3',
            },
          },
        ],
      },
      // 其他卡片...
    ],
  }}
/>

圆角卡片 + 深色背景


<BrandEquity
  data={{
    items: equityItems,
    itemShape: 'round',
  }}
  className="bg-gray-900 p-8"
/>

响应式行为

断点说明

组件在不同设备上有不同的展示方式：

断点	屏幕宽度	展示方式	卡片布局	卡片尺寸
Mobile	< 768px	轮播（分页）	每页3个垂直排列	高度160px
Tablet	≥ 768px	网格	2列	高度160px
Laptop	≥ 1025px	10列网格	特定卡片4列，其他3列	高度192px，间距16px
Desktop	≥ 1440px	10列网格	特定卡片4列，其他3列	高度192px，内边距24px
LG Desktop	≥ 1920px	10列网格	特定卡片4列，其他3列	高度240px，内边距32px

智能网格布局

PC 端采用10列网格系统，根据卡片索引自动调整宽度：

索引 0, 5, 6, 11 的卡片：占据 4 列（更宽）
其他卡片：占据 3 列（标准宽度）

这种布局方式创造出视觉上更具节奏感的设计。

移动端轮播

每页显示：3个卡片垂直排列
分页器：底部显示分页指示器
自由模式：支持自由滑动
鼠标滚轮：PC端也支持鼠标滚轮滑动

设计规范

卡片样式

方形卡片 (itemShape="square")：适合正式、商务场景，视觉更简洁
圆形卡片 (itemShape="round")：适合友好、亲和场景，视觉更柔和

内容类型

图标类型 (type="icon")：使用单个图标，适合展示功能特性
头像类型 (type="avatar")：使用头像列表，适合展示团队或客户

图标/头像要求

图标图片：

推荐尺寸：30×30px（移动端）/ 36×36px（大屏）
格式：SVG/PNG（透明背景）
风格：简洁、单色或双色

头像图片：

推荐尺寸：60×60px（会自动缩放）
格式：JPG/PNG
形状：圆形裁剪
内容：清晰的人物头像

文案要求

标题：简短有力，建议不超过20个字符
描述：清晰明了，建议2-3行，不超过50个字符
语气：积极、友好、专业

无障碍性

图片替代文本

✅ 所有图片包含 alt 属性（通过 Img 类型强制）
✅ 图标和头像都必须提供描述性的 alt 文本
✅ alt 文本应准确描述图片内容和用途

语义化标签

✅ 使用 <h3> 标签作为卡片标题，保持文档结构清晰
✅ 使用语义化 HTML 元素，便于屏幕阅读器理解

键盘导航

✅ 支持键盘导航
✅ 轮播分页器可通过键盘点击操作
✅ 所有交互元素可通过 Tab 键访问

颜色对比度

✅ 文字颜色 #080A0F，白色背景
✅ 颜色对比度符合 WCAG AA 标准（至少 4.5:1）

性能优化

✅ Ref 转发 - 使用 React.forwardRef() 支持 ref 转发
✅ 响应式判断 - 使用 useMediaQuery 优化响应式判断
✅ 图片懒加载 - 通过 Picture 组件实现图片懒加载
✅ 曝光埋点 - 使用 IntersectionObserver 实现高性能曝光埋点
✅ 按需渲染 - 移动端按需分组渲染，避免一次性渲染大量卡片

常见问题

如何决定使用图标还是头像类型？

使用图标（icon）：展示功能特性、服务保障、产品优势等抽象概念
使用头像（avatar）：展示团队成员、客户支持、社区用户等具体人物

为什么某些卡片比其他卡片宽？

组件采用智能网格布局，索引为 0、5、6、11 的卡片会占据更大空间（4列 vs 3列），创造出更具视觉节奏的布局效果。这是设计上的刻意安排，无法自定义。

移动端每页为什么显示3个卡片？

基于用户体验研究，移动端每页显示3个卡片可以平衡信息密度和浏览体验。数量固定，无法自定义。

可以同时使用 description 和 descText 吗？

不推荐。descText 是富文本HTML内容，会替代 description 的渲染。如果两者都提供，只会渲染 descText。

如何自定义卡片背景颜色？

卡片背景色默认为白色（bg-white）。如需自定义，可以通过 className 传入覆盖样式，或修改全局 CSS 变量。

卡片数量有限制吗？

无硬性限制，但建议：

移动端：6-12个（2-4页）
PC端：6-10个（保持视觉平衡）

过多的卡片会降低用户关注度。