# 营销页区块

可选的 zhaoui-marketing.css：搭一个落地页用的整块样式，页宽与区块间距、hero（左文右卡）、区块标题、特性卡、价格卡、品牌渐变横幅、带品牌色发光的主按钮，以及可选的渐变文字、数据条、极光光斑和玻璃标签。极光、渐变文字、玻璃标签只是装饰，默认不用：普通页面直接用 zh-hero 的浅色渐变；只有深色、发布会式的首屏才考虑加 zh-aurora（并在该区块写 data-mode="dark"）。下面的示例为了演示全部类才把它们放在一起，不是推荐的搭配。全部读主题变量，跟着品牌色、亮暗和 B/C 端走。需要额外引入 zhaoui-marketing.css，放在 zhaoui.css 之后。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<section class="zh-hero zh-aurora zh-aurora--grid" data-mode="dark">
  <div class="zh-wrap zh-hero-grid">
    <div>
      <span class="zh-tag zh-tag--lg primary">2026 全新服务</span>
      <h2 class="zh-display" style="margin-top:16px">一句话讲清<span class="zh-gradient-text">你的价值</span></h2>
      <p class="zh-section-sub" style="margin-bottom:24px">一个副标题，补充说明。主操作用 xl 按钮，次操作用默认按钮。</p>
      <div class="zh-hero-actions"><a class="zh-btn gradient xl" href="#mk-features">主要操作</a><a class="zh-btn xl" href="#mk-price">次要操作</a></div>
      <ul class="zh-stats"><li><b>500+</b><span>合作伙伴</span></li><li><b>98%</b><span>满意度</span></li></ul>
    </div>
    <div class="zh-card zh-float-card"><span class="zh-tag zh-tag--filled primary zh-float-flag">进行中</span><h3>产品卡片</h3><p>放一张展示产品实际样子的卡片。</p></div>
  </div>
</section>
<section class="zh-section zh-section--subtle" id="mk-features">
  <div class="zh-wrap">
    <ol class="zh-stats-bar" style="list-style:none;margin:0 0 32px"><li class="zh-stat"><b class="zh-gradient-text">60+</b><span>个组件</span></li><li class="zh-stat"><b class="zh-gradient-text">0</b><span>运行时依赖</span></li></ol>
    <p class="zh-eyebrow">特性</p>
    <h2 class="zh-section-title">区块标题</h2>
    <p class="zh-section-sub">一段说明文字，宽度自动限制在舒适的行长内。</p>
    <div class="zh-feature-grid">
      <div class="zh-card zh-feature zh-feature--brand"><span class="zh-tile"><i data-i="sparkles"></i></span><h3>主推特性</h3><p>品牌渐变底的特性卡，白字。</p><div class="zh-feature-tags"><span class="zh-tag">标签一</span><span class="zh-tag">标签二</span></div></div>
      <div class="zh-card zh-feature"><span class="zh-index">01</span><h3>普通特性</h3><p>悬停时上浮并带品牌色的柔和阴影。</p><div class="zh-feature-tags"><span class="zh-tag primary">标签一</span><span class="zh-tag primary">标签二</span></div></div>
    </div>
  </div>
</section>
<section class="zh-section zh-section--center" id="mk-price">
  <div class="zh-wrap">
    <h2 class="zh-section-title">价格卡</h2>
    <div class="zh-feature-grid" style="max-width:40rem;margin-inline:auto">
      <div class="zh-card zh-price"><p class="zh-price-name">基础版</p><div class="zh-price-amount">¥99<small>/月</small></div><p class="zh-price-desc">适合个人</p><ul class="zh-price-list"><li><i data-i="check"></i>功能一</li><li><i data-i="check"></i>功能二</li></ul><a class="zh-btn lg" href="#">选择</a></div>
      <div class="zh-card zh-price zh-price--popular"><span class="zh-tag zh-tag--filled primary zh-price-flag">最受欢迎</span><p class="zh-price-name">专业版</p><div class="zh-price-amount">¥299<small>/月</small></div><p class="zh-price-desc">适合团队</p><ul class="zh-price-list"><li><i data-i="check"></i>功能一</li><li><i data-i="check"></i>功能二</li><li><i data-i="check"></i>功能三</li></ul><a class="zh-btn primary lg" href="#">选择</a></div>
    </div>
  </div>
</section>
<section class="zh-section zh-section--brand">
  <div class="zh-wrap"><h2 class="zh-section-title">行动号召</h2><p class="zh-section-sub" style="margin:0 auto 24px">品牌渐变底的整行区块，字用 on-primary。</p><a class="zh-btn xl" href="#">立即开始</a></div>
