r115/compare.html · 约 1933 字符
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="home.html">‹</a><div class="nb-title">多维度对比</div><div class="nb-right">⚖️</div></div><div class="uc-wrap"><div class="card" id="dims"></div><div class="sec-h"><span class="sec-n">科</span>各科对比（本次 vs 上次 vs 班级）</div><div class="card" id="cmp"></div></div></div>
11<script src="app.js"></script>
12<script>DS.get('cg_compare').then(function(d){ var max=d.dims.reduce(function(m,x){return Math.max(m,x[1]);},0); var h='<div class="card-h">'+d.exam+' · 总分对比</div>'; d.dims.forEach(function(x){var wp=(x[1]/max*100).toFixed(1); var isme=x[0]==='本次考试'; h+='<div style="margin:10px 0"><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:3px"><span>'+x[0]+'</span><span style="font-weight:700;color:'+(isme?'#3b5bdb':'#646a73')+'">'+x[1]+'</span></div><div style="height:10px;background:#eef0f3;border-radius:6px"><div style="height:10px;width:'+wp+'%;background:'+(isme?'#3b5bdb':'#adb5bd')+';border-radius:6px"></div></div></div>'; }); $('#dims').innerHTML=h; var t='<div class="cmp-h"><span>学科</span><span>本次</span><span>上次</span><span>班级</span><span>校最高</span></div>'; d.subjects.forEach(function(x){var up=x.you>=x.prev; var col=up?'#2f9e44':'#e03131'; t+='<div class="cmp-r"><span class="cmp-n">'+x.name+'</span><span class="cmp-v">'+x.you+'</span><span class="cmp-v" style="color:'+col+'">'+(x.you>=x.prev?'+':'')+(x.you-x.prev)+'</span><span class="cmp-v">'+x.avg+'</span><span class="cmp-v cmp-top">'+x.top+'</span></div>'; }); $('#cmp').innerHTML=t;});</script>
13</body>
14</html>