💻 代码预览 · 小草停车

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="section-title">🔌 附近充电桩</div>
13<div id="chargeList"></div>
14<div class="card" style="margin-top:12px;font-size:12px;color:#3a4a72;line-height:2">
15  🔋 地图查找充电桩、查看空闲状态与功率，充电 + 停车合并计费一站搞定<br/>
16  💡 停充一体：停车费与充电费同单结算，享套餐折扣<br/>
17  📅 支持充电预约，到场即充不排队
18</div>
19<div style="height:70px"></div>
20
21
22<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>
23<script src="data.js"></script>
24<script>
25  var cl = document.getElementById('chargeList');
26  var h = '';
27  window.DATA.charges.forEach(function (c) {
28    var st = c.state === '空闲' ? 'status-free' : 'status-mid';
29    h += '<div class="charge-card"><div class="chg-ico">🔌</div><div class="chg-body"><b>' + c.name + '</b><br/>' + c.power + ' · ' + c.price + '<br/>空闲 ' + c.free + '/' + c.total + '</div>'
30      + '<div class="chg-state"><div class="cs ' + st + '">' + c.state + '</div><div class="cb" data-toast="已发起充电预约">预约充电</div></div></div>';
31  });
32  cl.innerHTML = h;
33</script>
34<script src="app.js"></script>
35</body>
36</html>