小草家校通/schedule.html · 约 3850 字符
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="sch-tabs" id="schTabs"></div>
13<div class="sch-table" id="schTable"></div>
14<div class="section-title">✈️ 请假申请</div>
15<div class="leave-box">
16 <div class="lb-title">在线提交请假条，班主任一键审批</div>
17 <div class="leave-row"><span class="lr-label">孩子</span><span class="lr-val">李一诺 · 三年级2班 ›</span></div>
18 <div class="leave-row"><span class="lr-label">请假类型</span><span class="lr-val"><span class="opt sel">病假</span><span class="opt">事假</span><span class="opt">其他</span></span></div>
19 <div class="leave-row"><span class="lr-label">起止时间</span><span class="lr-val">09-03 08:00 → 09-03 18:00 ›</span></div>
20 <div class="leave-row"><span class="lr-label">接送人</span><span class="lr-val">妈妈 138****6688 ›</span></div>
21 <div class="leave-row"><span class="lr-label">请假事由</span><span class="lr-val dim">点击填写 ›</span></div>
22 <div style="margin-top:14px"><div class="btn btn-primary submit-btn">提交请假申请</div></div>
23</div>
24<div style="height:70px"></div>
25
26
27<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>
28<script src="data.js"></script>
29<script>
30 var days = [{ d: "mon", n: "周一" }, { d: "tue", n: "周二" }, { d: "wed", n: "周三" }, { d: "thu", n: "周四" }, { d: "fri", n: "周五" }];
31 var tabs = document.getElementById('schTabs');
32 var th = '';
33 days.forEach(function (x, i) {
34 th += '<div class="sch-tab' + (i === 0 ? ' on' : '') + '" data-day="' + x.d + '">' + x.n + '</div>';
35 });
36 tabs.innerHTML = th;
37 var rows = [
38 { t: "08:00", f: "mon" }, { t: "09:00", f: "tue" }, { t: "10:00", f: "wed" },
39 { t: "11:00", f: "thu" }, { t: "14:00", f: "fri" }, { t: "15:00", f: "mon" }
40 ];
41 var tbl = document.getElementById('schTable');
42 var clsOf = function (name) {
43 if (name === '体育' || name === '美术' || name === '音乐') return ' art';
44 if (name === '体育') return ' pe';
45 return '';
46 };
47 var bh = '<div class="sch-row"><div class="sch-cell">时间</div><div class="sch-cell">周一</div><div class="sch-cell">周二</div><div class="sch-cell">周三</div><div class="sch-cell">周四</div><div class="sch-cell">周五</div></div>';
48 window.DATA.schedule.forEach(function (r) {
49 bh += '<div class="sch-row" data-row><div class="sch-cell">' + r.time + '</div>'
50 + '<div class="sch-cell' + clsOf(r.mon) + (r.f === 'mon' ? ' active' : '') + '" data-day="mon">' + r.mon + '</div>'
51 + '<div class="sch-cell' + clsOf(r.tue) + (r.f === 'tue' ? ' active' : '') + '" data-day="tue">' + r.tue + '</div>'
52 + '<div class="sch-cell' + clsOf(r.wed) + (r.f === 'wed' ? ' active' : '') + '" data-day="wed">' + r.wed + '</div>'
53 + '<div class="sch-cell' + clsOf(r.thu) + (r.f === 'thu' ? ' active' : '') + '" data-day="thu">' + r.thu + '</div>'
54 + '<div class="sch-cell' + clsOf(r.fri) + (r.f === 'fri' ? ' active' : '') + '" data-day="fri">' + r.fri + '</div></div>';
55 });
56 tbl.innerHTML = bh;
57</script>
58<script src="app.js"></script>
59</body>
60</html>