首页/ mobileweb/ 智慧停车管理系统H5移动端功能演示/ 代码预览

💻 代码预览 · 智慧停车管理系统H5移动端功能演示

mw_logistics · 上传者 驰旭教育
← 返回详情
r77/parking.html · 约 2120 字符
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<div class="app">
11  <header class="top">
12    <div class="top-l">车主 · 林浩</div>
13    <div class="top-r">停车中</div>
14  </header>
15  <main class="main">
16<div class="card" style="text-align:center">
17  <div class="muted">⏱️ 已停车时长</div>
18  <div class="big-timer" id="timer">00:42:15</div>
19  <div class="muted">入场时间 14:05 · A 区 088 号</div>
20</div>
21<div class="card">
22  <div class="row"><div><div class="nm" style="font-size:15px;font-weight:700">江悦中心地下停车场</div>
23  <div class="muted">📍 江悦路 18 号 B2</div></div><div class="plate">沪 A·8R26K</div></div>
24</div>
25<div class="card">
26  <div class="sec-title"><span class="em">💰</span> 当前费用(估算)</div>
27  <div class="row"><span class="muted">首小时 ¥6 + 超时 42 分钟 ¥4.2</span><b style="font-size:18px;color:var(--pri)">¥10.2</b></div>
28  <div class="muted" style="margin-top:6px">每日封顶 ¥48,当前未达封顶</div>
29</div>
30<div class="row" style="gap:8px;margin:4px 2px 12px">
31  <button class="btn line" style="flex:1">📍 找车导航</button>
32  <a class="btn" href="pay.html" style="flex:1;text-align:center;text-decoration:none">去缴费离场</a>
33</div>
34</main>
35  <nav class="nav"><a class="" href="home.html"><span class="ic">🅿️</span>首页</a><a class="" href="book.html"><span class="ic">📅</span>预约</a><a class=" on" href="parking.html"><span class="ic">⏱️</span>停车中</a><a class="" href="pay.html"><span class="ic">💳</span>缴费</a></nav>
36</div>
37<script>
38var s=2535;var t=document.getElementById('timer');
39function fmt(x){var h=Math.floor(x/3600),m=Math.floor(x%3600/60),r=x%60;
40return String(h).padStart(2,'0')+':'+String(m).padStart(2,'0')+':'+String(r).padStart(2,'0');}
41setInterval(function(){s++;t.textContent=fmt(s);},1000);
42</script>
43</body>
44</html>