滚动卡片 CardScroll

概览

CardScroll 使用横向自动滚动的方式展示用户评论或证言，自带左右渐隐效果，适合在首页或产品页中展示客户好评。

实时预览

使用方法

import { CardScroll } from '@goenhance/cms-ui';

const Example = () => (
  <CardScroll
    list={[
      {
        description: "评论内容...",
        avatar: "/avatars/user.jpg",
        author: "张三",
        job: "软件工程师"
      }
    ]}
    direction="left"
    speed={20}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
list	CommentItem[]	-	评论项列表
direction	"left" | "right"	"left"	滚动方向
speed	number	20	滚动速度

CommentItem

属性	类型	说明
description	string	评论内容
avatar	string	头像 URL
author	string	作者姓名
job	string	职位/角色

特性

• 自动滚动：使用 react-fast-marquee 实现平滑的无限滚动。
• 渐隐边缘：左右两侧自带渐隐效果，视觉过渡自然。
• 悬停暂停：鼠标悬停时自动暂停滚动。
• 智能复制：当评论数量不足时，自动复制以填满滚动区域。

---

主题覆盖

可覆盖变量

类名：mewx-cms-card-scroll

变量名	用途	默认值
--mewx-cms-card-scroll-fade-bg	渐隐区域背景色	var(--blocks-bg-page)
--mewx-cms-card-scroll-card-bg	卡片背景	var(--blocks-bg-card)
--mewx-cms-card-scroll-card-border	卡片边框	var(--blocks-border)
--mewx-cms-card-scroll-card-hover-border	卡片悬停边框	var(--blocks-border-hover)
--mewx-cms-card-scroll-card-shadow	卡片阴影	var(--blocks-shadow-card)
--mewx-cms-card-scroll-card-hover-shadow	卡片悬停阴影	var(--blocks-shadow-card-hover)
--mewx-cms-card-scroll-card-radius	卡片圆角	var(--blocks-radius-2xl)
--mewx-cms-card-scroll-text	评论文字色	var(--blocks-text-muted)
--mewx-cms-card-scroll-divider	分隔线颜色	var(--blocks-border)
--mewx-cms-card-scroll-avatar-glow	头像发光色	var(--blocks-primary-lightest)
--mewx-cms-card-scroll-avatar-border	头像边框色	var(--blocks-bg-card)
--mewx-cms-card-scroll-author-name-text	作者姓名色	var(--blocks-text-heading)
--mewx-cms-card-scroll-author-job-text	作者职位色	var(--blocks-text-muted)

覆盖示例

/* 暗色滚动卡片 */
.dark-card-scroll {
  --mewx-cms-card-scroll-fade-bg: 15 23 42;
  --mewx-cms-card-scroll-card-bg: 30 41 59;
  --mewx-cms-card-scroll-card-border: 51 65 85;
  --mewx-cms-card-scroll-text: 203 213 225;
  --mewx-cms-card-scroll-author-name-text: 248 250 252;
  --mewx-cms-card-scroll-divider: 51 65 85;
}

<CardScroll className="dark-card-scroll" list={[...]} />