小草家校通/index.html · 约 3417 字符
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<div class="kid-card">
12 <div class="kc-avatar">👧</div>
13 <div class="kc-text">
14 <div class="kc-name">李一诺</div>
15 <div class="kc-sub">三年级2班 · 阳光实验小学</div>
16 </div>
17 <div class="kc-switch kid-switch">切换孩子 ▾</div>
18 <div class="kc-stats">
19 <div><b>289</b>总学分</div>
20 <div><b>第3</b>班级排名</div>
21 <div><b>12</b>勋章</div>
22 </div>
23</div>
24<div class="section-title">⏰ 今日待办 <span>3 项待处理 ›</span></div>
25<div id="todoList"></div>
26<div class="section-title">🚀 快捷入口</div>
27<div class="quick-grid">
28 <a href="notice.html"><div class="qicon">📢</div>通知公告</a>
29 <a href="homework.html"><div class="qicon">📝</div>作业打卡</a>
30 <a href="grade.html"><div class="qicon">📊</div>成绩成长</a>
31 <a href="schedule.html" data-toast="课程表与请假"><div class="qicon">📅</div>课程表</a>
32 <a href="attendance.html" data-toast="考勤与安全"><div class="qicon">📍</div>考勤安全</a>
33 <a href="community.html"><div class="qicon">💬</div>家长圈</a>
34 <a data-toast="在线缴费已接入"><div class="qicon">💰</div>缴费</a>
35 <a data-toast="习惯打卡已开启"><div class="qicon">🏅</div>习惯打卡</a>
36</div>
37<div class="section-title">📢 最新通知 <span>全部 ›</span></div>
38<div id="noticeList"></div>
39<div style="height:70px"></div>
40
41
42<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>
43<script src="data.js"></script>
44<script>
45 var tl = document.getElementById('todoList');
46 var todos = [
47 { ico: "📝", title: "语文《观潮》背诵打卡", sub: "今晚 21:00 截止", btn: "去打卡" },
48 { ico: "📢", title: "运动会报名待确认", sub: "本周五截止 · 亲子项目", btn: "去报名" },
49 { ico: "💰", title: "9 月托管费待缴费", sub: "¥280 · 9/10 前", btn: "去缴费" }
50 ];
51 var h = '';
52 todos.forEach(function (t) {
53 h += '<div class="todo-card"><div class="tc-ico">' + t.ico + '</div><div class="tc-body"><div class="tc-title">' + t.title + '</div><div class="tc-sub">' + t.sub + '</div></div><div class="tc-btn">' + t.btn + '</div></div>';
54 });
55 tl.innerHTML = h;
56 var nl = document.getElementById('noticeList');
57 var h2 = '';
58 window.DATA.notices.filter(function (n) { return !n.read; }).slice(0, 2).forEach(function (n) {
59 h2 += '<div class="notice-mini unread"><div class="nm-head"><span class="nm-tag ' + (n.type === '学校' ? 'sch' : '') + '">' + n.type + '</span><span>' + n.emoji + '</span></div>'
60 + '<div class="nm-title">' + n.title + '</div><div class="nm-text">' + n.text + '</div><div class="nm-time">' + n.time + ' · 未读</div></div>';
61 });
62 nl.innerHTML = h2;
63</script>
64<script src="app.js"></script>
65</body>
66</html>