小草萌猫社区/index.html · 约 3288 字符
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<div class="banner">
12 <div>
13 <div class="bn-title">小草萌猫社区</div>
14 <div class="bn-sub">铲屎官的快乐星球 🐾<br/>晒猫 · 领养 · 科普 · 直播 · 商城，一站吸猫</div>
15 <div class="bn-badge">🎉 新人送 200 猫币 · 每日签到领罐头</div>
16 </div>
17 <div class="bn-emoji">🐱</div>
18</div>
19<div class="quick-grid">
20 <a href="community.html"><div class="qicon">💬</div>猫友圈</a>
21 <a href="cat.html"><div class="qicon">🐱</div>猫咪档案</a>
22 <a href="adopt.html"><div class="qicon">🏡</div>领养救助</a>
23 <a href="knowledge.html"><div class="qicon">📚</div>知识库</a>
24 <a href="live.html"><div class="qicon">📺</div>猫屋直播</a>
25 <a href="mall.html"><div class="qicon">🛒</div>萌猫商城</a>
26 <a href="community.html"><div class="qicon">📍</div>附近猫友</a>
27 <a href="mine.html"><div class="qicon">💊</div>在线问诊</a>
28</div>
29<div class="section-title">🔥 猫友圈推荐 <span>看全部 ›</span></div>
30<div id="hotList"></div>
31<div class="section-title">📍 附近猫友 <span>更多 ›</span></div>
32<div id="nearList"></div>
33<div class="section-title">🔥 热门话题</div>
34<div style="padding:0 12px" id="topicList"></div>
35<div style="height:70px"></div>
36
37
38<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" 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>
39<script src="data.js"></script>
40<script>
41 document.getElementById('hotList').innerHTML = (function(){
42 var h=''; var arr=window.DATA.posts.slice(0,3);
43 arr.forEach(function(p){
44 var cls = (p.type==='晒猫'||p.type==='日记')?'share':(p.type==='求助'?'help':'adopt');
45 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>';
46 });
47 return h;
48 })();
49 var nl = document.getElementById('nearList');
50 var h2 = '';
51 window.DATA.near.forEach(function(n){
52 h2+='<div class="near-card"><div class="nc-avatar">'+n.avatar+'</div><div class="nc-body"><div class="nc-name">'+n.name+'</div><div class="nc-meta">'+n.meta+'</div></div><div class="nc-btn">'+n.btn+'</div></div>';
53 });
54 nl.innerHTML = h2;
55 var tl = document.getElementById('topicList');
56 var h3=''; window.DATA.topics.forEach(function(t){ h3+='<span class="topic-chip">'+t+'</span>'; });
57 tl.innerHTML = h3;
58</script>
59<script src="app.js"></script>
60</body>
61</html>