小草K歌_H5/index.html · 约 3455 字符
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="banner">
3 <div>
4 <div class="bn-title">🎤 小草K歌</div>
5 <div class="bn-sub">霓虹之夜 · 唱出你的主场</div>
6 <span class="bn-badge">🎁 新客包厢立减50元 · 下午场6折</span>
7 </div>
8 <div class="bn-emoji">🎶</div>
9</div>
10<div class="quick-grid">
11 <a href="rooms.html"><span class="qicon">🎉</span>包厢预订</a>
12 <a href="songs.html"><span class="qicon">🎵</span>在线点歌</a>
13 <a href="drinks.html"><span class="qicon">🍺</span>酒水超市</a>
14 <a href="mine.html"><span class="qicon">👑</span>会员中心</a>
15</div>
16<div class="section-title">人气包厢 <span>立即预订</span></div>
17<div id="room-list"></div>
18<div class="section-title">热门点唱 <span>TOP 5</span></div>
19<div id="song-list"></div>
20<div class="section-title">酒水超市 <span>送酒到房</span></div>
21<div class="card" style="padding:8px 14px" id="drink-list"></div>
22<div class="section-title">活动福利 <span>每晚8点</span></div>
23<div class="card" style="font-size:12px;color:#a89fd4;line-height:2">
24 🎉 每晚 20:00 红包雨，抢欢唱券<br>🎤 整点秒杀：低价时段房 1 元起<br>👥 邀请好友拼团，包厢 8 折
25</div>
26<div style="height:80px"></div>
27<div class="tabbar">
28 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
29 <a href="rooms.html"><span class="icon">🎉</span>包厢</a>
30 <a href="songs.html"><span class="icon">🎵</span>点歌</a>
31 <a href="order.html"><span class="icon">📋</span>订单</a>
32 <a href="mine.html"><span class="icon">👤</span>我的</a>
33</div>
34<script src="data.js"></script><script src="app.js"></script>
35<script>
36$('#room-list').innerHTML=ROOMS.slice(0,3).map(r=>`
37 <div class="room-card" onclick="location.href='rooms.html'">
38 <div class="rc-emoji">${r.emoji}</div>
39 <div class="rc-body">
40 <div class="rc-name">${r.name} ${r.tag==='hot'?'<span class="badge badge-hot">热门</span>':r.tag==='new'?'<span class="badge badge-new">新装</span>':''}</div>
41 <div class="rc-desc">${r.desc}</div>
42 <div class="rc-meta">${r.seats} · 可选下午/晚场/夜场</div>
43 <div class="rc-foot"><span class="rc-price"><em>¥</em>${r.price}<small style="font-size:10px;color:#6f67a0">/${r.unit}</small></span><span class="rc-add">预订</span></div>
44 </div>
45 </div>`).join('');
46$('#song-list').innerHTML=SONGS.slice(0,5).map(s=>`
47 <div class="song-row"><span class="sr-rank">${s.rank<4?'🔥':''}${s.rank}</span>
48 <div style="flex:1"><div class="sr-name">${s.name}</div><div class="sr-singer">${s.singer}</div></div>
49 <span class="sr-add" onclick="location.href='songs.html'">点歌</span></div>`).join('');
50$('#drink-list').innerHTML=DRINKS.slice(0,4).map(d=>`
51 <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed #2a2350;font-size:13px">
52 <span style="font-size:22px">${d.emoji}</span><span style="flex:1">${d.name}<br><small style="color:#6f67a0">${d.desc}</small></span>
53 <b style="color:var(--gold)">¥${d.price}</b><span class="sr-add" onclick="location.href='drinks.html'">下单</span>
54 </div>`).join('');
55</script>
56</body></html>