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

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="cmt-tabs">
13  <a class="active">全部</a><a>晒猫日记</a><a>求助问答</a><a>领养</a>
14</div>
15<div id="postList"></div>
16<div class="fab" data-toast="发布动态：上传猫片 + 文字，一键分享">＋</div>
17<div style="height:70px"></div>
18
19
20<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class=" active" href="community.html"><span class="icon">💬</span>猫友圈</a><a class="" href="cat.html"><span class="icon">🐱</span>猫咪</a><a class="" href="adopt.html"><span class="icon">🏡</span>领养</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
21<script src="data.js"></script>
22<script>
23  var pl = document.getElementById('postList');
24  var h = '';
25  window.DATA.posts.forEach(function(p){
26    var cls = (p.type==='晒猫'||p.type==='日记')?'share':(p.type==='求助'?'help':'adopt');
27    h+='<div class="post-card"><div class="pc-head"><div class="pc-avatar">'+p.avatar+'</div><div>'+p.name+'</div><div class="pc-type '+cls+'">'+p.type+'</div></div><div class="pc-text">'+p.text+'</div>'+(p.img?'<div class="pc-img">'+p.img+'</div>':'')+'<div class="pc-actions"><span class="like-btn" data-on="0">❤️ <b>'+p.likes+'</b></span><span>💬 '+p.cmt+'</span><span>🔗 转发</span></div></div>';
28  });
29  pl.innerHTML = h;
30</script>
31<script src="app.js"></script>
32</body>
33</html>