search.html · 约 3793 字符
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">按书名 / 作者 / ISBN 查找馆藏</div>
15</div>
16
17<div class="search-bar"><input placeholder="搜索书名、作者或 ISBN"><span class="mic">🎙️</span></div>
18<div class="filters">
19 <span class="f on">全部分类</span><span class="f">文学</span><span class="f">科技</span><span class="f">社科</span>
20</div>
21<div class="filters">
22 <span class="f on">全部状态</span><span class="f">可借</span><span class="f">已借出</span><span class="f">预约中</span>
23</div>
24<div class="section-title"><span>检索结果</span><span class="more">共 8 条</span></div>
25<div class="list"><div class="row">
26 <div class="avatar">📕</div>
27 <div class="info"><div class="t">深入理解计算机系统</div><div class="s">Randal E.Bryant · TP311/BRY</div><div class="s">科技阅览室 · 馆藏 4 / 可借 2</div></div>
28 <span class="tag ok">可借</span>
29</div><div class="row">
30 <div class="avatar">📕</div>
31 <div class="info"><div class="t">人类简史</div><div class="s">尤瓦尔·赫拉利 · K02/HLL</div><div class="s">社科阅览室 · 馆藏 6 / 可借 5</div></div>
32 <span class="tag ok">可借</span>
33</div><div class="row">
34 <div class="avatar">📕</div>
35 <div class="info"><div class="t">Python编程：从入门到实践</div><div class="s">Eric Matthes · TP311/MAT</div><div class="s">科技阅览室 · 馆藏 8 / 可借 6</div></div>
36 <span class="tag ok">可借</span>
37</div><div class="row">
38 <div class="avatar">📕</div>
39 <div class="info"><div class="t">三体</div><div class="s">刘慈欣 · I247.5/LCX</div><div class="s">文学阅览室 · 馆藏 5 / 可借 0</div></div>
40 <span class="tag no">已借出</span>
41</div><div class="row">
42 <div class="avatar">📕</div>
43 <div class="info"><div class="t">百年孤独</div><div class="s">加西亚·马尔克斯 · I775.4/MEK</div><div class="s">文学阅览室 · 馆藏 3 / 可借 0</div></div>
44 <span class="tag no">已借出</span>
45</div><div class="row">
46 <div class="avatar">📕</div>
47 <div class="info"><div class="t">算法导论</div><div class="s">Thomas H.Cormen · TP301/COR</div><div class="s">科技阅览室 · 馆藏 4 / 可借 1</div></div>
48 <span class="tag wait">预约中</span>
49</div><div class="row">
50 <div class="avatar">📕</div>
51 <div class="info"><div class="t">明朝那些事儿</div><div class="s">当年明月 · K248/DYM</div><div class="s">社科阅览室 · 馆藏 7 / 可借 4</div></div>
52 <span class="tag ok">可借</span>
53</div><div class="row">
54 <div class="avatar">📕</div>
55 <div class="info"><div class="t">经济学原理</div><div class="s">曼昆 · F0/MK</div><div class="s">社科阅览室 · 馆藏 5 / 可借 3</div></div>
56 <span class="tag ok">可借</span>
57</div></div>
58
59<div class="bottom-nav"><a class="nav-item" href="index.html"><span class="icon">🏠</span>主页</a><a class="nav-item active" href="search.html"><span class="icon">🔍</span>检索</a><a class="nav-item" href="history.html"><span class="icon">📖</span>历史</a><a class="nav-item" href="renew.html"><span class="icon">🔁</span>续借</a><a class="nav-item" href="catalog.html"><span class="icon">🛠️</span>管理</a></div>
60<div class="safe-bottom"></div>
61</div>
62</body>
63</html>