小草婚恋交友_H5/index.html · 约 3067 字符
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="topbar">
3 <div class="tb-row">
4 <div class="tb-avatar">🦌</div>
5 <div><div class="tb-name">奔跑的小鹿</div><div class="tb-sub">珍心会员 · 实名认证 · 匹配度96%</div></div>
6 <div class="tb-icons"><span onclick="toast('钻石不足')">💎</span><span onclick="location.href='talks.html'">💬</span></div>
7 </div>
8</div>
9<div class="match-card" id="match-card">
10 <div class="mc-hero" id="mc-hero">🦌</div>
11 <div class="mc-body">
12 <div class="mc-name" id="mc-name">小鹿 25岁</div>
13 <div class="mc-tags" id="mc-tags"></div>
14 <div class="mc-desc" id="mc-desc"></div>
15 <div style="font-size:11px;color:#b58a9e" id="mc-job"></div>
16 </div>
17 <div class="mc-actions">
18 <div class="mc-btn nope" onclick="swip('nope')">✖️</div>
19 <div class="mc-btn like" onclick="swip('like')">💗</div>
20 <div class="mc-btn super" onclick="swip('super')">⭐</div>
21 </div>
22 <span class="badge badge-vip mc-badge">今日推荐</span>
23</div>
24<div class="quick-grid">
25 <a href="circle.html"><span class="qicon">🌍</span>兴趣圈子</a>
26 <a href="circle.html"><span class="qicon">💬</span>话题广场</a>
27 <a href="members.html"><span class="qicon">👑</span>会员特权</a>
28 <a href="mine.html"><span class="qicon">🔍</span>谁看过我</a>
29</div>
30<div class="section-title">热门圈子 <span>找到同频的人</span></div>
31<div class="circle-row" id="circle-list"></div>
32<div class="section-title">互动动态 <span>晒晒生活</span></div>
33<div id="post-list"></div>
34<div style="height:80px"></div>
35<div class="tabbar">
36 <a class="active" href="index.html"><span class="icon">💘</span>匹配</a>
37 <a href="circle.html"><span class="icon">🌍</span>圈子</a>
38 <a href="members.html"><span class="icon">👑</span>会员</a>
39 <a href="talks.html"><span class="icon">💬</span>消息</a>
40 <a href="mine.html"><span class="icon">👤</span>我的</a>
41</div>
42<script src="data.js"></script><script src="app.js"></script>
43<script>
44renderMatch();
45$('#circle-list').innerHTML=CIRCLES.slice(0,4).map(c=>`
46 <div class="circle-item" onclick="location.href='circle.html'">
47 <div class="ci-emoji">${c.emoji}</div>
48 <div class="ci-name">${c.name}</div>
49 <div class="ci-meta">${c.members} · ${c.desc}</div>
50 </div>`).join('');
51$('#post-list').innerHTML=POSTS.map(p=>`
52 <div class="post-item">
53 <div class="pi-head"><div class="pi-avatar">${p.avatar}</div>
54 <div><div class="pi-name">${p.name}</div><div class="pi-meta">${p.time}</div></div>
55 </div>
56 <div class="pi-text">${p.text}</div>
57 <div class="pi-foot"><span>❤️ ${p.likes}</span><span>💬 ${p.comments}</span><span style="margin-left:auto">转发</span></div>
58 </div>`).join('');
59</script>
60</body></html>