r86/index.html · 约 3206 字符
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="big">
17 <div class="t">📍 北京总部 · 研发中心</div>
18 <div class="c" id="clk">09:12</div>
19 <div class="t">2026-07-17 周五 · 当前班次 09:00–18:00</div>
20 <div style="display:flex;gap:10px;margin-top:14px">
21 <a class="btn full" style="text-decoration:none;text-align:center" href="#">✅ 上班打卡</a>
22 <a class="btn line full" style="text-decoration:none;text-align:center;border-color:#fff;color:#fff" href="#">🏃 下班打卡</a>
23 </div>
24</div>
25<div class="tgrid" style="margin-bottom:12px">
26 <a class="tile t-red" href="leave_apply.html" style="text-decoration:none"><span class="e">📝</span><span class="n">请假</span><span class="l">年假 / 事假 / 病假</span></a>
27 <a class="tile t-amber" href="overtime.html" style="text-decoration:none"><span class="e">⏰</span><span class="n">加班</span><span class="l">填报加班时长</span></a>
28 <a class="tile t-sky" href="travel.html" style="text-decoration:none"><span class="e">✈️</span><span class="n">出差</span><span class="l">行程与地点</span></a>
29 <a class="tile t-emer" href="records.html" style="text-decoration:none"><span class="e">📋</span><span class="n">考勤记录</span><span class="l">月度明细</span></a>
30</div>
31<div class="tgrid" style="margin-bottom:12px">
32 <div class="tile t-violet"><span class="l">本月出勤</span><span class="n">21 天</span></div>
33 <div class="tile t-amber"><span class="l">迟到</span><span class="n">1 次</span></div>
34 <div class="tile t-sky"><span class="l">请假</span><span class="n">2 天</span></div>
35 <div class="tile t-rose"><span class="l">剩余年假</span><span class="n">6 天</span></div>
36</div>
37<div class="card">
38 <div class="sec-title"><span>🕘</span> 今日打卡</div>
39 <div class="guide"><div class="info"><div class="nm">上班打卡</div><div class="sub">09:01 · 定位：总部 3 号楼</div></div><span class="badge b-ok">已打卡</span></div>
40 <div class="guide"><div class="info"><div class="nm">下班打卡</div><div class="sub">尚未打卡</div></div><span class="badge b-warn">待打卡</span></div>
41</div>
42</main>
43 <nav class="nav"><a class=" on" href="index.html"><span class="ic">🏠</span>打卡</a><a class="" href="records.html"><span class="ic">📋</span>考勤</a><a class="" href="leave_apply.html"><span class="ic">📝</span>请假</a><a class="" href="overtime.html"><span class="ic">⏰</span>加班</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
44</div>
45<script>
46function t(){var d=new Date();var h=('0'+d.getHours()).slice(-2),m=('0'+d.getMinutes()).slice(-2);var e=document.getElementById('clk');if(e)e.textContent=h+':'+m;}
47t();setInterval(t,1000);
48</script>
49</body>
50</html>