CollectionBanner

Collection 页面顶部横幅组件,展示品类信息和视觉吸引力

组件信息

组件名称: CollectionBanner (Collection Banner)
所属分类: 品类筛选
状态: 🔄 开发完成
Figma 设计稿: 查看设计稿

功能特性

✅ 双媒体支持: 支持图片和视频背景,视频自动播放循环
✅ 品类信息展示: 标题、描述文本居中或左右对齐
✅ CTA 按钮: 可选的号召性用语按钮
✅ 响应式布局: 移动端、平板、桌面完整适配
✅ 多种布局样式: 支持居中(center)、左对齐(left)、右对齐(right)
✅ 主题切换: 支持 light/dark 主题
✅ 文字阴影: 确保文字在图片背景上清晰可读
✅ 渐变遮罩: 背景图片添加渐变遮罩,提升文字对比度

使用示例

示例 1: 基础图片背景


import { CollectionBanner } from '@anker-in/headless-ui/biz'
import scenarios from './scenarios.json'
 
export default function Page() {
  return (
    <CollectionBanner
      data={{
        title: '充电配件系列',
        description: '为你的设备提供快速充电解决方案',
        backgroundImage: {
          url: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=1920',
          alt: '充电配件系列'
        },
        cta: {
          text: '立即选购',
          link: '/collections/charging-accessories'
        },
        layout: 'center'
      }}
    />
  )
}

示例 2: 视频背景 + 左对齐布局


<CollectionBanner
  data={{
    title: 'eufy 安防系列',
    description: '24/7 全方位守护您的家',
    backgroundVideo: {
      url: 'https://cdn.example.com/security-demo.mp4',
      alt: '安防系列演示',
      mimeType: 'video/mp4'
    },
    backgroundImage: {
      url: 'https://cdn.example.com/security-poster.jpg',
      alt: '安防系列封面'
    },
    cta: {
      text: '了解更多',
      link: '/collections/security'
    },
    layout: 'left',
    theme: 'dark'
  }}
/>

示例 3: 右对齐 + 无 CTA 按钮


<CollectionBanner
  data={{
    title: 'Soundcore 音频系列',
    description: '专业音质,沉浸体验',
    backgroundImage: {
      url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=1920',
      alt: 'Soundcore 系列'
    },
    layout: 'right'
  }}
/>

示例 4: 移动端和桌面端不同背景


<CollectionBanner
  data={{
    title: '智能家居生态',
    description: '打造你的智能生活空间',
    // 桌面端背景
    backgroundImage: {
      url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920',
      alt: '智能家居桌面'
    },
    // 移动端背景
    mobileBackgroundImage: {
      url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=768',
      alt: '智能家居移动端'
    },
    cta: {
      text: '探索更多',
      link: '/collections/smart-home',
      variant: 'secondary'
    },
    layout: 'center'
  }}
/>

Props API

CollectionBannerProps

属性	类型	默认值	必需	说明
data	CollectionBannerData	-	✅	横幅数据配置
className	string	”	-	自定义根容器类名

CollectionBannerData

字段	类型	默认值	必需	说明
title	string	-	✅	横幅标题
description	string	-	-	横幅描述文本
backgroundImage	Img	-	✅	背景图片对象
mobileBackgroundImage	Img	-	-	移动端背景图片(可选)
backgroundVideo	Video	-	-	背景视频对象
cta	ButtonConfig	-	-	CTA 按钮配置
layout	’center’ \| ‘left’ \| ‘right'	'center’	-	内容布局方式
theme	’light’ \| ‘dark'	'light’	-	主题颜色

ButtonConfig

字段	类型	默认值	必需	说明
text	string	-	✅	按钮文字
link	string	-	✅	跳转链接
variant	’primary’ \| ‘secondary'	'primary’	-	按钮样式

响应式行为

布局断点

断点	屏幕宽度	高度	内容布局
Mobile	< 768px	400px	垂直居中,文字居中
Tablet	≥ 768px	480px	根据 layout 调整
Laptop	≥ 1025px	560px	根据 layout 调整
Desktop	≥ 1440px	640px	根据 layout 调整

布局模式

center (居中):

内容水平和垂直居中
标题和描述文本居中对齐
适合品牌展示页

left (左对齐):

内容靠左显示
标题和描述左对齐
适合内容驱动型页面

right (右对齐):

内容靠右显示
标题和描述右对齐
适合视觉平衡需求

常见问题 (FAQ)

1. 视频背景如何配置?

完整配置示例:


<CollectionBanner
  data={{
    title: '品类名称',
    backgroundVideo: {
      url: 'https://cdn.example.com/video.mp4',
      alt: '视频描述',
      mimeType: 'video/mp4'
    },
    backgroundImage: {
      url: 'poster.jpg',  //视频封面图
      alt: '封面'
    }
  }}
/>

注意:

视频会自动循环播放、静音、内联播放
backgroundImage 会作为视频的 poster 封面图
建议提供封面图,避免视频加载时黑屏

2. 如何自定义横幅高度?

通过 className 覆盖高度:


<CollectionBanner
  data={{...}}
  className="!h-[720px] laptop:!h-[800px]"
/>

3. CTA 按钮样式如何选择?

primary: 填充样式,主要操作,视觉权重高
secondary: 边框样式,次要操作,视觉权重低


// 主要 CTA
cta: { text: '立即购买', link: '/buy', variant: 'primary' }
 
// 次要 CTA
cta: { text: '了解更多', link: '/learn', variant: 'secondary' }

4. 文字在背景图上看不清怎么办?

组件默认应用了文字阴影和渐变遮罩。如果仍不清晰:

方案 1: 使用深色主题


data={{ theme: 'dark', ... }}

方案 2: 选择对比度更高的背景图片

浅色文字配深色背景
深色文字配浅色背景

方案 3: 通过 className 增强阴影


className="[&_h1]:drop-shadow-2xl [&_p]:drop-shadow-xl"

5. 移动端和桌面端可以用不同背景吗?

可以,使用 mobileBackgroundImage 字段:


<CollectionBanner
  data={{
    title: '标题',
    backgroundImage: {
      url: 'desktop-bg.jpg',  // 桌面端背景
      alt: 'Desktop'
    },
    mobileBackgroundImage: {
      url: 'mobile-bg.jpg',   // 移动端背景
      alt: 'Mobile'
    }
  }}
/>

6. 如何禁用CTA按钮?

不传 cta 字段即可:


<CollectionBanner
  data={{
    title: '品类名称',
    description: '品类描述',
    backgroundImage: {...}
    // 不传 cta 字段
  }}
/>

7. 横幅高度为什么是固定的?

设计决策: 固定高度确保视觉一致性,避免内容长度影响布局。如需自适应,可通过 className 修改为 h-auto。

应用场景

场景 1: 品类首页横幅

展示品类核心信息
引导用户浏览产品
使用 center 布局

场景 2: 促销活动页

突出促销信息
强调 CTA 按钮
使用视频背景增强吸引力

场景 3: 系列产品介绍

介绍产品系列定位
展示品牌理念
使用左右布局增加变化