功能展示 Showcase

概览

FeatureShowcase 通过大尺寸媒体（图/视频）与详尽文案的交替排列，深入展示复杂的功能点。

实时预览

深度功能揭秘

可视化编辑器

实时预览，拖拽即所得。让非技术人员也能轻松搭建专业页面。

立即体验

强大的自动化规则

内置 logic 引擎，根据条件动态切换展示组件。

查看示例

使用方法

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

const Example = () => (
  <FeatureShowcase
    title="产品亮点"
    list={[
      { title: "...", description: "...", mediaUrl: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域大标题
list	FeatureShowcaseItem[]	[]	展示项列表

FeatureShowcaseItem

属性	类型	说明
title	string (HTML)	展示项标题 (支持 HTML)
description	string (HTML)	展示项描述 (支持 HTML)
mediaUrl	string	媒体 URL (图片/视频)
type	`“image"	"video"
url	string	按钮跳转链接
text	string	按钮文字

特性

• Z 字形布局：图片与文字左右交替，缓解视觉疲劳。
• 视频集成：支持本地视频预览和 YouTube 嵌入。
• 光致发光：媒体背后带有柔和的呼吸渐变背景。

---

主题覆盖

可覆盖变量

类名：mewx-cms-feature-showcase

变量名	用途	默认值
--mewx-cms-showcase-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-showcase-muted-text	描述文字色	var(--blocks-text-muted)
--mewx-cms-showcase-link-text	链接文字色	var(--blocks-primary)
--mewx-cms-showcase-link-hover-text	链接悬停色	var(--blocks-primary-light)
--mewx-cms-showcase-media-bg	媒体背景色	var(--blocks-bg-card)
--mewx-cms-showcase-media-shadow	媒体阴影	var(--blocks-shadow-card)
--mewx-cms-showcase-media-hover-shadow	媒体悬停阴影	var(--blocks-shadow-card-hover)
--mewx-cms-showcase-glow-bg	发光背景渐变	var(--blocks-gradient-glow)

覆盖示例

/* 暗色展示区 */
.dark-showcase {
  --mewx-cms-showcase-heading-text: 255 255 255;
  --mewx-cms-showcase-muted-text: 148 163 184;
  --mewx-cms-showcase-media-bg: 30 41 59;
}

<FeatureShowcase className="dark-showcase" title="产品亮点" list={[...]} />