index.html · 约 19922 字符
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.0, maximum-scale=1.0, user-scalable=no">
6<title>城市出行服务平台</title>
7<style>
8* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
9html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f7fa; color: #333; }
10ul, li { list-style: none; }
11.app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: #f5f7fa; position: relative; padding-bottom: 64px; overflow: hidden; }
12.page { display: none; min-height: 100vh; }
13.page.active { display: block; }
14
15/* 顶部状态栏 */
16.status-bar { height: 24px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 11px; color: #111; }
17.status-bar .icons { display: flex; gap: 4px; }
18
19/* 欢迎页 */
20.welcome-bg { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; padding: 40px 24px; text-align: center; }
21.welcome-illus { width: 200px; height: 200px; background: rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; position: relative; }
22.welcome-illus::after { content: "🚗"; font-size: 72px; }
23.welcome-title { font-size: 26px; font-weight: 700; margin-bottom: 12px; }
24.welcome-sub { font-size: 14px; opacity: 0.9; line-height: 1.6; margin-bottom: 48px; }
25.btn-primary { display: block; width: 100%; padding: 14px; border-radius: 24px; background: #f59e0b; color: #fff; font-size: 16px; font-weight: 600; text-align: center; border: none; }
26.btn-outline { display: block; width: 100%; padding: 12px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.6); color: #fff; font-size: 14px; text-align: center; margin-top: 12px; }
27
28/* 登录页 */
29.page-header { background: #fff; padding: 40px 24px 24px; }
30.page-header h1 { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 6px; }
31.page-header p { font-size: 13px; color: #999; }
32.form-card { background: #fff; margin: 16px; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
33.form-row { margin-bottom: 16px; }
34.form-label { font-size: 13px; color: #666; margin-bottom: 6px; }
35.form-input { width: 100%; height: 46px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 14px; font-size: 14px; }
36.form-input:focus { border-color: #0ea5e9; outline: none; }
37.form-flex { display: flex; gap: 10px; }
38.form-flex .form-input { flex: 1; }
39.btn-code { padding: 0 16px; height: 46px; border: none; background: #e0f2fe; color: #0284c7; border-radius: 10px; font-size: 13px; white-space: nowrap; }
40.link-row { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin-top: 12px; }
41.link-row a { color: #0ea5e9; text-decoration: none; }
42.social-login { display: flex; justify-content: center; gap: 24px; margin-top: 24px; }
43.social-icon { width: 44px; height: 44px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 18px; }
44
45/* 地图首页 */
46.map-header { height: 52px; background: #0ea5e9; color: #fff; display: flex; align-items: center; padding: 0 16px; justify-content: space-between; }
47.map-header .title { font-size: 16px; font-weight: 600; }
48.map-box { height: 260px; background: #e0f2fe; position: relative; overflow: hidden; }
49.map-grid { position: absolute; inset: 0; background-image: linear-gradient(#bae6fd 1px, transparent 1px), linear-gradient(90deg, #bae6fd 1px, transparent 1px); background-size: 40px 40px; }
50.map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); font-size: 36px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); }
51.map-address { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(255,255,255,0.95); padding: 12px; border-radius: 12px; font-size: 14px; }
52.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; background: #fff; }
53.service-item { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #555; }
54.service-icon { width: 48px; height: 48px; border-radius: 14px; background: #f0f9ff; color: #0ea5e9; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 6px; }
55.ride-card { background: #fff; margin: 12px 16px; border-radius: 16px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
56.ride-card h3 { font-size: 15px; margin-bottom: 12px; }
57.ride-type { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
58.ride-type:last-child { border-bottom: none; }
59.ride-info { display: flex; align-items: center; gap: 10px; }
60.ride-info .icon { font-size: 26px; }
61.ride-info .name { font-size: 14px; color: #111; }
62.ride-info .desc { font-size: 11px; color: #999; }
63.ride-price { font-size: 16px; font-weight: 700; color: #111; }
64.ride-price span { font-size: 12px; color: #999; font-weight: 400; }
65
66/* 搜索页 */
67.search-bar { background: #fff; padding: 12px 16px; display: flex; gap: 10px; align-items: center; }
68.search-bar .back { font-size: 20px; color: #666; }
69.search-input-wrap { flex: 1; position: relative; }
70.search-input { width: 100%; height: 40px; background: #f3f4f6; border: none; border-radius: 20px; padding: 0 36px 0 14px; font-size: 14px; }
71.search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #999; font-size: 14px; }
72.search-btn { color: #0ea5e9; font-size: 14px; }
73.section-title { font-size: 14px; color: #111; font-weight: 600; padding: 16px 16px 8px; }
74.history-list { background: #fff; padding: 0 16px; }
75.history-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
76.history-item:last-child { border-bottom: none; }
77.history-left { display: flex; align-items: center; gap: 10px; font-size: 14px; }
78.history-left .icon { color: #0ea5e9; font-size: 16px; }
79.history-right { color: #999; font-size: 12px; }
80.suggest-list { padding: 0 16px; }
81.suggest-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
82.suggest-item .icon { font-size: 20px; color: #f59e0b; }
83.suggest-info .name { font-size: 14px; color: #111; }
84.suggest-info .addr { font-size: 12px; color: #999; margin-top: 2px; }
85
86/* 通知页 */
87.notice-tabs { display: flex; background: #fff; border-bottom: 1px solid #f3f4f6; }
88.notice-tab { flex: 1; text-align: center; padding: 14px; font-size: 14px; color: #666; position: relative; }
89.notice-tab.active { color: #0ea5e9; font-weight: 600; }
90.notice-tab.active::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: #0ea5e9; border-radius: 2px; }
91.notice-list { padding: 12px 16px; }
92.notice-card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
93.notice-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
94.notice-type { font-size: 13px; font-weight: 600; color: #111; }
95.notice-time { font-size: 11px; color: #999; }
96.notice-body { font-size: 13px; color: #555; line-height: 1.5; }
97.notice-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-right: 4px; }
98
99/* 个人中心 */
100.profile-header { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; padding: 40px 16px 24px; }
101.profile-top { display: flex; align-items: center; gap: 14px; }
102.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; border: 3px solid rgba(255,255,255,0.3); }
103.profile-name h2 { font-size: 18px; font-weight: 600; }
104.profile-name p { font-size: 12px; opacity: 0.9; margin-top: 2px; }
105.profile-stats { display: flex; justify-content: space-around; margin-top: 24px; text-align: center; }
106.profile-stats .num { font-size: 20px; font-weight: 700; }
107.profile-stats .label { font-size: 12px; opacity: 0.85; margin-top: 2px; }
108.menu-card { background: #fff; margin: 12px 16px; border-radius: 14px; padding: 8px 0; }
109.menu-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f3f4f6; }
110.menu-item:last-child { border-bottom: none; }
111.menu-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; }
112.menu-icon { width: 28px; height: 28px; border-radius: 8px; background: #e0f2fe; color: #0ea5e9; display: flex; align-items: center; justify-content: center; font-size: 14px; }
113.menu-right { color: #999; font-size: 14px; }
114.wallet-card { display: flex; justify-content: space-around; padding: 16px 0; }
115.wallet-item { text-align: center; }
116.wallet-item .num { font-size: 18px; font-weight: 700; color: #111; }
117.wallet-item .label { font-size: 12px; color: #999; margin-top: 2px; }
118
119/* 底部导航 */
120.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: 64px; background: #fff; border-top: 1px solid #f3f4f6; display: flex; justify-content: space-around; align-items: center; z-index: 100; }
121.tab-item { flex: 1; text-align: center; padding: 8px 0; color: #999; font-size: 11px; }
122.tab-item .icon { font-size: 22px; display: block; margin-bottom: 2px; }
123.tab-item.active { color: #0ea5e9; }
124
125/* 辅助 */
126.hidden-tabbar .tabbar { display: none; }
127.hidden-tabbar .app { padding-bottom: 0; }
128</style>
129</head>
130<body>
131<div class="app" id="app">
132 <div class="status-bar"><span>14:25</span><span class="icons">📶 🔋</span></div>
133
134 <!-- 1. 欢迎页 -->
135 <div class="page active" id="page_welcome">
136 <div class="welcome-bg">
137 <div class="welcome-illus"></div>
138 <div class="welcome-title">驰旭出行</div>
139 <div class="welcome-sub">安全 · 便捷 · 智能的城市出行服务<br>由驰旭科技为您提供一站式出行体验</div>
140 <button class="btn-primary" onclick="go('home')">立即体验</button>
141 <a class="btn-outline" onclick="go('login')">已有账号，立即登录</a>
142 </div>
143 </div>
144
145 <!-- 2. 登录/注册 -->
146 <div class="page" id="page_login">
147 <div class="page-header">
148 <h1>欢迎登录</h1>
149 <p>请输入手机号与验证码，开启智能出行</p>
150 </div>
151 <div class="form-card">
152 <div class="form-row">
153 <div class="form-label">手机号</div>
154 <div class="form-flex">
155 <select class="form-input" style="flex:0 0 70px; padding:0 6px;"><option>+86</option></select>
156 <input class="form-input" value="138 0013 8000" placeholder="请输入手机号">
157 </div>
158 </div>
159 <div class="form-row">
160 <div class="form-label">短信验证码</div>
161 <div class="form-flex">
162 <input class="form-input" value="" placeholder="请输入验证码">
163 <button class="btn-code">获取验证码</button>
164 </div>
165 </div>
166 <button class="btn-primary" style="margin-top:8px;" onclick="go('home')">登 录</button>
167 <div class="link-row"><span>未注册手机号将自动创建账号</span><a>密码登录</a></div>
168 <div class="social-login">
169 <div class="social-icon">💬</div>
170 <div class="social-icon">🔵</div>
171 <div class="social-icon">🍎</div>
172 </div>
173 </div>
174 </div>
175
176 <!-- 3. 首页地图 -->
177 <div class="page" id="page_home">
178 <div class="map-header">
179 <span>📍 北京朝阳区</span>
180 <span class="title">驰旭出行</span>
181 <span>🔔</span>
182 </div>
183 <div class="map-box">
184 <div class="map-grid"></div>
185 <div class="map-pin">📍</div>
186 <div class="map-address">
187 <strong>当前上车点</strong><br>
188 <span style="color:#666;">某某科技园 · 东门（驰旭科技大厦对面）</span>
189 </div>
190 </div>
191 <div class="services">
192 <div class="service-item"><div class="service-icon">🚗</div><span>立即用车</span></div>
193 <div class="service-item"><div class="service-icon">🚕</div><span>出租车</span></div>
194 <div class="service-item"><div class="service-icon">🚚</div><span>小件快送</span></div>
195 <div class="service-item"><div class="service-icon">🚌</div><span>公交查询</span></div>
196 <div class="service-item"><div class="service-icon">🛵</div><span>两轮出行</span></div>
197 <div class="service-item"><div class="service-icon">🚙</div><span>租车</span></div>
198 <div class="service-item"><div class="service-icon">🎫</div><span>代驾</span></div>
199 <div class="service-item"><div class="service-icon">🏥</div><span>应急</span></div>
200 </div>
201 <div class="ride-card">
202 <h3>选择车型</h3>
203 <div class="ride-type">
204 <div class="ride-info"><span class="icon">🚘</span><div><div class="name">经济型</div><div class="desc">快速接驾 · 张三司机</div></div></div>
205 <div class="ride-price">¥18.5<span> 一口价</span></div>
206 </div>
207 <div class="ride-type">
208 <div class="ride-info"><span class="icon">🚖</span><div><div class="name">舒适型</div><div class="desc">空间宽敞 · 李四司机</div></div></div>
209 <div class="ride-price">¥26.0<span> 一口价</span></div>
210 </div>
211 <div class="ride-type">
212 <div class="ride-info"><span class="icon">🚐</span><div><div class="name">商务型</div><div class="desc">品质服务 · 王五司机</div></div></div>
213 <div class="ride-price">¥38.0<span> 一口价</span></div>
214 </div>
215 <button class="btn-primary" style="margin-top:12px;">确认呼叫</button>
216 </div>
217 </div>
218
219 <!-- 4. 地址搜索 -->
220 <div class="page" id="page_search">
221 <div class="search-bar">
222 <span class="back" onclick="go('home')">←</span>
223 <div class="search-input-wrap">
224 <input class="search-input" value="" placeholder="请输入目的地">
225 <span class="search-clear">✕</span>
226 </div>
227 <span class="search-btn">搜索</span>
228 </div>
229 <div class="section-title">最近搜索</div>
230 <div class="history-list">
231 <div class="history-item"><div class="history-left"><span class="icon">🕐</span>某某科技大厦</div><div class="history-right">07-16</div></div>
232 <div class="history-item"><div class="history-left"><span class="icon">🕐</span>北京南站</div><div class="history-right">07-15</div></div>
233 <div class="history-item"><div class="history-left"><span class="icon">🕐</span>三里屯太古里</div><div class="history-right">07-14</div></div>
234 </div>
235 <div class="section-title">推荐地址</div>
236 <div class="suggest-list">
237 <div class="suggest-item"><span class="icon">📍</span><div class="suggest-info"><div class="name">驰旭科技总部</div><div class="addr">北京市海淀区中关村软件园</div></div></div>
238 <div class="suggest-item"><span class="icon">📍</span><div class="suggest-info"><div class="name">小草科技研发中心</div><div class="addr">北京市朝阳区望京SOHO</div></div></div>
239 <div class="suggest-item"><span class="icon">📍</span><div class="suggest-info"><div class="name">某某文化广场</div><div class="addr">北京市东城区王府井大街</div></div></div>
240 </div>
241 </div>
242
243 <!-- 5. 通知中心 -->
244 <div class="page" id="page_notice">
245 <div class="page-header" style="padding-bottom:0;"><h1>消息中心</h1><p>查看订单动态、优惠活动与系统公告</p></div>
246 <div class="notice-tabs">
247 <div class="notice-tab active">系统通知</div>
248 <div class="notice-tab">订单消息</div>
249 <div class="notice-tab">优惠活动</div>
250 </div>
251 <div class="notice-list">
252 <div class="notice-card">
253 <div class="notice-top"><span class="notice-type"><span class="notice-badge"></span>安全提醒</span><span class="notice-time">10:30</span></div>
254 <div class="notice-body">您乘坐的订单已开启行程分享，紧急联系人李四将实时收到您的行程信息。</div>
255 </div>
256 <div class="notice-card">
257 <div class="notice-top"><span class="notice-type">系统公告</span><span class="notice-time">昨天</span></div>
258 <div class="notice-body">驰旭出行已完成乘客隐私保护升级，手机号将全程加密展示。</div>
259 </div>
260 <div class="notice-card">
261 <div class="notice-top"><span class="notice-type">优惠活动</span><span class="notice-time">07-14</span></div>
262 <div class="notice-body">新用户专享：完成首次用车即可领取 5 折优惠券，限本周使用。</div>
263 </div>
264 </div>
265 </div>
266
267 <!-- 6. 个人中心 -->
268 <div class="page" id="page_me">
269 <div class="profile-header">
270 <div class="profile-top">
271 <div class="profile-avatar">张</div>
272 <div class="profile-name"><h2>张三</h2><p>普通会员 · 138****8000</p></div>
273 </div>
274 <div class="profile-stats">
275 <div><div class="num">28</div><div class="label">累计行程</div></div>
276 <div><div class="num">186</div><div class="label">里程(km)</div></div>
277 <div><div class="num">4.9</div><div class="label">信用分</div></div>
278 </div>
279 </div>
280 <div class="menu-card">
281 <div class="menu-item"><div class="menu-left"><span class="menu-icon">💰</span>我的钱包</div><span class="menu-right">¥128.50 ></span></div>
282 <div class="menu-item"><div class="menu-left"><span class="menu-icon">🎟</span>优惠券</div><span class="menu-right">3 张可用 ></span></div>
283 <div class="menu-item"><div class="menu-left"><span class="menu-icon">📍</span>常用地址</div><span class="menu-right">></span></div>
284 </div>
285 <div class="menu-card">
286 <div class="menu-item"><div class="menu-left"><span class="menu-icon">🛡</span>安全中心</div><span class="menu-right">></span></div>
287 <div class="menu-item"><div class="menu-left"><span class="menu-icon">⚙</span>设置</div><span class="menu-right">></span></div>
288 <div class="menu-item"><div class="menu-left"><span class="menu-icon">🎧</span>客服中心</div><span class="menu-right">></span></div>
289 </div>
290 </div>
291
292 <!-- 底部导航 -->
293 <div class="tabbar" id="tabbar">
294 <div class="tab-item active" data-page="home" onclick="go('home')"><span class="icon">🏠</span>首页</div>
295 <div class="tab-item" data-page="search" onclick="go('search')"><span class="icon">🔍</span>搜索</div>
296 <div class="tab-item" data-page="notice" onclick="go('notice')"><span class="icon">🔔</span>消息</div>
297 <div class="tab-item" data-page="me" onclick="go('me')"><span class="icon">👤</span>我的</div>
298 </div>
299</div>
300<script src="../../../attachment/demos/_vendor/jquery.min.js"></script>
301<script>
302function go(name){
303 $('.page').removeClass('active');
304 $('#page_'+name).addClass('active');
305 $('.tab-item').removeClass('active');
306 $('.tab-item[data-page='+name+']').addClass('active');
307 if(name=='welcome' || name=='login'){
308 $('#app').addClass('hidden-tabbar');
309 } else {
310 $('#app').removeClass('hidden-tabbar');
311 }
312}
313window.show = function(name){ go(name); };
314$(function(){
315 go('welcome');
316});
317</script>
318</body>
319</html>