💻 代码预览 · 小草医美

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="steps">
13  <div class="step on"><div class="dot">1</div>选项目</div>
14  <div class="step on"><div class="dot">2</div>选医师</div>
15  <div class="step"><div class="dot">3</div>选时间</div>
16  <div class="step"><div class="dot">4</div>填信息</div>
17</div>
18<div class="ap-card">
19  <div class="ap-row"><span class="ap-label">预约项目</span><span class="ap-val">💧 水光针补水嫩肤 <span class="badge badge-hot">热销</span></span></div>
20  <div class="ap-row"><span class="ap-label">预约医师</span><span class="ap-val">👩‍⚕️ 林婉清 · 主任医师</span></div>
21  <div class="ap-row"><span class="ap-label">选择门店</span><span class="ap-val"><span class="opt sel">旗舰院</span><span class="opt">高新分院</span><span class="opt">曲江店</span></span></div>
22  <div class="ap-row"><span class="ap-label">预约时段</span><span class="ap-val dim">点击下方选择 ›</span></div>
23</div>
24<div class="section-title">⏰ 可选时段（8/25 周二）</div>
25<div class="ap-time-grid" id="timeGrid">
26  <div class="ap-time">09:00<small>3 余位</small></div>
27  <div class="ap-time sel">10:00<small>2 余位</small></div>
28  <div class="ap-time">11:30<small>1 余位</small></div>
29  <div class="ap-time">14:00<small>4 余位</small></div>
30  <div class="ap-time">15:30<small>2 余位</small></div>
31  <div class="ap-time">17:00<small>满</small></div>
32</div>
33<div class="ap-card">
34  <div class="ap-row"><span class="ap-label">姓名</span><span class="ap-val dim">请输入姓名 ›</span></div>
35  <div class="ap-row"><span class="ap-label">手机号</span><span class="ap-val dim">用于接收预约通知 ›</span></div>
36  <div class="ap-row"><span class="ap-label">备注</span><span class="ap-val dim">皮肤状况/过敏史（选填）›</span></div>
37</div>
38<div class="card" style="margin-top:0;font-size:12px;color:#6b4460;line-height:2">
39  💡 <b>预约须知：</b>提交后需支付 ¥99 定金（到店抵扣项目款）· 微信/短信双重提醒<br/>
40  🔄 可免费改期 1 次 · 未到店支持 15 分钟内全额退定金 · 到店核销电子凭证
41</div>
42<div style="height:80px"></div>
43<div class="buy-bar">
44  <div class="bb-cart"><span class="ico">💰</span>定金 ¥99</div>
45  <div class="bb-btn now" data-toast="预约提交成功，定金已锁定时段">提交预约</div>
46</div>
47
48
49<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">💎</span>项目</a><a class="" href="doctor.html"><span class="icon">👩‍⚕️</span>医师</a><a class=" active" href="appointment.html"><span class="icon">📅</span>预约</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
50<script src="data.js"></script>
51<script>
52  // 时段选择交互已在全局 app.js 处理
53</script>
54<script src="app.js"></script>
55</body>
56</html>