💻 代码预览 · 小草家校通

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="section-title">🎉 校园活动</div>
13<div id="actList"></div>
14<div class="section-title">💬 班级圈</div>
15<div id="commList"></div>
16<div class="section-title">📚 家长课堂</div>
17<div id="tipList"></div>
18<div style="height:70px"></div>
19
20
21<nav class="tabbar"><a class=" active" 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="" href="grade.html"><span class="icon">📊</span>成绩</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
22<script src="data.js"></script>
23<script>
24  var al = document.getElementById('actList');
25  var h = '';
26  window.DATA.activities.forEach(function (a) {
27    h += '<div class="act-card"><div class="ac-img">' + a.img + '</div><div class="ac-body"><div class="ac-name">' + a.name + '</div><div class="ac-meta">' + a.meta + '</div></div><div class="ac-btn' + (a.joined ? ' joined' : '') + '">' + (a.joined ? '已报名' : '报名') + '</div></div>';
28  });
29  al.innerHTML = h;
30  var cl = document.getElementById('commList');
31  var h2 = '';
32  window.DATA.community.forEach(function (c) {
33    h2 += '<div class="comm-card"><div class="cm-head"><div class="cm-avatar">' + c.avatar + '</div><div>' + c.name + '</div><div class="cm-tag">' + c.tag + '</div></div>'
34      + '<div class="cm-title">' + c.title + '</div><div class="cm-text">' + c.text + '</div>'
35      + '<div class="cm-foot"><span>❤️ ' + c.like + '</span><span>💬 ' + c.cmt + '</span><span data-toast="已分享">↗ 分享</span></div></div>';
36  });
37  cl.innerHTML = h2;
38  var tl = document.getElementById('tipList');
39  var h3 = '';
40  window.DATA.tips.forEach(function (t) {
41    h3 += '<div class="tip-box"><div class="tb-title">' + t.title + '</div><div class="tb-text">' + t.text + '</div></div>';
42  });
43  tl.innerHTML = h3;
44</script>
45<script src="app.js"></script>
46</body>
47</html>