1. 小蓝资源网首页
  2. 网站源码

PulseBoard 营销数据仪表盘 HTML 单页源码

小蓝IT • • 网站源码 • 阅读 16

带侧边导航的运营数据看板模板，含 KPI 卡片、柱状图、环形图与热销排行表格。

本源码是一款后台仪表盘/数据看板的单页模板，采用常见的左侧深色导航 + 右侧浅色内容区的经典布局。顶部提供日期筛选、全局搜索与用户信息，主体区域包含 4 张 KPI 卡片、销售趋势柱状图、流量来源环形图以及热销商品排行表格。

设计上特别注重数据可视化：柱状图与环形图均由纯 CSS 实现，无需引入图表库，加载更轻；KPI 卡片的涨跌箭头使用中国股市配色（涨红跌绿），符合国内用户直觉。表格行悬停高亮，状态标签颜色分明，整体风格简洁专业。

适合电商运营、广告投放、SaaS 后台等需要展示核心指标的场景。可作为 BI 系统的临时展示页、产品原型演示，或对接真实数据接口后作为正式仪表盘使用。

PulseBoard 营销数据仪表盘 HTML 单页源码

使用教程

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>营销数据看板 · Dashboard</title>
<style>
:root{
  --bg:#f6f7fb;
  --side:#1b1f33;
  --side-2:#252a44;
  --card:#ffffff;
  --line:#e8ebf2;
  --text:#1d2334;
  --muted:#7c869c;
  --pri:#5b5bf0;
  --pri-soft:#eeeeff;
  --up:#e13c3c;      /* 中国习惯：涨=红 */
  --down:#12a35a;    /* 跌=绿 */
  --warn:#f59e0b;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}

/* ===== 侧边栏 ===== */
aside{background:var(--side);color:#c9cee0;padding:22px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:0 22px 26px;font-weight:800;font-size:16px;color:#fff}
.brand i{
  width:32px;height:32px;border-radius:10px;font-style:normal;display:grid;place-items:center;
  background:linear-gradient(135deg,#6d6df5,#a86df5);font-size:15px;font-weight:900;
}
.menu{list-style:none}
.menu .grp{padding:16px 22px 8px;font-size:11px;letter-spacing:.14em;color:#6c7492}
.menu li a{
  display:flex;align-items:center;gap:11px;padding:11px 22px;font-size:14px;transition:.2s;
  border-left:3px solid transparent;
}
.menu li a:hover{background:var(--side-2);color:#fff}
.menu li a.on{background:var(--side-2);color:#fff;border-left-color:#8b8bf7}
.menu .ico{width:18px;text-align:center;opacity:.85}
.menu .num{margin-left:auto;font-size:11px;background:#e13c3c;color:#fff;padding:1px 7px;border-radius:99px}

/* ===== 主区 ===== */
main{padding:0 0 40px}
.topbar{
  background:var(--card);border-bottom:1px solid var(--line);padding:0 30px;height:64px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:9;
}
.topbar h1{font-size:18px;font-weight:800}
.topbar .right{display:flex;align-items:center;gap:14px}
.sbox{position:relative}
.sbox input{
  padding:9px 14px 9px 34px;border-radius:9px;border:1px solid var(--line);background:var(--bg);
  font-size:13.5px;width:210px;outline:none;font-family:inherit;color:var(--text);
}
.sbox input:focus{border-color:var(--pri);background:#fff}
.sbox::before{content:"⌕";position:absolute;left:12px;top:7px;color:var(--muted);font-size:15px}
.ib{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);cursor:pointer;background:#fff;position:relative}
.ib:hover{border-color:var(--pri);color:var(--pri)}
.ib .d{position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--up)}
.me{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--line)}
.me .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6d6df5,#a86df5);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.me .nm{font-size:13.5px;font-weight:600;line-height:1.3}
.me .rl{font-size:11.5px;color:var(--muted)}

.content{padding:26px 30px}

/* ===== 面包屑/筛选 ===== */
.filters{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.chip{padding:7px 16px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:13px;cursor:pointer;transition:.2s}
.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.chip:hover:not(.on){border-color:var(--pri);color:var(--pri)}
.filters .sp{margin-left:auto;font-size:13px;color:var(--muted)}

/* ===== KPI 卡片 ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;transition:.26s}
.kpi:hover{box-shadow:0 12px 28px rgba(29,35,52,.08);transform:translateY(-3px)}
.kpi .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kpi .h span{font-size:13px;color:var(--muted)}
.kpi .h .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--pri-soft);color:var(--pri)}
.kpi .v{font-size:28px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.kpi .t{font-size:12.5px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.kpi .t b{font-weight:700}
.up{color:var(--up)}.down{color:var(--down)}
.kpi:nth-child(2) .ic{background:#ffeeee;color:var(--up)}
.kpi:nth-child(3) .ic{background:#e7f7ef;color:var(--down)}
.kpi:nth-child(4) .ic{background:#fff5e2;color:var(--warn)}

/* ===== 图表区 ===== */
.grid2{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-bottom:18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.panel h3{font-size:15.5px;font-weight:800}
.panel .ph small{font-size:12.5px;color:var(--muted)}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}

/* 柱状图（纯 CSS） */
.bars{display:flex;align-items:flex-end;gap:14px;height:216px;padding-top:10px;border-bottom:1px solid var(--line)}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .stack{width:100%;max-width:38px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:100%}
.bars .b1,.bars .b2{border-radius:5px 5px 0 0;transition:.4s}
.bars .b1{background:linear-gradient(180deg,#7c7cf7,#5b5bf0)}
.bars .b2{background:#d9dcf7;border-radius:0 0 5px 5px}
.bars .col:hover .b1{filter:brightness(1.14)}
.bars .lb{font-size:11.5px;color:var(--muted)}

/* 环形图 */
.donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ring{
  width:150px;height:150px;border-radius:50%;position:relative;flex-shrink:0;
  background:conic-gradient(#5b5bf0 0 42%, #f59e0b 42% 68%, #12a35a 68% 86%, #e2e5ee 86% 100%);
}
.ring::after{
  content:"";position:absolute;inset:24px;border-radius:50%;background:var(--card);
}
.ring .ct{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:2}
.ring .ct b{display:block;font-size:23px;font-weight:900;line-height:1.2}
.ring .ct span{font-size:11.5px;color:var(--muted)}
.dlist{flex:1;min-width:150px}
.dlist .r{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.dlist .r:last-child{border-bottom:none}
.dlist .r i{width:9px;height:9px;border-radius:3px}
.dlist .r b{margin-left:auto;font-weight:700}

/* 表格 */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;padding:10px 12px;
  border-bottom:1px solid var(--line);background:#fafbfe;
}
.tbl th:first-child{border-radius:8px 0 0 8px}
.tbl th:last-child{border-radius:0 8px 8px 0;text-align:right}
.tbl td{padding:14px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#fafbff}
.tbl td:last-child{text-align:right;font-weight:700}
.st{display:inline-block;padding:3px 11px;border-radius:99px;font-size:11.5px;font-weight:600}
.st.a{background:#e7f7ef;color:var(--down)}
.st.b{background:#fff5e2;color:var(--warn)}
.st.c{background:#ffeeee;color:var(--up)}
.pd{display:flex;align-items:center;gap:10px}
.pd .sq{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px;color:#fff;font-weight:800}

@media(max-width:1000px){
  .app{grid-template-columns:1fr}
  aside{position:static;height:auto}
  .grid2{grid-template-columns:1fr}
  .topbar .sbox{display:none}
  .content{padding:18px}
}
</style>
</head>
<body>

<div class="app">
  <aside>
    <div class="brand"><i>数</i>PulseBoard</div>
    <ul class="menu">
      <li class="grp">分 析</li>
      <li><a href="#" class="on"><span class="ico">◈</span>数据总览</a></li>
      <li><a href="#"><span class="ico">◎</span>流量来源</a></li>
      <li><a href="#"><span class="ico">◇</span>转化漏斗</a></li>
      <li><a href="#"><span class="ico">⌁</span>实时监控</a></li>
      <li class="grp">运 营</li>
      <li><a href="#"><span class="ico">▤</span>订单管理<span class="num">12</span></a></li>
      <li><a href="#"><span class="ico">◍</span>客户名单</a></li>
      <li><a href="#"><span class="ico">✦</span>营销活动</a></li>
      <li><a href="#"><span class="ico">⧉</span>内容素材</a></li>
      <li class="grp">系 统</li>
      <li><a href="#"><span class="ico">⚙</span>账号设置</a></li>
      <li><a href="#"><span class="ico">⎋</span>退出登录</a></li>
    </ul>
  </aside>

  <main>
    <div class="topbar">
      <h1>数据总览</h1>
      <div class="right">
        <div class="sbox"><input type="text" placeholder="搜索订单 / 客户 / 活动"></div>
        <div class="ib">✉<span class="d"></span></div>
        <div class="ib">☾</div>
        <div class="me">
          <div class="av">林</div>
          <div><div class="nm">林知遥</div><div class="rl">运营负责人</div></div>
        </div>
      </div>
    </div>

    <div class="content">

      <div class="filters">
        <div class="chip on">近 7 天</div>
        <div class="chip">近 30 天</div>
        <div class="chip">本季度</div>
        <div class="chip">自定义</div>
        <div class="sp">数据更新于 2026-08-01 13:20 · 每 15 分钟同步一次</div>
      </div>

      <div class="kpis">
        <div class="kpi">
          <div class="h"><span>总访问量</span><div class="ic">◉</div></div>
          <div class="v">284,517</div>
          <div class="t"><b class="up">▲ 12.6%</b> 较上周期</div>
        </div>
        <div class="kpi">
          <div class="h"><span>销售额</span><div class="ic">¥</div></div>
          <div class="v">¥1,286,430</div>
          <div class="t"><b class="up">▲ 8.4%</b> 较上周期</div>
        </div>
        <div class="kpi">
          <div class="h"><span>转化率</span><div class="ic">⇗</div></div>
          <div class="v">3.82%</div>
          <div class="t"><b class="down">▼ 0.31%</b> 较上周期</div>
        </div>
        <div class="kpi">
          <div class="h"><span>客单价</span><div class="ic">◐</div></div>
          <div class="v">¥426.9</div>
          <div class="t"><b class="up">▲ 5.2%</b> 较上周期</div>
        </div>
      </div>

      <div class="grid2">
        <div class="panel">
          <div class="ph">
            <div><h3>近 7 日销售趋势</h3><small>单位：万元</small></div>
            <div class="legend"><span><i style="background:#5b5bf0"></i>本周</span><span><i style="background:#d9dcf7"></i>上周</span></div>
          </div>
          <div class="bars">
            <div class="col"><div class="stack"><div class="b1" style="height:44%"></div><div class="b2" style="height:26%"></div></div><div class="lb">周一</div></div>
            <div class="col"><div class="stack"><div class="b1" style="height:58%"></div><div class="b2" style="height:22%"></div></div><div class="lb">周二</div></div>
            <div class="col"><div class="stack"><div class="b1" style="height:39%"></div><div class="b2" style="height:31%"></div></div><div class="lb">周三</div></div>
            <div class="col"><div class="stack"><div class="b1" style="height:68%"></div><div class="b2" style="height:20%"></div></div><div class="lb">周四</div></div>
            <div class="col"><div class="stack"><div class="b1" style="height:81%"></div><div class="b2" style="height:15%"></div></div><div class="lb">周五</div></div>
            <div class="col"><div class="stack"><div class="b1" style="height:62%"></div><div class="b2" style="height:24%"></div></div><div class="lb">周六</div></div>
            <div class="col"><div class="stack"><div class="b1" style="height:52%"></div><div class="b2" style="height:28%"></div></div><div class="lb">周日</div></div>
          </div>
        </div>

        <div class="panel">
          <div class="ph"><h3>流量来源占比</h3></div>
          <div class="donut">
            <div class="ring"><div class="ct"><b>284K</b><span>总访问</span></div></div>
            <div class="dlist">
              <div class="r"><i style="background:#5b5bf0"></i>自然搜索<b>42%</b></div>
              <div class="r"><i style="background:#f59e0b"></i>社交媒体<b>26%</b></div>
              <div class="r"><i style="background:#12a35a"></i>付费广告<b>18%</b></div>
              <div class="r"><i style="background:#e2e5ee"></i>直接访问<b>14%</b></div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel">
        <div class="ph"><div><h3>热销商品排行</h3><small>按近 7 日销售额排序</small></div><small style="color:var(--pri);cursor:pointer">查看全部 →</small></div>
        <table class="tbl">
          <thead>
            <tr><th>商品</th><th>分类</th><th>销量</th><th>库存状态</th><th>销售额</th></tr>
          </thead>
          <tbody>
            <tr>
              <td><div class="pd"><div class="sq" style="background:#5b5bf0">耳</div>Aurora One 降噪耳机</div></td>
              <td>数码影音</td><td>1,284 件</td><td><span class="st a">充足</span></td><td>¥1,667,916</td>
            </tr>
            <tr>
              <td><div class="pd"><div class="sq" style="background:#f59e0b">灯</div>暖光落地阅读灯</div></td>
              <td>家居生活</td><td>968 件</td><td><span class="st b">偏低</span></td><td>¥483,032</td>
            </tr>
            <tr>
              <td><div class="pd"><div class="sq" style="background:#12a35a">杯</div>双层玻璃保温杯</div></td>
              <td>厨房餐具</td><td>2,431 件</td><td><span class="st a">充足</span></td><td>¥291,720</td>
            </tr>
            <tr>
              <td><div class="pd"><div class="sq" style="background:#e13c3c">键</div>机械键盘 87 键版</div></td>
              <td>电脑外设</td><td>512 件</td><td><span class="st c">告罄</span></td><td>¥255,488</td>
            </tr>
            <tr>
              <td><div class="pd"><div class="sq" style="background:#8b5cf6">包</div>轻量通勤双肩包</div></td>
              <td>箱包配饰</td><td>736 件</td><td><span class="st a">充足</span></td><td>¥213,440</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </main>
</div>

<script>
document.querySelectorAll('.chip').forEach(function(c){
  c.addEventListener('click',function(){
    document.querySelectorAll('.chip').forEach(function(x){x.classList.remove('on')});
    c.classList.add('on');
  });
});
</script>
</body>
</html>

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

394 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
Aurora One 耳机产品展示页 HTML 单页源码
上一篇 9小时前
周五来信邮件订阅落地页 HTML 单页源码
下一篇 9小时前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服