💻 代码预览 · 小草家校通

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"><a class="back" onclick="history.back()">‹</a><h1>考勤与安全</h1><span class="right"></span></header>
12<div class="safe-card">
13  <div class="sc-title">📍 实时定位</div>
14  <div class="sc-loc" id="safeLoc"></div>
15  <div class="sc-sub" id="safeSub"></div>
16  <div class="sc-emoji">🛰️</div>
17</div>
18<div class="section-title">🚪 考勤记录</div>
19<div id="attList"></div>
20<div class="fence-box">
21  <div class="fb-title">⚡ 安全守护</div>
22  <div id="fenceList"></div>
23</div>
24<div class="health-box">
25  <div class="hb-title">💗 健康数据</div>
26  <div id="healthList"></div>
27</div>
28<div style="height:70px"></div>
29
30
31<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="notice.html"><span class="icon">📢</span>通知</a><a class="" href="homework.html"><span class="icon">📝</span>作业</a><a class="" href="grade.html"><span class="icon">📊</span>成绩</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
32<script src="data.js"></script>
33<script>
34  document.getElementById('safeLoc').textContent = window.DATA.safe.loc;
35  document.getElementById('safeSub').textContent = window.DATA.safe.sub;
36  var al = document.getElementById('attList');
37  var h = '';
38  window.DATA.attendance.forEach(function (a) {
39    var ic = a.type === 'in' ? 'ac-in' : 'ac-out';
40    var em = a.type === 'in' ? '🟢' : '🟡';
41    h += '<div class="att-card"><div class="ac-ico ' + ic + '">' + em + '</div><div class="ac-body"><div class="ac-title">' + a.title + '</div><div class="ac-time">' + a.time + ' · ' + a.photo + '</div></div><div class="ac-st">' + a.status + '</div></div>';
42  });
43  al.innerHTML = h;
44  var fl = document.getElementById('fenceList');
45  var h2 = '';
46  window.DATA.fence.forEach(function (f) {
47    h2 += '<div class="fb-row"><span>' + f.k + '</span><span>' + f.v + '</span></div>';
48  });
49  fl.innerHTML = h2;
50  var hl = document.getElementById('healthList');
51  var h3 = '';
52  window.DATA.health.forEach(function (x) {
53    h3 += '<div class="hb-row"><span class="hb-name">' + x.name + '</span><span class="hb-val">' + x.val + '</span></div>';
54  });
55  hl.innerHTML = h3;
56</script>
57<script src="app.js"></script>
58</body>
59</html>