# 结果页

纯样式组件：不需要 JS。操作完成、失败或页面不存在时的反馈块：图标（或大号错误码）、标题、说明、补充信息、操作按钮，居中排列。用 data-tone 选语气。

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

## 用法

```html
<div class="zh-card" style="padding:0">
  <div class="zh-result" data-tone="success" aria-live="polite">
    <div class="zh-result-icon"><i data-i="circle-check"></i></div>
    <h4 class="zh-result-title">提交成功</h4>
    <p class="zh-result-desc">审批单已提交，预计 1 个工作日内处理。</p>
    <div class="zh-result-actions">
      <button class="zh-btn primary">查看详情</button>
      <button class="zh-btn">返回列表</button>
    </div>
  </div>
</div>
```

## 样式类

`zh-result`、`zh-result-icon`、`zh-result-code`、`zh-result-title`、`zh-result-desc`、`zh-result-extra`、`zh-result-actions`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-result` | 容器（class） |  | 居中的结果块，通常放在 .zh-card 里 |
| `data-tone` | .zh-result | success \| error \| info \| warning（默认中性灰） | 决定图标圆底和图标的颜色 |
| `zh-result-icon` | 图标容器 | 里面放 <i data-i="..."> | 圆形底色图标 |
| `zh-result-code` | 大号文字 | 如 404 | 错误页用，装饰性，加 aria-hidden="true" |
| `zh-result-title / zh-result-desc` | <h4> / <p> |  | 标题和说明，说明最宽约 46 个字符 |
| `zh-result-extra` | 补充块 | 里面放 <ul> | 失败原因、后续步骤等，左对齐的灰底块 |
| `zh-result-actions` | 按钮容器 | 里面放 zh-btn | 居中排列；手机宽度按钮各占一行 |
| `is-in` | .zh-result |  | 可选：加上后播放入场动画（图标弹出，其余依次升起） |

## 无障碍

- 结果出现在已有页面里（不是整页跳转）时，给 .zh-result 加 aria-live="polite"
- 只靠颜色不够：标题要写明成功还是失败
- 大号错误码是装饰，加 aria-hidden="true"，意思放在标题里

## 常见问题

### 结果页是什么？

纯样式组件：不需要 JS。操作完成、失败或页面不存在时的反馈块：图标（或大号错误码）、标题、说明、补充信息、操作按钮，居中排列。用 data-tone 选语气。

### 怎么使用结果页？

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

### 结果页支持键盘和读屏吗？

结果出现在已有页面里（不是整页跳转）时，给 .zh-result 加 aria-live="polite"；只靠颜色不够：标题要写明成功还是失败；大号错误码是装饰，加 aria-hidden="true"，意思放在标题里。

### 结果页需要依赖框架吗？

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