小草剧本杀_H5/join.html · 约 2349 字符
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>缺人上车 · 拼成功AA</span></div>
4<div id="join-list"></div>
5<div class="card">
6 <div class="section-title" style="margin:0 0 8px">发布拼车</div>
7 <div style="font-size:12px;color:#8b6a70;line-height:2">
8 选择剧本 → 时间 → 人数 → 发布，系统自动匹配想玩同本的玩家<br>💡 拼车成功自动建群沟通 · 迟到鸽车扣信用分
9 </div>
10 <button class="btn btn-gold" style="margin-top:10px" onclick="toast('拼车已发布，等待玩家加入')">➕ 发布拼车</button>
11</div>
12<div style="height:80px"></div>
13<div class="tabbar">
14 <a href="index.html"><span class="icon">🏠</span>首页</a>
15 <a href="scripts.html"><span class="icon">🃏</span>剧本</a>
16 <a class="active" href="join.html"><span class="icon">🚗</span>拼车</a>
17 <a href="orders.html"><span class="icon">📋</span>场次</a>
18 <a href="mine.html"><span class="icon">👤</span>我的</a>
19</div>
20<script src="data.js"></script><script src="app.js"></script>
21<script>
22$('#join-list').innerHTML=JOINS.map(j=>`
23 <div class="join-card">
24 <div class="jc-head"><span>${j.time} · 发起人 ${j.leader}</span><span class="jc-status">● ${j.status}</span></div>
25 <div class="jc-body"><span style="font-size:26px">${j.script==='雾都迷案'?'🕵️':j.script==='瞳灵人'?'👻':'🏗️'}</span>
26 <div><div class="jc-name">${j.name}</div><div class="jc-meta">${j.script} · ${j.total}人场 · ${j.status==='即将成局'?'马上满员快上车':'还差几个'}</div></div>
27 </div>
28 <div class="jc-foot">
29 <div class="avatar-stack"><span>😎</span><span>😄</span><span>🤩</span><span>😏</span></div>
30 <span class="jc-num">已<b>${j.now}</b>/${j.total}人</span>
31 <span class="jc-btn" onclick="toast('已申请加入，等待车主确认')">上车</span>
32 </div>
33 </div>`).join('');
34</script>
35</body></html>