💻 代码预览 · 小草家校通

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="section-title">全部通知 <span>共 4 条 · 3 未读</span></div>
13<div id="noticeAll"></div>
14<div style="height:70px"></div>
15
16
17<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class=" active" 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>
18<script src="data.js"></script>
19<script>
20  var na = document.getElementById('noticeAll');
21  var h = '';
22  window.DATA.notices.forEach(function (n) {
23    h += '<div class="notice-item' + (n.read ? '' : ' unread') + '"><div class="ni-head"><span class="ni-tag ' + (n.type === '学校' ? 'sch' : '') + '">' + n.type + '</span><span>' + n.emoji + ' ' + n.title + '</span>' + (n.read ? '' : '<span class="ni-dot"></span>') + '</div>'
24      + '<div class="ni-text">' + n.text + '</div>'
25      + '<div class="ni-foot"><span>' + n.time + '</span><span class="ni-btn">确认收到</span></div></div>';
26  });
27  na.innerHTML = h;
28</script>
29<script src="app.js"></script>
30</body>
31</html>