index.html · 约 6219 字符
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.0, maximum-scale=1.0, user-scalable=no">
6<title>每日作业 · 作业管理 H5</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <div class="topbar">📚 每日作业</div>
12
13 <!-- 今日作业 -->
14 <section class="view active" id="v-today">
15 <div class="hero">
16 <h1>今日作业清单</h1>
17 <p>及时登记 · 认真完成 · 家校共育</p>
18 <div class="stat">
19 <div><b id="hero-total">3</b><small>今日作业</small></div>
20 <div><b id="hero-done">1</b><small>已完成</small></div>
21 <div><b>🌟</b><small>家长点评</small></div>
22 </div>
23 </div>
24 <div class="section-title">作业列表 <small>点击查看详情</small></div>
25 <div id="today-list"></div>
26 </section>
27
28 <!-- 作业详情 -->
29 <section class="view" id="v-detail">
30 <div class="card">
31 <div class="hd"><strong id="d-subject" style="font-size:18px"></strong></div>
32 <div style="font-size:14px;line-height:1.7;color:#334155;margin:10px 0" id="d-content"></div>
33 <div class="tag tag-blue" id="d-meta"></div>
34 </div>
35 <button class="btn btn-ghost" onclick="location.hash='today'">返回列表</button>
36 </section>
37
38 <!-- 作业登记 -->
39 <section class="view" id="v-add">
40 <div class="card">
41 <strong>登记新作业</strong>
42 <div style="color:#64748b;font-size:13px;margin:4px 0 14px">老师发布或家长帮孩子记录</div>
43 </div>
44 <div class="field">
45 <label>科目</label>
46 <select id="a-subject">
47 <option>语文</option><option>数学</option><option>英语</option><option>科学</option><option>美术</option><option>其他</option>
48 </select>
49 </div>
50 <div class="field">
51 <label>作业内容</label>
52 <textarea id="a-content" placeholder="例如：完成练习册 P32，背诵课文第二段…"></textarea>
53 </div>
54 <div class="field">
55 <label>预计时长（分钟）</label>
56 <input type="number" id="a-duration" value="30" min="5" max="180">
57 </div>
58 <div class="field">
59 <label>截止时间</label>
60 <input type="text" id="a-deadline" value="今天 20:00">
61 </div>
62 <button class="btn btn-primary" id="add-submit">登记作业</button>
63 </section>
64
65 <!-- 完成情况 -->
66 <section class="view" id="v-progress">
67 <div class="card" style="text-align:center">
68 <svg class="progress-ring" viewBox="0 0 100 100">
69 <defs><linearGradient id="pg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#2563eb"/><stop offset="100%" stop-color="#06b6d4"/></linearGradient></defs>
70 <circle class="track" cx="50" cy="50" r="40"/>
71 <circle class="fill" id="pg-fill" cx="50" cy="50" r="40" stroke-dasharray="251.2" stroke-dashoffset="167.5"/>
72 </svg>
73 <div style="font-size:22px;font-weight:800;color:#2563eb;margin-top:-58px;position:relative" id="pg-num">33%</div>
74 <div style="color:#64748b;font-size:13px;margin-top:36px" id="pg-text">1/3 项完成</div>
75 </div>
76 <div class="section-title">逐项完成</div>
77 <div id="progress-list"></div>
78 </section>
79
80 <!-- 家长点评 -->
81 <section class="view" id="v-parent">
82 <div class="section-title">家长点评</div>
83 <div id="parent-list"></div>
84 </section>
85
86 <!-- 老师点评 -->
87 <section class="view" id="v-teacher">
88 <div class="section-title">老师点评</div>
89 <div id="teacher-list"></div>
90 </section>
91
92 <!-- 学习汇总 -->
93 <section class="view" id="v-summary">
94 <div class="card">
95 <div class="section-title" style="margin:0 0 12px">本周概况</div>
96 <div style="display:flex;justify-content:space-around;text-align:center">
97 <div><div style="font-size:24px;font-weight:800;color:#2563eb" id="sm-total">0</div><small style="color:#64748b">作业总数</small></div>
98 <div><div style="font-size:24px;font-weight:800;color:#10b981" id="sm-done">0</div><small style="color:#64748b">已完成</small></div>
99 <div><div style="font-size:24px;font-weight:800;color:#f59e0b" id="sm-comment">0</div><small style="color:#64748b">家长点评</small></div>
100 <div><div style="font-size:24px;font-weight:800;color:#ec4899" id="sm-rate">0</div><small style="color:#64748b">星级评分</small></div>
101 </div>
102 </div>
103 <div class="card">
104 <div class="section-title" style="margin:0 0 12px">各科完成率</div>
105 <div id="sm-bars"></div>
106 </div>
107 </section>
108
109 <nav class="tabbar">
110 <a href="#today" data-tab="today" class="on"><span class="ic">📋</span>今日</a>
111 <a href="#add" data-tab="add"><span class="ic">➕</span>登记</a>
112 <a href="#progress" data-tab="progress"><span class="ic">✅</span>完成</a>
113 <a href="#parent" data-tab="parent"><span class="ic">👪</span>家长</a>
114 <a href="#teacher" data-tab="teacher"><span class="ic">👩🏫</span>老师</a>
115 <a href="#summary" data-tab="summary"><span class="ic">📊</span>汇总</a>
116 </nav>
117 <div class="toast" id="toast"></div>
118</div>
119<script src="jquery.min.js"></script>
120<script>
121var SEED = [{"id": "h1", "subject": "语文", "content": "背诵《春》全文，并完成课后生字抄写 2 遍。", "duration": 40, "deadline": "今天 20:00", "done": false, "parentStar": 0, "parentComment": "", "teacherComment": "背诵流利，生字书写工整，继续保持！"}, {"id": "h2", "subject": "数学", "content": "练习册 P32-33，应用题写出完整解题步骤。", "duration": 35, "deadline": "今天 21:00", "done": true, "parentStar": 5, "parentComment": "独立完成，遇到难题主动思考，很棒！", "teacherComment": "步骤规范，计算准确，建议再检查单位。"}, {"id": "h3", "subject": "英语", "content": "朗读 Unit3 对话 3 遍，默写单词 10 个。", "duration": 25, "deadline": "明天 08:00", "done": false, "parentStar": 0, "parentComment": "", "teacherComment": ""}];
122</script>
123<script src="app.js"></script>
124</body>
125</html>
126