💻 代码预览 · 班级成绩查询系统（移动端 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,maximum-scale=1,user-scalable=no">
6<title>考试详情</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div id="app"><div class="navbar "><a class="nb-back" href="exams.html">&lsaquo;</a><div class="nb-title">考试详情</div><div class="nb-right">📊</div></div><div class="uc-wrap"><div class="card" id="exam-head"></div><div class="sec-h"><span class="sec-n">科</span>各科成绩</div><div class="card" id="subs"></div><div class="sec-h"><span class="sec-n">像</span>能力画像</div><div class="card" id="radar"></div><div class="sec-h"><span class="sec-n">布</span>分数段分布</div><div class="card" id="dist"></div></div></div>
11<script src="app.js"></script>
12<script>DS.get('cg_exam').then(function(d){  $('#exam-head').innerHTML='<div class="eh-t">'+d.exam+'</div><div class="eh-d">'+d.date+'</div><div class="eh-row"><div class="eh-i"><span class="eh-v">'+d.total+'</span><span class="eh-k">总分 / '+d.full+'</span></div><div class="eh-i"><span class="eh-v" style="color:#2f9e44">+23 ▲</span><span class="eh-k">较上次</span></div><div class="eh-i"><span class="eh-v">'+d.rank+'</span><span class="eh-k">班级排名</span></div><div class="eh-i"><span class="eh-v">'+d.class_avg+'</span><span class="eh-k">班级均分</span></div></div>';  var s=''; d.subjects.forEach(function(x){    var up=x.score>=x.class_avg; var col=up?'#2f9e44':'#e03131';    s+='<div class="sub"><div class="sub-l"><div class="sub-n">'+x.name+'</div><div class="sub-meta">排名 '+x.rank+' · 班均 '+x.class_avg+'</div></div><div class="sub-r"><div class="sub-v">'+x.score+'<span class="sub-f">/'+x.full+'</span></div><div class="sub-d" style="color:'+col+'">'+(up?'▲超均':'▼低均')+'</div></div></div>';  }); $('#subs').innerHTML=s;  $('#radar').innerHTML=Chart.radar({size:240,max:1,axes:d.radar.axes,series:[{name:'我',color:'#3b5bdb',data:d.radar.you},{name:'班级',color:'#adb5bd',data:d.radar.avg}]});  $('#dist').innerHTML=Chart.bar({w:340,h:190,max:20,labels:d.dist.map(function(x){return x[0];}),series:[{name:'人数',color:'#3b5bdb',data:d.dist.map(function(x){return x[1];})}]});});</script>
13</body>
14</html>