circulation.html · 约 2983 字符
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="seg">
18 <div class="sg on">借出登记</div><div class="sg">归还登记</div>
19</div>
20<div class="form" style="margin-top:8px">
21 <div class="field"><label>读者证号</label><input placeholder="如 R202300142"></div>
22 <div class="field"><label>图书条码</label><input placeholder="扫描或输入索书号"></div>
23</div>
24<button class="btn full" onclick="alert('借出登记成功（演示）')">确认借出</button>
25<div class="section-title"><span>最近借出</span></div>
26<div class="list"><div class="row"><div class="avatar">📤</div><div class="info"><div class="t">深入理解计算机系统</div><div class="s">R202300142 张三</div><div class="s">07-12 09:24</div></div><span class="tag teal">借出</span></div><div class="row"><div class="avatar">📤</div><div class="info"><div class="t">活着</div><div class="s">R202300156 王五</div><div class="s">07-12 10:11</div></div><span class="tag teal">借出</span></div><div class="row"><div class="avatar">📤</div><div class="info"><div class="t">经济学原理</div><div class="s">R202300163 赵六</div><div class="s">07-12 11:02</div></div><span class="tag teal">归还</span></div></div>
27<div class="section-title"><span>最近归还</span></div>
28<div class="list"><div class="row"><div class="avatar">📥</div><div class="info"><div class="t">人类简史</div><div class="s">R202300142 张三</div><div class="s">07-12 11:02</div></div><span class="tag ok">正常归还</span></div><div class="row"><div class="avatar">📥</div><div class="info"><div class="t">三体</div><div class="s">R202300156 王五</div><div class="s">07-11 16:40</div></div><span class="tag no">逾期 3 天</span></div><div class="row"><div class="avatar">📥</div><div class="info"><div class="t">算法导论</div><div class="s">R202300170 孙七</div><div class="s">07-11 09:18</div></div><span class="tag ok">正常归还</span></div></div>
29
30<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 active" href="circulation.html"><span class="icon">🔄</span>借还</a><a class="nav-item" href="fine.html"><span class="icon">💰</span>罚款</a><a class="nav-item" href="stats.html"><span class="icon">📊</span>报表</a></div>
31<div class="safe-bottom"></div>
32</div>
33</body>
34</html>