小草家校通/grade.html · 约 2928 字符
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
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>成绩与成长</h1><span class="right"></span></header>
12<div class="grade-summary">
13 <div class="gs"><b>93</b><span>期中平均分</span></div>
14 <div class="gs"><b>第3</b><span>班级排名</span></div>
15 <div class="gs"><b>↑3</b><span>较上月</span></div>
16</div>
17<div class="grade-chart">
18 <div class="gc-title">📈 学业趋势（近 5 次）</div>
19 <div class="grade-bar" id="trendBar"></div>
20</div>
21<div class="section-title">📋 期中各科成绩</div>
22<div id="gradeList"></div>
23<div class="section-title">🌱 成长档案</div>
24<div id="growthList"></div>
25<div style="height:70px"></div>
26
27
28<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="notice.html"><span class="icon">📢</span>通知</a><a class="" href="homework.html"><span class="icon">📝</span>作业</a><a class=" active" href="grade.html"><span class="icon">📊</span>成绩</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
29<script src="data.js"></script>
30<script>
31 var tb = document.getElementById('trendBar');
32 var max = Math.max.apply(null, window.DATA.trend.map(function (t) { return t.val; }));
33 var h = '';
34 window.DATA.trend.forEach(function (t) {
35 var pct = Math.round(t.val / max * 100);
36 h += '<div class="gb-col"><div class="gb-val">' + t.val + '</div><div class="gb-bar" style="height:' + pct + '%"></div><div class="gb-lab">' + t.lab + '</div></div>';
37 });
38 tb.innerHTML = h;
39 var gl = document.getElementById('gradeList');
40 var h2 = '';
41 window.DATA.grades.forEach(function (g) {
42 h2 += '<div class="grade-item"><div class="gi-sub"><div class="gi-name">' + g.subject + '</div><div class="gi-rank">班级第 ' + g.clsRank + ' · 年级第 ' + g.rank + '</div></div>'
43 + '<div class="gi-score">' + g.score + '<small>/' + g.full + '</small><span class="gi-trend ' + g.trend + '">' + (g.trend === 'up' ? '↑' : '↓') + g.diff + '</span></div></div>';
44 });
45 gl.innerHTML = h2;
46 var wl = document.getElementById('growthList');
47 var h3 = '';
48 window.DATA.growth.forEach(function (g) {
49 h3 += '<div class="growth-card"><div class="gwc-head"><span>📅 ' + g.term + '</span><span class="badge badge-gold">' + g.honor + '</span></div>'
50 + '<div class="gwc-text">' + g.comment + '</div>'
51 + '<div class="gwc-tags">' + g.tags.map(function (x) { return '<span class="tag">' + x + '</span>'; }).join('') + '</div></div>';
52 });
53 wl.innerHTML = h3;
54</script>
55<script src="app.js"></script>
56</body>
57</html>