SaaS 数据分析官网「数析 Insight」HTML 单页源码（深色蓝紫 + 渐变蓝紫 + 青色，含仪表盘 hero + 功能 + 数据源 + 案例 + 定价）

本源码是一款为 SaaS 数据分析产品、BI 工具、增长分析平台打造的「官网获客页」单页模板，采用深色蓝紫 + 渐变蓝紫 + 青色主调，视觉上科技、可信，非常契合 B 端工具类产品。首屏左侧抛出「让业务数据，自己开口说话」的强主张，右侧直接渲染一张简化版业务总览仪表盘——含 GMV、活跃用户、转化率三张 KPI 与 12 天趋势柱状图，让访客在 3 秒内看到产品形态。

页面结构按 SaaS 官网转化漏斗设计：六大核心功能（数据接入 / 拖拽看板 / 智能预警 / AI 解读 / 团队协作 / 秒级查询）覆盖业务最关心的问题；十二个数据源连接器用胶囊标签呈现生态广度；三个客户案例用「+34% / -2.1h / +12pt」等关键数字强化说服力；三档价格（入门免费 / 专业版 299 / 企业定制）清晰分级；最末 CTA 把「免费 14 天」与「预约演示」并列收尾。

适合 SaaS 产品、BI 工具、增长分析平台、营销自动化产品的官网。替换产品名、Logo、KPI、案例、价格后即可上线，也可作为 B 端工具类作品集或产品官网模板。

