💻 代码预览 · 小草萌猫社区

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>更多 ›</span></div>
13<div id="liveList"></div>
14<div class="section-title">🎬 进入直播间</div>
15<div class="live-card">
16  <div class="lc-cover">🐱<span class="lc-live">● LIVE</span><span class="lc-view">👁 1.2万</span></div>
17  <div class="lc-body">
18    <div class="lc-title">橘座の午睡直播间</div>
19    <div class="lc-foot"><span>主播：橘座铲屎官</span><span class="lc-feed" data-toast="已投喂🐟">云投喂🐟</span></div>
20  </div>
21</div>
22<div class="send-box">
23  <div style="font-size:13px;font-weight:800;margin-bottom:8px">💬 弹幕互动</div>
24  <textarea placeholder="发条弹幕一起吸猫～"></textarea>
25  <div class="btn btn-pink" data-toast="弹幕已发送：橘座喵了一声～">发送弹幕</div>
26</div>
27<div style="height:70px"></div>
28
29
30
31<script src="data.js"></script>
32<script>
33  var ll = document.getElementById('liveList');
34  var h=''; window.DATA.lives.forEach(function(r){
35    h+='<div class="live-card"><div class="lc-cover">'+r.emoji+'<span class="lc-live">● LIVE</span><span class="lc-view">👁 '+r.view+'</span></div><div class="lc-body"><div class="lc-title">'+r.title+'</div><div class="lc-foot"><span>主播：'+r.host+'</span><span class="lc-feed" data-toast="已投喂🐟">云投喂🐟</span></div></div></div>';
36  });
37  ll.innerHTML = h;
38</script>
39<script src="app.js"></script>
40</body>
41</html>