fine.html · 约 2692 字符
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">¥186</div><div class="lab">本月罚款合计</div></div>
19 <div class="box"><div class="num" style="color:var(--accent)">¥120</div><div class="lab">待收缴</div></div>
20 <div class="box"><div class="num" style="color:#16a34a">¥66</div><div class="lab">已收缴</div></div>
21 <div class="box"><div class="num" style="color:var(--secondary)">4</div><div class="lab">逾期记录</div></div>
22</div>
23<div class="section-title"><span>逾期罚款清单</span><span class="more">待缴 2 笔</span></div>
24<div class="list"><div class="row">
25 <div class="avatar">💰</div>
26 <div class="info"><div class="t">三体</div><div class="s">赵六 · 应还 2026-07-08</div><div class="s">逾期 5 天 · 罚款 ¥1.50</div></div>
27 <span class="btn">标记缴费</span>
28</div><div class="row">
29 <div class="avatar">💰</div>
30 <div class="info"><div class="t">百年孤独</div><div class="s">周八 · 应还 2026-07-05</div><div class="s">逾期 8 天 · 罚款 ¥2.40</div></div>
31 <span class="btn">标记缴费</span>
32</div><div class="row">
33 <div class="avatar">💰</div>
34 <div class="info"><div class="t">人类简史</div><div class="s">王五 · 应还 2026-06-30</div><div class="s">逾期 3 天 · 罚款 ¥0.90</div></div>
35 <span class="tag ok">已缴</span>
36</div><div class="row">
37 <div class="avatar">💰</div>
38 <div class="info"><div class="t">明朝那些事儿</div><div class="s">吴九 · 应还 2026-06-28</div><div class="s">逾期 2 天 · 罚款 ¥0.60</div></div>
39 <span class="tag gray">已减免</span>
40</div></div>
41
42<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 active" href="fine.html"><span class="icon">💰</span>罚款</a><a class="nav-item" href="stats.html"><span class="icon">📊</span>报表</a></div>
43<div class="safe-bottom"></div>
44</div>
45</body>
46</html>