云助 Support 帮助中心工单页 HTML 单页源码

这是一款面向 SaaS、工具型产品或在线服务平台的帮助中心/工单提交单页模板。页面以靛蓝色为主色调、浅灰作为背景，整体风格专业、克制，能让用户快速把注意力集中在「搜索问题」和「提交工单」这两个核心动作上。

模板顶部提供了显眼的搜索栏，中部按功能模块划分了常见问题分类，如账号、支付、功能使用、技术故障等；底部设置了工单提交表单，支持问题类型下拉、标题、详细描述和联系方式，形成「先自助、后人工」的完整服务闭环。

适合正在搭建客服支持页面、帮助文档门户，或需要在产品官网里嵌入一个轻量工单入口的团队。修改分类与文案后，即可作为正式帮助中心页面发布。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云助 Support · 帮助中心</title>
<style>
:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1f2747; --sub:#6b7390;
  --acc:#4a5cff; --acc2:#22b8cf; --line:#e6e9f2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);
  min-height:100vh;padding:0 0 40px}
.top{background:linear-gradient(120deg,var(--acc),var(--acc2));color:#fff;padding:40px 16px 56px;text-align:center}
.top h1{font-size:26px;margin-bottom:10px}
.top p{opacity:.9;font-size:14px}
.search{max-width:560px;margin:18px auto 0;display:flex;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(74,92,255,.25)}
.search input{flex:1;border:none;padding:15px 18px;outline:none;font-size:15px}
.search button{border:none;background:#fff;padding:0 20px;color:var(--acc);font-weight:700;cursor:pointer}
.wrap{max-width:920px;margin:-28px auto 0;padding:0 16px;display:grid;grid-template-columns:1fr 1.4fr;gap:20px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:.2s}
.cat:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(74,92,255,.12)}
.cat .ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}
.cat h4{font-size:15px}.cat p{color:var(--sub);font-size:12px;margin-top:4px}
.ticket{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.ticket h3{font-size:17px;margin-bottom:16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--sub);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:14px;outline:none;font-family:inherit}
.field textarea{resize:vertical;min-height:90px}
.row{display:flex;gap:12px}.row .field{flex:1}
.btn{width:100%;padding:14px;border:none;border-radius:14px;cursor:pointer;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;margin-top:4px}
.foot{text-align:center;color:var(--sub);font-size:12px;margin-top:26px}
@media(max-width:760px){.wrap{grid-template-columns:1fr}.cats{grid-template-columns:1fr 1fr}}
</style>
</head>
<body>
<div class="top">
  <h1>云助 Support 帮助中心</h1>
  <p>遇到问题？先搜一搜，或提交工单，我们 1 小时内响应</p>
  <div class="search"><input placeholder="搜索：退款、发票、账号异常…"><button>搜索</button></div>
</div>

<div class="wrap">
  <div class="cats">
    <div class="cat"><div class="ic">🚀</div><h4>快速上手</h4><p>5 分钟跑通核心流程</p></div>
    <div class="cat"><div class="ic">💳</div><h4>账单与发票</h4><p>订阅、退款、开票</p></div>
    <div class="cat"><div class="ic">🔐</div><h4>账号安全</h4><p>登录异常、二次验证</p></div>
    <div class="cat"><div class="ic">🔌</div><h4>API 与集成</h4><p>密钥、Webhook、限流</p></div>
  </div>

  <div class="ticket">
    <h3>提交工单</h3>
    <div class="row">
      <div class="field"><label>姓名</label><input placeholder="你的称呼"></div>
      <div class="field"><label>邮箱</label><input placeholder="用于接收回复"></div>
    </div>
    <div class="field"><label>问题类型</label>
      <select><option>请选择</option><option>账单与发票</option><option>账号与安全</option><option>功能异常</option><option>建议与反馈</option></select>
    </div>
    <div class="field"><label>问题描述</label><textarea placeholder="尽量描述复现步骤与截图链接"></textarea></div>
    <button class="btn">提交工单</button>
  </div>
</div>
<p class="foot">常见答案也可在「帮助文档」中自助查询 · 工作日 9:00–21:00 在线</p>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1939.html