index.html · 约 35114 字符
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<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --blue:#2563eb; --blue2:#1d4ed8; --cyan:#06b6d4; --amber:#f59e0b;
12 --red:#ef4444; --green:#22c55e; --bg:#f4f6fb; --card:#ffffff;
13 --text:#1f2937; --mute:#8a93a6; --line:#eef1f6;
14 }
15 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
16 background:#dfe4ee; color:var(--text); }
17 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
18 position:relative; padding-bottom:66px; box-shadow:0 0 28px rgba(0,0,0,.08); }
19 .topbar{ background:linear-gradient(120deg,var(--blue),var(--cyan)); color:#fff;
20 padding:16px 18px 14px; display:flex; align-items:center; gap:12px; }
21 .topbar .back{ font-size:20px; cursor:pointer; display:none; }
22 .topbar .tt{ font-size:19px; font-weight:800; letter-spacing:.5px; }
23 .topbar .role{ margin-left:auto; font-size:12px; background:rgba(255,255,255,.2);
24 padding:5px 11px; border-radius:999px; font-weight:600; }
25 .views{ padding:14px; }
26 .view{ display:none; }
27 .view.active{ display:block; animation:fade .22s ease; }
28 @keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
29 .card{ background:var(--card); border-radius:16px; padding:15px; margin-bottom:13px;
30 box-shadow:0 4px 16px rgba(31,41,55,.05); }
31 .card h3{ font-size:15px; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
32 .card h3 .ic{ font-size:17px; }
33 .card h3 .more{ margin-left:auto; font-size:12px; color:var(--blue); font-weight:600; }
34 .hint{ font-size:12px; color:var(--mute); margin:-6px 0 12px; }
35 /* 概览 */
36 .ov{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
37 .ovc{ background:linear-gradient(135deg,#eef3ff,#f4f9ff); border-radius:14px; padding:13px; }
38 .ovc .n{ font-size:12px; color:#5b6b8c; }
39 .ovc .v{ font-size:23px; font-weight:800; color:var(--blue2); margin-top:4px; }
40 .ovc .v small{ font-size:12px; color:var(--mute); font-weight:600; }
41 /* 九宫格 */
42 .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
43 .gi{ background:var(--card); border-radius:14px; padding:14px 6px; text-align:center;
44 box-shadow:0 4px 14px rgba(31,41,55,.05); cursor:pointer; transition:.12s; }
45 .gi:active{ transform:scale(.97); }
46 .gi .e{ font-size:26px; }
47 .gi .t{ font-size:12.5px; font-weight:700; margin-top:7px; color:#3a4661; }
48 .gi .b{ display:inline-block; margin-top:4px; font-size:10.5px; color:#fff; background:var(--red);
49 border-radius:999px; padding:1px 7px; font-weight:700; }
50 /* 列表行 */
51 .row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line);
52 cursor:pointer; }
53 .row:last-child{ border-bottom:none; }
54 .row:active{ background:#fafbff; }
55 .ava{ width:42px; height:42px; border-radius:12px; background:#eef2ff; display:flex; align-items:center;
56 justify-content:center; font-size:22px; flex:0 0 auto; }
57 .ri{ flex:1; min-width:0; }
58 .ri .a{ font-size:14.5px; font-weight:700; }
59 .ri .b{ font-size:12px; color:var(--mute); margin-top:3px; overflow:hidden;
60 text-overflow:ellipsis; white-space:nowrap; }
61 .rt{ text-align:right; flex:0 0 auto; font-size:12px; color:var(--mute); }
62 .tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
63 .tag.red{ background:#ffe1e1; color:#d62727; }
64 .tag.amber{ background:#fff0d6; color:#b9740a; }
65 .tag.green{ background:#ddfbe6; color:#15803d; }
66 .tag.blue{ background:#e3edff; color:#1d4ed8; }
67 .tag.gray{ background:#eef1f6; color:#8a93a6; }
68 .bar{ height:6px; border-radius:6px; background:#eef1f6; margin-top:7px; overflow:hidden; }
69 .bar > i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
70 .btn{ width:100%; margin-top:13px; padding:13px; border:none; border-radius:13px;
71 background:linear-gradient(120deg,var(--blue),var(--cyan)); color:#fff; font-size:15.5px;
72 font-weight:800; cursor:pointer; letter-spacing:1px; }
73 .btn:active{ transform:scale(.99); }
74 .btn.line{ background:#fff; color:var(--blue); border:1.5px solid var(--blue); }
75 .empty{ text-align:center; color:var(--mute); padding:44px 20px; font-size:13.5px; }
76 .empty .e{ font-size:38px; margin-bottom:10px; }
77 /* 统计小条 */
78 .stat{ display:flex; gap:10px; margin-bottom:12px; }
79 .stat .s{ flex:1; text-align:center; background:#f7f9fc; border-radius:12px; padding:10px 4px; }
80 .stat .s .v{ font-size:19px; font-weight:800; color:var(--blue2); }
81 .stat .s .l{ font-size:11.5px; color:var(--mute); margin-top:3px; }
82 /* 雷达 */
83 .radar{ text-align:center; }
84 .radar svg{ max-width:230px; }
85 /* 进退步 */
86 .up{ color:var(--green); font-weight:800; }
87 .down{ color:var(--red); font-weight:800; }
88 /* tabbar */
89 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
90 height:62px; background:#fff; border-top:1px solid var(--line); display:flex; }
91 .tabbar button{ flex:1; border:none; background:none; font-size:11.5px; color:var(--mute);
92 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
93 .tabbar button .ti{ font-size:20px; }
94 .tabbar button.on{ color:var(--blue); font-weight:700; }
95 /* 子导航 */
96 .sub{ display:flex; gap:8px; margin-bottom:13px; overflow-x:auto; }
97 .sub::-webkit-scrollbar{ display:none; }
98 .sub button{ flex:0 0 auto; border:1.5px solid var(--line); background:#fff; border-radius:999px;
99 padding:7px 15px; font-size:13px; font-weight:600; color:#5b6b8c; cursor:pointer; }
100 .sub button.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
101 /* 结算/报告 */
102 .rep{ background:#f7f9fc; border-radius:12px; padding:13px; font-size:13px; color:#4b5563; line-height:1.7; }
103 .rep b{ color:var(--blue2); }
104 /* 留言气泡 */
105 .msg{ display:flex; gap:10px; margin-bottom:13px; }
106 .msg .b{ background:#eef2ff; border-radius:0 13px 13px 13px; padding:10px 13px; font-size:13.5px;
107 line-height:1.55; max-width:78%; }
108 .msg.me{ flex-direction:row-reverse; }
109 .msg.me .b{ background:linear-gradient(120deg,var(--blue),var(--cyan)); color:#fff;
110 border-radius:13px 0 13px 13px; }
111 .msg .who{ font-size:11px; color:var(--mute); margin-bottom:4px; }
112 .msg.me .who{ text-align:right; }
113 .timeline{ position:relative; padding-left:18px; }
114 .timeline:before{ content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--line); }
115 .tl{ position:relative; padding:0 0 16px 6px; }
116 .tl:before{ content:""; position:absolute; left:-16px; top:4px; width:10px; height:10px; border-radius:50%;
117 background:var(--blue); box-shadow:0 0 0 3px #e3edff; }
118 .tl .d{ font-size:11px; color:var(--mute); }
119 .tl .t{ font-size:14px; font-weight:700; margin:3px 0; }
120 .tl .c{ font-size:12.5px; color:#5b6678; line-height:1.55; }
121 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
122 background:rgba(17,24,39,.9); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
123 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
124 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
125</style>
126</head>
127<body>
128<div class="app">
129 <header class="topbar">
130 <span class="back" id="backBtn">‹</span>
131 <span class="tt" id="topTitle">家校沟通</span>
132 <span class="role" id="roleBtn">👨🏫 老师端</span>
133 </header>
134
135 <main class="views">
136 <!-- 工作台 -->
137 <section class="view active" id="view-home">
138 <div class="ov">
139 <div class="ovc"><div class="n">未读通知</div><div class="v">3 <small>条</small></div></div>
140 <div class="ovc"><div class="n">待批改作业</div><div class="v">12 <small>份</small></div></div>
141 <div class="ovc"><div class="n">今日打卡</div><div class="v">38<small>/45</small></div></div>
142 <div class="ovc"><div class="n">待确认签字</div><div class="v">5 <small>份</small></div></div>
143 </div>
144 <div class="card">
145 <h3><span class="ic">🧩</span>全部功能</h3>
146 <div class="grid">
147 <div class="gi" data-go="notice"><div class="e">📢</div><div class="t">通知公告</div><span class="b">3未读</span></div>
148 <div class="gi" data-go="homework"><div class="e">📚</div><div class="t">作业管理</div></div>
149 <div class="gi" data-go="checkin"><div class="e">✅</div><div class="t">打卡任务</div></div>
150 <div class="gi" data-go="score"><div class="e">📊</div><div class="t">成绩管理</div></div>
151 <div class="gi" data-go="eval"><div class="e">🌟</div><div class="t">表现评价</div></div>
152 <div class="gi" data-go="fee"><div class="e">💰</div><div class="t">班费缴费</div></div>
153 <div class="gi" data-go="leave"><div class="e">🏖️</div><div class="t">请假审批</div></div>
154 <div class="gi" data-go="talk"><div class="e">💬</div><div class="t">班级讨论</div></div>
155 <div class="gi" data-go="growth"><div class="e">🌱</div><div class="t">成长档案</div></div>
156 </div>
157 </div>
158 <div class="card">
159 <h3><span class="ic">📌</span>今日待办 <span class="more" data-go="notice">去处理</span></h3>
160 <div class="row" data-go="notice"><div class="ava">📢</div><div class="ri"><div class="a">周五家长会通知</div><div class="b">需手写签字确认 · 5 人未签</div></div><span class="tag amber">待确认</span></div>
161 <div class="row" data-go="homework"><div class="ava">📚</div><div class="ri"><div class="a">数学单元测验批改</div><div class="b">12 份待批改</div></div><span class="tag blue">进行中</span></div>
162 <div class="row" data-go="checkin"><div class="ava">✅</div><div class="ri"><div class="a">每日阅读打卡</div><div class="b">38/45 已打卡</div></div><span class="tag green">进行中</span></div>
163 </div>
164 </section>
165
166 <!-- 通知公告 -->
167 <section class="view" id="view-notice">
168 <div class="card">
169 <h3><span class="ic">📢</span>通知公告 <span class="more" id="noticeNew">+ 发通知</span></h3>
170 <div class="stat">
171 <div class="s"><div class="v">45</div><div class="l">应达家长</div></div>
172 <div class="s"><div class="v" id="readN">42</div><div class="l">已读</div></div>
173 <div class="s"><div class="v" id="unreadN">3</div><div class="l">未读</div></div>
174 </div>
175 <div id="noticeList"></div>
176 <button class="btn line" id="remindBtn">🔔 一键提醒未读家长（短信+电话）</button>
177 </div>
178 </section>
179
180 <!-- 作业管理 -->
181 <section class="view" id="view-homework">
182 <div class="sub" id="hwSub">
183 <button class="on" data-p="hwList">作业</button>
184 <button data-p="hwCorrect">批改</button>
185 <button data-p="hwWall">优秀墙</button>
186 </div>
187 <div class="panel" id="hwList">
188 <div class="card">
189 <h3><span class="ic">📚</span>作业列表 <span class="more" id="hwNew">+ 布置作业</span></h3>
190 <div id="hwListBox"></div>
191 </div>
192 </div>
193 <div class="panel" id="hwCorrect" style="display:none">
194 <div class="card">
195 <h3><span class="ic">✍️</span>在线批改</h3>
196 <div class="row"><div class="ava">👦</div><div class="ri"><div class="a">李明 · 数学单元测验</div><div class="b">已提交 · 拍照上传</div></div><span class="tag blue">待批改</span></div>
197 <div class="row"><div class="ava">👧</div><div class="ri"><div class="a">王芳 · 数学单元测验</div><div class="b">已提交 · 拍照上传</div></div><span class="tag blue">待批改</span></div>
198 <div class="stat">
199 <div class="s"><div class="v">33</div><div class="l">已交</div></div>
200 <div class="s"><div class="v">12</div><div class="l">待批改</div></div>
201 <div class="s"><div class="v">12</div><div class="l">未交</div></div>
202 </div>
203 <textarea style="width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px;font-size:13.5px;resize:none;height:70px;font-family:inherit" placeholder="写下评语，可一键打回重做…"></textarea>
204 <button class="btn" id="correctBtn">✓ 批改并评优</button>
205 </div>
206 </div>
207 <div class="panel" id="hwWall" style="display:none">
208 <div class="card">
209 <h3><span class="ic">🏅</span>优秀作业墙</h3>
210 <div class="row"><div class="ava">👧</div><div class="ri"><div class="a">王芳 · 英语朗读打卡</div><div class="b">发音标准，获老师评优 ⭐</div></div><span class="tag green">优秀</span></div>
211 <div class="row"><div class="ava">🧒</div><div class="ri"><div class="a">张浩 · 数学解题</div><div class="b">步骤清晰，方法新颖</div></div><span class="tag green">优秀</span></div>
212 <div class="row"><div class="ava">👦</div><div class="ri"><div class="a">陈乐 · 语文作文</div><div class="b">立意深刻，字迹工整</div></div><span class="tag green">优秀</span></div>
213 </div>
214 </div>
215 </section>
216
217 <!-- 打卡任务 -->
218 <section class="view" id="view-checkin">
219 <div class="card">
220 <h3><span class="ic">✅</span>打卡任务 <span class="more" id="ckNew">+ 发布打卡</span></h3>
221 <div class="sub" id="ckSub">
222 <button class="on" data-p="ckDaily">日常</button>
223 <button data-p="ckWisdom">智慧</button>
224 <button data-p="ckRank">排行榜</button>
225 </div>
226 <div class="panel" id="ckDaily">
227 <div class="row" data-dop="1"><div class="ava">📖</div><div class="ri"><div class="a">每日阅读 30 分钟</div><div class="b">38/45 已打卡 · 连续 12 天</div></div><span class="tag green">进行中</span></div>
228 <div class="row" data-dop="2"><div class="ava">🏃</div><div class="ri"><div class="a">跳绳 200 个</div><div class="b">41/45 已打卡</div></div><span class="tag green">进行中</span></div>
229 <div class="row" data-dop="3"><div class="ava">🦷</div><div class="ri"><div class="a">早晚刷牙打卡</div><div class="b">43/45 已打卡</div></div><span class="tag green">进行中</span></div>
230 <div class="stat">
231 <div class="s"><div class="v">38</div><div class="l">今日打卡</div></div>
232 <div class="s"><div class="v">7</div><div class="l">连续满勤</div></div>
233 <div class="s"><div class="v">3</div><div class="l">未打卡</div></div>
234 </div>
235 <button class="btn" id="ckBtn">📸 我已完成今日打卡</button>
236 </div>
237 <div class="panel" id="ckWisdom" style="display:none">
238 <div class="row"><div class="ava">🗣️</div><div class="ri"><div class="a">英语跟读打卡</div><div class="b">系统自动识别发音，智能评分</div></div><span class="tag blue">AI</span></div>
239 <div class="row"><div class="ava">✍️</div><div class="ri"><div class="a">听写打卡</div><div class="b">自动批改，错题汇总</div></div><span class="tag blue">AI</span></div>
240 <div class="row"><div class="ava">📐</div><div class="ri"><div class="a">口算打卡</div><div class="b">1-6 年级数学，自动计时</div></div><span class="tag blue">AI</span></div>
241 </div>
242 <div class="panel" id="ckRank" style="display:none">
243 <h3 style="font-size:14px;margin-bottom:10px">🏆 打卡排行榜（本周）</h3>
244 <div id="ckRankBox"></div>
245 </div>
246 </div>
247 </section>
248
249 <!-- 成绩管理 -->
250 <section class="view" id="view-score">
251 <div class="card">
252 <h3><span class="ic">📊</span>私密成绩查询</h3>
253 <p class="hint">家长仅可见自己孩子成绩 · 排名/分数段由老师设置</p>
254 <div class="sub" id="scSub">
255 <button class="on" data-p="scRadar">能力雷达</button>
256 <button data-p="scTrend">进退步</button>
257 <button data-p="scSeg">分数段</button>
258 </div>
259 <div class="panel" id="scRadar">
260 <div class="radar" id="radarBox"></div>
261 <div class="rep" id="radarRep"></div>
262 </div>
263 <div class="panel" id="scTrend" style="display:none">
264 <div class="row"><div class="ava">📈</div><div class="ri"><div class="a">语文</div><div class="b">班级第 5 → 第 2 名</div></div><span class="up">↑3</span></div>
265 <div class="row"><div class="ava">📉</div><div class="ri"><div class="a">数学</div><div class="b">班级第 3 → 第 8 名</div></div><span class="down">↓5</span></div>
266 <div class="row"><div class="ava">➡️</div><div class="ri"><div class="a">英语</div><div class="b">班级第 4 → 第 4 名</div></div><span class="tag gray">持平</span></div>
267 <div class="rep">综合排名：<b>第 4 名</b>（上期第 5 名），总分 <b>428</b> 分，较上次 <span class="up">↑12 分</span>。语文进步明显，数学需加强几何模块。</div>
268 </div>
269 <div class="panel" id="scSeg" style="display:none">
270 <h3 style="font-size:14px;margin-bottom:10px">班级分数段分布（数学）</h3>
271 <div id="scSegBox"></div>
272 </div>
273 </div>
274 </section>
275
276 <!-- 表现评价 -->
277 <section class="view" id="view-eval">
278 <div class="card">
279 <h3><span class="ic">🌟</span>班级积分榜 <span class="more" id="evalAdd">+ 加减分</span></h3>
280 <div id="evalBox"></div>
281 </div>
282 <div class="card">
283 <h3><span class="ic">👑</span>本周光荣榜</h3>
284 <div class="row"><div class="ava">🥇</div><div class="ri"><div class="a">王芳</div><div class="b">课堂积极 · 助人为乐 · 作业优秀</div></div><span class="tag amber">积分 286</span></div>
285 <div class="row"><div class="ava">🥈</div><div class="ri"><div class="a">张浩</div><div class="b">卫生值日 · 进步明显</div></div><span class="tag amber">积分 271</span></div>
286 <div class="row"><div class="ava">🥉</div><div class="ri"><div class="a">陈乐</div><div class="b">朗读打卡满勤 · 纪律好</div></div><span class="tag amber">积分 263</span></div>
287 </div>
288 <div class="card">
289 <h3><span class="ic">🤖</span>智能综合评语</h3>
290 <div class="rep">王芳同学本学期综合表现<b>优秀</b>：课堂互动积极（加分 42）、作业连续 8 周评优、阅读打卡全勤。建议保持优势，在<b>数学应用题</b>上投入更多练习。系统已生成学期综合评价报告并同步家长。</div>
291 </div>
292 </section>
293
294 <!-- 班费缴费 -->
295 <section class="view" id="view-fee">
296 <div class="card">
297 <h3><span class="ic">💰</span>班费 / 缴费管理</h3>
298 <div class="stat">
299 <div class="s"><div class="v">¥1,280</div><div class="l">已收</div></div>
300 <div class="s"><div class="v">¥320</div><div class="l">待收</div></div>
301 <div class="s"><div class="v">0%</div><div class="l">手续费</div></div>
302 </div>
303 <div id="feeBox"></div>
304 <button class="btn line" id="feeNew">＋ 发起收款（春游活动费）</button>
305 </div>
306 </section>
307
308 <!-- 请假审批 -->
309 <section class="view" id="view-leave">
310 <div class="card">
311 <h3><span class="ic">🏖️</span>请假审批</h3>
312 <div id="leaveBox"></div>
313 <button class="btn" id="leaveNew">＋ 提交请假申请</button>
314 </div>
315 </section>
316
317 <!-- 班级讨论 -->
318 <section class="view" id="view-talk">
319 <div class="sub" id="tkSub">
320 <button class="on" data-p="tkTopic">主题讨论</button>
321 <button data-p="tkChat">班级群</button>
322 </div>
323 <div class="panel" id="tkTopic">
324 <div class="card">
325 <h3><span class="ic">💡</span>主题讨论 <span class="more" id="tkNew">+ 发起</span></h3>
326 <div class="row" data-topic="1"><div class="ava">📝</div><div class="ri"><div class="a">秋游地点投票</div><div class="b">32 位家长参与 · 结果仅老师可见</div></div><span class="tag blue">投票中</span></div>
327 <div class="row" data-topic="2"><div class="ava">🍱</div><div class="ri"><div class="a">校服订购尺寸统计</div><div class="b">45 份已回收 · 可导出 Excel</div></div><span class="tag green">已完成</span></div>
328 <div class="row" data-topic="3"><div class="ava">📚</div><div class="ri"><div class="a">周末托管意向调查</div><div class="b">28 位家长填写</div></div><span class="tag blue">进行中</span></div>
329 </div>
330 </div>
331 <div class="panel" id="tkChat" style="display:none">
332 <div class="card">
333 <h3><span class="ic">👥</span>班级群（三（2）班）</h3>
334 <div class="msg"><div class="ava" style="width:34px;height:34px;font-size:17px">👩🏫</div><div><div class="who">王老师</div><div class="b">各位家长，明天早上 8 点准时到校，记得带跳绳 🤗</div></div></div>
335 <div class="msg me"><div class="ava" style="width:34px;height:34px;font-size:17px">🧑</div><div><div class="who">我</div><div class="b">收到，谢谢老师！</div></div></div>
336 <div class="msg"><div class="ava" style="width:34px;height:34px;font-size:17px">👩</div><div><div class="who">李妈妈</div><div class="b">已确认家长会签字，辛苦老师～</div></div></div>
337 </div>
338 </div>
339 </section>
340
341 <!-- 成长档案 -->
342 <section class="view" id="view-growth">
343 <div class="card">
344 <h3><span class="ic">🌱</span>成长档案 · 王芳</h3>
345 <div class="timeline" id="growthBox"></div>
346 </div>
347 <div class="card">
348 <h3><span class="ic">📋</span>综合素质评价</h3>
349 <div class="rep">品德发展 <b>优</b> · 学业水平 <b>优</b> · 身心健康 <b>良</b> · 艺术素养 <b>优</b> · 社会实践 <b>良</b>。累计获得电子奖状 <b>9</b> 张，阅读打卡 <b>186</b> 天。</div>
350 </div>
351 </section>
352
353 <!-- 我的 -->
354 <section class="view" id="view-me">
355 <div class="card" style="text-align:center;padding:22px 15px">
356 <div class="ava" style="width:64px;height:64px;font-size:34px;margin:0 auto 10px">👨🏫</div>
357 <div style="font-size:18px;font-weight:800">王老师</div>
358 <div style="font-size:13px;color:var(--mute);margin-top:4px">三（2）班班主任 · 语文老师</div>
359 </div>
360 <div class="card">
361 <h3><span class="ic">⚙️</span>常用</h3>
362 <div class="row" data-go="fee"><div class="ava">💰</div><div class="ri"><div class="a">班费 / 缴费</div><div class="b">查看收支与收款统计</div></div><span class="ti" style="color:var(--mute)">›</span></div>
363 <div class="row" data-go="leave"><div class="ava">🏖️</div><div class="ri"><div class="a">请假审批</div><div class="b">学生请假申请处理</div></div><span class="ti" style="color:var(--mute)">›</span></div>
364 <div class="row" data-go="growth"><div class="ava">🌱</div><div class="ri"><div class="a">成长档案</div><div class="b">学生综合素质记录</div></div><span class="ti" style="color:var(--mute)">›</span></div>
365 <div class="row" id="roleSwitch"><div class="ava">🔄</div><div class="ri"><div class="a">切换为家长端</div><div class="b">查看家长视角功能</div></div><span class="ti" style="color:var(--mute)">›</span></div>
366 </div>
367 </section>
368 </main>
369
370 <nav class="tabbar">
371 <button data-go="home" class="on"><span class="ti">🏠</span>工作台</button>
372 <button data-go="homework"><span class="ti">📚</span>作业</button>
373 <button data-go="talk"><span class="ti">💬</span>沟通</button>
374 <button data-go="me"><span class="ti">👤</span>我的</button>
375 </nav>
376</div>
377<div class="toast" id="toast"></div>
378
379<script>
380var TITLES = {
381 home:"家校沟通", notice:"通知公告", homework:"作业管理", checkin:"打卡任务",
382 score:"成绩管理", eval:"表现评价", fee:"班费缴费", leave:"请假审批",
383 talk:"班级讨论", growth:"成长档案", me:"我的"
384};
385var NOTICES = [
386 {t:"周五家长会通知",c:"本周五 19:00 线上家长会，请各位家长准时参加并手写签字确认。",read:false,sign:true,signed:false,time:"09:20"},
387 {t:"秋游活动安排",c:"下周三前往植物园，需穿校服、带水杯，费用 50 元。",read:false,sign:false,time:"08:40"},
388 {t:"数学单元测验成绩",c:"已发布私密成绩，家长仅可见自己孩子成绩。",read:false,sign:false,time:"昨天"},
389 {t:"夏季校服补订",c:"如需补订校服，请于本周内填写尺寸统计。",read:true,sign:false,time:"周一"}
390];
391var HW = [
392 {s:"数学",t:"第三单元测验（拍照上传）",done:33,total:45},
393 {s:"语文",t:"背诵课文《春》+ 录音",done:41,total:45},
394 {s:"英语",t:"跟读 Unit3 单词",done:38,total:45},
395 {s:"科学",t:"观察植物生长日记",done:29,total:45}
396];
397var CKRANK = [
398 {n:"王芳",d:21,ava:"👧"},{n:"张浩",d:20,ava:"🧒"},{n:"陈乐",d:20,ava:"👦"},
399 {n:"李明",d:18,ava:"👦"},{n:"刘洋",d:17,ava:"🧑"}
400];
401var SCORE_AXES = ["语文","数学","英语","科学","体育","艺术"];
402var SCORE_VALS = [92,78,88,85,90,83];
403var SCORE_MAX = 100;
404var SEG = [
405 {l:"90-100 分",n:8,c:"#22c55e"},{l:"80-89 分",n:19,c:"#06b6d4"},
406 {l:"70-79 分",n:12,c:"#2563eb"},{l:"60-69 分",n:5,c:"#f59e0b"},{l:"<60 分",n:1,c:"#ef4444"}
407];
408var EVAL = [
409 {n:"王芳",p:286,ava:"👧"},{n:"张浩",p:271,ava:"🧒"},{n:"陈乐",p:263,ava:"👦"},
410 {n:"李明",p:248,ava:"👦"},{n:"周婷",p:240,ava:"👧"}
411];
412var FEE = [
413 {item:"春游活动费",amt:"¥50",who:"45 人待交 · 已收 38 人",tag:"amber",st:"收款中"},
414 {item:"班费结余",amt:"¥1,280",who:"账目公开透明",tag:"green",st:"已公示"},
415 {item:"教材代办费",amt:"¥120",who:"45 人已全部缴纳",tag:"green",st:"已结清"}
416];
417var LEAVE = [
418 {n:"李明",r:"感冒发烧，需请假 1 天就医",st:"待审批",tag:"amber"},
419 {n:"周婷",r:"参加区舞蹈比赛，请假半天",st:"已通过",tag:"green"},
420 {n:"陈乐",r:"家庭出行，请假 2 天",st:"已通过",tag:"green"}
421];
422var GROWTH = [
423 {d:"2026-06-20",t:"数学单元测验满分",c:"获得老师评优，班级第 2 名 🏅"},
424 {d:"2026-06-10",t:"阅读打卡 180 天",c:"连续满勤，获电子奖状"},
425 {d:"2026-05-28",t:"校园书法比赛一等奖",c:"艺术素养评价记为优"},
426 {d:"2026-05-15",t:"助人为乐表扬",c:"主动帮助同学，课堂加分 +5"}
427];
428
429var curView = "home";
430function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1400); }
431function show(v){
432 curView = v;
433 $(".view").removeClass("active"); $("#view-"+v).addClass("active");
434 $("#topTitle").text(TITLES[v]||"家校沟通");
435 $("#backBtn").css("display", v==="home"?"none":"block");
436 $(".tabbar button").removeClass("on");
437 var map={homework:"homework",talk:"talk",me:"me"};
438 var tb = map[v]||(v==="notice"||v==="checkin"||v==="score"||v==="eval"||v==="fee"||v==="leave"||v==="growth"?"home":"home");
439 if(map[v]) $('.tabbar button[data-go="'+map[v]+'"]').addClass("on");
440}
441function renderNotice(){
442 var h = NOTICES.map(function(n,i){
443 var badge = n.sign ? (n.signed?'<span class="tag green">已签字</span>':'<span class="tag amber">待签字</span>') : (n.read?'<span class="tag gray">已读</span>':'<span class="tag red">未读</span>');
444 return '<div class="row"><div class="ava">📢</div><div class="ri"><div class="a">'+n.t+'</div><div class="b">'+n.c+'</div></div>'+badge+'</div>';
445 }).join("");
446 $("#noticeList").html(h);
447 var unread = NOTICES.filter(function(n){return !n.read;}).length;
448 $("#unreadN").text(unread); $("#readN").text(45-unread);
449}
450function renderHW(){
451 var h = HW.map(function(w){
452 var pct = Math.round(w.done/w.total*100);
453 return '<div class="row"><div class="ava">📘</div><div class="ri"><div class="a">'+w.s+' · '+w.t+'</div>'+
454 '<div class="b">已提交 '+w.done+'/'+w.total+'</div><div class="bar"><i style="width:'+pct+'%"></i></div></div>'+
455 '<span class="tag '+(pct>=90?'green':pct>=70?'blue':'amber')+'">'+pct+'%</span></div>';
456 }).join("");
457 $("#hwListBox").html(h);
458}
459function radarPoints(vals,max,r,cx,cy){
460 var n=vals.length, pts=[];
461 for(var i=0;i<n;i++){
462 var ang=-Math.PI/2 + i*2*Math.PI/n;
463 var rr=r*vals[i]/max;
464 pts.push((cx+rr*Math.cos(ang)).toFixed(1)+","+(cy+rr*Math.sin(ang)).toFixed(1));
465 }
466 return pts.join(" ");
467}
468function renderRadar(){
469 var cx=115,cy=115,r=85,n=SCORE_AXES.length;
470 var grid="";
471 [0.25,0.5,0.75,1].forEach(function(f){
472 var p=[]; for(var i=0;i<n;i++){var a=-Math.PI/2+i*2*Math.PI/n; p.push((cx+r*f*Math.cos(a)).toFixed(1)+","+(cy+r*f*Math.sin(a)).toFixed(1));}
473 grid+='<polygon points="'+p.join(" ")+'" fill="none" stroke="#eef1f6" stroke-width="1"/>';
474 });
475 var axes="",labels="";
476 for(var i=0;i<n;i++){
477 var a=-Math.PI/2+i*2*Math.PI/n;
478 axes+='<line x1="'+cx+'" y1="'+cy+'" x2="'+(cx+r*Math.cos(a)).toFixed(1)+'" y2="'+(cy+r*Math.sin(a)).toFixed(1)+'" stroke="#eef1f6" stroke-width="1"/>';
479 labels+='<text x="'+(cx+(r+16)*Math.cos(a)).toFixed(1)+'" y="'+(cy+(r+16)*Math.sin(a)+4).toFixed(1)+'" font-size="11" fill="#5b6b8c" text-anchor="middle">'+SCORE_AXES[i]+'</text>';
480 }
481 var poly=radarPoints(SCORE_VALS,SCORE_MAX,r,cx,cy);
482 var dots=SCORE_VALS.map(function(v,i){var a=-Math.PI/2+i*2*Math.PI/n;var rr=r*v/SCORE_MAX;return '<circle cx="'+(cx+rr*Math.cos(a)).toFixed(1)+'" cy="'+(cy+rr*Math.sin(a)).toFixed(1)+'" r="3" fill="#2563eb"/>';}).join("");
483 $("#radarBox").html('<svg viewBox="0 0 230 240" width="230" height="240">'+grid+axes+
484 '<polygon points="'+poly+'" fill="rgba(37,99,235,.18)" stroke="#2563eb" stroke-width="2"/>'+dots+labels+'</svg>');
485 $("#radarRep").html("王芳综合能力均衡，<b>语文 92</b>、<b>体育 90</b> 突出；<b>数学 78</b> 为薄弱项，建议针对性练习。");
486}
487function renderSeg(){
488 var max=SEG[0].n, h=SEG.map(function(s){
489 return '<div class="row" style="border:none;padding:8px 0"><div class="ri"><div class="a">'+s.l+'</div>'+
490 '<div class="bar"><i style="width:'+(s.n/max*100)+'%;background:'+s.c+'"></i></div></div>'+
491 '<span class="rt">'+s.n+' 人</span></div>';
492 }).join("");
493 $("#scSegBox").html(h);
494}
495function renderEval(){
496 var h=EVAL.map(function(e,i){
497 var medal=i===0?"🥇":i===1?"🥈":i===2?"🥉":(i+1);
498 return '<div class="row"><div class="ava">'+e.ava+'</div><div class="ri"><div class="a">'+medal+' '+e.n+'</div>'+
499 '<div class="b">课堂积分</div></div><span class="tag amber">'+e.p+' 分</span></div>';
500 }).join("");
501 $("#evalBox").html(h);
502}
503function renderFee(){
504 var h=FEE.map(function(f){
505 return '<div class="row"><div class="ava">💰</div><div class="ri"><div class="a">'+f.item+'</div><div class="b">'+f.who+'</div></div>'+
506 '<div style="text-align:right"><div style="font-weight:800;color:#1d4ed8">'+f.amt+'</div><span class="tag '+f.tag+'">'+f.st+'</span></div></div>';
507 }).join("");
508 $("#feeBox").html(h);
509}
510function renderLeave(){
511 var h=LEAVE.map(function(l){
512 return '<div class="row"><div class="ava">🧑</div><div class="ri"><div class="a">'+l.n+'</div><div class="b">'+l.r+'</div></div><span class="tag '+l.tag+'">'+l.st+'</span></div>';
513 }).join("");
514 $("#leaveBox").html(h);
515}
516function renderGrowth(){
517 var h=GROWTH.map(function(g){
518 return '<div class="tl"><div class="d">'+g.d+'</div><div class="t">'+g.t+'</div><div class="c">'+g.c+'</div></div>';
519 }).join("");
520 $("#growthBox").html(h);
521}
522function renderRank(){
523 var h=CKRANK.map(function(c,i){
524 return '<div class="row"><div class="ava">'+c.ava+'</div><div class="ri"><div class="a">'+(i+1)+'. '+c.n+'</div><div class="b">连续打卡 '+c.d+' 天</div></div>'+
525 (i===0?'<span class="tag amber">🏆</span>':'<span class="tag blue">'+c.d+'天</span>')+'</div>';
526 }).join("");
527 $("#ckRankBox").html(h);
528}
529
530$(function(){
531 renderNotice(); renderHW(); renderRadar(); renderSeg(); renderEval(); renderFee(); renderLeave(); renderGrowth(); renderRank();
532 // 宫格 / 行 / tabbar 跳转
533 $(document).on("click",".gi[data-go],.row[data-go],.more[data-go],.tabbar button[data-go]",function(e){
534 e.stopPropagation(); show($(this).data("go"));
535 });
536 $("#backBtn").on("click",function(){ show("home"); });
537 // 子导航
538 $("#hwSub button").on("click",function(){ $("#hwSub button").removeClass("on"); $(this).addClass("on");
539 $("#hwList,#hwCorrect,#hwWall").hide(); $("#"+$(this).data("p")).show(); });
540 $("#ckSub button").on("click",function(){ $("#ckSub button").removeClass("on"); $(this).addClass("on");
541 $("#ckDaily,#ckWisdom,#ckRank").hide(); $("#"+$(this).data("p")).show(); });
542 $("#scSub button").on("click",function(){ $("#scSub button").removeClass("on"); $(this).addClass("on");
543 $("#scRadar,#scTrend,#scSeg").hide(); $("#"+$(this).data("p")).show(); });
544 $("#tkSub button").on("click",function(){ $("#tkSub button").removeClass("on"); $(this).addClass("on");
545 $("#tkTopic,#tkChat").hide(); $("#"+$(this).data("p")).show(); });
546 // 交互
547 $("#remindBtn").on("click",function(){ NOTICES.forEach(function(n){n.read=true;}); renderNotice(); toast("已提醒 3 位未读家长 ✓"); });
548 $("#ckBtn").on("click",function(){ toast("打卡成功，连续 13 天 🎉"); });
549 $("#correctBtn").on("click",function(){ toast("批改完成，已评优 ✓"); });
550 $("#roleBtn,#roleSwitch").on("click",function(){ var t=$("#roleBtn").text(); $("#roleBtn").text(t.indexOf("老师")>=0?"🧑 家长端":"👨🏫 老师端"); toast("已切换角色"); });
551 $("#noticeNew,#hwNew,#ckNew,#feeNew,#leaveNew,#tkNew,#evalAdd").on("click",function(){ toast("演示：进入编辑表单"); });
552 // 主题讨论点击
553 $("#tkTopic .row").on("click",function(){ toast("演示：查看讨论详情"); });
554});
555</script>
556</body>
557</html>