r43/overview.html · 约 2907 字符
1<!doctype html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>数据概览</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-l">平台管理端</div>
13 <div class="top-r">数据概览</div>
14 </header>
15 <main class="main">
16<div class="grid" style="margin-bottom:12px">
17 <div class="kpi"><div class="n">8,642</div><div class="l">今日订单</div></div>
18 <div class="kpi"><div class="n">¥52.7w</div><div class="l">今日 GMV</div></div>
19 <div class="kpi"><div class="n">1,284</div><div class="l">活跃商家</div></div>
20 <div class="kpi"><div class="n">¥61</div><div class="l">客单价</div></div>
21</div>
22<div class="card">
23 <div class="sec-title"><span class="em">📈</span> 近 7 日订单趋势</div>
24 <div class="chart">
25 <div class="c" style="height:40%"><span>6.1k</span></div><div class="c" style="height:55%"><span>6.8k</span></div>
26 <div class="c" style="height:48%"><span>6.3k</span></div><div class="c" style="height:70%"><span>8.2k</span></div>
27 <div class="c" style="height:62%"><span>7.4k</span></div><div class="c" style="height:80%"><span>8.6k</span></div>
28 <div class="c" style="height:90%"><span>9.1k</span></div>
29 </div>
30 <div class="row muted" style="margin-top:8px"><span>周一</span><span>周日</span></div>
31</div>
32<div class="card">
33 <div class="sec-title"><span class="em">🍽️</span> 品类销售占比</div>
34 <div style="margin-bottom:10px"><div class="row" style="margin-bottom:5px"><span>快餐简餐</span><span class="muted">34%</span></div><div class="bar"><i style="width:34%"></i></div></div><div style="margin-bottom:10px"><div class="row" style="margin-bottom:5px"><span>饮品甜品</span><span class="muted">26%</span></div><div class="bar"><i style="width:26%"></i></div></div><div style="margin-bottom:10px"><div class="row" style="margin-bottom:5px"><span>西餐</span><span class="muted">18%</span></div><div class="bar"><i style="width:18%"></i></div></div><div style="margin-bottom:10px"><div class="row" style="margin-bottom:5px"><span>烘焙</span><span class="muted">12%</span></div><div class="bar"><i style="width:12%"></i></div></div><div style="margin-bottom:10px"><div class="row" style="margin-bottom:5px"><span>其他</span><span class="muted">10%</span></div><div class="bar"><i style="width:10%"></i></div></div>
35</div>
36<div class="card row"><div class="muted">🛡️ 数据每秒刷新 · 含退款与异常订单</div><button class="btn line sm">导出</button></div>
37</main>
38 <nav class="nav"><a class="" href="merchant.html"><span class="ic">🏪</span>商家</a><a class=" on" href="overview.html"><span class="ic">📊</span>数据</a></nav>
39</div>
40<script></script>
41</body>
42</html>