💻 代码预览 · 小草少儿编程

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"><span class="back"></span><h1>课程中心</h1><span class="right">🔍</span></header>
12<div class="stage-tabs">
13  <div class="stage-tab sel">全部</div>
14  <div class="stage-tab">免费</div>
15  <div class="stage-tab">入门</div>
16  <div class="stage-tab">进阶</div>
17  <div class="stage-tab">竞赛</div>
18</div>
19<div class="section-title">全部课程 <span>共 8 门 · 已选 3 门</span></div>
20<div id="courseList"></div>
21<script>
22  var cw = document.getElementById('courseList');
23  var html = '';
24  window.DATA.courses.forEach(function (c) {
25    html += '<div class="lesson-card" data-diff="' + c.diff + '" data-free="' + (c.free ? '1' : '0') + '">'
26      + '<div class="lc-no">' + c.no + '</div>'
27      + '<div class="lc-body">'
28      + '<div class="lc-name">' + c.name + (c.hot ? ' <span class="badge badge-hot">热门</span>' : '') + (c.free ? ' <span class="badge badge-new">免费试听</span>' : '') + '</div>'
29      + '<div class="lc-meta">适龄 ' + c.age + ' · ' + c.hour + ' 课时</div>'
30      + '<div class="lc-diff">难度：' + c.diff + ' · ' + (c.free ? '免费预约试听' : '在线报名') + '</div>'
31      + '</div></div>';
32  });
33  cw.innerHTML = html;
34</script>
35
36<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class=" active" href="courses.html"><span class="icon">📚</span>课程</a><a class="" 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>
37<script src="data.js"></script>
38<script src="app.js"></script>
39</body>
40</html>