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

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="detail-hero" style="background:linear-gradient(135deg,#0e9f6e,#34d399)" id="d-hero">🏔️</div>
4<div class="detail-info">
5  <div class="di-name" id="d-name">云雾山风景区</div>
6  <div class="di-meta" id="d-meta"></div>
7  <div class="di-desc" id="d-desc"></div>
8  <div style="font-size:12px;color:#8aa896;margin-top:8px;line-height:1.8">🕙 开放时间 08:00-17:30 · 分时预约入园 · 未用可退</div>
9</div>
10<div class="section-title">选择票种 <span>点击选择</span></div>
11<div id="ticket-list"></div>
12<div class="section-title">选择入园日期 <span>限量分时</span></div>
13<div class="card">
14  <div class="date-tabs" id="date-tabs"></div>
15</div>
16<div class="card">
17  <div style="display:flex;justify-content:space-between;font-size:13px;color:#3d7a5f;padding:6px 0"><span>数量</span>
18    <span style="display:flex;align-items:center;gap:12px">
19      <span style="width:28px;height:28px;border-radius:50%;background:#e5f3e9;display:flex;align-items:center;justify-content:center;cursor:pointer" onclick="BK.qty=Math.max(1,BK.qty-1);$('#qty').textContent=BK.qty">−</span>
20      <b id="qty" style="font-size:16px">1</b>
21      <span style="width:28px;height:28px;border-radius:50%;background:#e5f3e9;display:flex;align-items:center;justify-content:center;cursor:pointer" onclick="BK.qty++;$('#qty').textContent=BK.qty">+</span>
22    </span>
23  </div>
24  <div style="font-size:11px;color:#8aa896;margin-top:6px">💡 购票后生成电子票，凭码/身份证/刷脸入园 · 儿童1.2m以下免票</div>
25</div>
26<div style="height:90px"></div>
27<div style="position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;display:flex;gap:10px;padding:10px 12px;border-top:1px solid #eee;z-index:99">
28  <button class="btn btn-outline" style="flex:1" onclick="toast('已收藏该景区')">⭐ 收藏</button>
29  <button class="btn btn-primary" style="flex:1" onclick="submitBuy()">立即购票</button>
30</div>
31<script src="data.js"></script><script src="app.js"></script>
32<script>renderDetail();</script>
33</body></html>