小草少儿编程_H5/classroom.html · 约 2228 字符
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="classroom-hero">
13 <div class="ch-level">当前课程 · L3 图形编程</div>
14 <div class="ch-name">Scratch 游戏设计进阶</div>
15 <div class="ch-progress"><i></i></div>
16 <div style="font-size:11px;opacity:.9;margin-top:8px">已完成 7/10 关 · 本周上课 2 次</div>
17</div>
18<div class="section-title">学习关卡</div>
19<div class="level-grid"></div>
20<div class="coin-bar">
21 <div class="cb-coin">🪙</div>
22 <div class="cb-body">
23 <b>1,280 金币</b><br/><span>完成关卡 / 提交作品可赚金币，兑换编程周边</span>
24 </div>
25 <div class="btn btn-orange" style="width:auto;padding:9px 16px;font-size:12px;border-radius:18px" data-toast="金币商城建设中">去兑换</div>
26</div>
27<script>
28 var lg = document.querySelector('.level-grid');
29 var h2 = '';
30 window.DATA.levels.forEach(function (lv) {
31 var cls = lv.state === 'done' ? 'done' : (lv.state === 'now' ? 'now' : '');
32 var st = lv.state === 'done' ? '已完成' : (lv.state === 'now' ? '学习中' : '未解锁');
33 h2 += '<div class="level-item"><div class="li-emoji">' + lv.emoji + '</div><div class="li-name">' + lv.name + '</div><div class="li-state ' + cls + '">' + st + '</div></div>';
34 });
35 lg.innerHTML = h2;
36</script>
37
38<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="courses.html"><span class="icon">📚</span>课程</a><a class=" active" href="classroom.html"><span class="icon">✏️</span>课堂</a><a class="" href="works.html"><span class="icon">🎨</span>作品</a><a class="" href="report.html"><span class="icon">📈</span>报告</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
39<script src="data.js"></script>
40<script src="app.js"></script>
41</body>
42</html>