feat: extract secrets to .env, remove hardcoded credentials
- Backend: .env file for DB/JWT/Redis/MinIO config, appsettings.json cleared - Backend: Program.cs loads .env at startup (no extra NuGet packages) - Frontend: .env files for VITE_API_URL, api-clients use import.meta.env - Added vite-env.d.ts type declarations for both frontends - All hardcoded localhost:5000 replaced with env variable - Added .env.example template for onboarding
This commit is contained in:
MingNian
897
ui-mockup.html
Normal file
897
ui-mockup.html
Normal file
@@ -0,0 +1,897 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>健康管家 - UI 重设计预览</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #F0F4F8;
|
||||
--card: #FFFFFF;
|
||||
--primary: #4F6EF7;
|
||||
--primary-light: #EEF1FE;
|
||||
--primary-gradient: linear-gradient(135deg, #4F6EF7, #6C8CFF);
|
||||
--accent-1: #FF6B6B;
|
||||
--accent-2: #FFA94D;
|
||||
--accent-3: #20C997;
|
||||
--accent-4: #845EF7;
|
||||
--accent-5: #339AF0;
|
||||
--accent-6: #F06595;
|
||||
--text-1: #1A1D28;
|
||||
--text-2: #5A5F72;
|
||||
--text-3: #9BA0B4;
|
||||
--divider: #EDF0F5;
|
||||
--radius-sm: 10px;
|
||||
--radius: 16px;
|
||||
--radius-lg: 20px;
|
||||
--shadow-card: 0 2px 12px rgba(0,0,0,0.04);
|
||||
--shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
|
||||
--tab-height: 64px;
|
||||
--header-height: 50px;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background: #E8ECF1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 30px 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* SVG 图标通用 */
|
||||
.icon { display: block; flex-shrink: 0; }
|
||||
.icon-white { stroke: #fff; fill: none; }
|
||||
.icon-colored { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
|
||||
|
||||
/* ====== 主容器 ====== */
|
||||
.phone-frame {
|
||||
width: 390px; height: 844px;
|
||||
background: var(--bg);
|
||||
border-radius: 36px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 3px #1a1a2e, 0 0 0 6px #222;
|
||||
display: flex; flex-direction: column; position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 48px; background: var(--card);
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0 24px; font-size: 12px; font-weight: 600; color: var(--text-1); flex-shrink: 0;
|
||||
}
|
||||
.status-icons { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-3); }
|
||||
|
||||
.page-header {
|
||||
height: var(--header-height); background: var(--card);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 0 16px; font-size: 17px; font-weight: 600; color: var(--text-1);
|
||||
flex-shrink: 0; position: relative; border-bottom: 1px solid var(--divider);
|
||||
}
|
||||
.page-header .back-btn, .page-header .header-right {
|
||||
position: absolute; top: 50%; transform: translateY(-50%);
|
||||
width: 34px; height: 34px; border-radius: 10px;
|
||||
border: none; background: none; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.page-header .back-btn { left: 12px; }
|
||||
.page-header .back-btn:hover { background: var(--bg); }
|
||||
.page-header .header-right { right: 12px; font-size: 13px; color: var(--primary); font-weight: 600; }
|
||||
|
||||
.scroll-area {
|
||||
flex: 1; overflow-y: auto; padding: 16px 16px 0; scroll-behavior: smooth;
|
||||
}
|
||||
.scroll-area::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 底部导航 */
|
||||
.tab-bar {
|
||||
height: var(--tab-height); background: var(--card);
|
||||
border-top: 1px solid var(--divider);
|
||||
display: flex; align-items: center; padding: 0 8px; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
|
||||
border: none; background: none; cursor: pointer; padding: 6px 0;
|
||||
transition: all 0.2s; position: relative;
|
||||
}
|
||||
.tab-item .tab-icon-wrap {
|
||||
width: 44px; height: 44px; border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: all 0.25s; position: relative;
|
||||
}
|
||||
.tab-item.active .tab-icon-wrap {
|
||||
background: var(--primary-light); transform: translateY(-6px);
|
||||
box-shadow: 0 4px 12px rgba(79,110,247,0.25);
|
||||
}
|
||||
.tab-item.active .tab-icon-wrap::after {
|
||||
content: ''; position: absolute; bottom: -2px;
|
||||
width: 20px; height: 3px; border-radius: 3px; background: var(--primary);
|
||||
}
|
||||
.tab-item .tab-label { font-size: 10px; font-weight: 500; color: var(--text-3); transition: color 0.2s; }
|
||||
.tab-item.active .tab-label { color: var(--primary); font-weight: 600; }
|
||||
|
||||
/* 通用 */
|
||||
.card {
|
||||
background: var(--card); border-radius: var(--radius-lg);
|
||||
padding: 18px; box-shadow: var(--shadow-card); margin-bottom: 14px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.card:active { transform: scale(0.985); box-shadow: var(--shadow-lg); }
|
||||
.section-title {
|
||||
font-size: 16px; font-weight: 700; color: var(--text-1);
|
||||
margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.section-title .dot { width: 4px; height: 18px; border-radius: 2px; background: var(--primary); }
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; padding: 3px 10px;
|
||||
border-radius: 20px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.tag-success { background: #E6F9F2; color: #0D8A5E; }
|
||||
.tag-warning { background: #FFF4E5; color: #D67E0B; }
|
||||
.tag-danger { background: #FEE9E9; color: #D53131; }
|
||||
.tag-info { background: var(--primary-light); color: var(--primary); }
|
||||
|
||||
/* 问候 */
|
||||
.greeting { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 14px; }
|
||||
.greeting-left .hi { font-size: 13px; color: var(--text-3); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
|
||||
.greeting-left .name { font-size: 22px; font-weight: 800; color: var(--text-1); }
|
||||
.notify-btn {
|
||||
width: 44px; height: 44px; border-radius: 14px;
|
||||
background: var(--card); border: 1px solid var(--divider);
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
position: relative; box-shadow: var(--shadow-card);
|
||||
}
|
||||
.notify-dot {
|
||||
position: absolute; top: 8px; right: 8px;
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--accent-1); border: 2px solid #fff;
|
||||
}
|
||||
|
||||
/* 健康概览 */
|
||||
.overview-card {
|
||||
background: linear-gradient(145deg, #3A54E8 0%, #5B74F7 30%, #7D9AFF 100%);
|
||||
border-radius: var(--radius-lg); padding: 20px 16px; color: #fff;
|
||||
margin-bottom: 16px; position: relative; overflow: hidden;
|
||||
box-shadow: 0 8px 25px rgba(58,84,232,0.3);
|
||||
}
|
||||
.overview-card::before {
|
||||
content: ''; position: absolute; width: 200px; height: 200px;
|
||||
border-radius: 50%; background: rgba(255,255,255,0.06); top: -60px; right: -60px;
|
||||
}
|
||||
.overview-card::after {
|
||||
content: ''; position: absolute; width: 120px; height: 120px;
|
||||
border-radius: 50%; background: rgba(255,255,255,0.04); bottom: -40px; left: -30px;
|
||||
}
|
||||
.overview-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 18px; position: relative; z-index: 1;
|
||||
}
|
||||
.overview-header .title {
|
||||
font-size: 15px; font-weight: 600; opacity: 0.95;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.overview-header .heart-icon {
|
||||
width: 28px; height: 28px; background: rgba(255,255,255,0.2);
|
||||
border-radius: 8px; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.overview-header .time {
|
||||
font-size: 11px; opacity: 0.65; background: rgba(255,255,255,0.15);
|
||||
padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.overview-metrics {
|
||||
display: flex; align-items: center; justify-content: space-around; position: relative; z-index: 1;
|
||||
}
|
||||
.metric-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.metric-icon-wrap {
|
||||
width: 40px; height: 40px; border-radius: 12px;
|
||||
background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.metric-value { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
|
||||
.metric-sub { font-size: 13px; font-weight: 500; opacity: 0.8; }
|
||||
.metric-unit { font-size: 10px; opacity: 0.55; font-weight: 500; margin-top: 2px; }
|
||||
.metric-divider { width: 1px; height: 90px; background: rgba(255,255,255,0.15); }
|
||||
|
||||
/* 快捷操作 */
|
||||
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
|
||||
.quick-action {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||||
padding: 14px 4px; background: var(--card); border-radius: var(--radius);
|
||||
border: none; cursor: pointer; box-shadow: var(--shadow-card);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.quick-action:active { transform: scale(0.94); box-shadow: var(--shadow-lg); }
|
||||
.quick-action .qa-icon {
|
||||
width: 46px; height: 46px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.qa-icon.bp { background: #FEE9E9; }
|
||||
.qa-icon.med { background: #FFF4E5; }
|
||||
.qa-icon.chat { background: #E6F0FF; }
|
||||
.qa-icon.report { background: #F3E8FF; }
|
||||
.qa-icon.calendar { background: #E6F9F2; }
|
||||
.qa-icon.followup { background: #FFF0F5; }
|
||||
.qa-icon.diet { background: #F0FDF4; }
|
||||
.qa-icon.device { background: #EFF6FF; }
|
||||
.quick-action .qa-label { font-size: 11px; color: var(--text-2); font-weight: 600; }
|
||||
|
||||
/* 小贴士 */
|
||||
.tip-card {
|
||||
background: linear-gradient(135deg, #FFFDF5, #FFF8EC);
|
||||
border: 1px solid #FDE8B3; border-radius: var(--radius);
|
||||
padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
|
||||
}
|
||||
.tip-card .tip-bulb { flex-shrink: 0; margin-top: 2px; }
|
||||
.tip-card .tip-body { flex: 1; }
|
||||
.tip-card .tip-label {
|
||||
font-size: 11px; color: #B7791F; font-weight: 700; margin-bottom: 4px;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.tip-card .tip-label .refresh { margin-left: auto; font-size: 11px; color: #D69E2E; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 3px; }
|
||||
.tip-card .tip-text { font-size: 13px; color: #7B3F00; line-height: 1.6; }
|
||||
|
||||
/* 健康中心网格 */
|
||||
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
|
||||
.health-card {
|
||||
background: var(--card); border-radius: var(--radius); padding: 18px 12px;
|
||||
border: none; cursor: pointer; box-shadow: var(--shadow-card);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||||
text-align: center; transition: all 0.2s; position: relative; overflow: hidden;
|
||||
}
|
||||
.health-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0.7; }
|
||||
.health-card.bp::after { background: var(--accent-1); }
|
||||
.health-card.hr::after { background: var(--accent-2); }
|
||||
.health-card.sugar::after { background: var(--accent-4); }
|
||||
.health-card.spo2::after { background: var(--accent-5); }
|
||||
.health-card.weight::after { background: var(--accent-3); }
|
||||
.health-card.steps::after { background: #6366F1; }
|
||||
.health-card:active { transform: scale(0.95); }
|
||||
.health-card .hc-icon { width: 50px; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
|
||||
.health-card .hc-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
|
||||
.health-card .hc-desc { font-size: 11px; color: var(--text-3); }
|
||||
.health-card .hc-arrow {
|
||||
width: 22px; height: 22px; border-radius: 50%; background: var(--bg);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--text-3); margin-top: 2px;
|
||||
}
|
||||
.health-card .hc-arrow svg { width: 10px; height: 10px; }
|
||||
|
||||
/* 健康入口链接 */
|
||||
.quick-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
|
||||
.quick-link {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 16px;
|
||||
background: var(--card); border-radius: var(--radius); border: none;
|
||||
cursor: pointer; box-shadow: var(--shadow-card); font-size: 14px;
|
||||
font-weight: 600; color: var(--text-1); transition: all 0.15s;
|
||||
}
|
||||
.quick-link:active { background: #FAFBFC; transform: scale(0.99); }
|
||||
.quick-link .ql-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.quick-link .ql-arrow { margin-left: auto; color: var(--text-3); }
|
||||
|
||||
/* 服务页 */
|
||||
.services-grid { display: flex; flex-direction: column; gap: 12px; }
|
||||
.service-card {
|
||||
display: flex; align-items: center; gap: 16px; padding: 20px 18px;
|
||||
background: var(--card); border-radius: var(--radius-lg); border: none;
|
||||
cursor: pointer; box-shadow: var(--shadow-card); transition: all 0.2s; text-align: left;
|
||||
}
|
||||
.service-card:active { transform: scale(0.98); }
|
||||
.service-card .sc-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.service-card .sc-info { flex: 1; }
|
||||
.service-card .sc-title { font-size: 16px; font-weight: 700; color: var(--text-1); margin-bottom: 4px; }
|
||||
.service-card .sc-desc { font-size: 12px; color: var(--text-3); }
|
||||
.service-card .sc-arrow {
|
||||
width: 34px; height: 34px; border-radius: 50%; background: var(--bg);
|
||||
display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 个人中心 */
|
||||
.profile-header-card {
|
||||
background: var(--primary-gradient); border-radius: var(--radius-lg);
|
||||
padding: 20px; display: flex; align-items: center; gap: 14px;
|
||||
margin-bottom: 16px; box-shadow: 0 6px 24px rgba(79,110,247,0.3); cursor: pointer;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 56px; height: 56px; border-radius: 18px;
|
||||
background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24px; font-weight: 800; color: #fff; flex-shrink: 0; backdrop-filter: blur(4px);
|
||||
}
|
||||
.profile-info { flex: 1; }
|
||||
.profile-info .pi-name { font-size: 18px; font-weight: 700; color: #fff; }
|
||||
.profile-info .pi-phone { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }
|
||||
.profile-header-card .pi-arrow { color: rgba(255,255,255,0.8); }
|
||||
|
||||
.stats-row {
|
||||
display: flex; background: var(--card); border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-card); padding: 16px 0; margin-bottom: 16px;
|
||||
}
|
||||
.stat-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
||||
.stat-col .stat-value { font-size: 18px; font-weight: 800; color: var(--text-1); }
|
||||
.stat-col .stat-label { font-size: 11px; color: var(--text-3); font-weight: 500; }
|
||||
.stat-sep { width: 1px; background: var(--divider); margin: 8px 0; }
|
||||
|
||||
.menu-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 16px; }
|
||||
.menu-item {
|
||||
display: flex; align-items: center; padding: 15px 18px;
|
||||
border: none; background: none; width: 100%; cursor: pointer;
|
||||
font-size: 14px; font-weight: 500; color: var(--text-1);
|
||||
transition: background 0.15s; text-align: left;
|
||||
}
|
||||
.menu-item:active { background: #FAFBFC; }
|
||||
.menu-item+.menu-item { border-top: 1px solid var(--divider); }
|
||||
.menu-item .mi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
|
||||
.menu-item .mi-arrow { margin-left: auto; color: var(--text-3); }
|
||||
.menu-item .mi-badge {
|
||||
margin-left: 8px; background: var(--accent-1); color: #fff;
|
||||
font-size: 10px; font-weight: 700; min-width: 20px; height: 20px;
|
||||
border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 6px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%; padding: 14px; border-radius: var(--radius);
|
||||
border: 1.5px solid #FDD; background: #FFF; color: var(--accent-1);
|
||||
font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.logout-btn:active { background: #FFF5F5; }
|
||||
|
||||
/* 列表 */
|
||||
.list-item {
|
||||
display: flex; align-items: center; gap: 14px; padding: 16px;
|
||||
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card);
|
||||
margin-bottom: 10px; border: none; width: 100%; cursor: pointer;
|
||||
text-align: left; transition: all 0.15s;
|
||||
}
|
||||
.list-item:active { transform: scale(0.99); }
|
||||
.list-item .li-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.list-item .li-content { flex: 1; min-width: 0; }
|
||||
.list-item .li-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
|
||||
.list-item .li-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.list-item .li-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
|
||||
.list-item .li-time { font-size: 11px; color: var(--text-3); }
|
||||
.list-item .li-value { font-size: 15px; font-weight: 700; color: var(--text-1); }
|
||||
|
||||
/* Tab 切换 */
|
||||
.tab-content { display: none; }
|
||||
.tab-content.active { display: block; }
|
||||
|
||||
/* 设备 */
|
||||
.device-card {
|
||||
display: flex; align-items: center; gap: 14px; padding: 16px;
|
||||
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); margin-bottom: 10px;
|
||||
}
|
||||
.device-card .dc-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
|
||||
.device-card .dc-info { flex: 1; }
|
||||
.device-card .dc-name { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
|
||||
.device-card .dc-status { font-size: 12px; display: flex; align-items: center; gap: 4px; }
|
||||
.connected-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); display: inline-block; }
|
||||
|
||||
/* 页码 */
|
||||
.page-tag {
|
||||
position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
|
||||
font-size: 12px; color: var(--text-3); font-weight: 500;
|
||||
background: var(--card); padding: 4px 14px; border-radius: 12px;
|
||||
box-shadow: var(--shadow-card); z-index: 5;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.animate-in { animation: fadeInUp 0.35s ease-out; }
|
||||
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
|
||||
.pulse { animation: pulse 2s ease-in-out infinite; }
|
||||
|
||||
/* 用药 */
|
||||
.med-row { display: flex; align-items: center; justify-content: space-between; }
|
||||
.med-row+.med-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
|
||||
.med-left { display: flex; align-items: center; gap: 10px; }
|
||||
.med-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.med-info-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
|
||||
.med-info-dose { font-size: 11px; color: var(--text-3); margin-top: 2px; }
|
||||
|
||||
/* 趋势柱状图 */
|
||||
.trend-bars { display: flex; align-items: flex-end; gap: 8px; justify-content: center; height: 50px; }
|
||||
.trend-bar { width: 20px; border-radius: 4px; background: rgba(255,255,255,0.3); }
|
||||
.trend-bar.hi { background: rgba(255,255,255,0.45); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-frame">
|
||||
<div class="status-bar">
|
||||
<span>9:41</span>
|
||||
<div class="status-icons"><span>5G</span><span>▮▮▮▮</span><div class="status-dot"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 首页 ==================== -->
|
||||
<div class="tab-content active" id="page-home">
|
||||
<div class="scroll-area animate-in">
|
||||
<div class="greeting">
|
||||
<div class="greeting-left">
|
||||
<div class="hi">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||||
上午好
|
||||
</div>
|
||||
<div class="name">张建国</div>
|
||||
</div>
|
||||
<button class="notify-btn">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5A5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notify-dot"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 健康概览 -->
|
||||
<div class="overview-card">
|
||||
<div class="overview-header">
|
||||
<span class="title">
|
||||
<span class="heart-icon pulse">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="rgba(255,255,255,0.9)" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||
</span>
|
||||
健康概览
|
||||
</span>
|
||||
<span class="time">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
今天 08:30
|
||||
</span>
|
||||
</div>
|
||||
<div class="overview-metrics">
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon-wrap">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/><polyline points="12 7 12 13 15 15"/></svg>
|
||||
</div>
|
||||
<div class="metric-value">128</div>
|
||||
<div class="metric-sub">/82</div>
|
||||
<div class="metric-unit">血压 mmHg</div>
|
||||
</div>
|
||||
<div class="metric-divider"></div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon-wrap">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
</div>
|
||||
<div class="metric-value">72</div>
|
||||
<div class="metric-unit">心率 bpm</div>
|
||||
</div>
|
||||
<div class="metric-divider"></div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon-wrap">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||||
</div>
|
||||
<div class="metric-value">5.6</div>
|
||||
<div class="metric-unit">血糖 mmol/L</div>
|
||||
</div>
|
||||
<div class="metric-divider"></div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon-wrap">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
</div>
|
||||
<div class="metric-value">98</div>
|
||||
<div class="metric-unit">血氧 %</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷功能 -->
|
||||
<div class="section-title"><span class="dot"></span>快捷功能</div>
|
||||
<div class="quick-actions">
|
||||
<button class="quick-action" onclick="showPage('bp-list')">
|
||||
<div class="qa-icon bp"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/><polyline points="12 7 12 13 15 15"/></svg></div>
|
||||
<span class="qa-label">血压</span>
|
||||
</button>
|
||||
<button class="quick-action">
|
||||
<div class="qa-icon med"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#D67E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="4"/><path d="M10 9v6M14 9v6M8 12h8"/></svg></div>
|
||||
<span class="qa-label">用药</span>
|
||||
</button>
|
||||
<button class="quick-action">
|
||||
<div class="qa-icon chat"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4F6EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="10" x2="15" y2="10"/><line x1="12" y1="7" x2="12" y2="13"/></svg></div>
|
||||
<span class="qa-label">问诊</span>
|
||||
</button>
|
||||
<button class="quick-action">
|
||||
<div class="qa-icon report"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#845EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
|
||||
<span class="qa-label">报告</span>
|
||||
</button>
|
||||
<button class="quick-action">
|
||||
<div class="qa-icon calendar"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#20C997" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
|
||||
<span class="qa-label">日历</span>
|
||||
</button>
|
||||
<button class="quick-action">
|
||||
<div class="qa-icon followup"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F06595" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-2.5L14 13l-2-6-3 6.5L7 10H5"/><rect x="2" y="2" width="20" height="20" rx="3"/></svg></div>
|
||||
<span class="qa-label">复查</span>
|
||||
</button>
|
||||
<button class="quick-action">
|
||||
<div class="qa-icon diet"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
|
||||
<span class="qa-label">饮食</span>
|
||||
</button>
|
||||
<button class="quick-action">
|
||||
<div class="qa-icon device"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#339AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/><path d="M9 6h6"/></svg></div>
|
||||
<span class="qa-label">设备</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 健康小贴士 -->
|
||||
<div class="tip-card">
|
||||
<div class="tip-bulb">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>
|
||||
</div>
|
||||
<div class="tip-body">
|
||||
<div class="tip-label">
|
||||
每日健康提醒
|
||||
<span class="refresh">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#D69E2E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
|
||||
换一条
|
||||
</span>
|
||||
</div>
|
||||
<div class="tip-text">每天测量血压的最佳时间是早晨起床后1小时内、服药前。保持规律监测，记录数据变化趋势。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日用药 -->
|
||||
<div class="card">
|
||||
<div class="section-title" style="margin-bottom:8px;"><span class="dot"></span>今日用药</div>
|
||||
<div class="med-row">
|
||||
<div class="med-left">
|
||||
<div class="med-icon" style="background:#FFF4E5;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#D67E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="4"/><path d="M10 9v6M14 9v6M8 12h8"/></svg>
|
||||
</div>
|
||||
<div><div class="med-info-name">阿司匹林肠溶片</div><div class="med-info-dose">每日1次 · 100mg</div></div>
|
||||
</div>
|
||||
<span class="tag tag-success">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#0D8A5E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
已完成
|
||||
</span>
|
||||
</div>
|
||||
<div class="med-row">
|
||||
<div class="med-left">
|
||||
<div class="med-icon" style="background:#E6F0FF;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4F6EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="4"/><path d="M10 9v6M14 9v6M8 12h8"/></svg>
|
||||
</div>
|
||||
<div><div class="med-info-name">氯吡格雷</div><div class="med-info-dose">每日1次 · 75mg</div></div>
|
||||
</div>
|
||||
<span class="tag tag-warning">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#D67E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
待服用
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 健康中心 ==================== -->
|
||||
<div class="tab-content" id="page-health">
|
||||
<div class="page-header">健康中心</div>
|
||||
<div class="scroll-area animate-in">
|
||||
<div class="section-title" style="margin-top:4px;"><span class="dot"></span>健康指标</div>
|
||||
<div class="health-grid">
|
||||
<button class="health-card bp" onclick="showPage('bp-list')">
|
||||
<div class="hc-icon" style="background:#FEE9E9;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/><polyline points="12 7 12 13 15 15"/></svg>
|
||||
</div>
|
||||
<div class="hc-title">血压</div><div class="hc-desc">记录·趋势</div>
|
||||
<div class="hc-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
<button class="health-card hr">
|
||||
<div class="hc-icon" style="background:#FFF4E5;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
</div>
|
||||
<div class="hc-title">心率</div><div class="hc-desc">记录·趋势</div>
|
||||
<div class="hc-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
<button class="health-card sugar">
|
||||
<div class="hc-icon" style="background:#F3E8FF;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#845EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||||
</div>
|
||||
<div class="hc-title">血糖</div><div class="hc-desc">记录·趋势</div>
|
||||
<div class="hc-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
<button class="health-card spo2">
|
||||
<div class="hc-icon" style="background:#E6F0FF;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#339AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
</div>
|
||||
<div class="hc-title">血氧</div><div class="hc-desc">记录·趋势</div>
|
||||
<div class="hc-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
<button class="health-card weight">
|
||||
<div class="hc-icon" style="background:#E6F9F2;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#20C997" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
|
||||
</div>
|
||||
<div class="hc-title">体重</div><div class="hc-desc">记录·趋势</div>
|
||||
<div class="hc-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
<button class="health-card steps">
|
||||
<div class="hc-icon" style="background:#EEF2FF;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 4h3l3 7-4 2v7H9v-7l-4-2 3-7h3"/><circle cx="12" cy="4" r="2"/></svg>
|
||||
</div>
|
||||
<div class="hc-title">步数</div><div class="hc-desc">记录·趋势</div>
|
||||
<div class="hc-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="section-title"><span class="dot"></span>健康工具</div>
|
||||
<div class="quick-links">
|
||||
<button class="quick-link">
|
||||
<div class="ql-icon" style="background:#FFF0E0;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
</div>
|
||||
健康日历
|
||||
<span class="ql-arrow">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quick-link">
|
||||
<div class="ql-icon" style="background:#FFF4E5;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#D67E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="4"/><path d="M10 9v6M14 9v6M8 12h8"/></svg>
|
||||
</div>
|
||||
服药管理
|
||||
<span class="ql-arrow">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button class="quick-link">
|
||||
<div class="ql-icon" style="background:#E6F9F2;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#20C997" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||||
</div>
|
||||
运动饮食
|
||||
<span class="ql-arrow">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 服务 ==================== -->
|
||||
<div class="tab-content" id="page-services">
|
||||
<div class="page-header">健康服务</div>
|
||||
<div class="scroll-area animate-in">
|
||||
<div class="services-grid" style="margin-top:4px;">
|
||||
<button class="service-card">
|
||||
<div class="sc-icon" style="background:#E6F0FF;">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4F6EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</div>
|
||||
<div class="sc-info"><div class="sc-title">在线问诊</div><div class="sc-desc">图文咨询专业医生，获得健康指导</div></div>
|
||||
<div class="sc-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
<button class="service-card">
|
||||
<div class="sc-icon" style="background:#F3E8FF;">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#845EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<div class="sc-info"><div class="sc-title">报告解读</div><div class="sc-desc">上传检查报告，权威医生解读</div></div>
|
||||
<div class="sc-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
<button class="service-card">
|
||||
<div class="sc-icon" style="background:#FEE9E9;">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-2.5L14 13l-2-6-3 6.5L7 10H5"/><rect x="2" y="2" width="20" height="20" rx="3"/></svg>
|
||||
</div>
|
||||
<div class="sc-info"><div class="sc-title">复查管理</div><div class="sc-desc">智能规划复查计划，准时提醒</div></div>
|
||||
<div class="sc-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="section-title" style="margin-top:20px;"><span class="dot"></span>最近记录</div>
|
||||
<button class="list-item">
|
||||
<div class="li-icon" style="background:#E6F0FF;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4F6EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</div>
|
||||
<div class="li-content"><div class="li-title">王医生 心血管内科</div><div class="li-sub">最近血压控制得怎么样？...</div></div>
|
||||
<div class="li-right"><span class="li-time">今天 10:30</span><span class="tag tag-info">进行中</span></div>
|
||||
</button>
|
||||
<button class="list-item">
|
||||
<div class="li-icon" style="background:#F3E8FF;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#845EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
</div>
|
||||
<div class="li-content"><div class="li-title">心电图报告</div><div class="li-sub">2024年5月15日 · 正常</div></div>
|
||||
<div class="li-right"><span class="li-time">5月15日</span><span class="tag tag-success">已解读</span></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 我的 ==================== -->
|
||||
<div class="tab-content" id="page-profile">
|
||||
<div class="page-header">
|
||||
我的
|
||||
<button class="header-right" style="display:flex;align-items:center;gap:2px;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4F6EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="scroll-area animate-in">
|
||||
<div class="profile-header-card">
|
||||
<div class="profile-avatar">张</div>
|
||||
<div class="profile-info"><div class="pi-name">张建国</div><div class="pi-phone">138****8888</div></div>
|
||||
<div class="pi-arrow">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-col">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4F6EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
|
||||
<div class="stat-value">172cm</div><div class="stat-label">身高</div>
|
||||
</div>
|
||||
<div class="stat-sep"></div>
|
||||
<div class="stat-col">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#20C997" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="2"/><path d="M10 22V10l-4 4"/><path d="M14 22V10l4 4"/></svg>
|
||||
<div class="stat-value">68kg</div><div class="stat-label">体重</div>
|
||||
</div>
|
||||
<div class="stat-sep"></div>
|
||||
<div class="stat-col">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>
|
||||
<div class="stat-value">冠心病</div><div class="stat-label">病史</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-list">
|
||||
<button class="menu-item">
|
||||
<div class="mi-icon" style="background:#FFF4E5;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#D67E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="4"/><path d="M10 9v6M14 9v6M8 12h8"/></svg>
|
||||
</div>
|
||||
我的用药
|
||||
<span class="mi-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
|
||||
</button>
|
||||
<button class="menu-item">
|
||||
<div class="mi-icon" style="background:#EEF2FF;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||||
</div>
|
||||
设备管理
|
||||
<span class="mi-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
|
||||
</button>
|
||||
<button class="menu-item">
|
||||
<div class="mi-icon" style="background:#F3E8FF;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#845EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</div>
|
||||
设置
|
||||
<span class="mi-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
|
||||
</button>
|
||||
<button class="menu-item">
|
||||
<div class="mi-icon" style="background:#E6F9F2;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#20C997" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
||||
</div>
|
||||
关于
|
||||
<span class="mi-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="logout-btn">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 设备绑定 ==================== -->
|
||||
<div class="tab-content" id="page-device">
|
||||
<div class="page-header">
|
||||
<button class="back-btn" onclick="showPage('profile')">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
设备管理
|
||||
<button class="header-right">+ 添加</button>
|
||||
</div>
|
||||
<div class="scroll-area animate-in">
|
||||
<div class="device-card">
|
||||
<div class="dc-icon" style="background:#EEF2FF;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
</div>
|
||||
<div class="dc-info"><div class="dc-name">智能血压计 BP-200</div><div class="dc-status"><span class="connected-dot"></span> 已连接 · 电量 85%</div></div>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9BA0B4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="device-card">
|
||||
<div class="dc-icon" style="background:#E6F9F2;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#20C997" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||||
</div>
|
||||
<div class="dc-info"><div class="dc-name">心率监测手环 H3</div><div class="dc-status"><span class="connected-dot"></span> 已连接 · 电量 62%</div></div>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9BA0B4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="device-card" style="opacity:0.6;">
|
||||
<div class="dc-icon" style="background:#F3E8FF;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#845EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||||
</div>
|
||||
<div class="dc-info"><div class="dc-name">血糖仪 G-100</div><div class="dc-status" style="color:#9BA0B4;">未绑定</div></div>
|
||||
<span style="color:#4F6EF7;font-size:13px;font-weight:600;">绑定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 血压记录列表 ==================== -->
|
||||
<div class="tab-content" id="page-bp-list">
|
||||
<div class="page-header">
|
||||
<button class="back-btn" onclick="showPage('home')">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
血压记录
|
||||
<button class="header-right">+ 记录</button>
|
||||
</div>
|
||||
<div class="scroll-area animate-in">
|
||||
<div class="overview-card" style="background:linear-gradient(145deg,#4F6EF7,#6C8CFF);box-shadow:0 6px 20px rgba(79,110,247,0.25);">
|
||||
<div style="display:flex;align-items:center;gap:12px;position:relative;z-index:1;">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:11px;opacity:0.7;margin-bottom:4px;">本月平均</div>
|
||||
<div style="font-size:28px;font-weight:800;">126/81</div>
|
||||
<div style="font-size:10px;opacity:0.55;">mmHg</div>
|
||||
</div>
|
||||
<div style="width:1px;height:60px;background:rgba(255,255,255,0.2);"></div>
|
||||
<div style="flex:1;text-align:center;">
|
||||
<div style="font-size:11px;opacity:0.7;margin-bottom:8px;">近7天趋势</div>
|
||||
<div class="trend-bars">
|
||||
<div class="trend-bar" style="height:30px;"></div>
|
||||
<div class="trend-bar" style="height:22px;"></div>
|
||||
<div class="trend-bar hi" style="height:40px;"></div>
|
||||
<div class="trend-bar" style="height:28px;"></div>
|
||||
<div class="trend-bar" style="height:35px;"></div>
|
||||
<div class="trend-bar" style="height:20px;"></div>
|
||||
<div class="trend-bar" style="height:32px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title"><span class="dot"></span>历史记录</div>
|
||||
<button class="list-item">
|
||||
<div class="li-icon" style="background:#FEE9E9;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/><polyline points="12 7 12 13 15 15"/></svg>
|
||||
</div>
|
||||
<div class="li-content"><div class="li-title">血压</div><div class="li-sub">早晨 · 服药前测量</div></div>
|
||||
<div class="li-right"><span class="li-time">今天 08:30</span><span class="li-value">128/82</span><span class="tag tag-success">正常</span></div>
|
||||
</button>
|
||||
<button class="list-item">
|
||||
<div class="li-icon" style="background:#FEE9E9;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/><polyline points="12 7 12 13 15 15"/></svg>
|
||||
</div>
|
||||
<div class="li-content"><div class="li-title">血压</div><div class="li-sub">晚上 · 服药后测量</div></div>
|
||||
<div class="li-right"><span class="li-time">昨天 20:00</span><span class="li-value">135/85</span><span class="tag tag-warning">偏高</span></div>
|
||||
</button>
|
||||
<button class="list-item">
|
||||
<div class="li-icon" style="background:#FEE9E9;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/><polyline points="12 7 12 13 15 15"/></svg>
|
||||
</div>
|
||||
<div class="li-content"><div class="li-title">血压</div><div class="li-sub">早晨 · 服药前测量</div></div>
|
||||
<div class="li-right"><span class="li-time">5月20日</span><span class="li-value">125/79</span><span class="tag tag-success">正常</span></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<div class="tab-bar">
|
||||
<button class="tab-item active" onclick="showPage('home')">
|
||||
<span class="tab-icon-wrap">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5A5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||||
</span>
|
||||
<span class="tab-label">首页</span>
|
||||
</button>
|
||||
<button class="tab-item" onclick="showPage('health')">
|
||||
<span class="tab-icon-wrap">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5A5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||
</span>
|
||||
<span class="tab-label">健康</span>
|
||||
</button>
|
||||
<button class="tab-item" onclick="showPage('services')">
|
||||
<span class="tab-icon-wrap">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5A5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</span>
|
||||
<span class="tab-label">服务</span>
|
||||
</button>
|
||||
<button class="tab-item" onclick="showPage('profile')">
|
||||
<span class="tab-icon-wrap">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5A5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-tag">首页</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showPage(pageName) {
|
||||
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
|
||||
var target = document.getElementById('page-' + pageName);
|
||||
if (target) target.classList.add('active');
|
||||
var tabMap = { home:0, health:1, services:2, profile:3 };
|
||||
var idx = tabMap[pageName];
|
||||
document.querySelectorAll('.tab-item').forEach(function(el, i) { el.classList.toggle('active', i===idx); });
|
||||
var pageNames = { home:'首页', health:'健康中心', services:'健康服务', profile:'我的', 'bp-list':'血压记录', device:'设备管理' };
|
||||
var tag = document.querySelector('.page-tag');
|
||||
if (tag) tag.textContent = pageNames[pageName] || '';
|
||||
var scrollArea = target ? target.querySelector('.scroll-area') : null;
|
||||
if (scrollArea) scrollArea.scrollTop = 0;
|
||||
}
|
||||
document.querySelectorAll('.quick-action').forEach(function(btn, i) {
|
||||
btn.addEventListener('click', function() { var a=['bp-list',null,null,null,null,null,null,'device']; if(a[i]) showPage(a[i]); });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user