💻 代码预览 · 小草员工管家

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
11<header class="header"><span class="back"></span><h1>考勤管理</h1><span class="right">📅</span></header>
12<div class="clock-box">
13  <div class="cb-time" id="nowTime">09:02</div>
14  <div class="cb-date">2026-08-14 星期五 · 已打卡 08:59</div>
15  <div class="cb-btn" data-toast="下班打卡成功（18:02）">📸 下班打卡</div>
16</div>
17<div class="att-sum">
18  <div class="as-item"><b>8,426</b><span>应出勤</span></div>
19  <div class="as-item"><b>8,402</b><span>已出勤</span></div>
20  <div class="as-item"><b>18</b><span>请假</span></div>
21  <div class="as-item"><b>6</b><span>异常</span></div>
22</div>
23<div class="emp-tabs">
24  <div class="emp-tab sel">今日出勤</div>
25  <div class="emp-tab">考勤异常</div>
26  <div class="emp-tab">请假申请</div>
27  <div class="emp-tab">加班调休</div>
28  <div class="emp-tab">排班表</div>
29</div>
30<div class="section-title">今日打卡记录</div>
31<div id="attList"></div>
32<div class="section-title">本月请假统计</div>
33<div class="card" style="margin-top:0;font-size:12px;color:#5a6a92;line-height:2">
34  🏖️ 年假：已休 3.5 天 / 剩余 9.5 天<br/>
35  🤒 病假：0 天（本月） · 🏠 事假：2 天（本月）<br/>
36  ⏰ 加班：本月累计 18.5 小时 · 调休余额 12 小时
37</div>
38
39
40<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>工作台</a><a class="" href="employees.html"><span class="icon">👥</span>员工</a><a class=" active" href="attendance.html"><span class="icon">🕐</span>考勤</a><a class="" href="recruitment.html"><span class="icon">🎯</span>招聘</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
41<script src="data.js"></script>
42<script>
43  var al = document.getElementById('attList');
44  var h = '';
45  var stMap = { normal: ['正常出勤', 'normal'], ab: ['考勤异常', 'ab'], leave: ['请假', 'leave'] };
46  window.DATA.atts.forEach(function (a) {
47    var st = stMap[a.status] || ['正常出勤', 'normal'];
48    h += '<div class="att-card"><div class="ac-head">' + a.name + ' · ' + a.dept + ' <span class="st ' + st[1] + '">' + st[0] + '</span></div>'
49      + '<div class="ac-row"><span>上班 ' + a.in + ' · 下班 ' + a.out + '</span><span>工时 ' + a.work + '</span></div>'
50      + '<div class="ac-row"><span>加班 ' + a.overtime + ' · 已计入调休</span></div>'
51      + '<div class="ac-foot"><i>补卡</i><i>申请</i><i class="main">详情</i></div></div>';
52  });
53  al.innerHTML = h;
54</script>
55<script src="app.js"></script>
56</body>
57</html>