💻 代码预览 · 小草宠物美容

1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>预约 · 小草宠物美容</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>在线预约</h1><span class="right">📅</span></div>
3<div class="book-steps">
4  <div class="bs now"><span class="dot">🐾</span>选宠物</div>
5  <div class="bs"><span class="dot">💈</span>选服务</div>
6  <div class="bs"><span class="dot">🕐</span>选时段</div>
7  <div class="bs"><span class="dot">✅</span>确认</div>
8</div>
9<div class="section-title">选择毛孩子 <span>可多宠建档</span></div>
10<div class="pet-sel" id="pet-list" style="padding:0 12px"></div>
11<div class="section-title">选择服务 <span>点击选择</span></div>
12<div id="svc-list" style="padding-bottom:10px"></div>
13<div class="section-title">选择到店时段 <span>明天 · 10个时段</span></div>
14<div class="card">
15  <div class="time-grid" id="time-grid"></div>
16</div>
17<div class="card">
18  <div class="section-title" style="margin:0 0 8px">预约信息</div>
19  <div style="display:flex;justify-content:space-between;font-size:13px;color:#8a6a4e;padding:6px 0"><span>门店</span><b style="color:#4a3226">小草宠物美容(总店)</b></div>
20  <div style="display:flex;justify-content:space-between;font-size:13px;color:#8a6a4e;padding:6px 0"><span>预约规则</span><b style="color:#4a3226">需支付30%定金</b></div>
21  <div class="deposit">💡 到店后由美容师面诊确认项目与价格，多退少补；爽约定金不退哦～</div>
22</div>
23<button class="btn btn-primary" style="margin:0 12px 24px;width:calc(100% - 24px)" onclick="submitBook()">提交预约 · 支付定金</button>
24<div style="height:20px"></div>
25<script src="data.js"></script><script src="app.js"></script>
26<script>
27renderPets();renderService();renderTimes();
28</script>
29</body></html>