核心优势 Offerings

概览

OfferingsFeature 以轻量级的图标网格形式，快速传达产品的核心卖点或生态支持。

实时预览

我们的核心优势

极速响应全球分发安全加固自动化

开始您的体验

使用方法

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

const Example = () => (
  <OfferingsFeature
    title="服务内容"
    list={[
      { name: "优势 A", imageUrl: "...", url: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域标题
list	OfferingItem[]	[]	优势项列表
text	string	-	底部按钮文字
url	string	-	底部按钮链接

特性

• 简约美观：去除冗余信息，直击用户痛点。
• 高度互动：每个图标项在悬停时都有背景变色反馈。
• 支持渐变按钮：内置符合品牌调性的渐变主按钮。

---

主题覆盖

可覆盖变量

类名：mewx-cms-offerings

变量名	用途	默认值
--mewx-cms-offerings-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-offerings-item-hover-bg	项悬停背景	var(--blocks-primary-lightest)
--mewx-cms-offerings-item-text	项文字色	var(--blocks-text-muted)
--mewx-cms-offerings-item-hover-text	项悬停文字色	var(--blocks-primary)
--mewx-cms-offerings-cta-bg	CTA 按钮背景	var(--blocks-gradient-primary)
--mewx-cms-offerings-cta-text	CTA 按钮文字色	255 255 255
--mewx-cms-offerings-cta-shadow	CTA 按钮阴影	var(--blocks-shadow-button)

覆盖示例

/* 紫色优势展示 */
.purple-offerings {
  --mewx-cms-offerings-item-hover-bg: 237 233 254;
  --mewx-cms-offerings-item-hover-text: 139 92 246;
}

<OfferingsFeature className="purple-offerings" title="核心优势" list={[...]} text="开始体验" url="#" />