底部转化 Footer

概览

FooterSection 专为着陆页底部设计。它通过视觉冲击力强的背景、大标题和行动按钮，引导用户完成最后的转化动作。

实时预览

准备好开始了吗？

加入数千名成功企业的行列，立即开启您的数字化转型之旅。

立即集成

使用方法

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

const Example = () => (
  <FooterSection
    logo="/logo.png"
    description="..."
    menuList={[
      { title: "资源", items: [...] }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
logo	string	-	Footer Logo 图片 URL
description	string	-	品牌简介描述
copyright	string	-	版权声明内容
menuList	Array<FooterMenu>	[]	多列菜单组

特性

• 多列布局：自动平衡多列链接，在移动端变为堆叠结构。
• SEO 友好：使用 <footer> 语义化标签。

---

主题覆盖

可覆盖变量

类名：mewx-cms-footer-section

变量名	用途	默认值
--mewx-cms-footer-section-bg	背景渐变	var(--blocks-gradient-hero)
--mewx-cms-footer-section-border	边框色	var(--blocks-primary-lighter)
--mewx-cms-footer-section-shadow	阴影	var(--blocks-shadow-glow)
--mewx-cms-footer-section-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-footer-section-muted-text	描述文字色	var(--blocks-text-muted)
--mewx-cms-footer-section-blob1	装饰光球1	var(--blocks-primary-lighter)
--mewx-cms-footer-section-blob2	装饰光球2	var(--blocks-accent-light)
--mewx-cms-footer-section-cta-bg	CTA 按钮背景	var(--blocks-gradient-primary)
--mewx-cms-footer-section-cta-text	CTA 按钮文字色	255 255 255
--mewx-cms-footer-section-cta-hover-shadow	CTA 按钮悬停阴影	var(--blocks-shadow-button)

覆盖示例

/* 暗色底部 */
.dark-footer {
  --mewx-cms-footer-section-heading-text: 255 255 255;
  --mewx-cms-footer-section-muted-text: 148 163 184;
  --mewx-cms-footer-section-bg: linear-gradient(135deg, rgb(15, 23, 42), rgb(30, 41, 59));
}

<FooterSection className="dark-footer" title="准备好开始了吗？" description="描述内容" text="立即集成" url="#" />