r97/stats.html · 约 3053 字符
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">486</div><div class="l">本月领用件数</div></div>
18 <div class="kpi"><div class="n">42</div><div class="l">活跃申领人</div></div>
19 <div class="kpi"><div class="n">¥2.3k</div><div class="l">采购支出</div></div>
20 <div class="kpi"><div class="n">6</div><div class="l">高频用品</div></div>
21</div>
22<div class="card">
23 <div class="sec-title"><span>🏆</span> Top 领用用品</div>
24 <div class="item"><div class="ico">🖊️</div><div class="info"><div class="nm">中性笔（黑）</div><div class="sub">领用 142 次</div></div><div class="bar" style="width:90px"><i style="width:100%"></i></div></div><div class="item"><div class="ico">📒</div><div class="info"><div class="nm">A5 笔记本</div><div class="sub">领用 98 次</div></div><div class="bar" style="width:90px"><i style="width:84%"></i></div></div><div class="item"><div class="ico">🧻</div><div class="info"><div class="nm">抽纸</div><div class="sub">领用 76 次</div></div><div class="bar" style="width:90px"><i style="width:68%"></i></div></div><div class="item"><div class="ico">🖨️</div><div class="info"><div class="nm">A4 打印纸</div><div class="sub">领用 64 次</div></div><div class="bar" style="width:90px"><i style="width:52%"></i></div></div>
25</div>
26<div class="card">
27 <div class="sec-title"><span>📊</span> 部门领用占比</div>
28 <div class="item"><div class="info"><div class="nm">研发部</div></div><div class="bar" style="flex:1;margin:0 12px"><i style="width:34%"></i></div><span class="muted">34%</span></div>
29 <div class="item"><div class="info"><div class="nm">市场部</div></div><div class="bar" style="flex:1;margin:0 12px"><i style="width:28%"></i></div><span class="muted">28%</span></div>
30 <div class="item"><div class="info"><div class="nm">行政部</div></div><div class="bar" style="flex:1;margin:0 12px"><i style="width:22%"></i></div><span class="muted">22%</span></div>
31 <div class="item"><div class="info"><div class="nm">设计部</div></div><div class="bar" style="flex:1;margin:0 12px"><i style="width:16%"></i></div><span class="muted">16%</span></div>
32</div>
33</main>
34 <nav class="nav"><a class="" href="stock.html"><span class="ic">🗃️</span>库存</a><a class="" href="approve.html"><span class="ic">✅</span>审批</a><a class="" href="stock_in.html"><span class="ic">🚚</span>入库</a><a class=" on" href="stats.html"><span class="ic">📊</span>报表</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
35</div>
36</body>
37</html>