r72/home.html · 约 2256 字符
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,maximum-scale=1,user-scalable=no">
6<title>首页</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-l">学生端 · 林晓</div>
13 <div class="top-r">首页</div>
14 </header>
15 <main class="main">
16<div class="banner"><div class="b1">🩺 今日健康打卡</div>
17<div class="b2">请于 12:00 前完成打卡 · 当前状态：已打卡</div></div>
18<div class="alert"><div class="a1">⚠️ 预警提示</div>
19<div class="a2">本班李婷婷（体温 37.8℃）已触发异常，辅导员正在跟进处置。</div></div>
20<div class="grid" style="margin-bottom:12px">
21 <div class="kpi"><div class="n">已打卡</div><div class="l">本人今日状态 · 绿码</div></div>
22 <div class="kpi red"><div class="n">1</div><div class="l">本班异常人数</div></div>
23 <div class="kpi"><div class="n">42/45</div><div class="l">本班打卡进度</div></div>
24 <div class="kpi red"><div class="n">3</div><div class="l">本班未打卡</div></div>
25</div>
26<div class="card">
27 <div class="sec-title"><span class="em">📅</span> 我的打卡概况</div>
28 <div class="row" style="margin-bottom:8px"><span class="muted">连续打卡</span><b>28 天</b></div>
29 <div class="row" style="margin-bottom:8px"><span class="muted">本月出勤打卡</span><b>21/23 天</b></div>
30 <div class="row"><span class="muted">健康码</span><span class="badge b-ok">绿码</span></div>
31</div>
32<div class="row" style="gap:8px;margin:4px 2px 12px">
33 <a class="btn flex" style="flex:1;text-decoration:none;text-align:center" href="form.html">立即打卡</a>
34 <a class="btn line flex" style="flex:1;text-decoration:none;text-align:center" href="record.html">查看记录</a>
35</div>
36</main>
37 <nav class="nav"><a class=" on" href="home.html"><span class="ic">🏠</span>首页</a><a class="" href="form.html"><span class="ic">✍️</span>打卡</a><a class="" href="record.html"><span class="ic">📋</span>记录</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
38</div>
39<script></script>
40</body>
41</html>