index.html · 约 26410 字符
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>明德学院学生成绩管理系统</title>
7<style>
8:root{ --bg:#eef2f9; --card:#fff; --primary:#3b6ef6; --secondary:#00b8a9; --text:#1f2937; --muted:#8a94a6; --line:#eef1f6; --shadow:0 4px 14px rgba(31,41,55,.07); }
9*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
10body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.45}
11.page{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;overflow:hidden;display:none}
12.page.active{display:block}
13.header{background:linear-gradient(135deg,var(--primary),#5b8def);color:#fff;padding:16px 16px 20px;position:sticky;top:0;z-index:20}
14.header h1{font-size:18px;font-weight:600}
15.header .sub{font-size:12px;opacity:.85;margin-top:2px}
16.search-bar{display:flex;align-items:center;padding:12px 16px;background:#fff;gap:10px}
17.search-bar input{flex:1;border:none;background:var(--bg);border-radius:20px;padding:9px 14px;font-size:13px;outline:none}
18.search-bar .btn{width:34px;height:34px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}
19.section-title{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 6px;font-size:15px;font-weight:600}
20.section-title .more{font-size:12px;color:var(--muted);font-weight:400}
21
22.stu-card{background:linear-gradient(135deg,var(--primary),#5b8def);color:#fff;margin:12px 16px;border-radius:18px;padding:18px;box-shadow:var(--shadow)}
23.stu-top{display:flex;align-items:center;gap:14px}
24.stu-avatar{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:30px}
25.stu-name{font-size:19px;font-weight:600}
26.stu-sub{font-size:12px;opacity:.9;margin-top:3px}
27.stu-gpa{margin-top:16px;display:flex;justify-content:space-between;background:rgba(255,255,255,.15);border-radius:12px;padding:12px}
28.stu-gpa .num{font-size:22px;font-weight:700}
29.stu-gpa .lbl{font-size:11px;opacity:.85}
30
31.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 16px 12px}
32.quick{background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
33.quick .q-ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
34.quick .q-t{font-size:14px;font-weight:600}
35.quick .q-s{font-size:11px;color:var(--muted);margin-top:2px}
36
37.notice{background:var(--card);margin:6px 16px 16px;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
38.notice-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);gap:12px}
39.notice-item:last-child{border-bottom:none}
40.notice-ic{width:34px;height:34px;border-radius:10px;background:#fff3e0;color:#f59e0b;display:flex;align-items:center;justify-content:center;font-size:18px}
41.notice-b{font-size:13px}
42.notice-b .nt{font-weight:500}
43.notice-b .nd{font-size:11px;color:var(--muted);margin-top:2px}
44
45.week{display:flex;gap:6px;padding:12px 10px;overflow-x:auto}
46.day{flex:1;min-width:60px;background:var(--card);border-radius:12px;padding:8px 6px;box-shadow:var(--shadow)}
47.day .dname{font-size:12px;font-weight:600;text-align:center;color:var(--primary);margin-bottom:6px}
48.cls{background:linear-gradient(135deg,#eaf1ff,#e6fbf8);border-radius:8px;padding:6px;margin-bottom:6px;font-size:10px}
49.cls .ct{color:var(--muted)}
50.cls .cn{font-weight:600;color:var(--text);margin:2px 0;font-size:11px}
51.cls .cr{color:var(--secondary);font-size:9px}
52
53.gpa-banner{margin:12px 16px;background:linear-gradient(135deg,var(--secondary),#34d399);color:#fff;border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:space-between}
54.gpa-banner .big{font-size:34px;font-weight:800}
55.gpa-banner .lab{font-size:12px;opacity:.9}
56.grade-list{background:var(--card);margin:0 16px 16px;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
57.grade-row{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
58.grade-row:last-child{border-bottom:none}
59.grade-row .g-name{flex:1;font-size:14px;font-weight:500}
60.grade-row .g-credit{font-size:12px;color:var(--muted);width:54px;text-align:center}
61.grade-row .g-score{font-size:17px;font-weight:700;width:42px;text-align:center}
62.grade-row .g-gp{font-size:11px;color:var(--primary);width:56px;text-align:right}
63
64.course-card{background:var(--card);margin:10px 16px;border-radius:16px;padding:14px;box-shadow:var(--shadow)}
65.course-card .c-top{display:flex;justify-content:space-between;align-items:center}
66.course-card .c-name{font-size:15px;font-weight:600}
67.course-card .c-credit{font-size:12px;color:var(--primary);background:#eaf1ff;padding:2px 10px;border-radius:10px}
68.course-card .c-meta{font-size:12px;color:var(--muted);margin:8px 0 12px}
69.course-card .c-bottom{display:flex;justify-content:space-between;align-items:center}
70.course-card .c-quota{font-size:12px;color:var(--muted)}
71.course-card .c-btn{background:linear-gradient(135deg,var(--primary),#5b8def);color:#fff;font-size:13px;padding:7px 18px;border-radius:20px}
72.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 6px}
73.chip{background:#eaf1ff;color:var(--primary);font-size:12px;padding:6px 12px;border-radius:14px}
74.sel-bar{display:flex;justify-content:space-between;align-items:center;background:var(--card);margin:8px 16px;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);font-size:13px}
75.sel-bar b{color:var(--primary);font-size:15px}
76
77.tea-card{background:linear-gradient(135deg,#0ea5e9,#22d3ee);color:#fff;margin:12px 16px;border-radius:18px;padding:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
78.tea-avatar{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:28px}
79.tea-name{font-size:18px;font-weight:600}
80.tea-sub{font-size:12px;opacity:.9;margin-top:3px}
81.seg{display:flex;gap:8px;padding:6px 16px}
82.seg .sg{flex:1;text-align:center;font-size:13px;padding:8px 0;background:var(--card);border-radius:12px;color:var(--muted);box-shadow:var(--shadow)}
83.seg .sg.on{background:var(--primary);color:#fff;font-weight:600}
84
85.scroll-wrap{overflow-x:auto;margin:8px 16px;border-radius:14px;box-shadow:var(--shadow)}
86table.score{width:100%;border-collapse:collapse;background:var(--card);font-size:12px;min-width:340px}
87table.score th{background:#f1f5fb;color:var(--muted);padding:9px 6px;font-weight:500;font-size:11px}
88table.score td{padding:8px 6px;border-top:1px solid var(--line);text-align:center}
89table.score td.s-name{text-align:left;font-weight:600}
90table.score td.s-sid{font-size:10px;color:var(--muted);font-weight:400}
91table.score input.cell{width:42px;border:1px solid var(--line);border-radius:8px;padding:6px 4px;text-align:center;font-size:12px;outline:none}
92table.score td.s-total{font-weight:700;color:var(--primary)}
93.save-bar{margin:14px 16px}
94.save-bar .btn{width:100%;background:linear-gradient(135deg,var(--primary),#5b8def);color:#fff;border:none;border-radius:24px;padding:13px;font-size:15px;font-weight:600}
95
96.roster{background:var(--card);margin:6px 16px 16px;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
97.roster-row{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);gap:12px}
98.roster-row:last-child{border-bottom:none}
99.r-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
100.r-info{flex:1}
101.r-name{font-size:14px;font-weight:600}
102.r-name .r-sex{font-size:11px;color:var(--muted);margin-left:6px;font-weight:400}
103.r-sid{font-size:11px;color:var(--muted);margin-top:2px}
104.r-cre{font-size:11px;color:var(--secondary)}
105
106.back{font-size:20px;color:#fff;margin-right:8px}
107.link{color:var(--primary);font-size:13px;font-weight:500}
108
109.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:430px;width:100%;background:rgba(255,255,255,.98);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 0 10px;z-index:40;backdrop-filter:blur(8px)}
110.nav-item{flex:1;text-align:center;color:var(--muted);font-size:10px}
111.nav-item.active{color:var(--primary)}
112.nav-item .icon{font-size:22px;display:block;margin-bottom:2px}
113.safe-bottom{padding-bottom:74px}
114</style>
115</head>
116<body>
117
118<!-- 学生端首页 -->
119<div class="page active" id="p1">
120<div class="header"><h1>明德学院 · 学生端</h1><div class="sub">欢迎回来，张三同学</div></div>
121<div class="stu-card">
122 <div class="stu-top">
123 <div class="stu-avatar">🎓</div>
124 <div><div class="stu-name">张三</div><div class="stu-sub">学号 2023010042 · 2023级 软件工程</div></div>
125 </div>
126 <div class="stu-gpa">
127 <div><div class="num">3.84</div><div class="lbl">本学期 GPA</div></div>
128 <div style="text-align:right"><div class="num">15.0</div><div class="lbl">已修学分</div></div>
129 <div style="text-align:right"><div class="num">计算机学院</div><div class="lbl">所属学院</div></div>
130 </div>
131</div>
132<div class="section-title"><span>快捷功能</span></div>
133<div class="quick-grid">
134 <div class="quick" onclick="go(2)"><div class="q-ic">📅</div><div><div class="q-t">我的课表</div><div class="q-s">查看本周课程</div></div></div>
135 <div class="quick" onclick="go(3)"><div class="q-ic">📊</div><div><div class="q-t">成绩与绩点</div><div class="q-s">查询各科成绩</div></div></div>
136 <div class="quick" onclick="go(4)"><div class="q-ic">📝</div><div><div class="q-t">在线选课</div><div class="q-s">自主选课退课</div></div></div>
137 <div class="quick" onclick="go(5)"><div class="q-ic">👨🏫</div><div><div class="q-t">教师端</div><div class="q-s">成绩录入 / 名单</div></div></div>
138</div>
139<div class="section-title"><span>校园通知</span><span class="more">全部</span></div>
140<div class="notice">
141 <div class="notice-item"><div class="notice-ic">📢</div><div class="notice-b"><div class="nt">2025-2026 学年第二学期选课开启</div><div class="nd">教务处于今日 09:00 开放选课系统</div></div></div>
142 <div class="notice-item"><div class="notice-ic">📝</div><div class="notice-b"><div class="nt">期中考试成绩已发布</div><div class="nd">程序设计基础等课程可查询</div></div></div>
143 <div class="notice-item"><div class="notice-ic">🏫</div><div class="notice-b"><div class="nt">计算机学院学术讲座预告</div><div class="nd">周五 14:00 主楼报告厅</div></div></div>
144</div>
145<div class="bottom-nav">
146 <div class="nav-item active" onclick="go(1)"><span class="icon">🏠</span>首页</div>
147 <div class="nav-item" onclick="go(2)"><span class="icon">📅</span>课表</div>
148 <div class="nav-item" onclick="go(3)"><span class="icon">📊</span>成绩</div>
149 <div class="nav-item" onclick="go(4)"><span class="icon">📝</span>选课</div>
150 <div class="nav-item" onclick="go(5)"><span class="icon">👨🏫</span>教师</div>
151</div>
152<div class="safe-bottom"></div>
153</div>
154
155<!-- 我的课表 -->
156<div class="page" id="p2">
157<div class="header"><h1>我的课表</h1><div class="sub">2025-2026 学年 第二学期 · 第 12 教学周</div></div>
158<div class="week"><div class="day"><div class="dname">周一</div><div class="cls"><div class="ct">08:00-09:40</div><div class="cn">高等数学</div><div class="cr">📍A201</div></div><div class="cls"><div class="ct">10:00-11:40</div><div class="cn">程序设计基础</div><div class="cr">📍B305</div></div><div class="cls"><div class="ct">14:00-15:40</div><div class="cn">大学英语</div><div class="cr">📍C102</div></div></div><div class="day"><div class="dname">周二</div><div class="cls"><div class="ct">10:00-11:40</div><div class="cn">线性代数</div><div class="cr">📍A305</div></div><div class="cls"><div class="ct">16:00-17:40</div><div class="cn">体育</div><div class="cr">📍体育馆</div></div></div><div class="day"><div class="dname">周三</div><div class="cls"><div class="ct">08:00-09:40</div><div class="cn">高等数学</div><div class="cr">📍A201</div></div><div class="cls"><div class="ct">14:00-15:40</div><div class="cn">程序设计基础</div><div class="cr">📍B305</div></div></div><div class="day"><div class="dname">周四</div><div class="cls"><div class="ct">10:00-11:40</div><div class="cn">线性代数</div><div class="cr">📍A305</div></div><div class="cls"><div class="ct">14:00-15:40</div><div class="cn">思想道德与法治</div><div class="cr">📍D201</div></div></div><div class="day"><div class="dname">周五</div><div class="cls"><div class="ct">08:00-09:40</div><div class="cn">大学英语</div><div class="cr">📍C102</div></div><div class="cls"><div class="ct">16:00-17:40</div><div class="cn">创新创业基础</div><div class="cr">📍创业中心</div></div></div></div>
159<div class="bottom-nav">
160 <div class="nav-item" onclick="go(1)"><span class="icon">🏠</span>首页</div>
161 <div class="nav-item active" onclick="go(2)"><span class="icon">📅</span>课表</div>
162 <div class="nav-item" onclick="go(3)"><span class="icon">📊</span>成绩</div>
163 <div class="nav-item" onclick="go(4)"><span class="icon">📝</span>选课</div>
164 <div class="nav-item" onclick="go(5)"><span class="icon">👨🏫</span>教师</div>
165</div>
166<div class="safe-bottom"></div>
167</div>
168
169<!-- 成绩与绩点 -->
170<div class="page" id="p3">
171<div class="header"><h1>成绩与绩点</h1><div class="sub">张三 · 2023010042</div></div>
172<div class="seg" style="margin-top:10px">
173 <div class="sg on">2025-2026(2)</div>
174 <div class="sg">2025-2026(1)</div>
175 <div class="sg">总绩点</div>
176</div>
177<div class="gpa-banner">
178 <div><div class="big">3.84</div><div class="lab">本学期平均绩点 GPA</div></div>
179 <div style="text-align:right"><div class="big">15.0</div><div class="lab">修读学分</div></div>
180</div>
181<div class="section-title"><span>各科成绩</span><span class="more">共 6 门</span></div>
182<div class="grade-list"><div class="grade-row"><div class="g-name">高等数学</div><div class="g-credit">4.0 学分</div><div class="g-score" style="color:#16a34a">92</div><div class="g-gp">绩点 4.0</div></div><div class="grade-row"><div class="g-name">程序设计基础</div><div class="g-credit">3.0 学分</div><div class="g-score" style="color:#16a34a">88</div><div class="g-gp">绩点 3.7</div></div><div class="grade-row"><div class="g-name">线性代数</div><div class="g-credit">3.0 学分</div><div class="g-score" style="color:#16a34a">85</div><div class="g-gp">绩点 3.7</div></div><div class="grade-row"><div class="g-name">大学英语</div><div class="g-credit">2.0 学分</div><div class="g-score" style="color:#16a34a">90</div><div class="g-gp">绩点 4.0</div></div><div class="grade-row"><div class="g-name">体育</div><div class="g-credit">1.0 学分</div><div class="g-score" style="color:#16a34a">95</div><div class="g-gp">绩点 4.0</div></div><div class="grade-row"><div class="g-name">思想道德与法治</div><div class="g-credit">2.0 学分</div><div class="g-score" style="color:#16a34a">87</div><div class="g-gp">绩点 3.7</div></div></div>
183<div class="bottom-nav">
184 <div class="nav-item" onclick="go(1)"><span class="icon">🏠</span>首页</div>
185 <div class="nav-item" onclick="go(2)"><span class="icon">📅</span>课表</div>
186 <div class="nav-item active" onclick="go(3)"><span class="icon">📊</span>成绩</div>
187 <div class="nav-item" onclick="go(4)"><span class="icon">📝</span>选课</div>
188 <div class="nav-item" onclick="go(5)"><span class="icon">👨🏫</span>教师</div>
189</div>
190<div class="safe-bottom"></div>
191</div>
192
193<!-- 在线选课 -->
194<div class="page" id="p4">
195<div class="header"><h1>在线选课</h1><div class="sub">2025-2026 学年 第二学期</div></div>
196<div class="search-bar"><input placeholder="搜索课程名称 / 教师"><div class="btn">🔍</div></div>
197<div class="sel-bar"><span>已选课程（本学期在修）</span><b>6 门</b></div>
198<div class="chips"><span class="chip">高等数学</span><span class="chip">程序设计基础</span><span class="chip">线性代数</span><span class="chip">大学英语</span><span class="chip">体育</span><span class="chip">思想道德与法治</span></div>
199<div class="section-title"><span>可选课程</span><span class="more">共 5 门</span></div>
200<div class="course-card"><div class="c-top"><div class="c-name">数据结构</div><div class="c-credit">3.0 学分</div></div><div class="c-meta">🕒 周二/周四 1-2节 · 👨🏫 李老师</div><div class="c-bottom"><div class="c-quota">选课人数 12/60</div><div class="c-btn">选课</div></div></div><div class="course-card"><div class="c-top"><div class="c-name">计算机网络</div><div class="c-credit">3.0 学分</div></div><div class="c-meta">🕒 周一/周三 3-4节 · 👨🏫 王老师</div><div class="c-bottom"><div class="c-quota">选课人数 45/80</div><div class="c-btn">选课</div></div></div><div class="course-card"><div class="c-top"><div class="c-name">概率论与数理统计</div><div class="c-credit">2.0 学分</div></div><div class="c-meta">🕒 周五 1-2节 · 👨🏫 赵老师</div><div class="c-bottom"><div class="c-quota">选课人数 30/50</div><div class="c-btn">选课</div></div></div><div class="course-card"><div class="c-top"><div class="c-name">操作系统</div><div class="c-credit">3.0 学分</div></div><div class="c-meta">🕒 周二/周四 5-6节 · 👨🏫 孙老师</div><div class="c-bottom"><div class="c-quota">选课人数 20/40</div><div class="c-btn">选课</div></div></div><div class="course-card"><div class="c-top"><div class="c-name">数据库系统</div><div class="c-credit">3.0 学分</div></div><div class="c-meta">🕒 周三/周五 7-8节 · 👨🏫 周老师</div><div class="c-bottom"><div class="c-quota">选课人数 58/60</div><div class="c-btn">选课</div></div></div>
201<div class="bottom-nav">
202 <div class="nav-item" onclick="go(1)"><span class="icon">🏠</span>首页</div>
203 <div class="nav-item" onclick="go(2)"><span class="icon">📅</span>课表</div>
204 <div class="nav-item" onclick="go(3)"><span class="icon">📊</span>成绩</div>
205 <div class="nav-item active" onclick="go(4)"><span class="icon">📝</span>选课</div>
206 <div class="nav-item" onclick="go(5)"><span class="icon">👨🏫</span>教师</div>
207</div>
208<div class="safe-bottom"></div>
209</div>
210
211<!-- 教师端：录入成绩 -->
212<div class="page" id="p5">
213<div class="header"><h1>教师端 · 成绩管理</h1><div class="sub">李四 老师</div></div>
214<div class="tea-card">
215 <div class="tea-avatar">👨🏫</div>
216 <div><div class="tea-name">李四</div><div class="tea-sub">工号 T2018056 · 讲师 · 计算机学院</div></div>
217</div>
218<div class="seg">
219 <div class="sg on">程序设计基础</div>
220 <div class="sg">数据结构</div>
221</div>
222<div class="sel-bar"><span>授课班级</span><b>2023级软件工程1班（35 人）</b></div>
223<div class="scroll-wrap">
224<table class="score">
225<thead><tr><th>学生</th><th>平时</th><th>期中</th><th>期末</th><th>总评</th></tr></thead>
226<tbody><tr><td class="s-name">张三<div class="s-sid">2023010042</div></td><td><input class="cell" value="92"></td><td><input class="cell" value="88"></td><td><input class="cell" value="90"></td><td class="s-total">90.0</td></tr><tr><td class="s-name">王五<div class="s-sid">2023010043</div></td><td><input class="cell" value="85"></td><td><input class="cell" value="82"></td><td><input class="cell" value="88"></td><td class="s-total">85.3</td></tr><tr><td class="s-name">赵六<div class="s-sid">2023010044</div></td><td><input class="cell" value="78"></td><td><input class="cell" value="80"></td><td><input class="cell" value="83"></td><td class="s-total">80.7</td></tr><tr><td class="s-name">孙七<div class="s-sid">2023010045</div></td><td><input class="cell" value="90"></td><td><input class="cell" value="92"></td><td><input class="cell" value="95"></td><td class="s-total">92.7</td></tr><tr><td class="s-name">周八<div class="s-sid">2023010046</div></td><td><input class="cell" value="66"></td><td><input class="cell" value="70"></td><td><input class="cell" value="72"></td><td class="s-total">69.4</td></tr><tr><td class="s-name">吴九<div class="s-sid">2023010047</div></td><td><input class="cell" value="88"></td><td><input class="cell" value="85"></td><td><input class="cell" value="90"></td><td class="s-total">87.7</td></tr><tr><td class="s-name">郑十<div class="s-sid">2023010048</div></td><td><input class="cell" value="95"></td><td><input class="cell" value="93"></td><td><input class="cell" value="96"></td><td class="s-total">94.7</td></tr><tr><td class="s-name">冯一<div class="s-sid">2023010049</div></td><td><input class="cell" value="73"></td><td><input class="cell" value="75"></td><td><input class="cell" value="78"></td><td class="s-total">75.4</td></tr></tbody>
227</table>
228</div>
229<div class="save-bar"><button class="btn" onclick="alert('成绩已保存（演示）')">保存成绩</button></div>
230<div class="section-title"><span>更多操作</span></div>
231<div class="notice">
232 <div class="notice-item" onclick="go(6)"><div class="notice-ic">👥</div><div class="notice-b"><div class="nt">查看授课班级名单</div><div class="nd">2023级软件工程1班 全部学生</div></div></div>
233</div>
234<div class="bottom-nav">
235 <div class="nav-item" onclick="go(1)"><span class="icon">🏠</span>首页</div>
236 <div class="nav-item" onclick="go(2)"><span class="icon">📅</span>课表</div>
237 <div class="nav-item" onclick="go(3)"><span class="icon">📊</span>成绩</div>
238 <div class="nav-item" onclick="go(4)"><span class="icon">📝</span>选课</div>
239 <div class="nav-item active" onclick="go(5)"><span class="icon">👨🏫</span>教师</div>
240</div>
241<div class="safe-bottom"></div>
242</div>
243
244<!-- 教师端：班级名单 -->
245<div class="page" id="p6">
246<div class="header"><h1>授课班级名单</h1><div class="sub"><span class="back" onclick="go(5)">←</span>李四 老师</div></div>
247<div class="tea-card">
248 <div class="tea-avatar">👨🏫</div>
249 <div><div class="tea-name">2023级软件工程1班</div><div class="tea-sub">班级人数 35 人 · 软件工程专业</div></div>
250</div>
251<div class="seg">
252 <div class="sg on">软件工程1班</div>
253 <div class="sg">软件工程2班</div>
254</div>
255<div class="section-title"><span>学生名单</span><span class="more">共 10 人</span></div>
256<div class="roster"><div class="roster-row"><div class="r-avatar">张</div><div class="r-info"><div class="r-name">张三<span class="r-sex">男</span></div><div class="r-sid">2023010042 · 软件工程</div></div><div class="r-cre">已修 42 学分</div></div><div class="roster-row"><div class="r-avatar">王</div><div class="r-info"><div class="r-name">王五<span class="r-sex">男</span></div><div class="r-sid">2023010043 · 软件工程</div></div><div class="r-cre">已修 40 学分</div></div><div class="roster-row"><div class="r-avatar">赵</div><div class="r-info"><div class="r-name">赵六<span class="r-sex">女</span></div><div class="r-sid">2023010044 · 软件工程</div></div><div class="r-cre">已修 39 学分</div></div><div class="roster-row"><div class="r-avatar">孙</div><div class="r-info"><div class="r-name">孙七<span class="r-sex">男</span></div><div class="r-sid">2023010045 · 软件工程</div></div><div class="r-cre">已修 45 学分</div></div><div class="roster-row"><div class="r-avatar">周</div><div class="r-info"><div class="r-name">周八<span class="r-sex">女</span></div><div class="r-sid">2023010046 · 软件工程</div></div><div class="r-cre">已修 36 学分</div></div><div class="roster-row"><div class="r-avatar">吴</div><div class="r-info"><div class="r-name">吴九<span class="r-sex">男</span></div><div class="r-sid">2023010047 · 软件工程</div></div><div class="r-cre">已修 43 学分</div></div><div class="roster-row"><div class="r-avatar">郑</div><div class="r-info"><div class="r-name">郑十<span class="r-sex">女</span></div><div class="r-sid">2023010048 · 软件工程</div></div><div class="r-cre">已修 47 学分</div></div><div class="roster-row"><div class="r-avatar">冯</div><div class="r-info"><div class="r-name">冯一<span class="r-sex">男</span></div><div class="r-sid">2023010049 · 软件工程</div></div><div class="r-cre">已修 37 学分</div></div><div class="roster-row"><div class="r-avatar">陈</div><div class="r-info"><div class="r-name">陈二<span class="r-sex">女</span></div><div class="r-sid">2023010050 · 软件工程</div></div><div class="r-cre">已修 41 学分</div></div><div class="roster-row"><div class="r-avatar">褚</div><div class="r-info"><div class="r-name">褚三<span class="r-sex">男</span></div><div class="r-sid">2023010051 · 软件工程</div></div><div class="r-cre">已修 38 学分</div></div></div>
257<div class="bottom-nav">
258 <div class="nav-item" onclick="go(1)"><span class="icon">🏠</span>首页</div>
259 <div class="nav-item" onclick="go(2)"><span class="icon">📅</span>课表</div>
260 <div class="nav-item" onclick="go(3)"><span class="icon">📊</span>成绩</div>
261 <div class="nav-item" onclick="go(4)"><span class="icon">📝</span>选课</div>
262 <div class="nav-item active" onclick="go(5)"><span class="icon">👨🏫</span>教师</div>
263</div>
264<div class="safe-bottom"></div>
265</div>
266
267<script>
268function go(n){
269 var pages = document.querySelectorAll('.page');
270 for (var i=0;i<pages.length;i++) pages[i].classList.remove('active');
271 var t = document.getElementById('p'+n);
272 if (t) t.classList.add('active');
273 window.scrollTo(0,0);
274}
275</script>
276</body>
277</html>
278