小草K歌_H5/rooms.html · 约 2481 字符
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>包厢预订 · 小草K歌</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="room-grid" id="room-grid"></div>
5<div class="section-title">选择时段 <span>点击选择</span></div>
6<div class="card">
7 <div class="time-tabs" id="time-tabs"></div>
8</div>
9<div class="card">
10 <div class="section-title" style="margin:0 0 8px">预订信息</div>
11 <div style="display:flex;justify-content:space-between;font-size:13px;color:#a89fd4;padding:6px 0"><span>🏢 门店</span><b style="color:#e8e4f7">小草K歌(旗舰店) · 幸福路88号</b></div>
12 <div style="display:flex;justify-content:space-between;font-size:13px;color:#a89fd4;padding:6px 0"><span>💰 支付</span><b style="color:#e8e4f7">预付30%定金 · 到店核销开房</b></div>
13 <div style="font-size:11px;color:#6f67a0;margin-top:6px">💡 预订成功后自动推送开房码 · 爽约定金不退</div>
14</div>
15<button class="btn btn-primary" style="margin:0 12px 24px;width:calc(100% - 24px)" onclick="submitRoom()">确认预订 · 支付定金</button>
16<div style="height:20px"></div>
17<script src="data.js"></script><script src="app.js"></script>
18<script>
19$('#room-grid').innerHTML=ROOMS.map((r,i)=>`
20 <div class="room-item" onclick="BK.room=${i};$$('.room-item').forEach(x=>x.style.border='1px solid #3a3170');this.style.border='1px solid var(--secondary)'">
21 <span class="badge ${r.tag==='hot'?'badge-hot':r.tag==='new'?'badge-new':''} ri-tag">${r.tag==='hot'?'热门':r.tag==='new'?'新装':''}</span>
22 <div class="ri-emoji">${r.emoji}</div>
23 <div class="ri-name">${r.name}</div>
24 <div class="ri-meta">${r.seats} · ${r.desc}</div>
25 <div class="ri-price">¥${r.price}<small style="font-size:10px;color:#6f67a0">/${r.unit}</small></div>
26 </div>`).join('');
27$('#time-tabs').innerHTML=TIME_SLOTS.map((t,i)=>'<span class="time-tab'+(i===0?' sel':'')+'" onclick="BK.slot='+i+';$$('.time-tab').forEach(x=>x.classList.remove('sel'));this.classList.add('sel')">'+t.name+' '+t.time+' <b style="color:var(--gold)">'+t.discount+'</b></span>').join('');
28</script>
29</body></html>