💻 代码预览 · 小草剧本杀

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="filter-row" id="cat-row">
4  ${CATS.map(c=>'<span class="filter-chip'+(c.id==='all'?' sel':'')+'" data-id="'+c.id+'">'+c.emoji+' '+c.name+'</span>').join('')}
5</div>
6<div class="filter-row" style="margin-top:8px">
7  <span class="filter-chip sel">全部</span><span class="filter-chip">新手友好</span><span class="filter-chip">4小时内</span><span class="filter-chip">6人场</span>
8</div>
9<div id="script-list"></div>
10<div style="height:80px"></div>
11<div class="tabbar">
12  <a href="index.html"><span class="icon">🏠</span>首页</a>
13  <a class="active" href="scripts.html"><span class="icon">🃏</span>剧本</a>
14  <a href="join.html"><span class="icon">🚗</span>拼车</a>
15  <a href="orders.html"><span class="icon">📋</span>场次</a>
16  <a href="mine.html"><span class="icon">👤</span>我的</a>
17</div>
18<script src="data.js"></script><script src="app.js"></script>
19<script>
20let curCat='all';
21function render(){
22  const list=curCat==='all'?SCRIPTS:SCRIPTS.filter(s=>s.cat===curCat);
23  $('#script-list').innerHTML=list.map(s=>`
24    <div class="script-card" onclick="location.href='detail.html?id=${s.id}'">
25      <div class="sc-img">${s.emoji}</div>
26      <div class="sc-body">
27        <div class="sc-name">${s.name} ${s.diff==='新手'?'<span class="badge badge-sale">新手</span>':''}</div>
28        <div class="sc-tags">${s.tags.map(t=>'<span class="tag">'+t+'</span>').join('')}</div>
29        <div class="sc-meta">${s.players}人 · ${s.time} · ${s.diff} · ${s.desc}</div>
30        <div class="sc-foot"><span class="sc-price"><em>¥</em>${s.price}<small style="font-size:10px;color:#8b6a70">/人</small></span><span class="sc-book">预约</span></div>
31      </div>
32    </div>`).join('')||'<div class="empty">该分类暂无剧本</div>';
33}
34$$('#cat-row span').forEach(c=>c.onclick=()=>{curCat=c.dataset.id;$$('#cat-row span').forEach(x=>x.classList.remove('sel'));c.classList.add('sel');render()});
35render();
36</script>
37</body></html>