首页/ mobileweb/ 医院预约挂号系统H5移动端功能演示/ 代码预览

💻 代码预览 · 医院预约挂号系统H5移动端功能演示

mw_medical · 上传者 驰旭教育
← 返回详情
r42/book.html · 约 2770 字符
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.0, maximum-scale=1.0, user-scalable=no">
6<title>预约挂号</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="wrap">
11<div class="header">
12  <div class="top"><span class="role">患者端</span><span style="margin-left:auto;font-size:12px;opacity:.85">驰旭医院</span></div>
13  <h1>预约挂号</h1>
14  <div class="sub">确认挂号信息</div>
15</div>
16<div class="card" style="margin-top:12px;overflow:hidden">
17  <div class="doc" style="border:none"><div class="dc" style="background:linear-gradient(135deg,#0ea5a4,#0f766e)">👨‍⚕️</div><div class="di"><div class="t">李医生 · 主任医师</div><div class="m">心血管内科 · 周一至周五 上午</div><div class="b"><span class="stars">★ 4.9</span><span class="tag ok">号源充足</span></div></div></div>
18</div>
19<div class="section-title"><span>选择就诊时间</span></div>
20<div class="seg" style="margin-top:0"><div class="sg on">今天 07-16</div><div class="sg">明天 07-17</div><div class="sg">07-18</div></div>
21<div class="slots" style="margin-top:12px">
22  <div class="slot on" style="border:2px solid var(--primary)"><div class="st">09:00</div><div class="sn">余 6</div><a class="btn" href="mine.html">选此号</a></div>
23  <div class="slot"><div class="st">09:30</div><div class="sn">余 4</div><a class="btn" href="mine.html">选此号</a></div>
24  <div class="slot"><div class="st">10:00</div><div class="sn">余 2</div><a class="btn" href="mine.html">选此号</a></div>
25  <div class="slot full"><div class="st">10:30</div><div class="sn">已约满</div><span class="btn ghost">满</span></div>
26</div>
27<div class="section-title"><span>就诊人</span><span class="more">切换</span></div>
28<div class="form">
29  <div class="field"><label>姓名</label><input value="张三"></div>
30  <div class="field"><label>就诊卡</label><input value="S0088123"></div>
31  <div class="field"><label>身份证</label><input value="3201**********0035"></div>
32  <div class="field"><label>手机号</label><input value="138****6021"></div>
33  <div class="field"><label>病情描述</label><input value="偶有胸闷,体检提示早搏"></div>
34</div>
35<a class="btn full" href="mine.html" onclick="this.textContent='✓ 挂号成功';return true;">确认挂号(免挂号费)</a>
36<div class="bottom-nav"><a class="nav-item" href="index.html"><span class="icon">🏥</span>首页</a><a class="nav-item active" href="book.html"><span class="icon">📅</span>预约</a><a class="nav-item" href="mine.html"><span class="icon">👤</span>我的</a></div><div class="safe-bottom"></div>
37</div>
38
39</body>
40</html>