stats.html · 约 4240 字符
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.0, maximum-scale=1.0, user-scalable=no">
6<title>晨星图书馆 · 借阅统计报表</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="wrap">
11<div class="header">
12 <div class="top"><span class="role">管理端</span><span style="margin-left:auto;font-size:12px;opacity:.85">晨星图书馆</span></div>
13 <h1>借阅统计报表</h1>
14 <div class="sub">李四 · 馆藏管理员</div>
15</div>
16
17<div class="kpi">
18 <div class="box"><div class="num">1286</div><div class="lab">本月借出（册次）</div></div>
19 <div class="box"><div class="num" style="color:var(--secondary)">1142</div><div class="lab">本月归还（册次）</div></div>
20 <div class="box"><div class="num" style="color:var(--accent)">642</div><div class="lab">活跃读者</div></div>
21 <div class="box"><div class="num">78%</div><div class="lab">在馆率</div></div>
22</div>
23<div class="svg-wrap">
24 <h3>📚 分类借阅占比</h3>
25 <div class="bar"><div class="col"><span class="v">32%</span><div class="fill" style="height:120px;background:#4f46e5"></div><span class="v">文学</span></div><div class="col"><span class="v">28%</span><div class="fill" style="height:108px;background:#0d9488"></div><span class="v">科技</span></div><div class="col"><span class="v">26%</span><div class="fill" style="height:103px;background:#f59e0b"></div><span class="v">社科</span></div><div class="col"><span class="v">14%</span><div class="fill" style="height:69px;background:#9ca3af"></div><span class="v">其他</span></div></div>
26</div>
27<div class="svg-wrap">
28 <h3>📈 近 6 月借阅趋势</h3>
29 <div class="bar"><div class="col"><span class="v">980</span><div class="fill" style="height:96px"></div></div><div class="col"><span class="v">1060</span><div class="fill" style="height:102px"></div></div><div class="col"><span class="v">1120</span><div class="fill" style="height:107px"></div></div><div class="col"><span class="v">1190</span><div class="fill" style="height:112px"></div></div><div class="col"><span class="v">1240</span><div class="fill" style="height:116px"></div></div><div class="col"><span class="v">1286</span><div class="fill" style="height:120px"></div></div></div>
30 <div style="display:flex;justify-content:space-around;margin-top:6px"><span class="v">2月</span><span class="v">3月</span><span class="v">4月</span><span class="v">5月</span><span class="v">6月</span><span class="v">7月</span></div>
31</div>
32<div class="section-title"><span>借阅排行榜</span><span class="more">TOP 5</span></div>
33<div class="list"><div class="row"><div class="avatar">📊</div><div class="info"><div class="t">深入理解计算机系统</div><div class="s">累计借阅 86 次</div></div><span class="tag blue">TOP</span></div><div class="row"><div class="avatar">📊</div><div class="info"><div class="t">人类简史</div><div class="s">累计借阅 74 次</div></div><span class="tag blue">TOP</span></div><div class="row"><div class="avatar">📊</div><div class="info"><div class="t">三体</div><div class="s">累计借阅 69 次</div></div><span class="tag blue">TOP</span></div><div class="row"><div class="avatar">📊</div><div class="info"><div class="t">Python编程</div><div class="s">累计借阅 63 次</div></div><span class="tag blue">TOP</span></div><div class="row"><div class="avatar">📊</div><div class="info"><div class="t">算法导论</div><div class="s">累计借阅 58 次</div></div><span class="tag blue">TOP</span></div></div>
34<button class="btn full" onclick="alert('报表已导出（演示）')">导出统计报表</button>
35
36<div class="bottom-nav"><a class="nav-item" href="index.html"><span class="icon">🏠</span>主页</a><a class="nav-item" href="catalog.html"><span class="icon">📥</span>编目</a><a class="nav-item" href="circulation.html"><span class="icon">🔄</span>借还</a><a class="nav-item" href="fine.html"><span class="icon">💰</span>罚款</a><a class="nav-item active" href="stats.html"><span class="icon">📊</span>报表</a></div>
37<div class="safe-bottom"></div>
38</div>
39</body>
40</html>