结果页

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

纯样式核心包

示例

提交成功

审批单已提交，预计 1 个工作日内处理。

代码

<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`	容器（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　zh-result-icon　zh-result-code　zh-result-title　zh-result-desc　zh-result-extra　zh-result-actions

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

常见问题

结果页是什么？

怎么使用结果页？

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

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

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

结果页需要依赖框架吗？

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

结果页

示例