</section>
```

## 样式类

`zh-wrap`、`zh-section`、`zh-section--subtle`、`zh-section--brand`、`zh-section--center`、`zh-eyebrow`、`zh-display`、`zh-section-title`、`zh-section-sub`、`zh-hero`、`zh-hero-grid`、`zh-hero-actions`、`zh-stats`、`zh-float-card`、`zh-float-flag`、`zh-feature-grid`、`zh-feature`、`zh-feature--brand`、`zh-feature-tags`、`zh-tags`、`zh-tile`、`zh-price`、`zh-price--popular`、`zh-price-flag`、`zh-price-name`、`zh-price-amount`、`zh-price-desc`、`zh-price-list`、`zh-nav--contained`、`zh-glow`、`zh-gradient-text`、`zh-index`、`zh-stats-bar`、`zh-stat`、`zh-aurora`、`zh-aurora--grid`、`zh-aurora-stage`、`zh-glass-tag`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-wrap` | 容器（class） |  | 页面内容宽度：最宽 --zh-page-max（80rem），两侧留白随屏幕在 16 到 64px 之间变化 |
| `zh-section` | <section>（class） | 加 --subtle（浅灰底）、--brand（品牌渐变底、白字）、--center（标题居中） | 一个区块；上下留白用 --zh-section-gap（64 到 96px，随屏幕）。给区块加 data-mode="dark" 就是一整块深色区 |
| `zh-eyebrow / zh-display / zh-section-title / zh-section-sub` | 文字（class） |  | 小标题、展示级大标题（--zh-font-display，em 部分用品牌色）、区块标题（--zh-font-title）、区块说明（限制行宽） |
| `zh-hero + zh-hero-grid` | 区块与容器 |  | 首屏：柔和渐变底，左边文字、右边产品卡片，900px 以下上下排 |
| `zh-float-card + zh-float-flag` | 卡片与标签 |  | 带大阴影的产品展示卡，标签浮在右上角并带品牌色发光 |
| `zh-feature-grid + zh-feature` | 网格与卡片 | 加 zh-feature--brand 做主推卡 | 自动按宽度分列的特性卡；zh-feature-grid--4 每列更窄；悬停上浮 |
| `zh-feature-tags / zh-tags` | 标签组 |  | 卡片里的多个标签：比单个状态标签更高、更松，间距 8px |
| `zh-tile` | 图标块 | 里面放 <i data-i> | 52px 的圆角图标底块，品牌浅色底 |
| `zh-price 系列` | 价格卡 | zh-price-name、zh-price-amount、zh-price-desc、zh-price-list、zh-price-flag | 价格卡；zh-price--popular 加品牌边框和发光 |
| `zh-nav--contained` | 导航条（class） |  | 让导航内容和页面内容对齐在同一条线上 |
| `zh-glow` | 按钮等（class） |  | 品牌色发光阴影；hero 里的主按钮已自带 |
| `zh-btn xl` | 按钮（class） |  | 超大按钮，落地页的主操作用；比 lg 再大 8px 高度 |
| `zh-gradient-text / zh-index` | 文字（class） |  | 渐变文字 / 渐变编号（01、02…）。渐变取自品牌派生的三个强调色 --zh-accent-a/b/c，只用在大字号上（强调色在白底和近黑底上都有 3:1，是大字的下限，不适合小字） |
| `--zh-accent-a / b / c` | 品牌令牌 | 颜色 | 三个强调色，换品牌色会一起变；想固定成指定的三色（如珊瑚、橙、紫），在 CSS 里直接覆盖这三个变量。--zh-gradient-accent 是用它们画的渐变 |
| `zh-stats-bar + zh-stat` | 容器与项 | 项里放 <b>数字</b><span>说明</span> | 一排关键数据放在一张柔和的大圆角卡里，竖线分隔；数字上加 zh-gradient-text 得到渐变数字；给它负的上外边距可以压在上面的 hero 上 |
| `zh-aurora（+ zh-aurora--grid）` | 区块（class） | 需同时加 data-mode="dark" | 可选装饰：深色底上用强调色画的静态光斑，加 --grid 再叠一层淡网格；没有模糊滤镜也没有动画，几乎没有绘制成本 |
| `zh-aurora-stage + zh-glass-tag` | 展示卡与标签 | glass-tag 用 style 的 left/top 定位 | 深色展示卡，上面浮动的玻璃标签（半透明加模糊；不支持模糊的浏览器只是半透明）；只在深色或图片背景上使用 |
| `zh-btn gradient` | 按钮（class） |  | 主操作的渐变按钮：从主色渐变到深一档的主色，白字对比度达标；原站那种“白字压鲜艳渐变”约 3.2:1，不达标，库里不提供 |

## 无障碍

- 大标题用真正的 h1/h2，区块用 <section> 并有标题；这些类只管样式，不改语义
- 品牌渐变底上的字固定用 --zh-on-primary，主色由库保证白字不低于 4.5:1
- hero 里的“em”强调色用大字号（不小于 24px 的粗体）才能用 --zh-brand-6，正文大小的强调请用 --zh-color-primary-text
- 手机上 hero、网格会自动单列；价格卡等宽度不要写死像素
- 渐变文字用 background-clip，强制颜色（Windows 高对比度）下自动退回普通文字色；光斑和网格在高对比度下隐藏

## 常见问题

### 营销页区块是什么？

可选的 zhaoui-marketing.css：搭一个落地页用的整块样式，页宽与区块间距、hero（左文右卡）、区块标题、特性卡、价格卡、品牌渐变横幅、带品牌色发光的主按钮，以及可选的渐变文字、数据条、极光光斑和玻璃标签。极光、渐变文字、玻璃标签只是装饰，默认不用：普通页面直接用 zh-hero 的浅色渐变；只有深色、发布会式的首屏才考虑加 zh-aurora（并在该区块写 data-mode="dark"）。下面的示例为了演示全部类才把它们放在一起，不是推荐的搭配。全部读主题变量，跟着品牌色、亮暗和 B/C 端走。需要额外引入 zhaoui-marketing.css，放在 zhaoui.css 之后。

### 怎么使用营销页区块？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 营销页区块支持键盘和读屏吗？

大标题用真正的 h1/h2，区块用 <section> 并有标题；这些类只管样式，不改语义；品牌渐变底上的字固定用 --zh-on-primary，主色由库保证白字不低于 4.5:1；hero 里的“em”强调色用大字号（不小于 24px 的粗体）才能用 --zh-brand-6，正文大小的强调请用 --zh-color-primary-text。

### 营销页区块需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。