💻 代码预览 · 小草婚恋交友

1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>圈子 · 小草婚恋交友</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>兴趣圈子</h1><span class="right">＋</span></div>
3<div class="section-title">热门圈子 <span>同频的人都在这里</span></div>
4<div class="circle-row" id="circle-list" style="flex-wrap:wrap;gap:10px">
5  ${CIRCLES.map(c=>`<div class="circle-item" style="width:calc(50% - 5px)"><div class="ci-emoji">${c.emoji}</div><div class="ci-name">${c.name}</div><div class="ci-meta">${c.members} · ${c.desc}</div></div>`).join('')}
6</div>
7<div class="section-title">话题广场 <span>一起聊聊</span></div>
8<div id="topic-list"></div>
9<div class="section-title">圈子动态</div>
10<div id="post-list"></div>
11<div style="height:80px"></div>
12<div class="tabbar">
13  <a href="index.html"><span class="icon">💘</span>匹配</a>
14  <a class="active" href="circle.html"><span class="icon">🌍</span>圈子</a>
15  <a href="members.html"><span class="icon">👑</span>会员</a>
16  <a href="talks.html"><span class="icon">💬</span>消息</a>
17  <a href="mine.html"><span class="icon">👤</span>我的</a>
18</div>
19<script src="data.js"></script><script src="app.js"></script>
20<script>
21$('#topic-list').innerHTML=TOPICS.map(t=>`
22  <div class="topic-item">
23    <span class="ti-emoji">${t.emoji}</span>
24    <div class="ti-body"><div class="ti-name">${t.name}</div><div class="ti-meta">${t.count}人参与</div></div>
25    ${t.hot?'<span class="ti-hot">🔥 热门</span>':'<span style="color:#b58a9e;font-size:11px">参与 ›</span>'}
26  </div>`).join('');
27$('#post-list').innerHTML=POSTS.map(p=>`
28  <div class="post-item">
29    <div class="pi-head"><div class="pi-avatar">${p.avatar}</div>
30      <div><div class="pi-name">${p.name}</div><div class="pi-meta">${p.time}</div></div>
31    </div>
32    <div class="pi-text">${p.text}</div>
33    <div class="pi-foot"><span>❤️ ${p.likes}</span><span>💬 ${p.comments}</span><span style="margin-left:auto">转发</span></div>
34  </div>`).join('');
35</script>
36</body></html>