index.html · 约 3518 字符
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="card" style="margin-top:12px;padding:16px">
18 <div class="row" style="border:none;padding:0">
19 <div class="avatar">📚</div>
20 <div class="info"><div class="t">张三</div><div class="s">读者证号 R202300142 · 本科生</div></div>
21 </div>
22 <div class="kpi" style="margin-top:14px">
23 <div class="box"><div class="num">3</div><div class="lab">当前借阅</div></div>
24 <div class="box"><div class="num" style="color:var(--accent)">1</div><div class="lab">即将到期</div></div>
25 <div class="box"><div class="num" style="color:#16a34a">0</div><div class="lab">逾期</div></div>
26 <div class="box"><div class="num" style="color:var(--secondary)">12</div><div class="lab">我的收藏</div></div>
27 </div>
28 <div class="stat-line"><span>可借额度</span><b>5 本</b></div>
29</div>
30<div class="section-title"><span>快捷功能</span></div>
31<div class="list">
32 <a class="row" href="search.html" style="text-decoration:none;color:inherit"><div class="avatar">🔍</div><div class="info"><div class="t">检索图书</div><div class="s">按书名 / 作者 / ISBN 查找</div></div><span class="tag blue">→</span></a>
33 <a class="row" href="history.html" style="text-decoration:none;color:inherit"><div class="avatar">📖</div><div class="info"><div class="t">借阅历史</div><div class="s">查看全部借还记录</div></div><span class="tag blue">→</span></a>
34 <a class="row" href="renew.html" style="text-decoration:none;color:inherit"><div class="avatar">🔁</div><div class="info"><div class="t">续借与收藏</div><div class="s">在线续借 · 我的书单</div></div><span class="tag blue">→</span></a>
35</div>
36<div class="section-title"><span>馆内通知</span><span class="more">全部</span></div>
37<div class="notice"><div class="n"><div class="ic">📢</div><div class="info"><div class="nt">暑期延长借阅通知</div><div class="nd">假期借阅期限自动延长至 9 月 1 日</div></div><div class="ndate">07-12</div></div></div><div class="notice"><div class="n"><div class="ic">🛠️</div><div class="info"><div class="nt">系统维护预告</div><div class="nd">7 月 20 日 02:00-04:00 例行维护</div></div><div class="ndate">07-10</div></div></div><div class="notice"><div class="n"><div class="ic">📚</div><div class="info"><div class="nt">新书到馆</div><div class="nd">本月新增纸质图书 1,240 册</div></div><div class="ndate">07-08</div></div></div>
38
39<div class="bottom-nav"><a class="nav-item active" href="index.html"><span class="icon">🏠</span>主页</a><a class="nav-item" 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>
40<div class="safe-bottom"></div>
41</div>
42</body>
43</html>