小草家校通/mine.html · 约 3709 字符
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="user-card">
13 <div class="uc-avatar">👩</div>
14 <div>
15 <div class="uc-name">一诺妈妈</div>
16 <div class="uc-level">绑定 2 个孩子 · 阳光实验小学</div>
17 </div>
18 <div class="uc-switch">切换 ›</div>
19</div>
20<div class="assets">
21 <div class="asset-item"><b>289</b><span>孩子学分</span></div>
22 <div class="asset-item"><b>12</b><span>荣誉勋章</span></div>
23 <div class="asset-item"><b>2</b><span>待办事项</span></div>
24</div>
25<div class="section-title">💬 消息中心 <span>2 条未读</span></div>
26<div id="msgList"></div>
27<div class="section-title">📋 待缴费</div>
28<div id="billList"></div>
29<div class="menu-list">
30 <a href="notice.html"><span class="ml-l"><span class="ico">📢</span>通知公告</span><span class="ml-r">4 条 ›</span></a>
31 <a href="grade.html"><span class="ml-l"><span class="ico">📊</span>成绩与成长</span><span class="ml-r">期中 ›</span></a>
32 <a href="schedule.html"><span class="ml-l"><span class="ico">📅</span>课程表</span><span class="ml-r">每周 ›</span></a>
33 <a href="attendance.html"><span class="ml-l"><span class="ico">📍</span>考勤与安全</span><span class="ml-r">实时 ›</span></a>
34 <a href="community.html"><span class="ml-l"><span class="ico">💬</span>家长圈</span><span class="ml-r">›</span></a>
35 <a data-toast="老师通讯录已同步"><span class="ml-l"><span class="ico">📞</span>老师通讯录</span><span class="ml-r">›</span></a>
36 <a data-toast="校长信箱已开启"><span class="ml-l"><span class="ico">✉️</span>校长信箱</span><span class="ml-r">›</span></a>
37 <a data-toast="学习资源库 2000+ 份"><span class="ml-l"><span class="ico">📚</span>学习资源</span><span class="ml-r">›</span></a>
38 <a data-toast="设置与隐私保护"><span class="ml-l"><span class="ico">⚙️</span>设置</span><span class="ml-r">›</span></a>
39</div>
40<div style="height:70px"></div>
41
42
43<nav class="tabbar"><a class="" 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=" active" href="mine.html"><span class="icon">👤</span>我的</a></nav>
44<script src="data.js"></script>
45<script>
46 var ml = document.getElementById('msgList');
47 var h = '';
48 window.DATA.messages.forEach(function (m) {
49 h += '<div class="msg-item">' + (m.unread ? '<div class="mi-dot"></div>' : '<div style="width:8px"></div>') + '<div class="mi-avatar">' + m.avatar + '</div><div class="mi-body"><div class="mi-head"><span class="mi-name">' + m.from + '</span><span class="mi-time">' + m.time + '</span></div><div class="mi-text">' + m.text + '</div></div></div>';
50 });
51 ml.innerHTML = h;
52 var bl = document.getElementById('billList');
53 var h2 = '';
54 window.DATA.bills.forEach(function (b) {
55 h2 += '<div class="todo-card"><div class="tc-ico">💰</div><div class="tc-body"><div class="tc-title">' + b.name + '</div><div class="tc-sub">' + b.amount + ' · ' + b.due + '</div></div><div class="tc-btn">去缴费</div></div>';
56 });
57 bl.innerHTML = h2;
58</script>
59<script src="app.js"></script>
60</body>
61</html>