index.html · 约 22487 字符
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.0, maximum-scale=1.0, user-scalable=no">
6<title>星遇兴趣社交平台</title>
7<style>
8:root{ --bg:#f6f7fb; --card:#fff; --primary:#7c5cff; --secondary:#ff6b9d; --accent:#00d4c8; --text:#1f1f2e; --muted:#8b8d9e; --line:#eef0f5; --shadow:0 4px 14px rgba(28,28,46,.08); }
9*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
10body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.4;}
11.page{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;overflow:hidden;display:none;}
12.page.active{display:block}
13img{max-width:100%;display:block}
14
15.header{background:linear-gradient(135deg,var(--primary),#9b5cff);color:#fff;padding:14px 16px 18px;position:sticky;top:0;z-index:20}
16.header h1{font-size:18px;font-weight:600}
17.header .sub{font-size:12px;opacity:.85;margin-top:2px}
18
19.tabs{display:flex;background:#fff;padding:8px 0;border-bottom:1px solid var(--line);position:sticky;top:50px;z-index:15}
20.tab{flex:1;text-align:center;font-size:14px;color:var(--muted);position:relative;padding:8px 0}
21.tab.active{color:var(--primary);font-weight:600}
22.tab.active::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:22px;height:3px;background:var(--primary);border-radius:2px}
23
24.search-bar{display:flex;align-items:center;padding:12px 16px;background:#fff;gap:10px}
25.search-bar input{flex:1;border:none;background:var(--bg);border-radius:20px;padding:9px 14px;font-size:13px;outline:none}
26.search-bar .btn{width:34px;height:34px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}
27
28.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px}
29.video-card{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);position:relative}
30.video-thumb{height:170px;background:linear-gradient(135deg,#e0e0ff,#ffe0f0);display:flex;align-items:center;justify-content:center;font-size:48px}
31.video-info{padding:10px}
32.video-info .title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
33.video-info .meta{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between}
34.video-tag{position:absolute;top:8px;right:8px;background:rgba(255,107,157,.9);color:#fff;font-size:10px;padding:2px 7px;border-radius:10px}
35
36.story-list{display:flex;gap:12px;padding:14px 16px;overflow-x:auto;background:#fff}
37.story-item{flex:0 0 64px;text-align:center}
38.story-avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--primary));padding:2px}
39.story-avatar div{width:54px;height:54px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}
40.story-item .name{font-size:11px;color:var(--muted);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
41
42.section-title{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 6px;font-size:15px;font-weight:600}
43.section-title .more{font-size:12px;color:var(--muted);font-weight:400}
44
45.live-card{background:var(--card);border-radius:16px;margin:12px 16px;padding:14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
46.live-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--secondary),#ff9a9e);display:flex;align-items:center;justify-content:center;font-size:28px}
47.live-info{flex:1}
48.live-info .name{font-size:15px;font-weight:600}
49.live-info .tag{font-size:11px;color:var(--muted);margin-top:3px}
50.live-btn{background:var(--primary);color:#fff;font-size:12px;padding:6px 14px;border-radius:20px}
51
52.msg-list{background:var(--card);margin:10px 16px;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
53.msg-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);gap:12px}
54.msg-item:last-child{border-bottom:none}
55.msg-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ffd1ff,#d1f0ff);display:flex;align-items:center;justify-content:center;font-size:22px}
56.msg-body{flex:1}
57.msg-body .name{font-size:14px;font-weight:600}
58.msg-body .text{font-size:12px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
59.msg-time{font-size:11px;color:var(--muted);text-align:right}
60.msg-time .badge{display:inline-block;background:var(--secondary);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-top:4px}
61
62.chat-bg{background:linear-gradient(180deg,#f0f0ff 0%,#fff 100%);min-height:100vh;padding-bottom:70px}
63.chat-header{background:var(--card);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);position:sticky;top:0;z-index:20}
64.chat-header .back{font-size:20px;color:var(--muted)}
65.chat-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#c1c8ff,#ffd1e8);display:flex;align-items:center;justify-content:center;font-size:20px}
66.chat-header .info{flex:1}
67.chat-header .name{font-size:15px;font-weight:600}
68.chat-header .status{font-size:11px;color:#00c853}
69
70.chat-body{padding:16px}
71.chat-row{display:flex;margin-bottom:16px;align-items:flex-end}
72.chat-row.me{flex-direction:row-reverse}
73.chat-bubble{max-width:68%;padding:11px 14px;border-radius:18px;font-size:14px;word-break:break-word;position:relative}
74.chat-row .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#c1c8ff,#ffd1e8);display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 8px}
75.chat-row.me .chat-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:4px}
76.chat-row.other .chat-bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
77.chat-time{font-size:10px;color:var(--muted);text-align:center;margin:8px 0}
78
79.chat-input{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:430px;width:100%;background:var(--card);padding:10px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;z-index:30}
80.chat-input input{flex:1;border:1px solid var(--line);border-radius:20px;padding:9px 14px;font-size:14px;outline:none}
81.chat-input .send{background:var(--primary);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}
82
83.profile-header{background:linear-gradient(135deg,var(--primary),#a78bfa);color:#fff;padding:24px 16px 20px;text-align:center}
84.profile-avatar{width:80px;height:80px;border-radius:50%;background:#fff;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:42px;box-shadow:0 8px 20px rgba(0,0,0,.15)}
85.profile-name{font-size:20px;font-weight:600;margin-top:14px}
86.profile-bio{font-size:12px;opacity:.85;margin-top:4px}
87.profile-stats{display:flex;justify-content:center;gap:36px;margin-top:18px}
88.profile-stats .num{font-size:20px;font-weight:700}
89.profile-stats .label{font-size:11px;opacity:.8}
90
91.wallet-card{background:var(--card);border-radius:16px;margin:14px 16px;padding:14px;box-shadow:var(--shadow);display:flex;gap:14px}
92.wallet-item{flex:1;text-align:center}
93.wallet-item .num{font-size:18px;font-weight:700;color:var(--primary)}
94.wallet-item .label{font-size:11px;color:var(--muted);margin-top:2px}
95
96.menu-list{background:var(--card);margin:0 16px 16px;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
97.menu-item{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);gap:12px}
98.menu-item:last-child{border-bottom:none}
99.menu-icon{width:34px;height:34px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px}
100.menu-item .text{flex:1;font-size:14px}
101.menu-item .arrow{color:var(--muted);font-size:14px}
102
103.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:430px;width:100%;background:rgba(255,255,255,.98);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 0 12px;z-index:40;backdrop-filter:blur(8px)}
104.nav-item{flex:1;text-align:center;color:var(--muted);font-size:10px}
105.nav-item.active{color:var(--primary)}
106.nav-item .icon{font-size:22px;display:block;margin-bottom:2px}
107
108.safe-bottom{padding-bottom:70px}
109.btn-primary{background:linear-gradient(135deg,var(--primary),#9b5cff);color:#fff;border:none;border-radius:24px;padding:12px 0;font-size:15px;font-weight:600;width:calc(100% - 32px);margin:16px}
110</style>
111</head>
112<body>
113
114<div class="page active" id="p1">
115<div class="header"><h1>星遇</h1><div class="sub">发现身边的有趣灵魂</div></div>
116<div class="tabs">
117<div class="tab active">热门</div>
118<div class="tab" onclick="go(2)">附近</div>
119<div class="tab" onclick="go(5)">直播</div>
120</div>
121<div class="search-bar"><input placeholder="搜索话题 / 用户 / 兴趣"><div class="btn">🔍</div></div>
122<div class="story-list">
123<div class="story-item"><div class="story-avatar"><div>👩</div></div><div class="name">小美</div></div>
124<div class="story-item"><div class="story-avatar"><div>👨</div></div><div class="name">张三</div></div>
125<div class="story-item"><div class="story-avatar"><div>🎸</div></div><div class="name">音乐控</div></div>
126<div class="story-item"><div class="story-avatar"><div>🎨</div></div><div class="name">画画</div></div>
127<div class="story-item"><div class="story-avatar"><div>📚</div></div><div class="name">读书会</div></div>
128<div class="story-item"><div class="story-avatar"><div>🏃</div></div><div class="name">跑团</div></div>
129</div>
130<div class="section-title"><span>热门视频</span><span class="more">查看更多 ></span></div>
131<div class="grid-2">
132<div class="video-card"><div class="video-thumb">🎵</div><span class="video-tag">热门</span><div class="video-info"><div class="title">周末吉他弹唱</div><div class="meta"><span>张三</span><span>1.2w 赞</span></div></div></div>
133<div class="video-card"><div class="video-thumb">🍜</div><div class="video-info"><div class="title">探店城市面馆</div><div class="meta"><span>李四</span><span>8.3k 赞</span></div></div></div>
134<div class="video-card"><div class="video-thumb">🌄</div><span class="video-tag">精选</span><div class="video-info"><div class="title">日出延时摄影</div><div class="meta"><span>王五</span><span>5.6k 赞</span></div></div></div>
135<div class="video-card"><div class="video-thumb">🎨</div><div class="video-info"><div class="title">水彩风景教程</div><div class="meta"><span>赵六</span><span>3.4k 赞</span></div></div></div>
136<div class="video-card"><div class="video-thumb">🏀</div><div class="video-info"><div class="title">三分球训练日常</div><div class="meta"><span>孙七</span><span>9.1k 赞</span></div></div></div>
137<div class="video-card"><div class="video-thumb">🍰</div><span class="video-tag">新手</span><div class="video-info"><div class="title">零基础烘焙入门</div><div class="meta"><span>周八</span><span>2.2k 赞</span></div></div></div>
138</div>
139<div class="bottom-nav">
140<div class="nav-item active" onclick="go(1)"><span class="icon">🔥</span>热门</div>
141<div class="nav-item" onclick="go(2)"><span class="icon">📍</span>附近</div>
142<div class="nav-item" onclick="go(3)"><span class="icon">💬</span>消息</div>
143<div class="nav-item" onclick="go(6)"><span class="icon">👤</span>我的</div>
144</div>
145</div>
146
147<div class="page" id="p2">
148<div class="header"><h1>附近</h1><div class="sub">发现同城新鲜事 · 当前位置：北京</div></div>
149<div class="search-bar"><input placeholder="搜索附近的人 / 活动"><div class="btn">📍</div></div>
150<div class="section-title"><span>附近动态</span><span class="more">刷新</span></div>
151<div class="live-card">
152<div class="live-avatar">👩</div>
153<div class="live-info"><div class="name">小美 · 1.2km</div><div class="tag">摄影爱好者 | 正在直播</div></div>
154<div class="live-btn">观看</div>
155</div>
156<div class="live-card">
157<div class="live-avatar">👨</div>
158<div class="live-info"><div class="name">张三 · 2.5km</div><div class="tag">健身教练 | 晨跑打卡</div></div>
159<div class="live-btn">关注</div>
160</div>
161<div class="live-card">
162<div class="live-avatar">🎸</div>
163<div class="live-info"><div class="name">李四 · 3.8km</div><div class="tag">独立音乐人 | 弹唱中</div></div>
164<div class="live-btn">围观</div>
165</div>
166<div class="section-title"><span>同城活动</span><span class="more">全部</span></div>
167<div class="grid-2">
168<div class="video-card"><div class="video-thumb">🎤</div><div class="video-info"><div class="title">周末读书会</div><div class="meta"><span>朝阳区</span><span>32 人参与</span></div></div></div>
169<div class="video-card"><div class="video-thumb">🏸</div><div class="video-info"><div class="title">羽毛球约球</div><div class="meta"><span>海淀区</span><span>18 人参与</span></div></div></div>
170<div class="video-card"><div class="video-thumb">🎬</div><div class="video-info"><div class="title">电影观影团</div><div class="meta"><span>东城区</span><span>45 人参与</span></div></div></div>
171<div class="video-card"><div class="video-thumb">☕</div><div class="video-info"><div class="title">咖啡品鉴沙龙</div><div class="meta"><span>西城区</span><span>12 人参与</span></div></div></div>
172</div>
173<div class="bottom-nav">
174<div class="nav-item" onclick="go(1)"><span class="icon">🔥</span>热门</div>
175<div class="nav-item active" onclick="go(2)"><span class="icon">📍</span>附近</div>
176<div class="nav-item" onclick="go(3)"><span class="icon">💬</span>消息</div>
177<div class="nav-item" onclick="go(6)"><span class="icon">👤</span>我的</div>
178</div>
179</div>
180
181<div class="page" id="p3">
182<div class="header"><h1>消息</h1><div class="sub">你与好友的每一次互动</div></div>
183<div class="search-bar"><input placeholder="搜索联系人"><div class="btn">🔍</div></div>
184<div class="msg-list">
185<div class="msg-item" onclick="go(4)">
186<div class="msg-avatar">👩</div>
187<div class="msg-body"><div class="name">小美</div><div class="text">周末的读书会你来吗？</div></div>
188<div class="msg-time">10:42<br><span class="badge">3</span></div>
189</div>
190<div class="msg-item" onclick="go(4)">
191<div class="msg-avatar">👨</div>
192<div class="msg-body"><div class="name">张三</div><div class="text">上次那首歌我练会了</div></div>
193<div class="msg-time">09:15</div>
194</div>
195<div class="msg-item">
196<div class="msg-avatar">🎸</div>
197<div class="msg-body"><div class="name">李四</div><div class="text">吉他谱已发你邮箱</div></div>
198<div class="msg-time">昨天</div>
199</div>
200<div class="msg-item">
201<div class="msg-avatar">📢</div>
202<div class="msg-body"><div class="name">系统通知</div><div class="text">你的作品入选本周精选</div></div>
203<div class="msg-time">昨天</div>
204</div>
205<div class="msg-item">
206<div class="msg-avatar">🎁</div>
207<div class="msg-body"><div class="name">活动小助手</div><div class="text">「夏日露营」报名开启</div></div>
208<div class="msg-time">周一</div>
209</div>
210</div>
211<div class="bottom-nav">
212<div class="nav-item" onclick="go(1)"><span class="icon">🔥</span>热门</div>
213<div class="nav-item" onclick="go(2)"><span class="icon">📍</span>附近</div>
214<div class="nav-item active" onclick="go(3)"><span class="icon">💬</span>消息</div>
215<div class="nav-item" onclick="go(6)"><span class="icon">👤</span>我的</div>
216</div>
217</div>
218
219<div class="page chat-bg" id="p4">
220<div class="chat-header">
221<div class="back" onclick="go(3)">←</div>
222<div class="chat-avatar">👩</div>
223<div class="info"><div class="name">小美</div><div class="status">在线</div></div>
224<div>⋯</div>
225</div>
226<div class="chat-body">
227<div class="chat-time">星期四 14:30</div>
228<div class="chat-row other">
229<div class="avatar">👩</div>
230<div class="chat-bubble">你好呀，最近在哪玩？</div>
231</div>
232<div class="chat-row me">
233<div class="chat-bubble">刚参加完驰旭科技的用户见面会</div>
234<div class="avatar">👤</div>
235</div>
236<div class="chat-row other">
237<div class="avatar">👩</div>
238<div class="chat-bubble">听起来好有趣，下次带我去！</div>
239</div>
240<div class="chat-time">星期四 15:02</div>
241<div class="chat-row me">
242<div class="chat-bubble">没问题，这周末有个读书会在朝阳</div>
243<div class="avatar">👤</div>
244</div>
245<div class="chat-row other">
246<div class="avatar">👩</div>
247<div class="chat-bubble">好呀，我报名了，我们一起去</div>
248</div>
249<div class="chat-row me">
250<div class="chat-bubble">一言为定，到时候我开车去接你</div>
251<div class="avatar">👤</div>
252</div>
253<div class="chat-time">刚刚</div>
254<div class="chat-row other">
255<div class="avatar">👩</div>
256<div class="chat-bubble">周末见～</div>
257</div>
258</div>
259<div class="chat-input"><input placeholder="输入消息"><div class="send">➤</div></div>
260</div>
261
262<div class="page" id="p5">
263<div class="header"><h1>直播广场</h1><div class="sub">24 小时精彩不停播</div></div>
264<div class="tabs">
265<div class="tab active">全部</div>
266<div class="tab">才艺</div>
267<div class="tab">游戏</div>
268<div class="tab">聊天</div>
269</div>
270<div class="grid-2">
271<div class="video-card"><div class="video-thumb">🎤</div><span class="video-tag">直播中</span><div class="video-info"><div class="title">民谣弹唱时间</div><div class="meta"><span>张三</span><span>1.8k 观看</span></div></div></div>
272<div class="video-card"><div class="video-thumb">🎮</div><span class="video-tag">热门</span><div class="video-info"><div class="title">新游开荒实况</div><div class="meta"><span>李四</span><span>3.2k 观看</span></div></div></div>
273<div class="video-card"><div class="video-thumb">🎨</div><div class="video-info"><div class="title">零基础油画课</div><div class="meta"><span>王五</span><span>920 观看</span></div></div></div>
274<div class="video-card"><div class="video-thumb">☕</div><span class="video-tag">聊天</span><div class="video-info"><div class="title">深夜情感电台</div><div class="meta"><span>赵六</span><span>2.1k 观看</span></div></div></div>
275<div class="video-card"><div class="video-thumb">🏋️</div><div class="video-info"><div class="title">居家健身跟练</div><div class="meta"><span>孙七</span><span>650 观看</span></div></div></div>
276<div class="video-card"><div class="video-thumb">🍳</div><div class="video-info"><div class="title">新手下厨日记</div><div class="meta"><span>周八</span><span>480 观看</span></div></div></div>
277</div>
278<div class="section-title"><span>推荐主播</span><span class="more">换一批</span></div>
279<div class="msg-list">
280<div class="msg-item">
281<div class="msg-avatar">👩</div>
282<div class="msg-body"><div class="name">小美</div><div class="text">摄影爱好者 · 正在直播</div></div>
283<div class="msg-time"><div class="live-btn">进入</div></div>
284</div>
285<div class="msg-item">
286<div class="msg-avatar">👨</div>
287<div class="msg-body"><div class="name">张三</div><div class="text">音乐人 · 今日开播</div></div>
288<div class="msg-time"><div class="live-btn">关注</div></div>
289</div>
290</div>
291<div class="bottom-nav">
292<div class="nav-item" onclick="go(1)"><span class="icon">🔥</span>热门</div>
293<div class="nav-item" onclick="go(2)"><span class="icon">📍</span>附近</div>
294<div class="nav-item" onclick="go(3)"><span class="icon">💬</span>消息</div>
295<div class="nav-item" onclick="go(6)"><span class="icon">👤</span>我的</div>
296</div>
297</div>
298
299<div class="page" id="p6">
300<div class="profile-header">
301<div class="profile-avatar">👤</div>
302<div class="profile-name">驰旭科技_官方</div>
303<div class="profile-bio">记录生活，分享热爱 · 星遇平台创作者</div>
304<div class="profile-stats"><div><div class="num">128</div><div class="label">关注</div></div><div><div class="num">4.6w</div><div class="label">粉丝</div></div><div><div class="num">89</div><div class="label">获赞</div></div></div>
305</div>
306<div class="wallet-card">
307<div class="wallet-item"><div class="num">256</div><div class="label">星豆</div></div>
308<div class="wallet-item"><div class="num">12</div><div class="label">优惠券</div></div>
309<div class="wallet-item"><div class="num">V3</div><div class="label">会员等级</div></div>
310</div>
311<div class="menu-list">
312<div class="menu-item"><div class="menu-icon">📹</div><div class="text">我的作品</div><div class="arrow">></div></div>
313<div class="menu-item"><div class="menu-icon">❤️</div><div class="text">我的喜欢</div><div class="arrow">></div></div>
314<div class="menu-item"><div class="menu-icon">⭐</div><div class="text">我的收藏</div><div class="arrow">></div></div>
315<div class="menu-item"><div class="menu-icon">📊</div><div class="text">数据中心</div><div class="arrow">></div></div>
316</div>
317<div class="menu-list">
318<div class="menu-item"><div class="menu-icon">🎁</div><div class="text">金币商店</div><div class="arrow">></div></div>
319<div class="menu-item"><div class="menu-icon">⚙️</div><div class="text">账号设置</div><div class="arrow">></div></div>
320<div class="menu-item"><div class="menu-icon">🎧</div><div class="text">帮助与客服</div><div class="arrow">></div></div>
321</div>
322<div class="bottom-nav">
323<div class="nav-item" onclick="go(1)"><span class="icon">🔥</span>热门</div>
324<div class="nav-item" onclick="go(2)"><span class="icon">📍</span>附近</div>
325<div class="nav-item" onclick="go(3)"><span class="icon">💬</span>消息</div>
326<div class="nav-item active" onclick="go(6)"><span class="icon">👤</span>我的</div>
327</div>
328</div>
329
330<script>
331function go(n){
332 var pages = document.querySelectorAll('.page');
333 for (var i = 0; i < pages.length; i++) pages[i].classList.remove('active');
334 var t = document.getElementById('p' + n);
335 if (t) t.classList.add('active');
336}
337</script>
338</body>
339</html>
340