小草停车/index.html · 约 3891 字符
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<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<div class="banner">
12 <div>
13 <div class="bn-title">小草停车</div>
14 <div class="bn-sub">附近车位一目了然 · 无感支付秒离场<br/>找位难、缴费慢、寻车烦，一次搞定</div>
15 <div class="bn-badge">🎫 新用户领 5 元停车券</div>
16 </div>
17 <div class="bn-emoji">🅿️</div>
18</div>
19<div class="voice-bar">
20 <div class="vb-ico">🎙️</div>
21 <div class="vb-body">开车不方便打字？<br/>语音说出目的地，智能推荐最近车场</div>
22 <div class="vb-btn">语音找位</div>
23</div>
24<div class="car-card">
25 <div class="cc-plate">陕A·8X9K2</div>
26 <div class="cc-info"><b>特斯拉 Model 3</b><br/>当前在停：万象城地下停车场<br/>入场 14:20 · 已停 1 小时</div>
27 <div class="cc-fee"><div class="fnum">¥18</div><div class="ftxt">预估费用</div></div>
28</div>
29<div class="coupon-card">
30 <div class="cc-left"><b>新人礼 5 元无门槛停车券</b><span>首单立减 · 7 天内有效</span></div>
31 <div class="cc-btn">立即领取</div>
32</div>
33<div class="section-title">🅿️ 附近停车场 <span>实时余位 ›</span></div>
34<div id="parkList"></div>
35<div class="section-title">✨ 核心功能</div>
36<div class="feature-strip">
37 <div class="fs-item" data-toast="智能车位推荐已开启"><div class="fs-emoji">🧭</div><div class="fs-name">智能推荐</div><div class="fs-desc">空位多价格优就近推荐</div></div>
38 <div class="fs-item" data-toast="车位预约已锁定"><div class="fs-emoji">📌</div><div class="fs-name">车位预约</div><div class="fs-desc">热门车位出行前锁定</div></div>
39 <div class="fs-item" data-toast="无感支付已开通"><div class="fs-emoji">⚡</div><div class="fs-name">无感支付</div><div class="fs-desc">进出自动扣费免排队</div></div>
40 <div class="fs-item" data-toast="反向寻车导航中"><div class="fs-emoji">🔍</div><div class="fs-name">反向寻车</div><div class="fs-desc">室内步行导航找回车</div></div>
41 <div class="fs-item" data-toast="错峰共享车位查看"><div class="fs-emoji">🌙</div><div class="fs-name">错峰共享</div><div class="fs-desc">夜间低价盘活闲置位</div></div>
42</div>
43<div style="height:70px"></div>
44
45
46<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="nearby.html"><span class="icon">🅿️</span>附近</a><a class="" href="find.html"><span class="icon">🧭</span>寻车</a><a class="" href="pay.html"><span class="icon">💳</span>缴费</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
47<script src="data.js"></script>
48<script>
49 var pl = document.getElementById('parkList');
50 var h = '';
51 window.DATA.nearbyParks.slice(0, 4).forEach(function (p) {
52 h += '<div class="park-card"><div class="pc-map">' + p.emoji + '<span class="pc-dot" style="background:' + (p.status==='free'?'#16a34a':p.status==='mid'?'#f59e0b':'#dc2626') + '"></span></div><div class="pc-body">'
53 + '<div class="pc-name">' + p.name + '</div>'
54 + '<div class="pc-meta">📍 ' + p.dist + ' · ' + p.price + (p.charge ? ' · 🔌有桩' : '') + '</div>'
55 + '<div class="pc-row"><div class="pc-free ' + (p.status==='free'?'status-free':p.status==='mid'?'status-mid':'status-full') + '">余位 ' + p.free + '/' + p.total + ' · ' + (p.status==='free'?'充足':p.status==='mid'?'较紧':'已满') + '</div>'
56 + '<a class="pc-btn" href="park.html">详情</a></div></div></div>';
57 });
58 pl.innerHTML = h;
59</script>
60<script src="app.js"></script>
61</body>
62</html>