💻 代码预览 · 在线考试系统H5移动端功能演示

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<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="wrap">
11<div class="header">
12  <div class="top"><span class="role">教师端</span><span style="margin-left:auto;font-size:12px;opacity:.85">驰旭教育</span></div>
13  <h1>主观题批阅</h1>
14  <div class="sub">待批阅 6 份</div>
15</div>
16<div class="list" style="margin-top:12px">
17  <div class="row"><div class="avatar">🧑‍🎓</div><div class="info"><div class="t">张三 · 数据结构阶段测</div><div class="s">简答题 3 · 满分 12 · 待批阅</div></div><span class="tag wait">待批</span></div>
18  <div class="row"><div class="avatar">🧑‍🎓</div><div class="info"><div class="t">李四 · 高等数学（上）</div><div class="s">证明题 2 · 满分 10 · 待批阅</div></div><span class="tag wait">待批</span></div>
19  <div class="row"><div class="avatar">🧑‍🎓</div><div class="info"><div class="t">王五 · 大学英语四级</div><div class="s">作文 · 满分 15 · 待批阅</div></div><span class="tag wait">待批</span></div>
20</div>
21<div class="card" style="margin-top:12px;padding:16px">
22  <div class="section-title" style="padding:0 0 8px"><span>批阅详情</span></div>
23  <div class="qt" style="font-size:13px;color:var(--muted)">简答题：简述二叉树的三种遍历方式及其特点。</div>
24  <div class="qh" style="font-size:14px;font-weight:600;margin:8px 0;line-height:1.6">学生作答：前序遍历先访问根节点再左子树右子树；中序遍历先左子树、根、右子树；后序遍历先左右子树再根。三种方式依赖递归结构……</div>
25  <div class="field" style="border-top:1px solid var(--line)"><label>得分</label><input value="10 / 12"></div>
26  <div class="field"><label>评语</label><input value="要点完整，后序特点可补充"></div>
27  <div class="exam-actions" style="padding:6px 0 0">
28    <button class="btn ghost">驳回重做</button>
29    <button class="btn">通过并保存</button>
30  </div>
31</div>
32<div class="bottom-nav"><a class="nav-item" href="qbank.html"><span class="icon">📚</span>题库</a><a class="nav-item" href="compose.html"><span class="icon">🧩</span>组卷</a><a class="nav-item" href="mark.html"><span class="icon">✍️</span>批阅</a></div><div class="safe-bottom"></div>
33</div>
34
35</body>
36</html>