attendance.html · 约 3119 字符
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>驰旭科技OA · 考勤签到</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="checkin">
18 <div class="clock">09:02</div>
19 <div class="state">今日已上班打卡 · 定位：驰旭科技 A 座 8F</div>
20 <button class="btn" style="margin-top:12px;background:rgba(255,255,255,.2)" onclick="alert('下班打卡成功（演示）')">打卡下班</button>
21</div>
22<div class="kpi">
23 <div class="box"><div class="num">21</div><div class="lab">本月出勤(天)</div></div>
24 <div class="box"><div class="num" style="color:#16a34a">0</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:#16a34a">0</div><div class="lab">缺勤</div></div>
27</div>
28<div class="section-title"><span>今日打卡</span></div>
29<div class="list"><div class="row"><div class="avatar">🕒</div><div class="info"><div class="t">上班打卡</div><div class="s">09:02</div></div><span class="tag ✔️">正常</span></div><div class="row"><div class="avatar">🕒</div><div class="info"><div class="t">下班打卡</div><div class="s">—</div></div><span class="tag ⏳">未打卡</span></div></div>
30<div class="section-title"><span>最近 5 天记录</span></div>
31<div class="list"><div class="row"><div class="avatar">📅</div><div class="info"><div class="t">09-12 周五</div><div class="s">09:05 / 18:40</div></div><span class="tag ok">正常</span></div><div class="row"><div class="avatar">📅</div><div class="info"><div class="t">09-11 周四</div><div class="s">08:58 / 18:32</div></div><span class="tag ok">正常</span></div><div class="row"><div class="avatar">📅</div><div class="info"><div class="t">09-10 周三</div><div class="s">09:10 / 18:55</div></div><span class="tag ok">正常</span></div><div class="row"><div class="avatar">📅</div><div class="info"><div class="t">09-09 周二</div><div class="s">08:55 / 19:10</div></div><span class="tag ok">正常</span></div><div class="row"><div class="avatar">📅</div><div class="info"><div class="t">09-08 周一</div><div class="s">09:03 / 18:38</div></div><span class="tag ok">正常</span></div></div>
32
33<div class="bottom-nav"><a class="nav-item" href="index.html"><span class="icon">🏠</span>主页</a><a class="nav-item active" href="attendance.html"><span class="icon">📍</span>考勤</a><a class="nav-item" href="leave.html"><span class="icon">🌴</span>请假</a><a class="nav-item" href="notice.html"><span class="icon">📢</span>公告</a></div>
34<div class="safe-bottom"></div>
35</div>
36</body>
37</html>