r48/overview.html · 约 4289 字符
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="seg" style="margin-bottom:12px"><div class="sg on"><button>🍜 新品尝鲜</button></div><div class="sg"><button>🎫 活动报名</button></div></div>
17<div class="grid" style="margin-bottom:12px">
18 <div class="kpi"><div class="n">1,284</div><div class="l">总回答数</div></div>
19 <div class="kpi"><div class="n">92%</div><div class="l">回收率</div></div>
20 <div class="kpi"><div class="n">368</div><div class="l">今日新增</div></div>
21 <div class="kpi"><div class="n">2′14″</div><div class="l">平均时长</div></div>
22</div>
23<div class="card">
24 <div class="sec-title"><span class="em">📈</span> 近 7 日回答趋势</div>
25 <div style="display:flex;align-items:flex-end;gap:8px;height:120px;padding:0 4px">
26 <div style="flex:1;background:var(--acc);border-radius:6px 6px 0 0;height:40%;position:relative"><span style="position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)">120</span></div><div style="flex:1;background:var(--acc);border-radius:6px 6px 0 0;height:55%;position:relative"><span style="position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)">168</span></div><div style="flex:1;background:var(--acc);border-radius:6px 6px 0 0;height:48%;position:relative"><span style="position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)">146</span></div><div style="flex:1;background:var(--acc);border-radius:6px 6px 0 0;height:70%;position:relative"><span style="position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)">210</span></div><div style="flex:1;background:var(--acc);border-radius:6px 6px 0 0;height:62%;position:relative"><span style="position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)">186</span></div><div style="flex:1;background:var(--acc);border-radius:6px 6px 0 0;height:85%;position:relative"><span style="position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)">256</span></div><div style="flex:1;background:var(--acc);border-radius:6px 6px 0 0;height:100%;position:relative"><span style="position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--sub)">368</span></div>
27 </div>
28 <div style="display:flex;gap:8px;margin-top:4px"><span style="flex:1;text-align:center;font-size:10px;color:var(--sub)">07-11</span>
29 <span style="flex:1;text-align:center;font-size:10px;color:var(--sub)">07-12</span><span style="flex:1;text-align:center;font-size:10px;color:var(--sub)">07-13</span>
30 <span style="flex:1;text-align:center;font-size:10px;color:var(--sub)">07-14</span><span style="flex:1;text-align:center;font-size:10px;color:var(--sub)">07-15</span>
31 <span style="flex:1;text-align:center;font-size:10px;color:var(--sub)">07-16</span><span style="flex:1;text-align:center;font-size:10px;color:var(--sub)">07-17</span></div>
32</div>
33<div class="card">
34 <div class="sec-title"><span class="em">📱</span> 来源渠道</div>
35 <div class="row" style="margin-bottom:6px"><span class="muted">微信</span><b>58%</b></div><div class="bar"><i style="width:58%"></i></div>
36 <div class="row" style="margin:10px 0 6px"><span class="muted">钉钉</span><b>27%</b></div><div class="bar"><i style="width:27%"></i></div>
37 <div class="row" style="margin:10px 0 6px"><span class="muted">浏览器</span><b>15%</b></div><div class="bar"><i style="width:15%"></i></div>
38</div>
39</main>
40 <nav class="nav"><a class=" on" href="overview.html"><span class="ic">📊</span>概览</a><a class="" href="break.html"><span class="ic">📈</span>分析</a><a class="" href="excel.html"><span class="ic">📤</span>导出</a><a class="" href="me.html"><span class="ic">👤</span>我的</a></nav>
41</div>
42<script></script>
43</body>
44</html>