💻 代码预览 · 小草停车

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="search-bar">🔍 搜索停车场 / 地点 / 路名</div>
13<div class="filter-tabs">
14  <div class="filter-tab sel">全部</div>
15  <div class="filter-tab">有充电桩</div>
16  <div class="filter-tab">可月租</div>
17  <div class="filter-tab">低价免费</div>
18  <div class="filter-tab">余位充足</div>
19  <div class="filter-tab">医院</div>
20  <div class="filter-tab">商场</div>
21</div>
22<div class="sort-bar"><span class="on">距离最近</span><span>余位最多</span><span>价格最低</span><span>评分最高</span></div>
23<div class="section-title">周边车场 <span>共 5 个</span></div>
24<div id="nearList"></div>
25<div style="height:70px"></div>
26
27
28<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class=" active" 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>
29<script src="data.js"></script>
30<script>
31  var nl = document.getElementById('nearList');
32  var h = '';
33  window.DATA.nearbyParks.forEach(function (p) {
34    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">'
35      + '<div class="pc-name">' + p.name + '</div>'
36      + '<div class="pc-meta">📍 ' + p.dist + ' · ' + p.price + (p.charge ? ' · 🔌有桩' : '') + '</div>'
37      + '<div style="margin-top:4px">' + p.tags.map(function (t) { return '<span class="tag">' + t + '</span>'; }).join('') + '</div>'
38      + '<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>'
39      + '<a class="pc-btn" href="park.html">导航</a></div></div></div>';
40  });
41  nl.innerHTML = h;
42</script>
43<script src="app.js"></script>
44</body>
45</html>