💻 代码预览 · 小草景区门票

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">价格从低到高</span>
8</div>
9<div id="spot-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="spots.html"><span class="icon">🗺️</span>景区</a>
14  <a href="orders.html"><span class="icon">📋</span>订单</a>
15  <a href="tickets.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'?SPOTS:SPOTS.filter(s=>s.cat===curCat);
23  $('#spot-list').innerHTML=list.map(s=>`
24    <div class="spot-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} <span style="color:var(--accent);font-size:12px">★ ${s.score}</span> ${s.hot?'<span class="badge badge-hot">热卖</span>':''}</div>
28        <div class="sc-tags">${s.tags.map(t=>'<span class="tag">'+t+'</span>').join('')}</div>
29        <div class="sc-meta">📍 ${s.city} · ${s.desc}</div>
30        <div class="sc-foot"><span class="sc-price"><em>¥</em>${s.price}<small style="font-size:10px;color:#8aa896">起</small></span><span class="sc-buy">立即预订</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>