index.html · 约 7783 字符
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">
6<title>仪表盘 · 健康云 SaaS 后台</title>
7<link rel="stylesheet" href="common.css">
8</head>
9<body>
10<div class="app">
11<aside class="sidebar">
12 <div class="logo"><div class="shield">🛡️</div><span>健康云</span></div>
13 <nav class="nav">
14 <a href="index.html" class="active">🏠 仪表盘</a>
15<a href="departments.html" class="">🏥 科室管理</a>
16<a href="doctors.html" class="">👨⚕️ 医生管理</a>
17<a href="analyzes.html" class="">📊 健康分析</a>
18<a href="history.html" class="">📋 历史记录</a>
19<a href="messages.html" class="">💬 消息中心<span class="badge">14</span></a>
20 </nav>
21 <div class="bottom">
22 <div class="avatar">塔</div>
23 <div><div style="font-size:13px;font-weight:700">塔兰医生</div><div style="font-size:12px;color:var(--text-mute)">高级医师</div></div>
24 </div>
25</aside>
26<div class="main">
27 <header class="header">
28 <div class="search"><input type="text" placeholder="搜索患者、科室、报告..."></div>
29 <div class="right">
30 <button class="icon-btn">🔔<span class="dot"></span></button>
31 <button class="icon-btn">⚙️</button>
32 <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#818cf8,#4f46e5);display:grid;place-items:center;color:#fff;font-size:14px">塔</div>
33 </div>
34 </header>
35 <div class="content">
36
37<h1 class="page-title">仪表盘</h1>
38<p class="page-desc">欢迎回来，今日已预约 8 位患者，3 条待处理异常指标。</p>
39
40<div class="kpi">
41 <div class="item"><div class="label">本月接诊患者</div><div class="value">1,248</div><div class="sub">↑ 12.5% 较上月</div></div>
42 <div class="item"><div class="label">在院医生</div><div class="value">86</div><div class="sub">↑ 4 位新入职</div></div>
43 <div class="item"><div class="label">平均候诊时长</div><div class="value">18 分钟</div><div class="sub down">↓ 3 分钟</div></div>
44 <div class="item"><div class="label">今日预约</div><div class="value">42</div><div class="sub">↑ 8 位</div></div>
45</div>
46
47<div class="grid grid-2-1" style="margin-bottom:22px">
48 <div class="card">
49 <div class="card-title">健康趋势 <small>近12个月</small></div>
50 <div class="chart-line">
51 <svg viewBox="0 0 600 180" preserveAspectRatio="none">
52 <defs><linearGradient id="grad1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#818cf8" stop-opacity="0.35"/><stop offset="100%" stop-color="#818cf8" stop-opacity="0"/></linearGradient></defs>
53 <path d="M0,140 Q40,130 60,120 T120,110 T180,100 T240,90 T300,80 T360,95 T420,70 T480,60 T540,55 T600,40" fill="none" stroke="#4f46e5" stroke-width="3"/>
54 <path d="M0,140 Q40,130 60,120 T120,110 T180,100 T240,90 T300,80 T360,95 T420,70 T480,60 T540,55 T600,40 V180 H0 Z" fill="url(#grad1)"/>
55 <text x="30" y="165" fill="#94a3b8" font-size="11">1月</text><text x="85" y="165" fill="#94a3b8" font-size="11">2月</text>
56 <text x="145" y="165" fill="#94a3b8" font-size="11">3月</text><text x="205" y="165" fill="#94a3b8" font-size="11">4月</text>
57 <text x="265" y="165" fill="#94a3b8" font-size="11">5月</text><text x="325" y="165" fill="#94a3b8" font-size="11">6月</text>
58 <text x="385" y="165" fill="#94a3b8" font-size="11">7月</text><text x="445" y="165" fill="#94a3b8" font-size="11">8月</text>
59 <text x="505" y="165" fill="#94a3b8" font-size="11">9月</text><text x="560" y="165" fill="#94a3b8" font-size="11">10月</text>
60 </svg>
61 </div>
62 </div>
63 <div class="card">
64 <div class="card-title">健康指标 <small>综合评分</small></div>
65 <div style="display:flex;justify-content:space-around;align-items:center;padding:10px 0">
66 <div style="text-align:center">
67 <svg class="progress-ring" viewBox="0 0 100 100"><circle class="track" cx="50" cy="50" r="40"/><circle class="fill" cx="50" cy="50" r="40" stroke-dasharray="251.2" stroke-dashoffset="62.8"/></svg>
68 <div style="font-weight:700;margin-top:8px">综合健康</div><div style="color:var(--text-mute);font-size:13px">75%</div>
69 </div>
70 <div style="text-align:center">
71 <svg class="progress-ring" viewBox="0 0 100 100"><circle class="track" cx="50" cy="50" r="40"/><circle class="fill" cx="50" cy="50" r="40" stroke-dasharray="251.2" stroke-dashoffset="42.7" style="stroke:var(--accent)"/></svg>
72 <div style="font-weight:700;margin-top:8px">水分平衡</div><div style="color:var(--text-mute);font-size:13px">83%</div>
73 </div>
74 </div>
75 </div>
76</div>
77
78<div class="grid grid-3">
79 <div class="card">
80 <div class="card-title">您的活动 <small>本周</small></div>
81 <div class="chart-bar">
82 <div class="bar" style="height:35%"><span>周一</span></div>
83 <div class="bar" style="height:55%"><span>周二</span></div>
84 <div class="bar" style="height:80%"><span>周三</span></div>
85 <div class="bar" style="height:45%"><span>周四</span></div>
86 <div class="bar" style="height:95%"><span>周五</span></div>
87 <div class="bar" style="height:60%"><span>周六</span></div>
88 <div class="bar" style="height:40%"><span>周日</span></div>
89 </div>
90 </div>
91 <div class="card">
92 <div class="card-title">医生预约 <small>6月</small></div>
93 <div class="mini-calendar">
94 <div class="hd">日</div><div class="hd">一</div><div class="hd">二</div><div class="hd">三</div><div class="hd">四</div><div class="hd">五</div><div class="hd">六</div>
95 <div class="day muted">29</div><div class="day muted">30</div><div class="day muted">31</div><div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div>
96 <div class="day">5</div><div class="day">6</div><div class="day">7</div><div class="day active">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div>
97 <div class="day">12</div><div class="day">13</div><div class="day">14</div><div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div>
98 <div class="day">19</div><div class="day">20</div><div class="day">21</div><div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div>
99 <div class="day">26</div><div class="day">27</div><div class="day">28</div><div class="day">29</div><div class="day">30</div><div class="day muted">1</div><div class="day muted">2</div>
100 </div>
101 </div>
102 <div class="card">
103 <div class="card-title">即将到来的预约</div>
104 <div class="appt-list">
105 <div class="appt"><div class="icon" style="background:#ede9fe;color:#7c3aed">🦷</div><div class="info"><strong>牙科检查</strong><span>张医生 · 上午</span></div><div class="time">10:00</div></div>
106 <div class="appt"><div class="icon" style="background:#dbeafe;color:#2563eb">❤️</div><div class="info"><strong>心脏科随访</strong><span>李医生 · 上午</span></div><div class="time">12:00</div></div>
107 <div class="appt"><div class="icon" style="background:#fef3c7;color:#d97706">👁️</div><div class="info"><strong>眼科复查</strong><span>王医生 · 下午</span></div><div class="time">16:00</div></div>
108 <div class="appt"><div class="icon" style="background:#ffe4e6;color:#e11d48">🦴</div><div class="info"><strong>骨科康复</strong><span>赵医生 · 下午</span></div><div class="time">19:00</div></div>
109 </div>
110 </div>
111</div>
112
113 </div>
114</div>
115</div>
116<script src="common.js"></script>
117</body>
118</html>
119