💻 代码预览 · 小草家政服务

1<!DOCTYPE html><html lang="zh-CN"><head>
2<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
3<title>预约下单 - 小草家政服务</title><link rel="stylesheet" href="style.css">
4</head><body>
5<div class="header"><span class="back" onclick="history.back()">‹</span><h1>预约下单</h1><span class="right"></span></div>
6<div class="section-title">🧹 预约服务</div>
7<div id="book-svc"></div>
8<div class="form-group">
9  <div class="fg-label">上门时间 <span style="color:var(--primary)">*</span></div>
10  <div class="time-chips" id="time-chips">
11    <div class="chip active" onclick="selectTime(this)">今天 14:00</div>
12    <div class="chip" onclick="selectTime(this)">今天 16:00</div>
13    <div class="chip" onclick="selectTime(this)">明天 09:00</div>
14    <div class="chip" onclick="selectTime(this)">明天 14:00</div>
15    <div class="chip" onclick="selectTime(this)">周末上午</div>
16  </div>
17</div>
18<div class="form-group">
19  <div class="fg-label">服务地址 <span style="color:var(--primary)">*</span></div>
20  <div id="addr-list"></div>
21  <div style="text-align:center;color:var(--primary);font-size:13px;cursor:pointer;margin-top:4px" onclick="alert('＋ 新增地址')">＋ 新增地址</div>
22</div>
23<div class="form-group">
24  <div class="fg-label">联系人 <span style="color:var(--primary)">*</span></div>
25  <input type="text" placeholder="您的姓名" value="张先生">
26</div>
27<div class="form-group">
28  <div class="fg-label">联系电话 <span style="color:var(--primary)">*</span></div>
29  <input type="tel" placeholder="手机号码" value="138****8888">
30</div>
31<div class="form-group">
32  <div class="fg-label">备注（选填）</div>
33  <textarea placeholder="如：家中有宠物、需自带工具等"></textarea>
34</div>
35<div style="padding:0 12px;margin-bottom:20px"><button class="btn btn-primary" onclick="submitBook()">确认下单</button></div>
36<script src="data.js"></script>
37<script src="app.js"></script>
38<script>renderBook();</script>
39</body></html>