媒体封面 MediaHero

概览

MediaHero 通常位于页面最顶部，结合大字号标题和高质量媒体展示，确立页面的品牌基调。

实时预览

构建业务的未来

通过我们的一站式 CMS 解决方案，让内容创作变得前所未有的简单。全球 500 强公司的共同 choice。

使用方法

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

const Example = () => (
  <MediaHero
    title="让创意触手可及"
    description="..."
    mediaUrl="/hero-video.mp4"
    text="立即开始"
    url="/start"
  />
);

属性说明 (Props)

属性	类型	默认值	说明
`title`	`string`	-	巨幕标题
`description`	`string`	-	详细描述文案
`mediaUrl`	`string`	-	右侧媒体 URL (图片或视频)
`text`	`string`	-	按钮文字
`url`	`string`	-	按钮链接
`poster`	`string`	-	视频封面图 URL

特性

渐变文本：标题自动应用从品牌色到中性色的渐变，增加高级感。
发光背景：媒体背后带有柔和的 blocks-glow 呼吸灯效果。
自适应栅格：在宽屏下使用 2:3 的黄金比例布局，在窄屏下自动堆叠。

主题覆盖

可覆盖变量

类名：mewx-cms-media-hero

变量名	用途	默认值
`--mewx-cms-media-hero-heading-gradient`	标题渐变	`var(--blocks-gradient-text)`
`--mewx-cms-media-hero-muted-text`	描述文字色	`var(--blocks-text-muted)`
`--mewx-cms-media-hero-cta-bg`	CTA 按钮背景	`var(--blocks-gradient-primary)`
`--mewx-cms-media-hero-cta-text`	CTA 按钮文字色	`255 255 255`
`--mewx-cms-media-hero-cta-shadow`	CTA 按钮阴影	`var(--blocks-shadow-button)`
`--mewx-cms-media-hero-media-bg`	媒体区背景	`var(--blocks-bg-card)`
`--mewx-cms-media-hero-glow-bg`	发光背景渐变	`var(--blocks-gradient-glow)`

覆盖示例

/* 蓝色 MediaHero */
.blue-hero {
  --mewx-cms-media-hero-heading-gradient: linear-gradient(135deg, rgb(37, 99, 235), rgb(59, 130, 246));
  --mewx-cms-media-hero-cta-bg: linear-gradient(135deg, rgb(37, 99, 235), rgb(59, 130, 246));
  --mewx-cms-media-hero-glow-bg: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 70%);
}

<MediaHero className="blue-hero" title="构建未来" description="描述内容" mediaUrl="..." text="开始" url="#" />