小草停车/pay.html · 约 2817 字符
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<header class="header"><a class="back" onclick="history.back()">‹</a><h1>停车缴费</h1><span class="right"></span></header>
12<div class="plate-card">
13 <div class="pc-title">选择车牌（绑定后出入场自动识别）</div>
14 <div class="plate-tags">
15 <div class="plate-tag sel">陕A·8X9K2</div>
16 <div class="plate-tag">陕A·F22L8</div>
17 </div>
18</div>
19<div class="section-title">📋 停车账单</div>
20<div id="billList"></div>
21<div class="pay-method" style="margin-top:4px">
22 <div class="pm sel"><div class="pm-ico">⚡</div>无感支付</div>
23 <div class="pm"><div class="pm-ico">💚</div>微信</div>
24 <div class="pm"><div class="pm-ico">🔵</div>支付宝</div>
25 <div class="pm"><div class="pm-ico">💳</div>云闪付</div>
26</div>
27<div class="invoice-bar">
28 <span>🧾 需要报销？自助申请电子发票</span>
29 <div class="ib-btn" data-toast="电子发票已开具">开发票</div>
30</div>
31<div class="card" style="margin-top:12px;font-size:12px;color:#3a4a72;line-height:2">
32 ⏰ 停车将超时前 5 分钟推送提醒，线上延长时长避免额外扣费<br/>
33 🔒 全程加密保护车辆与资金安全，支持线上注销账户
34</div>
35<div style="height:80px"></div>
36<div class="buy-bar">
37 <div class="bb-btn" data-toast="无感支付已开通，离场自动扣费">⚡ 开通无感支付</div>
38</div>
39
40
41<nav class="tabbar"><a class="" 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=" active" href="pay.html"><span class="icon">💳</span>缴费</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
42<script src="data.js"></script>
43<script>
44 var bl = document.getElementById('billList');
45 var h = '';
46 window.DATA.bills.forEach(function (b) {
47 h += '<div class="bill-card"><div class="bc-head"><span>🚗 ' + b.plate + ' · ' + b.park + '</span><span>' + b.status + '</span></div>'
48 + '<div class="bc-fee"><div><div style="font-size:12px;color:#57648a">入场 ' + b.in + '<br/>离场 ' + b.out + '</div></div>'
49 + '<div class="bf-num">¥' + b.fee + '<small>' + (b.status==='在场' ? ' 预估' : '') + '</small></div></div>'
50 + '<div class="bc-meta">支付方式：' + b.type + '<br/>地下 B2-A12 · 充电 19 分钟 · 已用券 -¥5</div></div>';
51 });
52 bl.innerHTML = h;
53</script>
54<script src="app.js"></script>
55</body>
56</html>