使用教程

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>数析 Insight · 让业务数据自己说话的分析平台</title>
<style>
  :root{
    --bg:#0c1020;
    --bg-2:#121832;
    --card:#161d39;
    --card-2:#1c2547;
    --line:#26315a;
    --ink:#e8ecf7;
    --ink-l:#9aa6c9;
    --blue:#4f7cff;
    --blue-d:#3a63e0;
    --purple:#9a6bff;
    --cyan:#3fe0d0;
    --grad:linear-gradient(120deg,#4f7cff,#9a6bff);
    --grad-2:linear-gradient(120deg,#3fe0d0,#4f7cff);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;background:var(--bg);color:var(--ink);line-height:1.8}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  a{text-decoration:none}

  header{border-bottom:1px solid var(--line);background:rgba(12,16,32,.85);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
  .logo{font-size:21px;font-weight:700;letter-spacing:1px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .logo small{font-size:10px;letter-spacing:2px;color:var(--ink-l);font-weight:400;display:block;margin-top:-2px}
  .nav ul{display:flex;gap:30px;list-style:none;font-size:15px}
  .nav ul a{color:var(--ink-l);transition:.25s}
  .nav ul a:hover{color:var(--ink)}
  .join{background:var(--grad);color:#fff;padding:10px 24px;font-size:14px;letter-spacing:1px;transition:.25s}
  .join:hover{opacity:.9}

  .hero{padding:74px 0 80px;background:radial-gradient(900px 420px at 75% -10%,rgba(79,124,255,.22),transparent),radial-gradient(700px 380px at 10% 10%,rgba(154,107,255,.16),transparent),var(--bg)}
  .hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
  .tag{display:inline-block;font-size:12px;letter-spacing:2px;color:var(--cyan);border:1px solid var(--line);padding:5px 14px;border-radius:30px;margin-bottom:22px}
  .hero h1{font-size:42px;line-height:1.45;font-weight:700;margin-bottom:20px;letter-spacing:.5px}
  .hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p{color:var(--ink-l);font-size:16px;max-width:480px;margin-bottom:30px}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{padding:13px 30px;font-size:15px;letter-spacing:1px;display:inline-block;transition:.25s;border-radius:8px}
  .b-solid{background:var(--grad);color:#fff}
  .b-solid:hover{opacity:.9}
  .b-line{border:1px solid var(--line);color:var(--ink)}
  .b-line:hover{border-color:var(--blue);color:#fff}

  .dash{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
  .dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .dash-top .t{font-size:14px;color:var(--ink-l);letter-spacing:1px}
  .badge{font-size:11px;color:var(--cyan);border:1px solid var(--line);padding:3px 10px;border-radius:20px}
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
  .kpi{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:14px}
  .kpi .n{font-size:23px;font-weight:700;color:#fff}
  .kpi .l{font-size:11.5px;color:var(--ink-l);margin-top:2px}
  .kpi .up{font-size:11px;color:var(--cyan)}
  .chart{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:16px 16px 10px}
  .chart .ct{font-size:13px;color:var(--ink-l);margin-bottom:10px}
  .area{height:120px;display:flex;align-items:flex-end;gap:7px}
  .area span{flex:1;background:var(--grad-2);border-radius:3px 3px 0 0;opacity:.85}
  .legend{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-l);margin-top:8px}

  section{padding:74px 0}
  .st{text-align:center;margin-bottom:46px}
  .st .k{color:var(--cyan);letter-spacing:5px;font-size:12px;margin-bottom:12px}
  .st h2{font-size:29px;font-weight:700;letter-spacing:2px}
  .st .dv{width:56px;height:3px;background:var(--grad);margin:16px auto 0;border-radius:3px}

  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .fe{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 26px;transition:.28s}
  .fe:hover{border-color:var(--blue);transform:translateY(-4px)}
  .fe .ic{font-size:30px;margin-bottom:12px}
  .fe h3{font-size:18px;font-weight:600;margin-bottom:8px}
  .fe p{font-size:14px;color:var(--ink-l);line-height:1.9}

  .integ{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px}
  .chip{border:1px solid var(--line);background:var(--card);border-radius:30px;padding:11px 22px;font-size:14px;color:var(--ink-l);transition:.25s}
  .chip:hover{border-color:var(--blue);color:#fff}

  .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .cs{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px}
  .cs .q{font-size:13px;color:var(--cyan);letter-spacing:1px;margin-bottom:10px}
  .cs .big{font-size:34px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
  .cs p{font-size:14px;color:var(--ink-l);line-height:1.85}
  .cs .who{font-size:12.5px;color:var(--ink-l);margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}

  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .pc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px 30px;position:relative}
  .pc.rec{border:1px solid var(--blue);background:linear-gradient(180deg,rgba(79,124,255,.12),var(--card))}
  .pc.rec::before{content:"最受欢迎";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:11.5px;padding:3px 16px;letter-spacing:2px;border-radius:20px}
  .pc h3{font-size:19px;letter-spacing:1px;margin-bottom:6px;font-weight:600}
  .pc .pr{font-size:32px;color:#fff;font-weight:700;margin:12px 0 3px}
  .pc .pr small{font-size:13px;color:var(--ink-l);font-weight:400}
  .pc .yr{font-size:12.5px;color:var(--ink-l);margin-bottom:20px}
  .pc ul{list-style:none;font-size:13.8px;color:var(--ink-l);line-height:2.2;margin-bottom:22px}
  .pc ul li::before{content:"✓　";color:var(--cyan)}
  .pc a{display:block;text-align:center;padding:12px;font-size:14.5px;letter-spacing:1px;border:1px solid var(--blue);color:#fff;background:var(--blue);transition:.25s;border-radius:8px}
  .pc a:hover{background:var(--blue-d)}
  .pc:not(.rec) a{background:transparent}
  .pc:not(.rec) a:hover{background:var(--blue)}

  .cta{text-align:center;background:radial-gradient(600px 300px at 50% 0%,rgba(154,107,255,.2),transparent),var(--bg-2);border-top:1px solid var(--line)}
  .cta h2{font-size:32px;font-weight:700;margin-bottom:16px}
  .cta p{color:var(--ink-l);margin-bottom:28px;font-size:16px}
  .cta .hero-btns{justify-content:center}

  footer{background:#080b16;color:var(--ink-l);padding:50px 0 26px;font-size:14px}
  .f3{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:32px}
  footer h5{color:var(--ink);font-size:15px;letter-spacing:1px;margin-bottom:14px;font-weight:600}
  footer ul{list-style:none;line-height:2.15}
  footer .lg{font-size:19px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
  .cp{border-top:1px solid var(--line);padding-top:20px;text-align:center;font-size:12.5px;letter-spacing:1px;color:#566089}

  @media(max-width:900px){
    .nav ul,.join{display:none}
    .hero-grid,.feat-grid,.case-grid,.price-grid,.f3{grid-template-columns:1fr}
    .kpis{grid-template-columns:repeat(3,1fr)}
    .hero h1{font-size:28px}
    section{padding:52px 0}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo">数析 Insight<small>DATA THAT SPEAKS</small></div>
    <ul>
      <li><a href="#feat">功能</a></li>
      <li><a href="#integ">数据源</a></li>
      <li><a href="#case">客户案例</a></li>
      <li><a href="#price">价格</a></li>
    </ul>
    <a class="join" href="#price">免费试用 14 天</a>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="tag">● 实时分析 · 无需写代码</span>
      <h1>让业务数据，<br><em>自己开口说话</em></h1>
      <p>数析 Insight 把分散在各平台的订单、流量、会员数据汇聚到一个看板。不需要 SQL，拖一拖就能看到趋势、预警和下一步该做什么。</p>
      <div class="hero-btns">
        <a class="btn b-solid" href="#price">免费试用 14 天</a>
        <a class="btn b-line" href="#feat">查看功能</a>
      </div>
    </div>
    <div class="dash">
      <div class="dash-top"><div class="t">业务总览 · 本月</div><div class="badge">实时同步</div></div>
      <div class="kpis">
        <div class="kpi"><div class="n">¥1.28M</div><div class="l">成交额 GMV</div><div class="up">▲ 18.4%</div></div>
        <div class="kpi"><div class="n">42.6k</div><div class="l">活跃用户</div><div class="up">▲ 9.1%</div></div>
        <div class="kpi"><div class="n">3.7%</div><div class="l">转化率</div><div class="up">▲ 0.6pt</div></div>
      </div>
      <div class="chart">
        <div class="ct">每日成交额趋势</div>
        <div class="area">
          <span style="height:38%"></span><span style="height:46%"></span><span style="height:42%"></span>
          <span style="height:55%"></span><span style="height:60%"></span><span style="height:52%"></span><span style="height:68%"></span>
          <span style="height:72%"></span><span style="height:64%"></span><span style="height:80%"></span><span style="height:88%"></span><span style="height:95%"></span>
        </div>
        <div class="legend"><span>1 日</span><span>15 日</span><span>30 日</span></div>
      </div>
    </div>
  </div>
</div>

<section id="feat">
  <div class="wrap">
    <div class="st">
      <div class="k">FEATURES</div>
      <h2>核 心 功 能</h2>
      <div class="dv"></div>
    </div>
    <div class="feat-grid">
      <div class="fe"><div class="ic">🔗</div><h3>一键接入数据源</h3><p>内置 60+ 主流平台连接器，Shopify、微信、抖音、数据库直连，5 分钟完成授权，无需工程排期。</p></div>
      <div class="fe"><div class="ic">📊</div><h3>可视化拖拽</h3><p>看板、漏斗、留存、地图，拖拽即生成。支持自定义指标公式，业务同学也能做出专业报表。</p></div>
      <div class="fe"><div class="ic">🔔</div><h3>智能预警</h3><p>为关键指标设阈值，异常波动自动推送到企业微信 / 钉钉，问题在扩大前先被发现。</p></div>
      <div class="fe"><div class="ic">🧠</div><h3>AI 解读</h3><p>看板下方自动生成一段「本周发生了什么、可能为什么、建议做什么」，把数据翻译成决策。</p></div>
      <div class="fe"><div class="ic">👥</div><h3>团队协作</h3><p>看板可分组共享，权限细到字段级。评论、订阅、定时邮件，让结论真正流动起来。</p></div>
      <div class="fe"><div class="ic">⚡</div><h3>秒级查询</h3><p>列式引擎 + 预聚合，亿级数据下钻依然流畅，告别「报表加载中」的等待。</p></div>
    </div>
  </div>
</section>

<section class="integ" id="integ">
  <div class="wrap">
    <div class="st">
      <div class="k">CONNECTORS</div>
      <h2>已 支 持 的 数 据 源</h2>
      <div class="dv"></div>
    </div>
    <div class="chips">
      <div class="chip">Shopify</div><div class="chip">微信小店</div><div class="chip">抖音电商</div><div class="chip">MySQL</div><div class="chip">PostgreSQL</div><div class="chip">Google Sheets</div><div class="chip">飞书多维表</div><div class="chip">企业微信</div><div class="chip">GA4</div><div class="chip">阿里云</div><div class="chip">神策数据</div><div class="chip">CSV 上传</div>
    </div>
  </div>
</section>

<section id="case">
  <div class="wrap">
    <div class="st">
      <div class="k">CUSTOMERS</div>
      <h2>客 户 案 例</h2>
      <div class="dv"></div>
    </div>
    <div class="case-grid">
      <div class="cs"><div class="q">某新锐美妆品牌</div><div class="big">+34%</div><p>接入全渠道订单后，用预警发现直播时段转化异常，及时调整投流，月 GMV 提升 34%。</p><div class="who">— 增长负责人 · 林女士</div></div>
      <div class="cs"><div class="q">连锁餐饮 80+ 门店</div><div class="big">-2.1h</div><p>原来每天人工汇总门店报表要 3 小时，现在看板自动更新，区域经理省下的时间用来巡店。</p><div class="who">— 运营总监 · 陈先生</div></div>
      <div class="cs"><div class="q">在线教育 SaaS</div><div class="big">+12pt</div><p>用留存看板定位到「第 3 课」流失高峰，重构引导后 7 日留存提升 12 个百分点。</p><div class="who">— 产品 VP · 周女士</div></div>
    </div>
  </div>
</section>

<section id="price">
  <div class="wrap">
    <div class="st">
      <div class="k">PRICING</div>
      <h2>价 格 方 案</h2>
      <div class="dv"></div>
    </div>
    <div class="price-grid">
      <div class="pc">
        <h3>入门版</h3>
        <div class="pr">￥0<small> / 永久免费</small></div>
        <div class="yr">适合个人或刚起步的小团队</div>
        <ul><li>3 个数据源</li><li>5 个看板</li><li>每日手动刷新</li><li>社区支持</li></ul>
        <a href="#">开始使用</a>
      </div>
      <div class="pc rec">
        <h3>专业版</h3>
        <div class="pr">￥299<small> / 月</small></div>
        <div class="yr">成长型团队的首选</div>
        <ul><li>无限数据源</li><li>无限看板</li><li>实时同步 + 预警</li><li>AI 解读</li><li>团队权限管理</li></ul>
        <a href="#">免费试用</a>
      </div>
      <div class="pc">
        <h3>企业版</h3>
        <div class="pr">定制<small> / 联系销售</small></div>
        <div class="yr">面向有合规与私有化需求</div>
        <ul><li>私有化部署</li><li>SSO 与审计日志</li><li>专属客户成功</li><li>SLA 保障</li></ul>
        <a href="#">联系销售</a>
      </div>
    </div>
  </div>
</section>

<section class="cta">
  <div class="wrap">
    <h2>今天就让数据开口</h2>
    <p>14 天专业版全功能试用，无需信用卡，5 分钟接好第一个数据源。</p>
    <div class="hero-btns">
      <a class="btn b-solid" href="#">免费试用 14 天</a>
      <a class="btn b-line" href="#feat">预约演示</a>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f3">
      <div>
        <div class="lg">数析 Insight</div>
        <p>让业务数据自己说话。<br>一个看板，看清全链路。</p>
      </div>
      <div><h5>产品</h5><ul><li>功能总览</li><li>数据源</li><li>价格</li><li>更新日志</li></ul></div>
      <div><h5>资源</h5><ul><li>帮助中心</li><li>API 文档</li><li>最佳实践</li><li>模板市场</li></ul></div>
      <div><h5>公司</h5><ul><li>关于我们</li><li>招贤纳士</li><li>联系销售</li><li>服务条款</li></ul></div>
    </div>
    <div class="cp">© 2026 数析 Insight　本页为 HTML 模板演示，产品名、数据与案例均为虚构</div>
  </div>
</footer>

</body>
</html>

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