index.html · 约 23310 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>飞享机票</title>
7<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --blue:#2563eb; --blue2:#1d4ed8; --sky:#60a5fa; --light:#eff6ff;
12 --bg:#f4f7fb; --card:#ffffff; --text:#1e293b; --mute:#94a3b8; --line:#e2e8f0;
13 }
14 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
15 background:#d6e3f5; color:var(--text); }
16 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
17 position:relative; padding-bottom:66px; box-shadow:0 0 28px rgba(0,0,0,.08); }
18 .topbar{ background:linear-gradient(120deg,var(--blue),var(--blue2)); color:#fff;
19 padding:16px 18px 14px; display:flex; align-items:center; gap:12px; }
20 .topbar .back{ font-size:24px; cursor:pointer; display:none; }
21 .topbar .tt{ font-size:18px; font-weight:800; letter-spacing:1px; }
22 .topbar .menu{ margin-left:auto; font-size:20px; }
23 .views{ padding:14px; }
24 .view{ display:none; }
25 .view.active{ display:block; animation:fade .22s ease; }
26 @keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
27 .card{ background:var(--card); border-radius:18px; padding:16px; margin-bottom:13px;
28 box-shadow:0 4px 18px rgba(30,60,120,.06); }
29 .card h3{ font-size:15px; margin-bottom:12px; display:flex; align-items:center; gap:7px; font-weight:800; }
30 .card h3 .more{ margin-left:auto; font-size:12px; color:var(--blue); font-weight:600; }
31 .hint{ font-size:12px; color:var(--mute); margin:-6px 0 12px; }
32 .home-head{ background:linear-gradient(120deg,var(--blue),var(--blue2)); color:#fff;
33 border-radius:0 0 24px 24px; padding:18px 18px 28px; margin:-14px -14px 0 -14px; }
34 .home-head .greet{ font-size:13px; opacity:.92; }
35 .home-head .row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
36 .home-head .slogan{ font-size:22px; font-weight:900; line-height:1.3; }
37 .home-head .avatar{ width:44px; height:44px; border-radius:50%; background:#fff;
38 display:flex; align-items:center; justify-content:center; font-size:24px; border:3px solid rgba(255,255,255,.4); }
39 .trip-tabs{ display:flex; gap:8px; margin-top:18px; }
40 .trip-tabs .tab{ flex:1; padding:10px 0; border-radius:12px; background:rgba(255,255,255,.12);
41 color:rgba(255,255,255,.9); font-size:13.5px; font-weight:700; text-align:center;
42 border:1.5px solid transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; }
43 .trip-tabs .tab.on{ background:#fff; color:var(--blue); border-color:#fff; }
44 .booking-card{ margin-top:-18px; }
45 .field-row{ display:flex; gap:12px; margin-bottom:14px; }
46 .field-row .field{ flex:1; }
47 .field label{ display:block; font-size:12px; color:var(--mute); font-weight:600; margin-bottom:6px; }
48 .field .inp{ width:100%; background:#f8fafc; border:1.5px solid var(--line); border-radius:14px;
49 padding:13px 12px; font-size:15px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
50 .field .inp input{ border:none; background:transparent; flex:1; font:inherit; outline:none; }
51 .swap{ width:34px; height:34px; border-radius:50%; background:var(--light); color:var(--blue);
52 display:flex; align-items:center; justify-content:center; font-size:18px; margin-top:22px; cursor:pointer; }
53 .btn{ width:100%; padding:14px; border:none; border-radius:14px;
54 background:linear-gradient(120deg,var(--blue),var(--blue2)); color:#fff; font-size:16px;
55 font-weight:800; cursor:pointer; letter-spacing:1px; box-shadow:0 6px 16px rgba(37,99,235,.3); }
56 .btn:active{ transform:scale(.99); }
57 .btn.line{ background:#fff; color:var(--blue); border:1.5px solid var(--blue); box-shadow:none; }
58 .section-title{ font-size:16px; font-weight:900; margin:20px 4px 12px; display:flex; align-items:center; justify-content:space-between; }
59 .section-title span{ color:var(--mute); font-size:12px; font-weight:600; }
60 .places{ display:flex; gap:11px; overflow-x:auto; padding-bottom:6px; }
61 .places::-webkit-scrollbar{ display:none; }
62 .place{ flex:0 0 140px; background:var(--card); border-radius:16px; overflow:hidden;
63 box-shadow:0 4px 16px rgba(30,60,120,.06); }
64 .place .ph{ height:88px; display:flex; align-items:center; justify-content:center; font-size:48px;
65 background:linear-gradient(135deg,#dbeafe,#eff6ff); }
66 .place .pb{ padding:10px 12px; }
67 .place .t{ font-size:14px; font-weight:800; }
68 .place .p{ font-size:13px; color:var(--blue); font-weight:800; margin-top:3px; }
69 .place .p small{ font-size:10px; color:var(--mute); font-weight:600; }
70 /* 航班列表 */
71 .route-bar{ background:linear-gradient(120deg,var(--blue),var(--blue2)); color:#fff;
72 border-radius:18px; padding:18px; text-align:center; margin-bottom:14px; position:relative; }
73 .route-bar .plane-line{ display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0; }
74 .route-bar .code{ font-size:26px; font-weight:900; }
75 .route-bar .city{ font-size:12px; opacity:.9; margin-top:2px; }
76 .route-bar .line{ flex:1; height:2px; background:rgba(255,255,255,.35); position:relative; }
77 .route-bar .line::after{ content:"✈️"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
78 font-size:18px; background:var(--blue); padding:0 6px; }
79 .route-bar .date{ font-size:13px; opacity:.92; }
80 .flt{ background:var(--card); border-radius:16px; padding:14px; margin-bottom:11px;
81 box-shadow:0 4px 14px rgba(30,60,120,.06); }
82 .flt .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
83 .flt .air{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; }
84 .flt .air .lg{ width:28px; height:28px; border-radius:50%; background:var(--light); display:flex;
85 align-items:center; justify-content:center; font-size:16px; }
86 .flt .no{ font-size:11px; color:var(--mute); font-weight:600; }
87 .flt .price{ font-size:20px; font-weight:900; color:var(--blue); }
88 .flt .tm{ display:flex; align-items:center; justify-content:space-between; }
89 .flt .tm .t{ font-size:18px; font-weight:800; }
90 .flt .tm .dur{ flex:1; text-align:center; font-size:11px; color:var(--mute); position:relative; margin:0 10px; }
91 .flt .tm .dur::before{ content:""; position:absolute; left:10%; right:10%; top:45%; height:2px;
92 border-top:2px dotted var(--mute); }
93 .flt .tm .dur i{ position:relative; z-index:1; background:#fff; padding:0 6px; font-style:normal; }
94 .flt .tags{ display:flex; gap:8px; margin-top:10px; }
95 .flt .tag{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; background:#f1f5f9; color:#64748b; }
96 .flt .tag.blue{ background:var(--light); color:var(--blue); }
97 /* 登机牌 */
98 .ticket{ background:var(--card); border-radius:24px; overflow:hidden;
99 box-shadow:0 8px 28px rgba(30,60,120,.1); }
100 .ticket .head{ background:linear-gradient(120deg,var(--blue),var(--blue2)); color:#fff; padding:18px; }
101 .ticket .head .pass{ display:flex; align-items:center; gap:10px; }
102 .ticket .head .ava{ width:44px; height:44px; border-radius:50%; background:#fff; display:flex;
103 align-items:center; justify-content:center; font-size:24px; }
104 .ticket .head .nm{ font-size:16px; font-weight:900; }
105 .ticket .head .role{ font-size:12px; opacity:.85; }
106 .ticket .body{ padding:18px; }
107 .ticket .route{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 18px; }
108 .ticket .route .code{ font-size:28px; font-weight:900; color:var(--blue); }
109 .ticket .route .city{ font-size:12px; color:var(--mute); margin-top:2px; }
110 .ticket .route .mid{ text-align:center; font-size:18px; color:var(--sky); }
111 .info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:18px; }
112 .info-grid .it .l{ font-size:11px; color:var(--mute); font-weight:600; }
113 .info-grid .it .v{ font-size:15px; font-weight:800; margin-top:3px; }
114 .barcode{ background:#f8fafc; border-radius:12px; padding:14px; text-align:center; }
115 .barcode .bc{ font-family:"Courier New",monospace; font-size:22px; font-weight:900; letter-spacing:2px;
116 color:var(--text); line-height:28px; }
117 .barcode .txt{ font-size:11px; color:var(--mute); margin-top:8px; }
118 .dash{ border-top:2px dashed var(--line); margin:16px 0; position:relative; }
119 .dash::before,.dash::after{ content:""; width:20px; height:20px; background:var(--bg); border-radius:50%;
120 position:absolute; top:-10px; }
121 .dash::before{ left:-26px; }
122 .dash::after{ right:-26px; }
123 /* 订单 */
124 .ord{ background:var(--card); border-radius:16px; padding:14px; margin-bottom:11px;
125 box-shadow:0 4px 14px rgba(30,60,120,.06); display:flex; gap:12px; }
126 .ord .lg{ width:42px; height:42px; border-radius:12px; background:var(--light); display:flex;
127 align-items:center; justify-content:center; font-size:22px; }
128 .ord .ri{ flex:1; }
129 .ord .ri .rt{ display:flex; align-items:center; justify-content:space-between; }
130 .ord .ri .rt .r{ font-size:14px; font-weight:800; }
131 .ord .ri .rt .s{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
132 .ord .ri .rt .s.ok{ background:#dcfce7; color:#15803d; }
133 .ord .ri .rt .s.wait{ background:#fef9c3; color:#854d0e; }
134 .ord .ri .dt{ font-size:12px; color:var(--mute); margin-top:4px; }
135 .ord .ri .pr{ font-size:15px; font-weight:800; color:var(--blue); margin-top:8px; }
136 /* 热门目的地 */
137 .dest{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
138 .dest .d{ background:var(--card); border-radius:16px; overflow:hidden;
139 box-shadow:0 4px 14px rgba(30,60,120,.06); }
140 .dest .d .ph{ height:96px; display:flex; align-items:center; justify-content:center; font-size:44px;
141 background:linear-gradient(135deg,#dbeafe,#eff6ff); }
142 .dest .d .pb{ padding:11px 12px; }
143 .dest .d .t{ font-size:14px; font-weight:800; }
144 .dest .d .p{ font-size:12px; color:var(--mute); margin-top:2px; }
145 .dest .d .pr{ font-size:15px; color:var(--blue); font-weight:800; margin-top:6px; }
146 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
147 height:62px; background:#fff; border-top:1px solid var(--line); display:flex; }
148 .tabbar button{ flex:1; border:none; background:none; font-size:11px; color:var(--mute);
149 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
150 .tabbar button .ti{ font-size:20px; }
151 .tabbar button.on{ color:var(--blue); font-weight:700; }
152 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
153 background:rgba(15,30,60,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
154 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
155 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
156</style>
157</head>
158<body>
159<div class="app">
160 <header class="topbar">
161 <span class="back" id="backBtn">‹</span>
162 <span class="tt" id="topTitle">飞享机票</span>
163 <span class="menu" id="menuBtn">⋮</span>
164 </header>
165
166 <main class="views">
167 <!-- 首页 -->
168 <section class="view active" id="view-home">
169 <div class="home-head">
170 <div class="greet">您好，张先生</div>
171 <div class="row">
172 <div class="slogan">预订您的<br>下一次航班</div>
173 <div class="avatar">👨💼</div>
174 </div>
175 <div class="trip-tabs">
176 <div class="tab on" data-trip="round"><span>🔁</span>往返</div>
177 <div class="tab" data-trip="one"><span>➡️</span>单程</div>
178 <div class="tab" data-trip="multi"><span>🛫</span>多程</div>
179 </div>
180 </div>
181 <div class="card booking-card">
182 <div class="field-row">
183 <div class="field">
184 <label>出发地</label>
185 <div class="inp"><span>🛫</span><input id="fromInp" value="纽约 (NYC)" placeholder="出发城市"></div>
186 </div>
187 <div class="swap" id="swapBtn">⇄</div>
188 <div class="field">
189 <label>目的地</label>
190 <div class="inp"><span>🛬</span><input id="toInp" value="伦敦 (LDN)" placeholder="到达城市"></div>
191 </div>
192 </div>
193 <div class="field-row">
194 <div class="field">
195 <label>出发日期</label>
196 <div class="inp"><span>📅</span><input id="depInp" value="2021-12-04" placeholder="出发日期"></div>
197 </div>
198 <div class="field">
199 <label>返程日期</label>
200 <div class="inp"><span>📅</span><input id="retInp" value="2021-12-16" placeholder="返程日期"></div>
201 </div>
202 </div>
203 <button class="btn" id="searchBtn">🔍 搜索航班</button>
204 </div>
205 <div class="section-title">热门目的地 <span>查看更多 ›</span></div>
206 <div class="places" id="placeBox"></div>
207 </section>
208
209 <!-- 航班列表 -->
210 <section class="view" id="view-list">
211 <div class="route-bar">
212 <div class="date">2021年12月4日 · 周六</div>
213 <div class="plane-line">
214 <div><div class="code">NYC</div><div class="city">纽约</div></div>
215 <div class="line"></div>
216 <div><div class="code">LDN</div><div class="city">伦敦</div></div>
217 </div>
218 <div class="date">共 3 个航班可选</div>
219 </div>
220 <div id="flightBox"></div>
221 </section>
222
223 <!-- 登机牌 -->
224 <section class="view" id="view-ticket">
225 <div class="ticket">
226 <div class="head">
227 <div class="pass">
228 <div class="ava">👨💼</div>
229 <div><div class="nm">张先生</div><div class="role">乘客 / 商务舱</div></div>
230 </div>
231 </div>
232 <div class="body">
233 <div class="route">
234 <div><div class="code">NYC</div><div class="city">纽约</div></div>
235 <div class="mid">✈️</div>
236 <div style="text-align:right"><div class="code">LDN</div><div class="city">伦敦</div></div>
237 </div>
238 <div class="info-grid">
239 <div class="it"><div class="l">📅 日期</div><div class="v">2021-12-23</div></div>
240 <div class="it"><div class="l">⏰ 时间</div><div class="v">09:00 起飞</div></div>
241 <div class="it"><div class="l">👤 乘客</div><div class="v">1 成人</div></div>
242 <div class="it"><div class="l">🎫 票号</div><div class="v">NL82-1</div></div>
243 <div class="it"><div class="l">舱位等级</div><div class="v">商务舱</div></div>
244 <div class="it"><div class="l">座位号</div><div class="v">24A</div></div>
245 </div>
246 <div class="barcode">
247 <div class="bc">▌▌▌ ▌▌ ▌▌▌▌ ▌▌▌</div>
248 <div class="txt">A3427371903848</div>
249 </div>
250 </div>
251 <div class="dash"></div>
252 <div style="padding:0 18px 18px;">
253 <button class="btn" id="downloadBtn">⬇️ 下载电子机票</button>
254 </div>
255 </div>
256 </section>
257
258 <!-- 热门目的地 -->
259 <section class="view" id="view-dest">
260 <div class="card">
261 <h3><span>🔥</span>热门目的地</h3>
262 <p class="hint">精选全球热门航线，低价预订</p>
263 <div class="dest" id="destBox"></div>
264 </div>
265 </section>
266
267 <!-- 我的订单 -->
268 <section class="view" id="view-orders">
269 <div class="card">
270 <h3><span>🎫</span>我的机票订单</h3>
271 <p class="hint">共 2 笔订单，1 笔待出行</p>
272 <div class="ord">
273 <div class="lg">✈️</div>
274 <div class="ri">
275 <div class="rt"><span class="r">纽约 → 伦敦</span><span class="s ok">已出票</span></div>
276 <div class="dt">2021-12-23 09:00 · 土耳其航空 TK007</div>
277 <div class="pr">¥ 8,240</div>
278 </div>
279 </div>
280 <div class="ord">
281 <div class="lg">🛫</div>
282 <div class="ri">
283 <div class="rt"><span class="r">上海 → 东京</span><span class="s wait">出票中</span></div>
284 <div class="dt">2022-01-15 14:30 · 全日空 NH920</div>
285 <div class="pr">¥ 3,680</div>
286 </div>
287 </div>
288 </div>
289 </section>
290
291 <!-- 我的 -->
292 <section class="view" id="view-me">
293 <div class="card">
294 <div style="display:flex;align-items:center;gap:12px;">
295 <div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;">👨💼</div>
296 <div><div style="font-size:17px;font-weight:900;">张先生</div><div style="font-size:12px;color:var(--mute);margin-top:2px;">普通会员 · 积分 2,480</div></div>
297 </div>
298 </div>
299 <div class="card">
300 <h3><span>⚙️</span>常用功能</h3>
301 <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;margin-top:10px;">
302 <div class="func"><div style="font-size:24px;">🎫</div><div style="font-size:12px;font-weight:700;margin-top:4px;">机票订单</div></div>
303 <div class="func"><div style="font-size:24px;">📍</div><div style="font-size:12px;font-weight:700;margin-top:4px;">常用乘机人</div></div>
304 <div class="func"><div style="font-size:24px;">🔔</div><div style="font-size:12px;font-weight:700;margin-top:4px;">航班动态</div></div>
305 <div class="func"><div style="font-size:24px;">💬</div><div style="font-size:12px;font-weight:700;margin-top:4px;">在线客服</div></div>
306 <div class="func"><div style="font-size:24px;">🎁</div><div style="font-size:12px;font-weight:700;margin-top:4px;">积分商城</div></div>
307 <div class="func"><div style="font-size:24px;">🏷️</div><div style="font-size:12px;font-weight:700;margin-top:4px;">优惠券</div></div>
308 <div class="func"><div style="font-size:24px;">⚙️</div><div style="font-size:12px;font-weight:700;margin-top:4px;">设置</div></div>
309 <div class="func"><div style="font-size:24px;">❓</div><div style="font-size:12px;font-weight:700;margin-top:4px;">帮助中心</div></div>
310 </div>
311 </div>
312 </section>
313 </main>
314
315 <nav class="tabbar">
316 <button data-go="home" class="on"><span class="ti">🏠</span>首页</button>
317 <button data-go="orders"><span class="ti">🎫</span>机票</button>
318 <button data-go="dest"><span class="ti">🌍</span>目的地</button>
319 <button data-go="me"><span class="ti">👤</span>我的</button>
320 </nav>
321</div>
322<div class="toast" id="toast"></div>
323
324<script>
325var TITLES = { home:"飞享机票", list:"选择航班", ticket:"登机牌", dest:"热门目的地", orders:"我的订单", me:"个人中心" };
326var PLACES = [
327 {e:"🏰",t:"伦敦",p:"¥2,580起"},{e:"🗼",t:"巴黎",p:"¥3,120起"},
328 {e:"🗽",t:"纽约",p:"¥4,860起"},{e:"🌸",t:"东京",p:"¥2,180起"},
329 {e:"🏖️",t:"悉尼",p:"¥3,680起"}
330];
331var DESTS = [
332 {e:"🏰",t:"伦敦",p:"英国 · 6天攻略",pr:"¥2,580起"},
333 {e:"🗼",t:"巴黎",p:"法国 · 浪漫之旅",pr:"¥3,120起"},
334 {e:"🗽",t:"纽约",p:"美国 · 时尚之都",pr:"¥4,860起"},
335 {e:"🌸",t:"东京",p:"日本 · 樱花季",pr:"¥2,180起"},
336 {e:"🏖️",t:"悉尼",p:"澳洲 · 阳光海岸",pr:"¥3,680起"},
337 {e:"🏛️",t:"罗马",p:"意大利 · 历史文化",pr:"¥3,980起"}
338];
339var FLIGHTS = [
340 {air:"土耳其航空",no:"TK007",logo:"🇹🇷",dep:"10:40",arr:"12:50",dur:"12h 10m",price:"¥8,240",tags:["直飞","含餐食"]},
341 {air:"汉莎航空",no:"LH405",logo:"🇩🇪",dep:"14:20",arr:"06:35",dur:"10h 15m",price:"¥7,680",tags:["热门","行李直挂"]},
342 {air:"法国航空",no:"AF006",logo:"🇫🇷",dep:"23:55",arr:"13:15",dur:"9h 20m",price:"¥9,120",tags:["推荐","商务舱优惠"]}
343];
344var curView="home";
345function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
346function show(v){
347 curView=v;
348 $(".view").removeClass("active"); $("#view-"+v).addClass("active");
349 $("#topTitle").text(TITLES[v]||"飞享机票");
350 $("#backBtn").css("display", v==="home"?"none":"block");
351 $(".tabbar button").removeClass("on");
352 if($('.tabbar button[data-go="'+v+'"]').length) $('.tabbar button[data-go="'+v+'"]').addClass("on");
353 window.scrollTo(0,0);
354}
355function renderPlaces(){ $("#placeBox").html(PLACES.map(function(p){
356 return '<div class="place"><div class="ph">'+p.e+'</div><div class="pb"><div class="t">'+p.t+'</div><div class="p">'+p.p+'</div></div></div>';
357}).join("")); }
358function renderDests(){ $("#destBox").html(DESTS.map(function(d){
359 return '<div class="d"><div class="ph">'+d.e+'</div><div class="pb"><div class="t">'+d.t+'</div><div class="p">'+d.p+'</div><div class="pr">'+d.pr+'</div></div></div>';
360}).join("")); }
361function renderFlights(){ $("#flightBox").html(FLIGHTS.map(function(f){
362 return '<div class="flt"><div class="hd"><div class="air"><div class="lg">'+f.logo+'</div><div>'+f.air+'<div class="no">'+f.no+'</div></div></div><div class="price">'+f.price+'</div></div>'+
363 '<div class="tm"><div class="t">'+f.dep+'</div><div class="dur"><i>'+f.dur+'</i></div><div class="t">'+f.arr+'</div></div>'+
364 '<div class="tags">'+f.tags.map(function(t){return '<span class="tag blue">'+t+'</span>';}).join('')+'</div></div>';
365}).join("")); }
366$(function(){
367 renderPlaces(); renderDests(); renderFlights();
368 $(document).on("click",".tabbar button[data-go],.btn[data-go]",function(e){
369 e.stopPropagation(); show($(this).data("go"));
370 });
371 $("#backBtn").on("click",function(){ show("home"); });
372 $(".trip-tabs .tab").on("click",function(){
373 $(".trip-tabs .tab").removeClass("on"); $(this).addClass("on");
374 var trip=$(this).data("trip");
375 if(trip==="one"){ $("#retInp").closest(".field").hide(); }
376 else{ $("#retInp").closest(".field").show(); }
377 toast((trip==="round"?"往返":trip==="one"?"单程":"多程")+"模式");
378 });
379 $("#swapBtn").on("click",function(){
380 var a=$("#fromInp").val(), b=$("#toInp").val();
381 $("#fromInp").val(b); $("#toInp").val(a); toast("已切换出发/到达城市");
382 });
383 $("#searchBtn").on("click",function(){
384 if(!$("#fromInp").val().trim()||!$("#toInp").val().trim()){ toast("请填写出发地与目的地"); return; }
385 show("list");
386 });
387 $(document).on("click",".flt",function(){ show("ticket"); });
388 $("#downloadBtn").on("click",function(){ toast("电子机票已保存到相册"); });
389 $("#menuBtn").on("click",function(){ toast("更多功能开发中"); });
390});
391</script>
392</body>
393</html>