docs(mp): 新增小程序全页面 HTML 原型 + UI 优化指南
- 新增 12 个核心页面原型（登录/首页/咨询/预约/商城/健康等） - 新增医生端分包原型（核心 + 临床两个分包） - 新增 AI 客服对话页原型 - 新增 MP UI 优化指南文档 - 更新 wiki 基础设施和小程序文档
This commit is contained in:
iven
206
docs/prototypes/mp/01-tabs/health.html
Normal file
206
docs/prototypes/mp/01-tabs/health.html
Normal file
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康 - HMS 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-bar__title">健康</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 1. User Greeting Card -->
|
||||
<div class="section">
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-sm">
|
||||
<div>
|
||||
<div style="font-size: var(--font-h2); font-weight: 600; color: var(--tx);">张伟, 上午好!</div>
|
||||
<div style="font-size: var(--font-body); color: var(--tx2); margin-top: 4px;">今日健康评分 85分</div>
|
||||
</div>
|
||||
<div style="font-size: 48px; line-height: 1;">😊</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress__bar" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Stat Grid (2x2) -->
|
||||
<div class="section">
|
||||
<div class="stat-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||||
<div class="stat-card stat-card--primary">
|
||||
<div class="stat-card__value">68.5</div>
|
||||
<div class="stat-card__label">体重 kg</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card--success">
|
||||
<div class="stat-card__value">23.1</div>
|
||||
<div class="stat-card__label">BMI 正常</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card--warning">
|
||||
<div class="stat-card__value">6,842</div>
|
||||
<div class="stat-card__label">步数 步</div>
|
||||
</div>
|
||||
<div class="stat-card" style="">
|
||||
<div class="stat-card__value" style="color: var(--info)">7.2</div>
|
||||
<div class="stat-card__label">睡眠 小时</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 今日提醒 Section -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">今日提醒</div>
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div class="list-item card--pressable">
|
||||
<div class="list-item__icon list-item__icon--amber">💊</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">用药提醒</div>
|
||||
<div class="list-item__desc">降压药 每日一次 · 08:00</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">待服用</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item card--pressable">
|
||||
<div class="list-item__icon list-item__icon--blue">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">复查提醒</div>
|
||||
<div class="list-item__desc">血常规检查 · 2026-05-20</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--info">即将到期</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. 体征趋势 Section -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">体征趋势</div>
|
||||
<div class="section-title__action">查看 ></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div style="font-size: var(--font-body-sm); color: var(--tx3); margin-bottom: var(--gap-sm);">近7天血压趋势</div>
|
||||
<!-- CSS Bar Chart -->
|
||||
<div style="display: flex; align-items: flex-end; justify-content: space-between; height: 100px; gap: 8px; padding: 0 4px;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px;">
|
||||
<div style="width: 100%; background: var(--pri-light); border-radius: 4px 4px 0 0; height: 60px;"></div>
|
||||
<div style="width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; height: 40px;"></div>
|
||||
<div style="font-size: 10px; color: var(--tx3); margin-top: 4px;">周一</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px;">
|
||||
<div style="width: 100%; background: var(--pri-light); border-radius: 4px 4px 0 0; height: 55px;"></div>
|
||||
<div style="width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; height: 38px;"></div>
|
||||
<div style="font-size: 10px; color: var(--tx3); margin-top: 4px;">周二</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px;">
|
||||
<div style="width: 100%; background: var(--pri-light); border-radius: 4px 4px 0 0; height: 65px;"></div>
|
||||
<div style="width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; height: 42px;"></div>
|
||||
<div style="font-size: 10px; color: var(--tx3); margin-top: 4px;">周三</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px;">
|
||||
<div style="width: 100%; background: var(--pri-light); border-radius: 4px 4px 0 0; height: 58px;"></div>
|
||||
<div style="width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; height: 36px;"></div>
|
||||
<div style="font-size: 10px; color: var(--tx3); margin-top: 4px;">周四</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px;">
|
||||
<div style="width: 100%; background: var(--pri-light); border-radius: 4px 4px 0 0; height: 52px;"></div>
|
||||
<div style="width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; height: 34px;"></div>
|
||||
<div style="font-size: 10px; color: var(--tx3); margin-top: 4px;">周五</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px;">
|
||||
<div style="width: 100%; background: var(--pri-light); border-radius: 4px 4px 0 0; height: 60px;"></div>
|
||||
<div style="width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; height: 40px;"></div>
|
||||
<div style="font-size: 10px; color: var(--tx3); margin-top: 4px;">周六</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; gap: 2px;">
|
||||
<div style="width: 100%; background: var(--pri-light); border-radius: 4px 4px 0 0; height: 56px;"></div>
|
||||
<div style="width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; height: 37px;"></div>
|
||||
<div style="font-size: 10px; color: var(--tx3); margin-top: 4px;">周日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row mt-sm" style="gap: var(--gap-md); justify-content: center;">
|
||||
<div class="flex-row" style="gap: 4px;">
|
||||
<div style="width: 12px; height: 12px; background: var(--pri-light); border-radius: 2px;"></div>
|
||||
<span style="font-size: 11px; color: var(--tx3);">收缩压</span>
|
||||
</div>
|
||||
<div class="flex-row" style="gap: 4px;">
|
||||
<div style="width: 12px; height: 12px; background: var(--pri); border-radius: 2px;"></div>
|
||||
<span style="font-size: 11px; color: var(--tx3);">舒张压</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 7. 最新报告 Section -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">最新报告</div>
|
||||
<div class="section-title__action">全部 ></div>
|
||||
</div>
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<div class="list-item__title">血常规检查</div>
|
||||
<span class="tag tag--success">正常</span>
|
||||
</div>
|
||||
<div class="list-item__desc">2026-05-10</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">🏠</div>
|
||||
<div class="tab-bar__label">首页</div>
|
||||
</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">
|
||||
<div class="tab-bar__icon">❤️</div>
|
||||
<div class="tab-bar__label">健康</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">💬</div>
|
||||
<div class="tab-bar__label">消息</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">👤</div>
|
||||
<div class="tab-bar__label">我的</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
173
docs/prototypes/mp/01-tabs/home.html
Normal file
173
docs/prototypes/mp/01-tabs/home.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>首页 - HMS 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-bar__title">首页</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 1. Banner / Swiper -->
|
||||
<div class="section">
|
||||
<div class="banner">
|
||||
<div class="banner__content">
|
||||
<div class="banner__title">关注您的健康每一天</div>
|
||||
<div class="banner__subtitle">全面健康管理，从今天开始</div>
|
||||
<div class="banner__dots">
|
||||
<div class="banner__dot banner__dot--active"></div>
|
||||
<div class="banner__dot"></div>
|
||||
<div class="banner__dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Quick Entry Grid -->
|
||||
<div class="section">
|
||||
<div class="quick-grid">
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--orange">📊</div>
|
||||
<div class="quick-item__label">健康档案</div>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--green">📅</div>
|
||||
<div class="quick-item__label">在线预约</div>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--blue">💊</div>
|
||||
<div class="quick-item__label">用药提醒</div>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--amber">📈</div>
|
||||
<div class="quick-item__label">趋势分析</div>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--orange">🏥</div>
|
||||
<div class="quick-item__label">体检报告</div>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--green">💬</div>
|
||||
<div class="quick-item__label">在线咨询</div>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--blue">🛒</div>
|
||||
<div class="quick-item__label">积分商城</div>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--amber">📋</div>
|
||||
<div class="quick-item__label">更多服务</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 健康概览 Section -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">健康概览</div>
|
||||
<div class="section-title__action">查看更多 ></div>
|
||||
</div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card stat-card--primary">
|
||||
<div class="stat-card__value">128/82</div>
|
||||
<div class="stat-card__label">血压 mmHg</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card--success">
|
||||
<div class="stat-card__value">72</div>
|
||||
<div class="stat-card__label">心率 次/分</div>
|
||||
</div>
|
||||
<div class="stat-card" style="">
|
||||
<div class="stat-card__value" style="color: var(--info)">5.6</div>
|
||||
<div class="stat-card__label">血糖 mmol/L</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. 近期预约 Section -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">近期预约</div>
|
||||
<div class="section-title__action">全部 ></div>
|
||||
</div>
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<div class="list-item__title">张三 主任医师 · 心内科</div>
|
||||
<span class="tag tag--success">已确认</span>
|
||||
</div>
|
||||
<div class="list-item__desc">2026-05-18 周一 09:30</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 7. 健康文章 Section -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">健康文章</div>
|
||||
<div class="section-title__action">更多 ></div>
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div class="card card--pressable">
|
||||
<div class="list-item__title">高血压日常管理指南</div>
|
||||
<div class="list-item__desc mt-xs">5分钟阅读</div>
|
||||
</div>
|
||||
<div class="card card--pressable">
|
||||
<div class="list-item__title">糖尿病患者饮食建议</div>
|
||||
<div class="list-item__desc mt-xs">3分钟阅读</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item tab-bar__item--active">
|
||||
<div class="tab-bar__icon">🏠</div>
|
||||
<div class="tab-bar__label">首页</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">❤️</div>
|
||||
<div class="tab-bar__label">健康</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">💬</div>
|
||||
<div class="tab-bar__label">消息</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">👤</div>
|
||||
<div class="tab-bar__label">我的</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
149
docs/prototypes/mp/01-tabs/messages.html
Normal file
149
docs/prototypes/mp/01-tabs/messages.html
Normal file
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>消息 - HMS 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-bar__title">消息</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 1. Search Section -->
|
||||
<div class="section">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar__icon">🔍</div>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索消息...">
|
||||
</div>
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">系统通知</div>
|
||||
<div class="filter-pill">预约提醒</div>
|
||||
<div class="filter-pill">健康提醒</div>
|
||||
<div class="filter-pill">咨询回复</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Message List -->
|
||||
<div class="section">
|
||||
<div class="card-list">
|
||||
|
||||
<!-- Message 1: 预约确认 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">预约确认通知</div>
|
||||
<div class="list-item__desc">您的预约已确认，请按时就诊</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已确认</span>
|
||||
<span class="time-label">2分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2: 用药提醒 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--amber">💊</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">用药提醒</div>
|
||||
<div class="list-item__desc">今日降压药已到服用时间</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">待服用</span>
|
||||
<span class="time-label">1小时前</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 3: 检查报告 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--blue">📊</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">检查报告</div>
|
||||
<div class="list-item__desc">您的血常规报告已出</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--info">查看</span>
|
||||
<span class="time-label">昨天</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 4: 咨询回复 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--orange">💬</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">咨询回复</div>
|
||||
<div class="list-item__desc">李医生回复了您的咨询</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--default">回复</span>
|
||||
<span class="time-label">昨天</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 5: 体检提醒 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--red">🏥</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">体检提醒</div>
|
||||
<div class="list-item__desc">您有一项体检即将到期</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">即将到期</span>
|
||||
<span class="time-label">3天前</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">🏠</div>
|
||||
<div class="tab-bar__label">首页</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">❤️</div>
|
||||
<div class="tab-bar__label">健康</div>
|
||||
</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">
|
||||
<div class="tab-bar__icon">💬</div>
|
||||
<div class="tab-bar__label">消息</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">👤</div>
|
||||
<div class="tab-bar__label">我的</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
194
docs/prototypes/mp/01-tabs/profile.html
Normal file
194
docs/prototypes/mp/01-tabs/profile.html
Normal file
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的 - HMS 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-bar__title">我的</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell" style="padding-bottom: 0;">
|
||||
|
||||
<!-- 1. User Profile Card -->
|
||||
<div class="section">
|
||||
<div class="card text-center" style="display: flex; flex-direction: column; align-items: center; padding: var(--gap-lg) var(--card-pad);">
|
||||
<div class="avatar avatar--lg" style="margin-bottom: var(--gap-sm);">张</div>
|
||||
<div style="font-size: var(--font-h1); font-weight: 600; color: var(--tx); margin-bottom: 4px;">张伟</div>
|
||||
<div style="font-size: var(--font-body-sm); color: var(--tx3); margin-bottom: var(--gap-sm);">138****6789</div>
|
||||
<div style="display: flex; gap: var(--gap-xs);">
|
||||
<span class="tag tag--success">已认证</span>
|
||||
<span class="tag tag--warning">VIP会员</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Points Card -->
|
||||
<div class="section">
|
||||
<div class="card" style="background: linear-gradient(135deg, var(--pri) 0%, var(--pri-dark) 100%); padding: var(--gap-md) var(--card-pad);">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<div>
|
||||
<div style="font-size: var(--font-body-sm); color: rgba(255,255,255,0.8); margin-bottom: 4px;">我的积分</div>
|
||||
<div style="font-size: var(--font-display); font-weight: 700; color: #fff; font-family: var(--font-serif); line-height: 1;">2,580</div>
|
||||
</div>
|
||||
<div style="font-size: var(--font-body-sm); color: rgba(255,255,255,0.9); display: flex; align-items: center; gap: 4px; cursor: pointer;">
|
||||
去兑换 >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3a. Menu Section: 健康管理 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">健康管理</div>
|
||||
</div>
|
||||
<div style="border-radius: var(--card-r); overflow: hidden; box-shadow: var(--shadow-sm);">
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">📋</div>
|
||||
<div class="menu-item__text">健康档案</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">📄</div>
|
||||
<div class="menu-item__text">体检报告</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">💊</div>
|
||||
<div class="menu-item__text">用药记录</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">🔬</div>
|
||||
<div class="menu-item__text">诊断记录</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3b. Menu Section: 透析管理 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">透析管理</div>
|
||||
</div>
|
||||
<div style="border-radius: var(--card-r); overflow: hidden; box-shadow: var(--shadow-sm);">
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">🩺</div>
|
||||
<div class="menu-item__text">透析记录</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">📝</div>
|
||||
<div class="menu-item__text">透析处方</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3c. Menu Section: 其他 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">其他</div>
|
||||
</div>
|
||||
<div style="border-radius: var(--card-r); overflow: hidden; box-shadow: var(--shadow-sm);">
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">👨👩👧</div>
|
||||
<div class="menu-item__text">家人管理</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">📅</div>
|
||||
<div class="menu-item__text">随访记录</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">📑</div>
|
||||
<div class="menu-item__text">知情同意书</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">🎉</div>
|
||||
<div class="menu-item__text">线下活动</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3d. Menu Section: 设置 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">设置</div>
|
||||
</div>
|
||||
<div style="border-radius: var(--card-r); overflow: hidden; box-shadow: var(--shadow-sm);">
|
||||
<div class="menu-item" style="border-bottom: 1px solid var(--bd-light);">
|
||||
<div class="menu-item__icon">👴</div>
|
||||
<div class="menu-item__text">长者模式</div>
|
||||
<div class="menu-item__extra">已关闭</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">⚙️</div>
|
||||
<div class="menu-item__text">设置</div>
|
||||
<div class="menu-item__arrow">></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom spacing for tab bar -->
|
||||
<div style="height: 34px;"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">🏠</div>
|
||||
<div class="tab-bar__label">首页</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">❤️</div>
|
||||
<div class="tab-bar__label">健康</div>
|
||||
</div>
|
||||
<div class="tab-bar__item">
|
||||
<div class="tab-bar__icon">💬</div>
|
||||
<div class="tab-bar__label">消息</div>
|
||||
</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">
|
||||
<div class="tab-bar__icon">👤</div>
|
||||
<div class="tab-bar__label">我的</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
104
docs/prototypes/mp/02-main/appointment-create.html
Normal file
104
docs/prototypes/mp/02-main/appointment-create.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>创建预约 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">创建预约 · appointment-create</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">创建预约</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 表单卡片 -->
|
||||
<div class="card mb-md">
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">选择科室</label>
|
||||
<select class="form-select">
|
||||
<option value="">请选择科室 ▼</option>
|
||||
<option value="cardiology">心内科</option>
|
||||
<option value="nephrology">肾内科</option>
|
||||
<option value="endocrine">内分泌科</option>
|
||||
<option value="general">内科</option>
|
||||
<option value="surgery">外科</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">选择医生</label>
|
||||
<select class="form-select" disabled>
|
||||
<option value="">请先选择科室 ▼</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">就诊日期</label>
|
||||
<input class="form-input" type="text" placeholder="请选择日期">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">就诊时段</label>
|
||||
<select class="form-select">
|
||||
<option value="">请选择时段 ▼</option>
|
||||
<option value="am">上午 08:00-12:00</option>
|
||||
<option value="pm">下午 14:00-17:00</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">挂号类型</label>
|
||||
<select class="form-select">
|
||||
<option value="general">普通号</option>
|
||||
<option value="expert">专家号</option>
|
||||
<option value="special">特需号</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-bottom:0;">
|
||||
<label class="form-label">病情描述</label>
|
||||
<textarea class="form-textarea" placeholder="请简要描述您的症状，如持续时间、严重程度、既往病史等，方便医生提前了解您的病情..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">温馨提示</span>
|
||||
</div>
|
||||
|
||||
<div class="card card--outlined" style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
请携带医保卡和既往病历，提前15分钟到达候诊区。首次就诊需在前台完成建档登记，建议提前通过线上完善个人健康档案信息，以便就诊时医生快速了解您的健康状况。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<button class="btn btn--primary btn--full mt-md">确认预约</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
87
docs/prototypes/mp/02-main/appointment-detail.html
Normal file
87
docs/prototypes/mp/02-main/appointment-detail.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>预约详情 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">预约详情 · appointment-detail</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">预约详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 状态卡片 -->
|
||||
<div class="card mb-md" style="text-align:center;padding:var(--gap-lg) var(--card-pad);">
|
||||
<span class="tag tag--success" style="font-size:var(--font-body-sm);padding:8px 24px;margin-bottom:12px;">已确认</span>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:12px;">预约编号: APT20260518001</div>
|
||||
</div>
|
||||
|
||||
<!-- 医生信息卡片 -->
|
||||
<div class="card mb-md">
|
||||
<div class="flex-row mb-sm">
|
||||
<div class="avatar" style="background:var(--info-light);color:var(--info);">李</div>
|
||||
<div style="margin-left:14px;flex:1;">
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--tx);">李四 副主任医师</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:4px;">心内科 · 第一人民医院</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:4px;">⭐ 4.8 · 接诊 856 次</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息卡片 -->
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">就诊日期</span>
|
||||
<span class="info-row__value">2026年5月18日 周一</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">就诊时间</span>
|
||||
<span class="info-row__value">09:30 - 10:00</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">就诊地点</span>
|
||||
<span class="info-row__value">门诊楼3层301室</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">挂号类型</span>
|
||||
<span class="info-row__value">专家号</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">挂号费用</span>
|
||||
<span class="info-row__value" style="color:var(--pri);font-weight:600;">¥50.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-top:var(--section-gap);">
|
||||
<button class="btn btn--outline" style="flex:1;color:var(--danger);border-color:var(--danger);">取消预约</button>
|
||||
<button class="btn btn--primary" style="flex:1;">导航到院</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
145
docs/prototypes/mp/02-main/appointment.html
Normal file
145
docs/prototypes/mp/02-main/appointment.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>预约列表 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">预约列表 · appointment</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">预约列表</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索预约...">
|
||||
</div>
|
||||
|
||||
<!-- 筛选标签 -->
|
||||
<div class="filter-pills">
|
||||
<span class="filter-pill filter-pill--active">全部</span>
|
||||
<span class="filter-pill">待确认</span>
|
||||
<span class="filter-pill">已确认</span>
|
||||
<span class="filter-pill">已完成</span>
|
||||
<span class="filter-pill">已取消</span>
|
||||
</div>
|
||||
|
||||
<!-- 预约卡片列表 -->
|
||||
<div class="card-list mt-md">
|
||||
|
||||
<!-- 预约1: 已确认 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row flex-between mb-sm">
|
||||
<div class="flex-row">
|
||||
<div class="avatar avatar--sm" style="background:var(--info-light);color:var(--info);">李</div>
|
||||
<div style="margin-left:10px;">
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--tx);">李四</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);">副主任医师 · 心内科</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tag tag--success">已确认</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">日期时间</span>
|
||||
<span class="info-row__value">2026-05-18 周一 09:30</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">就诊地点</span>
|
||||
<span class="info-row__value">门诊楼3层301室</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">挂号类型</span>
|
||||
<span class="info-row__value">专家号</span>
|
||||
</div>
|
||||
<div style="text-align:right;margin-top:12px;">
|
||||
<button class="btn btn--primary btn--sm">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预约2: 待确认 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row flex-between mb-sm">
|
||||
<div class="flex-row">
|
||||
<div class="avatar avatar--sm" style="background:var(--success-light);color:var(--success);">王</div>
|
||||
<div style="margin-left:10px;">
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--tx);">王五</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);">主任医师 · 肾内科</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tag tag--warning">待确认</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">日期时间</span>
|
||||
<span class="info-row__value">2026-05-20 周三 14:00</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">就诊地点</span>
|
||||
<span class="info-row__value">门诊楼5层502室</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">挂号类型</span>
|
||||
<span class="info-row__value">专家号</span>
|
||||
</div>
|
||||
<div style="text-align:right;margin-top:12px;">
|
||||
<button class="btn btn--outline btn--sm" style="color:var(--danger);border-color:var(--danger);">取消预约</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预约3: 已完成 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row flex-between mb-sm">
|
||||
<div class="flex-row">
|
||||
<div class="avatar avatar--sm" style="background:var(--warning-light);color:var(--warning);">赵</div>
|
||||
<div style="margin-left:10px;">
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--tx);">赵六</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);">主治医师 · 内分泌科</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tag tag--default">已完成</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">日期时间</span>
|
||||
<span class="info-row__value">2026-05-15 周四 10:30</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">就诊地点</span>
|
||||
<span class="info-row__value">门诊楼2层205室</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">挂号类型</span>
|
||||
<span class="info-row__value">普通号</span>
|
||||
</div>
|
||||
<div style="text-align:right;margin-top:12px;">
|
||||
<button class="btn btn--primary btn--sm">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
129
docs/prototypes/mp/02-main/consultation.html
Normal file
129
docs/prototypes/mp/02-main/consultation.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>在线咨询 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">在线咨询 · consultation</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">在线咨询</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索医生/科室...">
|
||||
</div>
|
||||
|
||||
<!-- 筛选标签 -->
|
||||
<div class="filter-pills">
|
||||
<span class="filter-pill filter-pill--active">全部</span>
|
||||
<span class="filter-pill">内科</span>
|
||||
<span class="filter-pill">外科</span>
|
||||
<span class="filter-pill">心内科</span>
|
||||
<span class="filter-pill">肾内科</span>
|
||||
</div>
|
||||
|
||||
<!-- 医生卡片列表 -->
|
||||
<div class="card-list mt-md">
|
||||
|
||||
<!-- 医生1 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row mb-sm">
|
||||
<div class="avatar avatar--sm" style="background:var(--pri-light);color:var(--pri);">张</div>
|
||||
<div class="flex-1" style="margin-left:12px;">
|
||||
<div class="flex-row flex-between">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx);">张三</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2);">主任医师</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:4px;">心内科 · 第一人民医院</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:12px;">⭐ 4.9 · 接诊 1,286 次</div>
|
||||
<div class="flex-row flex-between">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="tag tag--info">图文咨询 ¥30/次</span>
|
||||
<span class="tag tag--info">视频咨询 ¥50/次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin-top:12px;">
|
||||
<button class="btn btn--primary btn--sm">立即咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医生2 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row mb-sm">
|
||||
<div class="avatar avatar--sm" style="background:var(--success-light);color:var(--success);">李</div>
|
||||
<div class="flex-1" style="margin-left:12px;">
|
||||
<div class="flex-row flex-between">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx);">李明</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2);">副主任医师</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:4px;">肾内科 · 第一人民医院</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:12px;">⭐ 4.8 · 接诊 936 次</div>
|
||||
<div class="flex-row flex-between">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="tag tag--info">图文咨询 ¥25/次</span>
|
||||
<span class="tag tag--info">视频咨询 ¥45/次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin-top:12px;">
|
||||
<button class="btn btn--primary btn--sm">立即咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医生3 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row mb-sm">
|
||||
<div class="avatar avatar--sm" style="background:var(--warning-light);color:var(--warning);">王</div>
|
||||
<div class="flex-1" style="margin-left:12px;">
|
||||
<div class="flex-row flex-between">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx);">王芳</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2);">主治医师</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:4px;">内分泌科 · 第一人民医院</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:12px;">⭐ 4.7 · 接诊 758 次</div>
|
||||
<div class="flex-row flex-between">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="tag tag--info">图文咨询 ¥20/次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;margin-top:12px;">
|
||||
<button class="btn btn--primary btn--sm">立即咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
79
docs/prototypes/mp/02-main/login.html
Normal file
79
docs/prototypes/mp/02-main/login.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">登录页 · login</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-shell" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(812px - 44px - 34px);">
|
||||
|
||||
<!-- Logo 区域 -->
|
||||
<div style="text-align:center;margin-bottom:48px;">
|
||||
<div class="avatar avatar--lg" style="width:88px;height:88px;font-size:42px;margin:0 auto 20px;background:var(--pri);color:var(--white);">H</div>
|
||||
<div style="font-size:var(--font-h1);font-weight:600;color:var(--tx);margin-bottom:8px;">健康管理</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);">您的健康管家</div>
|
||||
</div>
|
||||
|
||||
<!-- 手机号登录表单 -->
|
||||
<div style="width:100%;max-width:320px;">
|
||||
<div class="form-group">
|
||||
<input class="form-input" type="tel" placeholder="请输入手机号" maxlength="11">
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display:flex;gap:12px;">
|
||||
<input class="form-input" type="text" placeholder="请输入验证码" maxlength="6" style="flex:1;">
|
||||
<button class="btn btn--outline btn--sm" style="white-space:nowrap;flex-shrink:0;">获取验证码</button>
|
||||
</div>
|
||||
|
||||
<button class="btn btn--primary btn--full" style="margin-top:8px;">登录/注册</button>
|
||||
</div>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<div style="display:flex;align-items:center;width:100%;max-width:320px;margin:32px 0;gap:16px;">
|
||||
<div style="flex:1;height:1px;background:var(--bd);"></div>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx3);white-space:nowrap;">其他登录方式</span>
|
||||
<div style="flex:1;height:1px;background:var(--bd);"></div>
|
||||
</div>
|
||||
|
||||
<!-- 微信登录 -->
|
||||
<div style="width:100%;max-width:320px;">
|
||||
<button class="btn btn--outline btn--full" style="border-color:#07C160;color:#07C160;">
|
||||
<span style="margin-right:8px;">🟢</span> 微信一键登录
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部协议链接 -->
|
||||
<div style="margin-top:40px;font-size:var(--font-cap);color:var(--tx3);text-align:center;">
|
||||
登录即代表同意
|
||||
<a href="user-agreement.html" style="color:var(--pri);text-decoration:none;">用户协议</a>
|
||||
和
|
||||
<a href="privacy-policy.html" style="color:var(--pri);text-decoration:none;">隐私政策</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
137
docs/prototypes/mp/02-main/mall.html
Normal file
137
docs/prototypes/mp/02-main/mall.html
Normal file
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>积分商城 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">积分商城 · mall</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">积分商城</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- 积分余额卡片 -->
|
||||
<div class="card mb-md" style="background:linear-gradient(135deg, var(--pri) 0%, var(--pri-dark) 100%);color:var(--white);">
|
||||
<div style="font-size:var(--font-body-sm);opacity:0.85;margin-bottom:8px;">可用积分</div>
|
||||
<div style="font-size:48px;font-weight:700;font-family:var(--font-serif);line-height:1;">2,580</div>
|
||||
<div style="font-size:var(--font-body-sm);opacity:0.75;margin-top:8px;">兑换好礼，健康常伴</div>
|
||||
</div>
|
||||
|
||||
<!-- 热门兑换 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">热门兑换</span>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
|
||||
|
||||
<!-- 商品1 -->
|
||||
<div class="card card--pressable" style="padding:0;overflow:hidden;">
|
||||
<div style="width:100%;height:140px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--tx3);">
|
||||
🪡
|
||||
</div>
|
||||
<div style="padding:12px;">
|
||||
<div style="font-size:var(--font-body);font-weight:500;color:var(--tx);">智能血压计</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;margin-top:4px;">1,200 积分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品2 -->
|
||||
<div class="card card--pressable" style="padding:0;overflow:hidden;">
|
||||
<div style="width:100%;height:140px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--tx3);">
|
||||
⏱
|
||||
</div>
|
||||
<div style="padding:12px;">
|
||||
<div style="font-size:var(--font-body);font-weight:500;color:var(--tx);">健康手环</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;margin-top:4px;">800 积分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品3 -->
|
||||
<div class="card card--pressable" style="padding:0;overflow:hidden;">
|
||||
<div style="width:100%;height:140px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--tx3);">
|
||||
💊
|
||||
</div>
|
||||
<div style="padding:12px;">
|
||||
<div style="font-size:var(--font-body);font-weight:500;color:var(--tx);">维生素D补充剂</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;margin-top:4px;">350 积分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品4 -->
|
||||
<div class="card card--pressable" style="padding:0;overflow:hidden;">
|
||||
<div style="width:100%;height:140px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--tx3);">
|
||||
🏥
|
||||
</div>
|
||||
<div style="padding:12px;">
|
||||
<div style="font-size:var(--font-body);font-weight:500;color:var(--tx);">体检套餐券</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;margin-top:4px;">2,000 积分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换记录 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">兑换记录</span>
|
||||
<span class="section-title__action">全部 ></span>
|
||||
</div>
|
||||
|
||||
<div class="card-list">
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--orange">🪡</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">智能血压计</div>
|
||||
<div class="list-item__desc">2026-05-10</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span style="font-size:var(--font-body);font-weight:500;color:var(--danger);">-1,200积分</span>
|
||||
<span class="tag tag--success tag--sm">兑换成功</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--orange">🏥</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">体检套餐券</div>
|
||||
<div class="list-item__desc">2026-04-28</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span style="font-size:var(--font-body);font-weight:500;color:var(--danger);">-2,000积分</span>
|
||||
<span class="tag tag--success tag--sm">兑换成功</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
112
docs/prototypes/mp/02-main/privacy-policy.html
Normal file
112
docs/prototypes/mp/02-main/privacy-policy.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>隐私政策 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">隐私政策 · privacy-policy</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">隐私政策</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<h1 style="font-size:var(--font-h1);font-weight:600;color:var(--tx);text-align:center;margin-bottom:8px;">健康管理平台隐私政策</h1>
|
||||
<p style="font-size:var(--font-cap);color:var(--tx3);text-align:center;margin-bottom:var(--gap-lg);">更新日期：2026年1月1日</p>
|
||||
|
||||
<!-- 一、我们收集的信息 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">一、我们收集的信息</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
为向您提供健康管理服务，我们会收集以下类型的信息：您注册时提供的身份信息（姓名、手机号码、身份证号）、基本健康信息（年龄、性别、身高、体重）以及您通过平台录入的健康数据（血压、血糖、心率、体检报告、用药记录等）。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
在您使用预约挂号、在线咨询、随访管理等服务时，我们会收集您的就诊记录、咨询内容、医生诊断信息等相关医疗健康数据。这些信息的收集对于提供准确的医疗服务是必要的。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
我们还会自动收集设备信息（设备型号、操作系统版本）、日志信息（访问时间、页面浏览记录）和位置信息（用于推荐就近医疗机构）。以上信息的收集均经过您的授权同意，您可以在系统设置中随时关闭相关权限。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 二、信息的使用 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">二、信息的使用</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
我们收集的信息将用于：为您提供健康管理服务（健康数据记录与追踪、趋势分析、异常提醒）、预约挂号与在线咨询服务、个性化健康建议推送、随访管理和复诊提醒等核心医疗健康服务功能。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
在您授权同意的前提下，我们还可能将您的信息用于：改善服务体验和产品质量、开发新的健康管理功能、进行与健康相关的科学研究（所有研究数据均经过脱敏处理，不会识别到特定个人）。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
我们承诺不会将您的个人健康信息用于向您推送商业广告，不会将您的数据出售给任何第三方。所有数据使用均严格限定在本政策声明的范围内，超出范围的使用将再次征得您的明确同意。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 三、信息的共享 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">三、信息的共享</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
除以下情形外，我们不会与任何第三方共享您的个人信息：经您事先同意的共享、为提供您要求的服务而必需的共享（如与预约医院、咨询医生共享您的挂号和健康档案信息）、与关联公司共享（仅限于提供统一健康管理服务的目的）。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
根据法律法规规定或行政、司法机关的强制性要求，我们可能需要共享您的个人信息。在此类情况下，我们将要求接收方对您的信息采取保密措施，并仅用于法律规定的目的。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
我们与第三方服务提供商共享信息时，将签署严格的保密协议和数据保护协议，要求第三方仅可在约定的范围内处理您的信息，并采取不低于本平台标准的安全保护措施。我们将定期评估第三方的数据保护能力。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 四、您的权利 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">四、您的权利</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
您对您的个人信息享有知情权、访问权、更正权、删除权、可携带权和撤回同意的权利。您可以通过平台的"个人中心"或"隐私设置"功能，查看、修改、导出或删除您的个人信息和健康数据。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
您有权撤回之前授予我们的信息收集和使用同意。撤回同意不会影响之前基于同意已进行的信息处理活动的合法性。但撤回同意可能导致您无法继续使用部分需要相关个人信息的服务功能。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
如果您认为我们对您的信息处理违反了法律法规或本政策，您有权向相关主管部门进行投诉或举报。您也可以通过平台客服渠道（客服电话: 400-000-0000）与我们取得联系，我们将在15个工作日内予以回复。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 五、信息安全 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">五、信息安全</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
我们采用业界领先的技术手段保护您的信息安全，包括但不限于：传输层加密（TLS 1.3）、数据存储加密（AES-256-GCM）、多因素身份验证、访问权限控制和安全审计日志。所有敏感个人健康信息均经过加密存储和传输。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
我们建立了完善的数据安全管理制度，对员工进行定期安全培训，严格限制员工对用户个人信息的访问权限。仅经授权的人员方可访问必要的个人信息，且所有访问行为均有记录并接受审计。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
如不幸发生个人信息安全事件，我们将按照法律法规的要求，及时向您告知安全事件的基本情况、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议以及对您的补救措施。我们将以推送通知、短信或邮件方式通知您。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
98
docs/prototypes/mp/02-main/user-agreement.html
Normal file
98
docs/prototypes/mp/02-main/user-agreement.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>用户协议 - 健康管理</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">用户协议 · user-agreement</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">用户协议</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<h1 style="font-size:var(--font-h1);font-weight:600;color:var(--tx);text-align:center;margin-bottom:8px;">健康管理平台用户服务协议</h1>
|
||||
<p style="font-size:var(--font-cap);color:var(--tx3);text-align:center;margin-bottom:var(--gap-lg);">更新日期：2026年1月1日</p>
|
||||
|
||||
<!-- 一、服务条款的确认和接纳 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">一、服务条款的确认和接纳</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
本协议是您与健康管理平台（以下简称"本平台"）之间关于使用本平台服务所订立的协议。请您仔细阅读本协议，在确认充分理解并同意后再开始使用本平台服务。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
您一旦使用本平台服务，即视为您已阅读并同意本协议的约束。本平台有权在必要时修改本协议内容，修改后的协议一经公布即有效替代原协议。您可以随时在本平台查阅最新版本的服务协议。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
本平台提供的健康信息服务仅供健康管理和参考之用，不能替代专业医疗机构执业医师的诊断和治疗建议。如有身体不适，请及时前往正规医疗机构就诊。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 二、用户注册 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">二、用户注册</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
用户注册时需提供真实、准确、完整的个人资料，并保持资料的及时更新。因注册信息不真实、不准确或不完整而引起的问题，由用户自行承担相应责任。本平台将对用户提交的注册信息进行严格保密。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
用户应妥善保管账号和密码，因用户保管不当造成的任何损失由用户自行承担。如发现账号被非法使用或存在安全漏洞，请立即通知本平台。每个用户仅可注册一个账号，禁止转让、售卖或出借账号。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
用户在使用本平台医疗服务时，应提供真实有效的身份信息和健康数据，确保医疗服务的准确性和安全性。虚假信息可能导致误诊或其他健康风险。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 三、隐私保护 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">三、隐私保护</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
本平台高度重视用户隐私保护，严格遵守《中华人民共和国个人信息保护法》、《中华人民共和国数据安全法》及相关法律法规。我们采取先进的技术手段保护您的个人信息安全，包括但不限于数据加密、访问控制和安全审计。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
我们收集的用户健康信息仅用于提供健康管理服务、改善服务质量及经您同意的其他用途。未经您的明确授权，我们不会向任何第三方披露您的个人健康信息，法律法规另有规定的除外。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
您可以随时查看、修改或删除您的个人信息。如需注销账号，可通过平台设置功能或联系客服办理。注销后我们将依法删除您的个人信息或进行匿名化处理。详细的隐私保护政策请参阅《隐私政策》。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 四、免责声明 -->
|
||||
<div class="section">
|
||||
<h2 style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx);margin-bottom:12px;">四、免责声明</h2>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
本平台提供的所有健康资讯、数据分析报告、健康建议等内容均基于公开医学文献和通用健康知识，仅供健康管理和日常参考，不构成任何形式的医疗诊断或治疗方案。用户应根据自身情况，在专业医师指导下进行医疗决策。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;margin-bottom:12px;">
|
||||
因不可抗力、系统故障、网络中断等原因导致服务中断或数据丢失的，本平台不承担赔偿责任，但将尽最大努力减少用户损失。本平台不对第三方链接的内容或服务负责。
|
||||
</p>
|
||||
<p style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.8;">
|
||||
用户因不当使用本平台服务或违反本协议约定而导致的任何直接或间接损失，由用户自行承担全部责任。本平台保留在法律允许范围内对免责条款进行解释的权利。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
99
docs/prototypes/mp/03-pkg-health/alerts.html
Normal file
99
docs/prototypes/mp/03-pkg-health/alerts.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康告警 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">健康告警</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills mb-md">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">紧急</div>
|
||||
<div class="filter-pill">重要</div>
|
||||
<div class="filter-pill">一般</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Card List -->
|
||||
<div class="card-list card-list--md">
|
||||
|
||||
<!-- Alert 1: Danger / 紧急 -->
|
||||
<div class="card" style="border-left:4px solid var(--danger)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">血压持续偏高</span>
|
||||
<span class="tag tag--error">紧急</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.6;margin-bottom:var(--gap-xs)">近3天收缩压持续高于140mmHg，建议尽快就医</div>
|
||||
<div class="time-label">2小时前 · 自动检测</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert 2: Warning / 重要 -->
|
||||
<div class="card" style="border-left:4px solid var(--warning)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">血糖异常波动</span>
|
||||
<span class="tag tag--warning">重要</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.6;margin-bottom:var(--gap-xs)">今日餐后血糖8.9mmol/L，较昨日上升2.1</div>
|
||||
<div class="time-label">4小时前 · 自动检测</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert 3: Warning / 重要 -->
|
||||
<div class="card" style="border-left:4px solid var(--warning)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">心率过快提醒</span>
|
||||
<span class="tag tag--warning">重要</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.6;margin-bottom:var(--gap-xs)">静息心率95次/分，高于正常范围</div>
|
||||
<div class="time-label">昨天 · 设备同步</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert 4: Info / 一般 -->
|
||||
<div class="card" style="border-left:4px solid var(--info)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">用药计划调整</span>
|
||||
<span class="tag tag--info">一般</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.6;margin-bottom:var(--gap-xs)">根据最新检查结果，建议调整用药方案</div>
|
||||
<div class="time-label">3天前 · 医生建议</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
147
docs/prototypes/mp/03-pkg-health/daily-monitoring.html
Normal file
147
docs/prototypes/mp/03-pkg-health/daily-monitoring.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>日常监测 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">日常监测</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Date Selector (Horizontal Scroll) -->
|
||||
<div style="display:flex;gap:var(--gap-xs);margin-bottom:var(--gap-md);overflow-x:auto;-webkit-overflow-scrolling:touch">
|
||||
<div class="filter-pill">5/14</div>
|
||||
<div class="filter-pill">5/15</div>
|
||||
<div class="filter-pill filter-pill--active">5/16</div>
|
||||
<div class="filter-pill">5/17</div>
|
||||
<div class="filter-pill">5/18</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Card -->
|
||||
<div class="card mb-lg">
|
||||
<div class="flex-between" style="margin-bottom:var(--gap-sm)">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:500">今日完成 3/5 项</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600">60%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress__bar" style="width:60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Tasks -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar" style="background:var(--warning)"></div>
|
||||
<div class="section-title__text">待完成</div>
|
||||
<span class="badge">2</span>
|
||||
</div>
|
||||
|
||||
<div class="card-list">
|
||||
<!-- Pending Task 1 -->
|
||||
<div class="list-item" style="border-left:3px solid var(--warning)">
|
||||
<div class="list-item__icon list-item__icon--amber">🩸</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">血糖测量</div>
|
||||
<div class="list-item__desc">请记录餐后血糖</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Task 2 -->
|
||||
<div class="list-item" style="border-left:3px solid var(--warning)">
|
||||
<div class="list-item__icon list-item__icon--amber">💊</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">用药打卡</div>
|
||||
<div class="list-item__desc">降压药 · 待服用</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completed Tasks -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar" style="background:var(--success)"></div>
|
||||
<div class="section-title__text">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list">
|
||||
<!-- Completed Task 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green" style="font-size:18px">✅</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">血压测量</div>
|
||||
<div class="list-item__desc">125/82 mmHg · 08:30</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completed Task 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green" style="font-size:18px">✅</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">体重记录</div>
|
||||
<div class="list-item__desc">68.5 kg · 07:15</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--default tag--sm">已记录</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completed Task 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green" style="font-size:18px">✅</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">心率测量</div>
|
||||
<div class="list-item__desc">72 次/分 · 08:35</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
152
docs/prototypes/mp/03-pkg-health/device-sync.html
Normal file
152
docs/prototypes/mp/03-pkg-health/device-sync.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设备同步 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">设备同步</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Connection Status Card -->
|
||||
<div class="card mb-lg">
|
||||
<div class="flex-row" style="gap:var(--gap-sm);margin-bottom:var(--gap-md)">
|
||||
<div class="list-item__icon list-item__icon--blue" style="font-size:24px">📡</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--success)">蓝牙已连接</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-top:4px">华为智能手表 Band 8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">电量</span>
|
||||
<span class="info-row__value" style="display:flex;align-items:center;gap:8px">
|
||||
<div class="progress" style="width:60px">
|
||||
<div class="progress__bar" style="width:75%;background:var(--success)"></div>
|
||||
</div>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx)">75%</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">最后同步</span>
|
||||
<span class="info-row__value">2分钟前</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:var(--gap-md)">
|
||||
<button class="btn btn--primary btn--sm" style="width:100%">同步数据</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Sync Data -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">今日同步数据</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">步数</span>
|
||||
<span class="info-row__value text-pri font-serif font-bold">6,842 步</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">心率</span>
|
||||
<span class="info-row__value">72 次/分</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血氧</span>
|
||||
<span class="info-row__value">98%</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">睡眠</span>
|
||||
<span class="info-row__value">7.2 小时</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">压力</span>
|
||||
<span class="info-row__value" style="display:flex;align-items:center;gap:8px">
|
||||
45
|
||||
<span class="tag tag--success tag--sm">较低</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sync History -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">同步历史</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list">
|
||||
<!-- History 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">05/16 08:30</div>
|
||||
<div class="list-item__desc">5项数据已同步</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success tag--sm">成功</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">05/15 20:15</div>
|
||||
<div class="list-item__desc">5项数据已同步</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success tag--sm">成功</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">05/14 08:45</div>
|
||||
<div class="list-item__desc">3项数据已同步</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning tag--sm">部分失败</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
docs/prototypes/mp/03-pkg-health/input.html
Normal file
138
docs/prototypes/mp/03-pkg-health/input.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>体征录入 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">体征录入</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Category Selector Pills -->
|
||||
<div class="filter-pills mb-md">
|
||||
<div class="filter-pill filter-pill--active">血压</div>
|
||||
<div class="filter-pill">血糖</div>
|
||||
<div class="filter-pill">心率</div>
|
||||
<div class="filter-pill">体重</div>
|
||||
<div class="filter-pill">体温</div>
|
||||
</div>
|
||||
|
||||
<!-- Blood Pressure Form Card -->
|
||||
<div class="card mb-lg">
|
||||
<div style="font-size:var(--font-h2);font-weight:600;color:var(--tx);margin-bottom:var(--gap-md)">血压记录</div>
|
||||
|
||||
<!-- 测量时间 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">测量时间</label>
|
||||
<input type="text" class="form-input" value="2026-05-16 09:30" readonly>
|
||||
</div>
|
||||
|
||||
<!-- 收缩压 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">收缩压</label>
|
||||
<div style="position:relative">
|
||||
<input type="text" class="form-input" placeholder="请输入收缩压" style="padding-right:60px">
|
||||
<span style="position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:var(--font-body-sm);color:var(--tx3)">mmHg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 舒张压 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">舒张压</label>
|
||||
<div style="position:relative">
|
||||
<input type="text" class="form-input" placeholder="请输入舒张压" style="padding-right:60px">
|
||||
<span style="position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:var(--font-body-sm);color:var(--tx3)">mmHg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测量时段 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">测量时段</label>
|
||||
<select class="form-select">
|
||||
<option>早晨</option>
|
||||
<option>中午</option>
|
||||
<option>晚上</option>
|
||||
<option>睡前</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="form-group" style="margin-bottom:0">
|
||||
<label class="form-label">备注</label>
|
||||
<textarea class="form-textarea" placeholder="添加备注..." style="min-height:80px"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Records -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">最近记录</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">05/16 08:30</span>
|
||||
<span class="info-row__value" style="display:flex;align-items:center;gap:8px">
|
||||
125/82 mmHg
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">05/15 20:15</span>
|
||||
<span class="info-row__value" style="display:flex;align-items:center;gap:8px">
|
||||
132/88 mmHg
|
||||
<span class="tag tag--warning tag--sm">偏高</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">05/15 07:45</span>
|
||||
<span class="info-row__value" style="display:flex;align-items:center;gap:8px">
|
||||
120/78 mmHg
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div style="margin-top:var(--gap-lg)">
|
||||
<button class="btn btn--primary btn--full">保存记录</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
150
docs/prototypes/mp/03-pkg-health/trend.html
Normal file
150
docs/prototypes/mp/03-pkg-health/trend.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>趋势分析 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">趋势分析</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Metric Selector Pills -->
|
||||
<div class="filter-pills mb-sm">
|
||||
<div class="filter-pill filter-pill--active">血压</div>
|
||||
<div class="filter-pill">血糖</div>
|
||||
<div class="filter-pill">心率</div>
|
||||
<div class="filter-pill">体重</div>
|
||||
<div class="filter-pill">血氧</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Range Pills -->
|
||||
<div class="filter-pills mb-md">
|
||||
<div class="filter-pill">7天</div>
|
||||
<div class="filter-pill filter-pill--active">30天</div>
|
||||
<div class="filter-pill">90天</div>
|
||||
<div class="filter-pill">1年</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Card -->
|
||||
<div class="card mb-md">
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--tx);margin-bottom:var(--gap-sm)">近30天收缩压趋势</div>
|
||||
<!-- CSS Bar Chart -->
|
||||
<div style="height:200px;display:flex;align-items:flex-end;gap:12px;padding:16px 0 0;position:relative">
|
||||
<!-- Reference line at ~140 mmHg (high threshold) -->
|
||||
<div style="position:absolute;top:20px;left:0;right:0;border-top:1.5px dashed var(--danger);opacity:0.4"></div>
|
||||
<div style="position:absolute;top:16px;right:0;font-size:11px;color:var(--danger);opacity:0.6">140</div>
|
||||
<!-- Bars -->
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div style="width:100%;height:130px;background:var(--pri);border-radius:4px 4px 0 0;opacity:0.85"></div>
|
||||
<span style="font-size:11px;color:var(--tx3)">4/16</span>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div style="width:100%;height:145px;background:var(--danger);border-radius:4px 4px 0 0;opacity:0.85"></div>
|
||||
<span style="font-size:11px;color:var(--tx3)">4/20</span>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div style="width:100%;height:125px;background:var(--pri);border-radius:4px 4px 0 0;opacity:0.85"></div>
|
||||
<span style="font-size:11px;color:var(--tx3)">4/24</span>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div style="width:100%;height:150px;background:var(--danger);border-radius:4px 4px 0 0;opacity:0.85"></div>
|
||||
<span style="font-size:11px;color:var(--tx3)">4/28</span>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div style="width:100%;height:120px;background:var(--pri);border-radius:4px 4px 0 0;opacity:0.85"></div>
|
||||
<span style="font-size:11px;color:var(--tx3)">5/2</span>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div style="width:100%;height:135px;background:var(--pri);border-radius:4px 4px 0 0;opacity:0.85"></div>
|
||||
<span style="font-size:11px;color:var(--tx3)">5/6</span>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div style="width:100%;height:118px;background:var(--pri);border-radius:4px 4px 0 0;opacity:0.85"></div>
|
||||
<span style="font-size:11px;color:var(--tx3)">5/10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:var(--tx3);margin-top:8px;text-align:center">单位: mmHg</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="stat-grid mb-lg">
|
||||
<div class="stat-card stat-card--primary">
|
||||
<div class="stat-card__value">128</div>
|
||||
<div class="stat-card__label">平均值 mmHg</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card--danger">
|
||||
<div class="stat-card__value">145</div>
|
||||
<div class="stat-card__label">最高值 mmHg</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card--success">
|
||||
<div class="stat-card__value">118</div>
|
||||
<div class="stat-card__label">最低值 mmHg</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Abnormal Records -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">异常记录</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list">
|
||||
<!-- Record 1 -->
|
||||
<div class="card">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2)">2026-05-08 14:30</span>
|
||||
<span class="tag tag--error">偏高</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:500">收缩压 152 mmHg</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx3);margin-top:4px">超出正常范围 (90-140 mmHg)</div>
|
||||
</div>
|
||||
|
||||
<!-- Record 2 -->
|
||||
<div class="card">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2)">2026-04-25 08:15</span>
|
||||
<span class="tag tag--error">偏高</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:500">收缩压 148 mmHg</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx3);margin-top:4px">超出正常范围 (90-140 mmHg)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
124
docs/prototypes/mp/04-pkg-doctor-core/action-inbox.html
Normal file
124
docs/prototypes/mp/04-pkg-doctor-core/action-inbox.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>待办事项 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">待办事项</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills mb-md">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">紧急</div>
|
||||
<div class="filter-pill">今日</div>
|
||||
<div class="filter-pill">本周</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Card List -->
|
||||
<div class="card-list card-list--md">
|
||||
|
||||
<!-- Action 1: 紧急 -->
|
||||
<div class="card card--pressable" style="border-left:4px solid var(--danger)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">📋 报告审核</span>
|
||||
<span class="tag tag--error">紧急</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:4px">王刚 - 血常规报告</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">今日 10:30</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action 2: 紧急 -->
|
||||
<div class="card card--pressable" style="border-left:4px solid var(--danger)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">📝 方案调整</span>
|
||||
<span class="tag tag--error">紧急</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:4px">刘洋 - 透析方案</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">今日 09:00</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action 3: 重要 -->
|
||||
<div class="card card--pressable" style="border-left:4px solid var(--warning)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">📅 随访计划</span>
|
||||
<span class="tag tag--warning">重要</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:4px">陈红 - 制定2周随访计划</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">本周五</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action 4: 重要 -->
|
||||
<div class="card card--pressable" style="border-left:4px solid var(--warning)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">💊 用药审核</span>
|
||||
<span class="tag tag--warning">重要</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:4px">赵丽 - 新处方审核</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">明日</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action 5: 一般 -->
|
||||
<div class="card card--pressable" style="border-left:4px solid var(--info)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">📊 数据分析</span>
|
||||
<span class="tag tag--info">一般</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:4px">张伟 - 月度趋势分析</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">本周</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title"></span>
|
||||
</div>
|
||||
|
||||
<!-- Patient Info Bar (sticky) -->
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-xs);padding:var(--gap-xs) var(--page-pad);background:var(--card);border-bottom:1px solid var(--bd-light);position:sticky;top:0;z-index:10">
|
||||
<div class="avatar avatar--sm">张</div>
|
||||
<div>
|
||||
<span style="font-size:var(--font-body);font-weight:500;color:var(--tx)">张伟</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx3);margin-left:8px">55岁 · 高血压2级</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Chat List -->
|
||||
<div class="chat-list">
|
||||
|
||||
<!-- Left bubble 1 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-start">
|
||||
<div class="chat-bubble chat-bubble--left">医生您好，我最近血压有点高，经常头晕。</div>
|
||||
<span class="time-label" style="margin-top:4px;margin-left:4px">09:30</span>
|
||||
</div>
|
||||
|
||||
<!-- Right bubble 1 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end">
|
||||
<div class="chat-bubble chat-bubble--right">您好，请问头晕是什么时候开始的？有测量过血压吗？</div>
|
||||
<span class="time-label" style="margin-top:4px;margin-right:4px">09:32</span>
|
||||
</div>
|
||||
|
||||
<!-- Left bubble 2 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-start">
|
||||
<div class="chat-bubble chat-bubble--left">大概一周前开始的，今早测了155/95。</div>
|
||||
<span class="time-label" style="margin-top:4px;margin-left:4px">09:35</span>
|
||||
</div>
|
||||
|
||||
<!-- Right bubble 2 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end">
|
||||
<div class="chat-bubble chat-bubble--right">血压偏高，建议您先调整生活方式：低盐饮食、适当运动。我先给您调整一下用药方案，一周后复查。</div>
|
||||
<span class="time-label" style="margin-top:4px;margin-right:4px">09:38</span>
|
||||
</div>
|
||||
|
||||
<!-- Left bubble 3 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-start">
|
||||
<div class="chat-bubble chat-bubble--left">好的，谢谢医生！</div>
|
||||
<span class="time-label" style="margin-top:4px;margin-left:4px">09:40</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Input Bar (sticky bottom) -->
|
||||
<div class="chat-input-bar">
|
||||
<input class="chat-input-bar__field" type="text" placeholder="输入回复内容..." />
|
||||
<button class="btn btn--primary btn--sm">发送</button>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
122
docs/prototypes/mp/04-pkg-doctor-core/consultation.html
Normal file
122
docs/prototypes/mp/04-pkg-doctor-core/consultation.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询列表 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">咨询列表</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索患者..." />
|
||||
</div>
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">待回复</div>
|
||||
<div class="filter-pill">进行中</div>
|
||||
<div class="filter-pill">已结束</div>
|
||||
</div>
|
||||
|
||||
<!-- Consultation Card List -->
|
||||
<div class="card-list card-list--md mt-md">
|
||||
|
||||
<!-- Consultation 1: 待回复 -->
|
||||
<div class="card card--pressable" style="position:relative">
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-sm)">
|
||||
<div class="avatar avatar--sm">张</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="flex-between">
|
||||
<span style="font-size:var(--font-body);font-weight:500;color:var(--tx)">张伟</span>
|
||||
<div style="display:flex;align-items:center;gap:6px">
|
||||
<span class="time-label">5分钟前</span>
|
||||
<span class="badge">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx3);margin-top:2px">心内科咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-top:var(--gap-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">医生，我最近血压有点高...</div>
|
||||
<div style="margin-top:var(--gap-xs);display:flex;justify-content:flex-end">
|
||||
<span class="tag tag--warning">待回复</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consultation 2: 已结束 -->
|
||||
<div class="card card--pressable">
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-sm)">
|
||||
<div class="avatar avatar--sm">刘</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="flex-between">
|
||||
<span style="font-size:var(--font-body);font-weight:500;color:var(--tx)">刘洋</span>
|
||||
<span class="time-label">1小时前</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx3);margin-top:2px">用药咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-top:var(--gap-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">好的，谢谢医生</div>
|
||||
<div style="margin-top:var(--gap-xs);display:flex;justify-content:flex-end">
|
||||
<span class="tag tag--success">已结束</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consultation 3: 进行中 -->
|
||||
<div class="card card--pressable">
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-sm)">
|
||||
<div class="avatar avatar--sm">赵</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="flex-between">
|
||||
<span style="font-size:var(--font-body);font-weight:500;color:var(--tx)">赵丽</span>
|
||||
<span class="time-label">昨天</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx3);margin-top:2px">检查咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-top:var(--gap-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">想问一下报告怎么看</div>
|
||||
<div style="margin-top:var(--gap-xs);display:flex;justify-content:flex-end">
|
||||
<span class="tag tag--info">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
121
docs/prototypes/mp/04-pkg-doctor-core/followup-detail.html
Normal file
121
docs/prototypes/mp/04-pkg-doctor-core/followup-detail.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>随访详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">随访详情</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Status Card -->
|
||||
<div class="card mb-md" style="display:flex;align-items:center;justify-content:space-between">
|
||||
<span class="tag tag--success" style="font-size:var(--font-body-sm);padding:6px 16px">已完成</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx3)">随访编号: FU20260515001</span>
|
||||
</div>
|
||||
|
||||
<!-- Patient Card -->
|
||||
<div class="card mb-md" style="display:flex;align-items:center;gap:var(--gap-sm)">
|
||||
<div class="avatar">张</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--tx)">张伟 · 55岁</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:2px">高血压2级</div>
|
||||
</div>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- Detail Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">随访方式</span>
|
||||
<span class="info-row__value">电话随访</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">计划日期</span>
|
||||
<span class="info-row__value">2026-05-15</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">完成日期</span>
|
||||
<span class="info-row__value">2026-05-15 14:30</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">执行医生</span>
|
||||
<span class="info-row__value">李明 主任医师</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 随访内容 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">随访内容</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血压</span>
|
||||
<span class="info-row__value">135/85 mmHg</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">心率</span>
|
||||
<span class="info-row__value">76 次/分</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体重</span>
|
||||
<span class="info-row__value">72.5 kg</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">用药依从性</span>
|
||||
<span class="info-row__value">良好</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">不良反应</span>
|
||||
<span class="info-row__value">无</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 医生建议 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">医生建议</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);line-height:1.7">患者血压控制较前改善，继续当前方案，2周后复查。注意低盐饮食，每日监测血压。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
129
docs/prototypes/mp/04-pkg-doctor-core/followup.html
Normal file
129
docs/prototypes/mp/04-pkg-doctor-core/followup.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>随访列表 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">随访列表</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索患者..." />
|
||||
</div>
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">待执行</div>
|
||||
<div class="filter-pill">进行中</div>
|
||||
<div class="filter-pill">已完成</div>
|
||||
</div>
|
||||
|
||||
<!-- Followup Card List -->
|
||||
<div class="card-list card-list--md mt-md">
|
||||
|
||||
<!-- Followup 1 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">王刚</span>
|
||||
<span class="tag tag--warning">待执行</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-xs);margin-bottom:4px">
|
||||
<span class="chip">📞 电话随访</span>
|
||||
<span class="chip">高血压3级</span>
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">计划日期: 2026-05-18</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Followup 2 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">陈红</span>
|
||||
<span class="tag tag--info">进行中</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-xs);margin-bottom:4px">
|
||||
<span class="chip">🏥 门诊随访</span>
|
||||
<span class="chip">2型糖尿病</span>
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">计划日期: 2026-05-20</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Followup 3 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">张伟</span>
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-xs);margin-bottom:4px">
|
||||
<span class="chip">📞 电话随访</span>
|
||||
<span class="chip">高血压2级</span>
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">计划日期: 2026-05-15</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Followup 4 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx)">赵丽</span>
|
||||
<span class="tag tag--warning">待执行</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-xs);margin-bottom:4px">
|
||||
<span class="chip">🏠 家庭随访</span>
|
||||
<span class="chip">冠心病</span>
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">计划日期: 2026-05-22</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
174
docs/prototypes/mp/04-pkg-doctor-core/index.html
Normal file
174
docs/prototypes/mp/04-pkg-doctor-core/index.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>医生工作台 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">医生工作台</span>
|
||||
<div class="nav-bar__actions">
|
||||
<div style="position:relative;cursor:pointer">
|
||||
<span style="font-size:20px">👤</span>
|
||||
<div class="badge" style="position:absolute;top:-6px;right:-8px">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Doctor Welcome Card -->
|
||||
<div class="card mb-md" style="display:flex;align-items:center;gap:var(--gap-sm)">
|
||||
<div class="avatar">李</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx)">李明 主任医师</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:4px">心内科 · 第一人民医院</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-top:6px">今日待诊 <span class="font-serif font-bold">8</span> 人 · 已完成 <span class="font-serif font-bold">3</span> 人</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stat Grid -->
|
||||
<div class="stat-grid mb-md">
|
||||
<div class="stat-card stat-card--primary">
|
||||
<div class="stat-card__value">12</div>
|
||||
<div class="stat-card__label">待处理</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__value" style="color:var(--info)">8</div>
|
||||
<div class="stat-card__label">今日预约</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__value" style="color:var(--warning)">5</div>
|
||||
<div class="stat-card__label">咨询消息</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__value" style="color:var(--danger)">2</div>
|
||||
<div class="stat-card__label">告警提醒</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 待办事项 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div>
|
||||
<div class="section-title__text">待办事项</div>
|
||||
</div>
|
||||
<div class="section-title__action">全部 ›</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list mb-md">
|
||||
<!-- Todo 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--amber">
|
||||
<span>📋</span>
|
||||
</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">患者王刚 - 复查报告审核</div>
|
||||
<div class="list-item__desc">10:30</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">待处理</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Todo 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--red">
|
||||
<span>⚠️</span>
|
||||
</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">患者刘洋 - 透析方案调整</div>
|
||||
<div class="list-item__desc">09:00</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--error">紧急</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Todo 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--blue">
|
||||
<span>📝</span>
|
||||
</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">患者陈红 - 随访计划制定</div>
|
||||
<div class="list-item__desc">昨天</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--info">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 今日预约 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div>
|
||||
<div class="section-title__text">今日预约</div>
|
||||
</div>
|
||||
<div class="section-title__action">全部 ›</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list">
|
||||
<!-- Appointment 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">
|
||||
<span>✅</span>
|
||||
</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">09:30 张伟</div>
|
||||
<div class="list-item__desc">心内科门诊 · 初诊</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Appointment 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--amber">
|
||||
<span>🕐</span>
|
||||
</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">10:00 赵芳</div>
|
||||
<div class="list-item__desc">心内科门诊 · 复诊</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">待诊</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
139
docs/prototypes/mp/04-pkg-doctor-core/patient-detail.html
Normal file
139
docs/prototypes/mp/04-pkg-doctor-core/patient-detail.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>患者详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">患者详情</span>
|
||||
<div class="nav-bar__actions">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);cursor:pointer">📝 编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Patient Header Card -->
|
||||
<div class="card mb-md" style="text-align:center">
|
||||
<div class="avatar avatar--lg" style="margin:0 auto var(--gap-sm)">王</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px">
|
||||
<span style="font-size:var(--font-body-lg);font-weight:600;color:var(--tx)">王刚</span>
|
||||
<span class="tag tag--error">高危</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3)">男 · 58岁 · ID: P20240001</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:4px">联系电话: 138****5678</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Action Buttons -->
|
||||
<div class="quick-grid mb-md">
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--orange">📋</div>
|
||||
<span class="quick-item__label">健康档案</span>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--blue">📊</div>
|
||||
<span class="quick-item__label">检验报告</span>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--green">💊</div>
|
||||
<span class="quick-item__label">用药方案</span>
|
||||
</div>
|
||||
<div class="quick-item">
|
||||
<div class="quick-item__icon quick-item__icon--amber">📅</div>
|
||||
<span class="quick-item__label">随访计划</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 基本信息 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">基本信息</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">诊断</span>
|
||||
<span class="info-row__value">高血压3级 · 冠心病</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">过敏史</span>
|
||||
<span class="info-row__value">青霉素过敏</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血型</span>
|
||||
<span class="info-row__value">A型</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">紧急联系人</span>
|
||||
<span class="info-row__value">王丽 (配偶) 139****1234</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 最新检查 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div>
|
||||
<div class="section-title__text">最新检查</div>
|
||||
</div>
|
||||
<div class="section-title__action">全部 ›</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md" style="display:flex;align-items:center;gap:var(--gap-sm)">
|
||||
<div class="list-item__icon list-item__icon--blue">
|
||||
<span>🧪</span>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:var(--font-body);font-weight:500;color:var(--tx)">血常规</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:2px">2026-05-10</div>
|
||||
</div>
|
||||
<span class="tag tag--warning">部分异常</span>
|
||||
</div>
|
||||
|
||||
<!-- Section: 近期随访 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">近期随访</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);font-weight:500;color:var(--tx)">电话随访</span>
|
||||
<span class="time-label">2026-05-12</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);line-height:1.6">血压控制欠佳，建议调整用药</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
docs/prototypes/mp/04-pkg-doctor-core/patients.html
Normal file
138
docs/prototypes/mp/04-pkg-doctor-core/patients.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>患者列表 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">患者列表</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索患者姓名/ID..." />
|
||||
</div>
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">在诊</div>
|
||||
<div class="filter-pill">透析</div>
|
||||
<div class="filter-pill">随访中</div>
|
||||
<div class="filter-pill">高危</div>
|
||||
</div>
|
||||
|
||||
<!-- Patient Card List -->
|
||||
<div class="card-list card-list--md mt-md">
|
||||
|
||||
<!-- Patient 1 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">王</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">王刚</div>
|
||||
<div class="list-item__desc">男 58岁 · 高血压3级 · 冠心病</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--error">高危</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Patient 2 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">刘</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">刘洋</div>
|
||||
<div class="list-item__desc">男 45岁 · 慢性肾病4期</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">透析中</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Patient 3 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">陈</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">陈红</div>
|
||||
<div class="list-item__desc">女 62岁 · 2型糖尿病 · 高血压</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--info">随访中</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Patient 4 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">张</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">张伟</div>
|
||||
<div class="list-item__desc">男 55岁 · 高血压2级</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">稳定</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Patient 5 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">赵</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">赵丽</div>
|
||||
<div class="list-item__desc">女 70岁 · 冠心病 · 心衰</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--default">在诊</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination">
|
||||
<button class="pagination__btn" disabled>上一页</button>
|
||||
<span class="pagination__info">第 1 / 3 页</span>
|
||||
<button class="pagination__btn">下一页</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
103
docs/prototypes/mp/05-pkg-doctor-clinical/alert-detail.html
Normal file
103
docs/prototypes/mp/05-pkg-doctor-clinical/alert-detail.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>告警详情 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / alert-detail</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">告警详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 告警头部卡片 -->
|
||||
<div class="card mb-sm" style="background: var(--danger-light);">
|
||||
<div class="flex-row gap-xs mb-xs">
|
||||
<span class="tag tag--error">紧急</span>
|
||||
</div>
|
||||
<div class="font-bold" style="font-size: var(--font-h1); color: var(--danger);">血钾异常告警</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">告警时间: 2026-05-16 09:50</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息 -->
|
||||
<div class="card mb-sm" style="display: flex; align-items: center; gap: var(--gap-sm);">
|
||||
<div class="avatar">刘</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold" style="font-size: var(--font-body-lg);">刘洋 · 男 45岁</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">慢性肾病4期</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警详情 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">告警详情</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">异常指标</span>
|
||||
<span class="info-row__value">血钾 (K⁺)</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">检测值</span>
|
||||
<span class="info-row__value text-danger font-bold">5.8 mmol/L</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">正常范围</span>
|
||||
<span class="info-row__value">3.5 - 5.3 mmol/L</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">偏离程度</span>
|
||||
<span class="info-row__value text-danger">+0.5 mmol/L (↑9.4%)</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">检测时间</span>
|
||||
<span class="info-row__value">2026-05-16 07:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 建议措施 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">建议措施</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div style="font-size: var(--font-body); line-height: 2;">
|
||||
<div>1. 立即通知主管医生</div>
|
||||
<div>2. 复查电解质</div>
|
||||
<div>3. 评估透析方案</div>
|
||||
<div>4. 必要时紧急透析</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="margin-top: var(--gap-lg); display: flex; flex-direction: column; gap: var(--gap-sm);">
|
||||
<button class="btn btn--primary btn--full">标记已处理</button>
|
||||
<button class="btn btn--outline btn--full">转交同事</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
88
docs/prototypes/mp/05-pkg-doctor-clinical/alerts.html
Normal file
88
docs/prototypes/mp/05-pkg-doctor-clinical/alerts.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>临床告警 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / alerts</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">临床告警</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 过滤标签 -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">紧急</div>
|
||||
<div class="filter-pill">重要</div>
|
||||
<div class="filter-pill">一般</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警列表 -->
|
||||
<div class="card-list" style="margin-top: var(--gap-md);">
|
||||
<!-- 告警1: 紧急 (红色左边框) -->
|
||||
<div class="card card--pressable" style="border-left: 3px solid var(--danger);">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">血钾异常</span>
|
||||
<span class="tag tag--error">紧急</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">患者刘洋血钾5.8mmol/L，需紧急处理</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">10分钟前</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警2: 重要 (琥珀色左边框) -->
|
||||
<div class="card card--pressable" style="border-left: 3px solid var(--warning);">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">透析参数异常</span>
|
||||
<span class="tag tag--warning">重要</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">患者王芳透析中超滤量偏差>15%</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">1小时前</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警3: 重要 (琥珀色左边框) -->
|
||||
<div class="card card--pressable" style="border-left: 3px solid var(--warning);">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">用药冲突</span>
|
||||
<span class="tag tag--warning">重要</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">患者张伟新处方与现有用药存在潜在交互</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2小时前</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警4: 一般 (蓝色左边框) -->
|
||||
<div class="card card--pressable" style="border-left: 3px solid var(--info);">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">检查到期</span>
|
||||
<span class="tag tag--info">一般</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">3名患者本周需复查肾功能</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">今天</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
138
docs/prototypes/mp/05-pkg-doctor-clinical/dialysis-create.html
Normal file
138
docs/prototypes/mp/05-pkg-doctor-clinical/dialysis-create.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>创建透析记录 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / dialysis-create</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">创建透析记录</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 患者选择 -->
|
||||
<div class="card mb-sm">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label form-label--required">选择患者</label>
|
||||
<select class="form-select">
|
||||
<option selected>刘洋 - 男 45岁</option>
|
||||
<option>王芳 - 女 52岁</option>
|
||||
<option>张强 - 男 60岁</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 透析基本信息表单 -->
|
||||
<div class="card">
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">透析方式</label>
|
||||
<select class="form-select">
|
||||
<option>HD (血液透析)</option>
|
||||
<option selected>HDF (血液透析滤过)</option>
|
||||
<option>HF (血液滤过)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">透析日期</label>
|
||||
<input class="form-input" type="date" value="2026-05-16">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">开始时间</label>
|
||||
<input class="form-input" type="time" value="08:00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">预计时长</label>
|
||||
<select class="form-select">
|
||||
<option>2小时</option>
|
||||
<option>3小时</option>
|
||||
<option>3.5小时</option>
|
||||
<option selected>4小时</option>
|
||||
<option>4.5小时</option>
|
||||
<option>5小时</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">血管通路</label>
|
||||
<select class="form-select">
|
||||
<option selected>动静脉内瘘</option>
|
||||
<option>中心静脉导管</option>
|
||||
<option>人工血管</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">透析器型号</label>
|
||||
<select class="form-select">
|
||||
<option>FX60</option>
|
||||
<option selected>FX80</option>
|
||||
<option>FX100</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">抗凝方式</label>
|
||||
<select class="form-select">
|
||||
<option selected>低分子肝素</option>
|
||||
<option>普通肝素</option>
|
||||
<option>无抗凝</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label">抗凝剂量</label>
|
||||
<input class="form-input" type="text" value="4000 IU" placeholder="输入剂量">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 透析参数 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">透析参数</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="form-group">
|
||||
<label class="form-label">目标血流量</label>
|
||||
<input class="form-input" type="text" value="280 ml/min" placeholder="输入血流量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">目标超滤量</label>
|
||||
<input class="form-input" type="text" value="2500 ml" placeholder="输入超滤量">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label">透析液流量</label>
|
||||
<select class="form-select">
|
||||
<option>300 ml/min</option>
|
||||
<option>400 ml/min</option>
|
||||
<option selected>500 ml/min</option>
|
||||
<option>600 ml/min</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<div style="margin-top: var(--gap-lg);">
|
||||
<button class="btn btn--primary btn--full">保存透析记录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
146
docs/prototypes/mp/05-pkg-doctor-clinical/dialysis-detail.html
Normal file
146
docs/prototypes/mp/05-pkg-doctor-clinical/dialysis-detail.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>透析详情 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / dialysis-detail</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">透析详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 状态卡片 -->
|
||||
<div class="card mb-sm">
|
||||
<div class="flex-between">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
<span class="text-tx3" style="font-size: var(--font-body-sm);">透析编号: D20260515001</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息卡片 -->
|
||||
<div class="card mb-sm" style="display: flex; align-items: center; gap: var(--gap-sm);">
|
||||
<div class="avatar">王</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold" style="font-size: var(--font-body-lg);">王芳 · 52岁 · 女</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">慢性肾病5期</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 透析基本信息 -->
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析方式</span>
|
||||
<span class="info-row__value">HDF (血液透析滤过)</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析时长</span>
|
||||
<span class="info-row__value">4小时</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血管通路</span>
|
||||
<span class="info-row__value">动静脉内瘘</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析器</span>
|
||||
<span class="info-row__value">FX80</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">抗凝方式</span>
|
||||
<span class="info-row__value">低分子肝素</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析液</span>
|
||||
<span class="info-row__value">碳酸氢盐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 透析参数 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">透析参数</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血流量</span>
|
||||
<span class="info-row__value">280 ml/min</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析液流量</span>
|
||||
<span class="info-row__value">500 ml/min</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">超滤量</span>
|
||||
<span class="info-row__value">2500 ml</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析前体重</span>
|
||||
<span class="info-row__value">65.2 kg</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析后体重</span>
|
||||
<span class="info-row__value">62.7 kg</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">干体重</span>
|
||||
<span class="info-row__value">62.5 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生命体征监测 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">生命体征监测</span>
|
||||
</div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">透析前</div>
|
||||
<div class="stat-card__value font-serif" style="font-size: var(--font-body); color: var(--tx);">BP 155/90</div>
|
||||
<div class="stat-card__label">HR 82</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">透析中</div>
|
||||
<div class="stat-card__value font-serif" style="font-size: var(--font-body); color: var(--tx);">BP 135/80</div>
|
||||
<div class="stat-card__label">HR 78</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">透析后</div>
|
||||
<div class="stat-card__value font-serif" style="font-size: var(--font-body); color: var(--tx);">BP 128/75</div>
|
||||
<div class="stat-card__label">HR 72</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 并发症 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">并发症</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="text-tx2" style="font-size: var(--font-body); line-height: 1.6;">透析过程顺利，无低血压、肌肉痉挛等并发症。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
109
docs/prototypes/mp/05-pkg-doctor-clinical/dialysis.html
Normal file
109
docs/prototypes/mp/05-pkg-doctor-clinical/dialysis.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>透析记录 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / dialysis</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">透析记录</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索患者...">
|
||||
</div>
|
||||
|
||||
<!-- 过滤标签 -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">进行中</div>
|
||||
<div class="filter-pill">已完成</div>
|
||||
<div class="filter-pill">已取消</div>
|
||||
</div>
|
||||
|
||||
<!-- 透析记录列表 -->
|
||||
<div class="card-list" style="margin-top: var(--gap-md);">
|
||||
<!-- 卡片1: 进行中 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">刘洋</span>
|
||||
<span class="tag tag--info">进行中</span>
|
||||
</div>
|
||||
<div class="text-tx3" style="font-size: var(--font-body-sm);">HD透析 · 4小时</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-16 08:00</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">血管通路: 动静脉内瘘</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片2: 待开始 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">张强</span>
|
||||
<span class="tag tag--warning">待开始</span>
|
||||
</div>
|
||||
<div class="text-tx3" style="font-size: var(--font-body-sm);">HD透析 · 3.5小时</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-16 10:00</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">血管通路: 中心静脉导管</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片3: 已完成 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">王芳</span>
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
<div class="text-tx3" style="font-size: var(--font-body-sm);">HDF透析 · 4小时</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-15 14:00</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">超滤量: 2500ml</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片4: 已取消 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">陈明</span>
|
||||
<span class="tag tag--default">已取消</span>
|
||||
</div>
|
||||
<div class="text-tx3" style="font-size: var(--font-body-sm);">HD透析 · 4小时</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-15 08:00</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">原因: 患者请假</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<button class="pagination__btn" disabled>上一页</button>
|
||||
<span class="pagination__info">1 / 2</span>
|
||||
<button class="pagination__btn">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>创建处方 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / prescription-create</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">创建处方</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 患者选择 -->
|
||||
<div class="card mb-sm">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label form-label--required">选择患者</label>
|
||||
<select class="form-select">
|
||||
<option selected>王刚 - 男 58岁</option>
|
||||
<option>刘洋 - 男 45岁</option>
|
||||
<option>陈红 - 女 63岁</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息表单 -->
|
||||
<div class="card">
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">诊断</label>
|
||||
<input class="form-input" type="text" value="高血压3级">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label">有效天数</label>
|
||||
<select class="form-select">
|
||||
<option>7天</option>
|
||||
<option>14天</option>
|
||||
<option selected>30天</option>
|
||||
<option>60天</option>
|
||||
<option>90天</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加药品 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">添加药品</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">药品名称</label>
|
||||
<input class="form-input" type="text" placeholder="搜索药品...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">规格</label>
|
||||
<input class="form-input" type="text" value="5mg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">用法</label>
|
||||
<select class="form-select">
|
||||
<option selected>口服</option>
|
||||
<option>注射</option>
|
||||
<option>外用</option>
|
||||
<option>舌下含服</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">频次</label>
|
||||
<select class="form-select">
|
||||
<option selected>每日一次 (qd)</option>
|
||||
<option>每日两次 (bid)</option>
|
||||
<option>每日三次 (tid)</option>
|
||||
<option>每晚一次 (qn)</option>
|
||||
<option>必要时 (prn)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">单次剂量</label>
|
||||
<input class="form-input" type="text" value="1片">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">用量天数</label>
|
||||
<input class="form-input" type="number" value="30">
|
||||
</div>
|
||||
<button class="btn btn--outline btn--sm btn--full">添加药品</button>
|
||||
</div>
|
||||
|
||||
<!-- 已添加药品列表 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">已添加药品</span>
|
||||
</div>
|
||||
<div class="card mb-sm" style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<div>
|
||||
<div class="font-bold" style="font-size: var(--font-body);">氨氯地平片 5mg</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">口服 · 每日一次 · 30天</div>
|
||||
</div>
|
||||
<div style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--danger); font-size: 20px; cursor: pointer;">×</div>
|
||||
</div>
|
||||
|
||||
<!-- 医嘱备注 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">医嘱备注</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<textarea class="form-textarea" placeholder="输入医嘱备注..." rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<div style="margin-top: var(--gap-lg);">
|
||||
<button class="btn btn--primary btn--full">保存处方</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>处方详情 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / prescription-detail</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">处方详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 状态卡片 -->
|
||||
<div class="card mb-sm">
|
||||
<div class="flex-between">
|
||||
<span class="tag tag--success">活跃</span>
|
||||
<span class="text-tx3" style="font-size: var(--font-body-sm);">处方编号: RX20260510001</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息 -->
|
||||
<div class="card mb-sm" style="display: flex; align-items: center; gap: var(--gap-sm);">
|
||||
<div class="avatar">王</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold" style="font-size: var(--font-body-lg);">王刚 · 58岁 · 男</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">高血压3级</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 处方信息 -->
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">开方日期</span>
|
||||
<span class="info-row__value">2026-05-10</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">开方医生</span>
|
||||
<span class="info-row__value">李明 主任医师</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">有效期至</span>
|
||||
<span class="info-row__value">2026-08-10</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">诊断</span>
|
||||
<span class="info-row__value">高血压3级 · 冠心病</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 药品明细 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">药品明细</span>
|
||||
</div>
|
||||
|
||||
<!-- 药品1 -->
|
||||
<div class="card mb-sm">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body);">氨氯地平片</span>
|
||||
<span class="tag tag--info">长期用药</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">5mg</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">每日一次 · 口服</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">30天用量</div>
|
||||
</div>
|
||||
|
||||
<!-- 药品2 -->
|
||||
<div class="card mb-sm">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body);">缬沙坦胶囊</span>
|
||||
<span class="tag tag--info">长期用药</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">80mg</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">每日一次 · 口服</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">30天用量</div>
|
||||
</div>
|
||||
|
||||
<!-- 医嘱备注 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">医嘱备注</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="text-tx2" style="font-size: var(--font-body); line-height: 1.6;">低盐低脂饮食，定期监测血压和肾功能。避免剧烈运动。2周后复查。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
99
docs/prototypes/mp/05-pkg-doctor-clinical/prescription.html
Normal file
99
docs/prototypes/mp/05-pkg-doctor-clinical/prescription.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>处方列表 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / prescription</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">处方列表</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索患者/药品...">
|
||||
</div>
|
||||
|
||||
<!-- 过滤标签 -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">活跃</div>
|
||||
<div class="filter-pill">已停用</div>
|
||||
<div class="filter-pill">已过期</div>
|
||||
</div>
|
||||
|
||||
<!-- 处方列表 -->
|
||||
<div class="card-list" style="margin-top: var(--gap-md);">
|
||||
<!-- 处方1: 活跃 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">王刚</span>
|
||||
<span class="tag tag--success">活跃</span>
|
||||
</div>
|
||||
<div class="font-bold text-tx2" style="font-size: var(--font-body-sm);">降压方案</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">氨氯地平 5mg qd + 缬沙坦 80mg qd</div>
|
||||
<div class="divider"></div>
|
||||
<div class="flex-between">
|
||||
<span class="text-tx3" style="font-size: var(--font-cap);">2026-05-10</span>
|
||||
<span class="text-tx2" style="font-size: var(--font-cap);">有效期至 2026-08-10</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 处方2: 活跃 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">刘洋</span>
|
||||
<span class="tag tag--success">活跃</span>
|
||||
</div>
|
||||
<div class="font-bold text-tx2" style="font-size: var(--font-body-sm);">肾病方案</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">骨化三醇 0.25μg qd + 碳酸钙 600mg bid</div>
|
||||
<div class="divider"></div>
|
||||
<div class="flex-between">
|
||||
<span class="text-tx3" style="font-size: var(--font-cap);">2026-05-08</span>
|
||||
<span class="text-tx3" style="font-size: var(--font-cap);"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 处方3: 即将过期 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">陈红</span>
|
||||
<span class="tag tag--warning">即将过期</span>
|
||||
</div>
|
||||
<div class="font-bold text-tx2" style="font-size: var(--font-body-sm);">降糖方案</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-body-sm);">二甲双胍 500mg tid</div>
|
||||
<div class="divider"></div>
|
||||
<div class="flex-between">
|
||||
<span class="text-tx3" style="font-size: var(--font-cap);">2026-04-15</span>
|
||||
<span class="text-warning" style="font-size: var(--font-cap);">有效期至 2026-05-20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
143
docs/prototypes/mp/05-pkg-doctor-clinical/report-detail.html
Normal file
143
docs/prototypes/mp/05-pkg-doctor-clinical/report-detail.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>报告详情 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / report-detail</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">报告详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 报告头卡片 -->
|
||||
<div class="card mb-sm">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">血常规 + 肝肾功能</span>
|
||||
<span class="tag tag--success">已审核</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">患者: 王刚 · 男 58岁</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">采样时间: 2026-05-16 07:30</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">审核医生: 李明</div>
|
||||
</div>
|
||||
|
||||
<!-- 血常规 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">血常规</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">白细胞 (WBC)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">6.5 ×10⁹/L</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">红细胞 (RBC)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">4.2 ×10¹²/L</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血红蛋白 (HGB)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">135 g/L</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血小板 (PLT)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">198 ×10⁹/L</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">中性粒细胞</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">68%</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 肝肾功能 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">肝肾功能</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">谷丙转氨酶 (ALT)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">28 U/L</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">谷草转氨酶 (AST)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">22 U/L</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">肌酐 (Cr)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value text-danger">112 µmol/L</span>
|
||||
<span class="tag tag--warning tag--sm">偏高 ↑</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">尿素氮 (BUN)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value">7.8 mmol/L</span>
|
||||
<span class="tag tag--success tag--sm">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">尿酸 (UA)</span>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="info-row__value text-danger">420 µmol/L</span>
|
||||
<span class="tag tag--warning tag--sm">偏高 ↑</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医生备注 -->
|
||||
<div class="section-title" style="margin-top: var(--section-gap);">
|
||||
<div class="section-title__bar"></div>
|
||||
<span class="section-title__text">医生备注</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="text-tx2" style="font-size: var(--font-body); line-height: 1.6;">肾功能指标轻度异常，建议2周后复查，继续监测。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
102
docs/prototypes/mp/05-pkg-doctor-clinical/report.html
Normal file
102
docs/prototypes/mp/05-pkg-doctor-clinical/report.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>检验报告 - HMS医生端</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-label">05-pkg-doctor-clinical / report</div>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">检验报告</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索患者...">
|
||||
</div>
|
||||
|
||||
<!-- 过滤标签 -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">待审核</div>
|
||||
<div class="filter-pill">已审核</div>
|
||||
<div class="filter-pill">异常</div>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="card-list" style="margin-top: var(--gap-md);">
|
||||
<!-- 报告1: 待审核 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">王刚</span>
|
||||
<span class="tag tag--warning">待审核</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">血常规 + 肝肾功能</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-16</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-tx3" style="font-size: var(--font-body-sm);">送检医生: 李明</div>
|
||||
</div>
|
||||
|
||||
<!-- 报告2: 异常 -->
|
||||
<div class="card card--pressable" style="border-left: 3px solid var(--danger);">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">刘洋</span>
|
||||
<span class="tag tag--error">异常</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">电解质 + 甲状旁腺</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-16</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-danger" style="font-size: var(--font-body-sm);">血钾 5.8mmol/L ↑</div>
|
||||
</div>
|
||||
|
||||
<!-- 报告3: 已审核 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">陈红</span>
|
||||
<span class="tag tag--success">已审核</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">糖化血红蛋白</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-15</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-tx3" style="font-size: var(--font-body-sm);">HbA1c 7.2%</div>
|
||||
</div>
|
||||
|
||||
<!-- 报告4: 已审核 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span class="font-bold" style="font-size: var(--font-body-lg);">张伟</span>
|
||||
<span class="tag tag--success">已审核</span>
|
||||
</div>
|
||||
<div class="text-tx2" style="font-size: var(--font-body-sm);">血脂全套</div>
|
||||
<div class="text-tx3 mt-xs" style="font-size: var(--font-cap);">2026-05-14</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-tx3" style="font-size: var(--font-body-sm);">LDL-C 3.2mmol/L</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
100
docs/prototypes/mp/06-pkg-mall/detail.html
Normal file
100
docs/prototypes/mp/06-pkg-mall/detail.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>商品详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">商品详情</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell" style="padding-bottom:calc(var(--page-pad) + 80px)">
|
||||
|
||||
<!-- Product Image -->
|
||||
<div class="card card--none mb-md" style="height:280px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;border-radius:var(--card-r);overflow:hidden">
|
||||
<span style="font-size:var(--font-body-lg);color:var(--tx3)">📸 商品图片</span>
|
||||
</div>
|
||||
|
||||
<!-- Product Info -->
|
||||
<div class="card mb-md">
|
||||
<div style="font-size:var(--font-h1);font-weight:700;color:var(--tx);margin-bottom:var(--gap-xs)">智能电子血压计</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:var(--gap-sm)">欧姆龙 U722 · 上臂式全自动</div>
|
||||
<div class="flex-row" style="gap:var(--gap-sm);align-items:baseline">
|
||||
<span style="font-size:var(--font-num-lg);font-weight:700;color:var(--pri);font-family:var(--font-serif)">1,200</span>
|
||||
<span style="font-size:var(--font-body);color:var(--pri);font-weight:600">积分</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx3);text-decoration:line-through">市场价 ¥299</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: Product Details -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">商品详情</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">品牌</span>
|
||||
<span class="info-row__value">欧姆龙</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">型号</span>
|
||||
<span class="info-row__value">U722</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">测量方式</span>
|
||||
<span class="info-row__value">上臂式</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">精度</span>
|
||||
<span class="info-row__value">±3mmHg</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">记忆功能</span>
|
||||
<span class="info-row__value">60组</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">适用人群</span>
|
||||
<span class="info-row__value">成人</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom Action Bar (Sticky) -->
|
||||
<div style="position:sticky;bottom:0;background:var(--card);padding:var(--gap-sm) var(--page-pad) calc(var(--gap-sm) + 34px);border-top:0.5px solid var(--bd-light);z-index:10">
|
||||
<button class="btn btn--primary btn--full">立即兑换</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
docs/prototypes/mp/06-pkg-mall/exchange.html
Normal file
105
docs/prototypes/mp/06-pkg-mall/exchange.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>兑换记录 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">兑换记录</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills mb-md">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">待发货</div>
|
||||
<div class="filter-pill">已发货</div>
|
||||
<div class="filter-pill">已完成</div>
|
||||
</div>
|
||||
|
||||
<!-- Exchange Card List -->
|
||||
<div class="card-list card-list--md">
|
||||
|
||||
<!-- Exchange 1: Completed -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">智能电子血压计</span>
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;font-family:var(--font-serif)">-1,200积分</span>
|
||||
<span class="time-label">2026-05-10</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3)">快递单号: SF1234567890</div>
|
||||
</div>
|
||||
|
||||
<!-- Exchange 2: Shipped -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">维生素D补充剂</span>
|
||||
<span class="tag tag--info">已发货</span>
|
||||
</div>
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;font-family:var(--font-serif)">-350积分</span>
|
||||
<span class="time-label">2026-05-14</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3)">预计5月17日送达</div>
|
||||
</div>
|
||||
|
||||
<!-- Exchange 3: Pending -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">健康手环</span>
|
||||
<span class="tag tag--warning">待发货</span>
|
||||
</div>
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;font-family:var(--font-serif)">-800积分</span>
|
||||
<span class="time-label">2026-05-16</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3)">正在备货中</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination">
|
||||
<button class="pagination__btn" disabled>‹ 上一页</button>
|
||||
<span class="pagination__info">1 / 1</span>
|
||||
<button class="pagination__btn" disabled>下一页 ›</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
99
docs/prototypes/mp/06-pkg-mall/orders.html
Normal file
99
docs/prototypes/mp/06-pkg-mall/orders.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>订单列表 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">订单列表</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills mb-md">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">待处理</div>
|
||||
<div class="filter-pill">配送中</div>
|
||||
<div class="filter-pill">已完成</div>
|
||||
<div class="filter-pill">已取消</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Card List -->
|
||||
<div class="card-list card-list--md">
|
||||
|
||||
<!-- Order 1: Completed -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2);font-family:var(--font-serif)">ORD20260510001</span>
|
||||
<span class="time-label">2026-05-10</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:var(--gap-xs)">智能电子血压计 × 1</div>
|
||||
<div class="flex-between">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;font-family:var(--font-serif)">-1,200积分</span>
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order 2: Shipping -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2);font-family:var(--font-serif)">ORD20260514002</span>
|
||||
<span class="time-label">2026-05-14</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:var(--gap-xs)">维生素D补充剂 × 2</div>
|
||||
<div class="flex-between">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;font-family:var(--font-serif)">-700积分</span>
|
||||
<span class="tag tag--info">配送中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order 3: Pending -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--tx2);font-family:var(--font-serif)">ORD20260516003</span>
|
||||
<span class="time-label">2026-05-16</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:var(--gap-xs)">健康手环 × 1</div>
|
||||
<div class="flex-between">
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:600;font-family:var(--font-serif)">-800积分</span>
|
||||
<span class="tag tag--warning">待处理</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
83
docs/prototypes/mp/07-pkg-profile/consents.html
Normal file
83
docs/prototypes/mp/07-pkg-profile/consents.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>知情同意书 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">知情同意书</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<div class="card-list">
|
||||
|
||||
<!-- Consent 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📄</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">透析治疗知情同意书</div>
|
||||
<div class="list-item__desc">2026-01-15 签署</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已签署</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consent 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📄</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">血液透析知情同意书</div>
|
||||
<div class="list-item__desc">2026-01-15 签署</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已签署</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consent 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📄</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">隐私数据处理同意书</div>
|
||||
<div class="list-item__desc">2025-12-01 签署</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已签署</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
96
docs/prototypes/mp/07-pkg-profile/diagnoses.html
Normal file
96
docs/prototypes/mp/07-pkg-profile/diagnoses.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>诊断记录 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">诊断记录</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<div class="card-list">
|
||||
|
||||
<!-- Diagnosis 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--amber">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">高血压2级</div>
|
||||
<div class="list-item__desc">2026-05-10 · 李明 主任医师</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">活跃</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diagnosis 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--blue">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">2型糖尿病</div>
|
||||
<div class="list-item__desc">2025-12-15 · 王芳 副主任医师</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--info">管理中</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diagnosis 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">高脂血症</div>
|
||||
<div class="list-item__desc">2025-12-01 · 李明 主任医师</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已控制</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diagnosis 4 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--blue">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">高血压1级</div>
|
||||
<div class="list-item__desc">2020-03-20 · 张三 主任医师</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--default">历史</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>处方详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">处方详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Header Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="flex-row" style="gap:var(--gap-sm);margin-bottom:var(--gap-xs)">
|
||||
<span style="font-size:var(--font-h1);font-weight:600;color:var(--tx)">标准HDF处方</span>
|
||||
<span class="tag tag--success">活跃</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3)">生效日期: 2026-05-01</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析方式</span>
|
||||
<span class="info-row__value">HDF</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血流量</span>
|
||||
<span class="info-row__value">280 ml/min</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析液流量</span>
|
||||
<span class="info-row__value">500 ml/min</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析器</span>
|
||||
<span class="info-row__value">FX80</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">抗凝</span>
|
||||
<span class="info-row__value">低分子肝素 4000IU</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">目标超滤</span>
|
||||
<span class="info-row__value">2500 ml</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">干体重</span>
|
||||
<span class="info-row__value">62.5 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 备注 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">备注</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);line-height:var(--line-height)">
|
||||
每周3次，周一/三/五。注意监测血压和血钾。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>透析处方 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">透析处方</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<div class="card-list">
|
||||
|
||||
<!-- Prescription 1: Active -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">标准HDF处方</div>
|
||||
<div class="list-item__desc">2026-05-01生效 · 血流量280ml/min · 4小时</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">活跃</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prescription 2: Ended -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--blue">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">HD调整处方</div>
|
||||
<div class="list-item__desc">2026-03-15 至 2026-04-30</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--default">已结束</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prescription 3: Ended -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--blue">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">初始HD处方</div>
|
||||
<div class="list-item__desc">2025-12-01 至 2026-03-14</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--default">已结束</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
docs/prototypes/mp/07-pkg-profile/dialysis-record-detail.html
Normal file
105
docs/prototypes/mp/07-pkg-profile/dialysis-record-detail.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>透析详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">透析详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Status Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="flex-row" style="gap:var(--gap-sm)">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:var(--gap-xs)">记录编号: D20260515001</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析方式</span>
|
||||
<span class="info-row__value">HDF</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">时长</span>
|
||||
<span class="info-row__value">4小时</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血管通路</span>
|
||||
<span class="info-row__value">动静脉内瘘</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">透析器</span>
|
||||
<span class="info-row__value">FX80</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">超滤量</span>
|
||||
<span class="info-row__value">2500ml</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 体重变化 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">体重变化</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid mb-md">
|
||||
<div class="stat-card stat-card--warning">
|
||||
<div class="stat-card__value">65.2</div>
|
||||
<div class="stat-card__label">透前 (kg)</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card--success">
|
||||
<div class="stat-card__value">62.7</div>
|
||||
<div class="stat-card__label">透后 (kg)</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card--primary">
|
||||
<div class="stat-card__value">62.5</div>
|
||||
<div class="stat-card__label">干体重 (kg)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 并发症 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">并发症</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);line-height:var(--line-height)">
|
||||
透析过程顺利，无并发症。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
docs/prototypes/mp/07-pkg-profile/dialysis-records.html
Normal file
98
docs/prototypes/mp/07-pkg-profile/dialysis-records.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>透析记录 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">透析记录</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">近1月</div>
|
||||
<div class="filter-pill">近3月</div>
|
||||
</div>
|
||||
|
||||
<!-- Record Cards -->
|
||||
<div class="card-list mt-md">
|
||||
|
||||
<!-- Record 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">🧬</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">HDF透析</div>
|
||||
<div class="list-item__desc">2026-05-15 · 4小时 · 超滤2500ml</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Record 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">🧬</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">HD透析</div>
|
||||
<div class="list-item__desc">2026-05-12 · 4小时 · 超滤2300ml</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Record 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">🧬</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">HD透析</div>
|
||||
<div class="list-item__desc">2026-05-09 · 3.5小时 · 超滤2100ml</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination">
|
||||
<button class="pagination__btn" disabled>‹ 上一页</button>
|
||||
<span class="pagination__info">1 / 5</span>
|
||||
<button class="pagination__btn">下一页 ›</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
78
docs/prototypes/mp/07-pkg-profile/elder-mode.html
Normal file
78
docs/prototypes/mp/07-pkg-profile/elder-mode.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>长者模式 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">长者模式</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Toggle Card -->
|
||||
<div class="card card--lg mb-md" style="text-align:center;padding:var(--gap-xl) var(--card-pad)">
|
||||
<div style="font-size:var(--font-h1);font-weight:600;color:var(--tx);margin-bottom:var(--gap-xs)">长者模式</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);margin-bottom:var(--gap-md);line-height:var(--line-height)">
|
||||
开启后字体和图标将放大，操作更便捷
|
||||
</div>
|
||||
<div style="display:inline-flex;align-items:center;gap:var(--gap-sm);background:var(--success-light);padding:var(--gap-xs) var(--gap-md);border-radius:var(--r-pill)">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:var(--success)"></div>
|
||||
<span style="font-size:var(--font-body);color:var(--success);font-weight:500">已开启</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 模式说明 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">模式说明</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-lg">
|
||||
<div style="display:flex;flex-direction:column;gap:var(--gap-md)">
|
||||
<div class="flex-row" style="gap:var(--gap-sm)">
|
||||
<div style="width:32px;height:32px;border-radius:var(--r-sm);background:var(--pri-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">🔢</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);line-height:var(--line-height)">字号放大 1.35 倍，确保文字清晰可读</div>
|
||||
</div>
|
||||
<div class="flex-row" style="gap:var(--gap-sm)">
|
||||
<div style="width:32px;height:32px;border-radius:var(--r-sm);background:var(--pri-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">🖱</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);line-height:var(--line-height)">触摸目标放大至 56px，减少误操作</div>
|
||||
</div>
|
||||
<div class="flex-row" style="gap:var(--gap-sm)">
|
||||
<div style="width:32px;height:32px;border-radius:var(--r-sm);background:var(--pri-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">📴</div>
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);line-height:var(--line-height)">页面间距增加，信息更加疏朗</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Button -->
|
||||
<button class="btn btn--primary btn--full">切换长者模式</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
docs/prototypes/mp/07-pkg-profile/events.html
Normal file
91
docs/prototypes/mp/07-pkg-profile/events.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>线下活动 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">线下活动</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">即将开始</div>
|
||||
<div class="filter-pill">进行中</div>
|
||||
<div class="filter-pill">已结束</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Cards -->
|
||||
<div class="card-list mt-md">
|
||||
|
||||
<!-- Event 1 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row" style="gap:var(--gap-sm);margin-bottom:var(--gap-xs)">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx);flex:1">高血压患者健康讲座</span>
|
||||
<span class="tag tag--warning">即将开始</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-2xs)">2026-05-20 14:00</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-xs)">第一人民医院3楼会议室</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx2)">主讲: 李明主任 · 限额30人</div>
|
||||
</div>
|
||||
|
||||
<!-- Event 2 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row" style="gap:var(--gap-sm);margin-bottom:var(--gap-xs)">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx);flex:1">肾友会线下交流活动</span>
|
||||
<span class="tag tag--info">报名中</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-2xs)">2026-05-25 09:00</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-xs)">社区健康中心</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx2)">已有18人报名</div>
|
||||
</div>
|
||||
|
||||
<!-- Event 3 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-row" style="gap:var(--gap-sm);margin-bottom:var(--gap-xs)">
|
||||
<span style="font-size:var(--font-body);font-weight:600;color:var(--tx);flex:1">糖尿病饮食工作坊</span>
|
||||
<span class="tag tag--success">已结束</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-2xs)">2026-05-10 10:00</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-xs)">营养科示教室</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx2)">参与人数: 25人</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- More Button -->
|
||||
<div class="mt-lg">
|
||||
<button class="btn btn--outline btn--full">查看更多活动</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
95
docs/prototypes/mp/07-pkg-profile/family-add.html
Normal file
95
docs/prototypes/mp/07-pkg-profile/family-add.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>添加家人 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">添加家人</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<div class="card">
|
||||
<!-- 姓名 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">姓名</label>
|
||||
<input class="form-input" type="text" placeholder="请输入家人姓名">
|
||||
</div>
|
||||
|
||||
<!-- 关系 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label form-label--required">关系</label>
|
||||
<select class="form-select">
|
||||
<option value="">请选择关系</option>
|
||||
<option value="spouse">配偶</option>
|
||||
<option value="child">子女</option>
|
||||
<option value="parent">父母</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 身份证号 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">身份证号</label>
|
||||
<input class="form-input" type="text" placeholder="请输入身份证号">
|
||||
</div>
|
||||
|
||||
<!-- 联系电话 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">联系电话</label>
|
||||
<input class="form-input" type="tel" placeholder="请输入联系电话">
|
||||
</div>
|
||||
|
||||
<!-- 血型 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">血型</label>
|
||||
<select class="form-select">
|
||||
<option value="">请选择血型</option>
|
||||
<option value="A">A型</option>
|
||||
<option value="B">B型</option>
|
||||
<option value="AB">AB型</option>
|
||||
<option value="O">O型</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 过敏史 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">过敏史</label>
|
||||
<textarea class="form-textarea" placeholder="请描述过敏情况，如无请填"无""></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="mt-lg">
|
||||
<button class="btn btn--primary btn--full">提交</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
90
docs/prototypes/mp/07-pkg-profile/family.html
Normal file
90
docs/prototypes/mp/07-pkg-profile/family.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>家人管理 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">家人管理</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Family Member List -->
|
||||
<div class="card-list">
|
||||
|
||||
<!-- Member 1: 王丽 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">王</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">王丽</div>
|
||||
<div class="list-item__desc">配偶 · 55岁</div>
|
||||
<div class="mt-xs" style="font-size:var(--font-cap);color:var(--tx3)">血缘关系: 配偶</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已认证</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member 2: 王小明 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">王</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">王小明</div>
|
||||
<div class="list-item__desc">子女 · 28岁</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已认证</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member 3: 张母 -->
|
||||
<div class="list-item">
|
||||
<div class="avatar">张</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">张母</div>
|
||||
<div class="list-item__desc">母亲 · 78岁</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">待认证</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Add Button -->
|
||||
<div class="mt-lg">
|
||||
<button class="btn btn--outline btn--full">+ 添加家人</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
101
docs/prototypes/mp/07-pkg-profile/followup-detail.html
Normal file
101
docs/prototypes/mp/07-pkg-profile/followup-detail.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>随访详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">随访详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Status Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="flex-row" style="gap:var(--gap-sm)">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:var(--gap-xs)">随访编号: FU20260510001</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">随访方式</span>
|
||||
<span class="info-row__value">电话随访</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">计划日期</span>
|
||||
<span class="info-row__value">2026-05-10</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">完成日期</span>
|
||||
<span class="info-row__value">2026-05-10 14:30</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">执行医生</span>
|
||||
<span class="info-row__value">李明</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 随访记录 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">随访记录</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血压</span>
|
||||
<span class="info-row__value">128/82 mmHg</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">心率</span>
|
||||
<span class="info-row__value">72 次/分</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">用药依从性</span>
|
||||
<span class="info-row__value">良好</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 医生建议 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">医生建议</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);line-height:var(--line-height)">
|
||||
血压控制良好，继续当前治疗方案。建议低盐饮食，每日监测血压，下次随访安排在一个月后。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
docs/prototypes/mp/07-pkg-profile/followups.html
Normal file
91
docs/prototypes/mp/07-pkg-profile/followups.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>随访记录 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">随访记录</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">待执行</div>
|
||||
<div class="filter-pill">已完成</div>
|
||||
</div>
|
||||
|
||||
<!-- Follow-up Cards -->
|
||||
<div class="card-list mt-md">
|
||||
|
||||
<!-- Follow-up 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--amber">📞</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">电话随访</div>
|
||||
<div class="list-item__desc">2026-05-18</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">待执行</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Follow-up 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">🏥</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">门诊随访</div>
|
||||
<div class="list-item__desc">2026-05-10</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Follow-up 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📞</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">电话随访</div>
|
||||
<div class="list-item__desc">2026-04-25</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
107
docs/prototypes/mp/07-pkg-profile/health-records.html
Normal file
107
docs/prototypes/mp/07-pkg-profile/health-records.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>健康档案 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">健康档案</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Profile Summary Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="flex-row" style="gap:var(--gap-sm)">
|
||||
<div class="avatar avatar--lg">张</div>
|
||||
<div>
|
||||
<div style="font-size:var(--font-h1);font-weight:600;color:var(--tx)">张伟</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-top:4px">男 · 55岁</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx3);margin-top:4px">建档日期: 2025-12-01</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 基本信息 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">基本信息</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血型</span>
|
||||
<span class="info-row__value">A型</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">身高</span>
|
||||
<span class="info-row__value">172 cm</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体重</span>
|
||||
<span class="info-row__value">68.5 kg</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">BMI</span>
|
||||
<span class="info-row__value">23.1</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">过敏史</span>
|
||||
<span class="info-row__value">青霉素</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 既往病史 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">既往病史</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--gap-xs)">
|
||||
<span class="chip">高血压2级 (2020年)</span>
|
||||
<span class="chip">2型糖尿病 (2022年)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 家族史 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">家族史</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--gap-xs)">
|
||||
<span class="chip">父亲: 高血压</span>
|
||||
<span class="chip">母亲: 糖尿病</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
docs/prototypes/mp/07-pkg-profile/medication.html
Normal file
138
docs/prototypes/mp/07-pkg-profile/medication.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>用药记录 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">用药记录</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Section: 当前用药 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">当前用药</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list mb-md">
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--orange">💊</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">氨氯地平片 5mg</div>
|
||||
<div class="list-item__desc">每日一次 · 08:00</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--info">长期</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--orange">💊</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">缬沙坦胶囊 80mg</div>
|
||||
<div class="list-item__desc">每日一次 · 08:00</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--info">长期</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Section: 今日打卡 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">今日打卡</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list mb-md">
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green" style="font-size:24px">✅</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">氨氯地平</div>
|
||||
<div class="list-item__desc">08:05 已服用</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--amber" style="font-size:24px">⬜</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">缬沙坦</div>
|
||||
<div class="list-item__desc">待服用</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Section: 用药历史 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">用药历史</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list">
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">05/15</div>
|
||||
<div class="list-item__desc">全部已服</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">05/14</div>
|
||||
<div class="list-item__desc">全部已服</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">05/13</div>
|
||||
<div class="list-item__desc">部分漏服</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">漏服</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
87
docs/prototypes/mp/07-pkg-profile/report-detail.html
Normal file
87
docs/prototypes/mp/07-pkg-profile/report-detail.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>报告详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">报告详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Header Card -->
|
||||
<div class="card mb-md">
|
||||
<div class="flex-row" style="gap:var(--gap-sm);margin-bottom:var(--gap-xs)">
|
||||
<span style="font-size:var(--font-h1);font-weight:600;color:var(--tx)">2026年度体检报告</span>
|
||||
<span class="tag tag--success">正常</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:var(--gap-xs)">检查日期: 2026-03-15</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-top:var(--gap-2xs)">检查机构: 第一人民医院</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 检查项目 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">检查项目</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">血常规</span>
|
||||
<span class="info-row__value"><span class="tag tag--success">正常</span></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">肝肾功能</span>
|
||||
<span class="info-row__value"><span class="tag tag--success">正常</span></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">心电图</span>
|
||||
<span class="info-row__value"><span class="tag tag--success">正常</span></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">腹部B超</span>
|
||||
<span class="info-row__value"><span class="tag tag--success">正常</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: 医生建议 -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">医生建议</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div style="font-size:var(--font-body);color:var(--tx2);line-height:var(--line-height)">
|
||||
各项指标基本正常，建议继续保持健康生活方式，半年后复查。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
docs/prototypes/mp/07-pkg-profile/reports.html
Normal file
105
docs/prototypes/mp/07-pkg-profile/reports.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>体检报告 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">体检报告</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索体检报告">
|
||||
</div>
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">血常规</div>
|
||||
<div class="filter-pill">肝肾功能</div>
|
||||
<div class="filter-pill">影像</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Cards -->
|
||||
<div class="card-list mt-md">
|
||||
|
||||
<!-- Report 1 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--green">📋</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">2026年度体检报告</div>
|
||||
<div class="list-item__desc">2026-03-15</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">正常</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report 2 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--orange">🔬</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">血常规检查</div>
|
||||
<div class="list-item__desc">2026-05-10</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--warning">部分异常</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report 3 -->
|
||||
<div class="list-item">
|
||||
<div class="list-item__icon list-item__icon--blue">🔁</div>
|
||||
<div class="list-item__content">
|
||||
<div class="list-item__title">腹部B超</div>
|
||||
<div class="list-item__desc">2026-02-20</div>
|
||||
</div>
|
||||
<div class="list-item__right">
|
||||
<span class="tag tag--success">正常</span>
|
||||
<span class="list-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination">
|
||||
<button class="pagination__btn" disabled>‹ 上一页</button>
|
||||
<span class="pagination__info">1 / 3</span>
|
||||
<button class="pagination__btn">下一页 ›</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
125
docs/prototypes/mp/07-pkg-profile/settings.html
Normal file
125
docs/prototypes/mp/07-pkg-profile/settings.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设置 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">设置</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell" style="padding:0">
|
||||
|
||||
<!-- Account Section -->
|
||||
<div style="padding:var(--page-pad);padding-bottom:var(--gap-xs)">
|
||||
<div class="section-title" style="margin-bottom:0">
|
||||
<div class="section-title__text" style="font-size:var(--font-body-sm);color:var(--tx3)">账号与安全</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">🔒</div>
|
||||
<div class="menu-item__text">修改密码</div>
|
||||
<div class="menu-item__arrow">›</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">📱</div>
|
||||
<div class="menu-item__text">绑定手机</div>
|
||||
<div class="menu-item__extra">138****8888</div>
|
||||
<div class="menu-item__arrow">›</div>
|
||||
</div>
|
||||
<div class="menu-item" style="border-bottom:none">
|
||||
<div class="menu-item__icon" style="color:var(--success)">💬</div>
|
||||
<div class="menu-item__text">微信绑定</div>
|
||||
<div class="menu-item__extra">已绑定</div>
|
||||
<div class="menu-item__arrow">›</div>
|
||||
</div>
|
||||
|
||||
<div style="height:var(--gap-sm);background:var(--bg)"></div>
|
||||
|
||||
<!-- Notification Section -->
|
||||
<div style="padding:var(--page-pad);padding-bottom:var(--gap-xs)">
|
||||
<div class="section-title" style="margin-bottom:0">
|
||||
<div class="section-title__text" style="font-size:var(--font-body-sm);color:var(--tx3)">通知设置</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">🔔</div>
|
||||
<div class="menu-item__text">预约提醒</div>
|
||||
<div class="menu-item__extra" style="color:var(--success)">已开启</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">💊</div>
|
||||
<div class="menu-item__text">用药提醒</div>
|
||||
<div class="menu-item__extra" style="color:var(--success)">已开启</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">⚠</div>
|
||||
<div class="menu-item__text">健康告警</div>
|
||||
<div class="menu-item__extra" style="color:var(--success)">已开启</div>
|
||||
</div>
|
||||
<div class="menu-item" style="border-bottom:none">
|
||||
<div class="menu-item__icon">📰</div>
|
||||
<div class="menu-item__text">文章推送</div>
|
||||
<div class="menu-item__extra">已关闭</div>
|
||||
</div>
|
||||
|
||||
<div style="height:var(--gap-sm);background:var(--bg)"></div>
|
||||
|
||||
<!-- Other Section -->
|
||||
<div style="padding:var(--page-pad);padding-bottom:var(--gap-xs)">
|
||||
<div class="section-title" style="margin-bottom:0">
|
||||
<div class="section-title__text" style="font-size:var(--font-body-sm);color:var(--tx3)">其他</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">📄</div>
|
||||
<div class="menu-item__text">清除缓存</div>
|
||||
<div class="menu-item__extra">12.3 MB</div>
|
||||
<div class="menu-item__arrow">›</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item__icon">ℹ</div>
|
||||
<div class="menu-item__text">关于我们</div>
|
||||
<div class="menu-item__arrow">›</div>
|
||||
</div>
|
||||
<div class="menu-item" style="border-bottom:none">
|
||||
<div class="menu-item__icon" style="color:var(--danger)">🚪</div>
|
||||
<div class="menu-item__text" style="color:var(--danger)">退出登录</div>
|
||||
</div>
|
||||
|
||||
<!-- Version -->
|
||||
<div style="text-align:center;padding:var(--gap-xl) 0 var(--gap-lg)">
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">v1.2.0</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
130
docs/prototypes/mp/08-pkg-other/ai-report-detail.html
Normal file
130
docs/prototypes/mp/08-pkg-other/ai-report-detail.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 报告详情 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">AI 报告详情</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell" style="padding-bottom:calc(var(--page-pad) + 80px)">
|
||||
|
||||
<!-- Report Header -->
|
||||
<div class="card mb-md">
|
||||
<div class="flex-between mb-sm">
|
||||
<span style="font-size:var(--font-h1);font-weight:700;color:var(--tx)">血常规智能解读</span>
|
||||
<span class="tag tag--warning">需关注</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-2xs)">生成时间: 2026-05-16 10:30</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3)">基于 2026-05-16 血常规检验报告</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: AI Summary -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">AI 分析摘要</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md" style="background:var(--warning-light)">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);line-height:1.7">共检测 22 项指标，其中 19 项正常，3 项需关注。整体结果基本正常，建议关注以下指标变化。</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: Key Indicators -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">重点关注指标</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list card-list--md mb-md">
|
||||
|
||||
<!-- Indicator 1 -->
|
||||
<div class="card" style="border-left:4px solid var(--warning)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">白细胞 (WBC)</span>
|
||||
<span class="tag tag--warning">偏低 ↓</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-num);font-weight:700;color:var(--pri);font-family:var(--font-serif);margin-bottom:var(--gap-xs)">3.2 ×10&sup9;/L</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-2xs)">正常范围: 4.0-10.0</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2)">建议: 关注免疫功能，必要时复查</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicator 2 -->
|
||||
<div class="card" style="border-left:4px solid var(--warning)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">血红蛋白 (HGB)</span>
|
||||
<span class="tag tag--warning">偏低 ↓</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-num);font-weight:700;color:var(--pri);font-family:var(--font-serif);margin-bottom:var(--gap-xs)">118 g/L</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-2xs)">正常范围: 120-160</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2)">建议: 适当补充铁剂和蛋白质</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicator 3 -->
|
||||
<div class="card" style="border-left:4px solid var(--warning)">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">血小板 (PLT)</span>
|
||||
<span class="tag tag--warning">偏低 ↓</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-num);font-weight:700;color:var(--pri);font-family:var(--font-serif);margin-bottom:var(--gap-xs)">98 ×10&sup9;/L</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:var(--gap-2xs)">正常范围: 100-300</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2)">建议: 2周后复查血小板</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Section: AI Advice -->
|
||||
<div class="section-title">
|
||||
<div class="section-title__bar"></div>
|
||||
<div class="section-title__text">AI 建议</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-md">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);line-height:2">
|
||||
1. 建议加强营养摄入，适当补充铁剂<br>
|
||||
2. 2周后复查血常规<br>
|
||||
3. 避免剧烈运动，注意休息<br>
|
||||
4. 如有头晕、乏力等症状，请及时就医
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom Actions -->
|
||||
<div style="position:sticky;bottom:0;background:var(--card);padding:var(--gap-sm) var(--page-pad) calc(var(--gap-sm) + 34px);border-top:0.5px solid var(--bd-light);display:flex;gap:var(--gap-sm);z-index:10">
|
||||
<button class="btn btn--outline" style="flex:1">分享给医生</button>
|
||||
<button class="btn btn--primary" style="flex:1">下载报告</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
117
docs/prototypes/mp/08-pkg-other/ai-report-list.html
Normal file
117
docs/prototypes/mp/08-pkg-other/ai-report-list.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 分析报告 · HMS</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone">
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">AI 分析报告</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="search-bar mb-sm">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input type="text" class="search-bar__input" placeholder="搜索报告...">
|
||||
</div>
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="filter-pills mb-md">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">化验解读</div>
|
||||
<div class="filter-pill">趋势分析</div>
|
||||
<div class="filter-pill">健康评估</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Card List -->
|
||||
<div class="card-list card-list--md">
|
||||
|
||||
<!-- Report 1 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">血常规智能解读</span>
|
||||
<span class="tag tag--warning">需关注</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:var(--gap-xs)">AI分析发现3项指标需关注</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">2026-05-16</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:500">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report 2 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">肾功能趋势分析</span>
|
||||
<span class="tag tag--info">趋势分析</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:var(--gap-xs)">近3个月肌酐呈上升趋势</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">2026-05-15</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:500">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report 3 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">综合健康评估</span>
|
||||
<span class="tag tag--success">良好</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:var(--gap-xs)">您的健康评分: 82/100</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">2026-05-10</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:500">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report 4 -->
|
||||
<div class="card card--pressable">
|
||||
<div class="flex-between mb-xs">
|
||||
<span style="font-size:var(--font-body);color:var(--tx);font-weight:600">血糖管理报告</span>
|
||||
<span class="tag tag--success">达标</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx2);margin-bottom:var(--gap-xs)">近30天血糖控制达标率85%</div>
|
||||
<div class="flex-between">
|
||||
<span class="time-label">2026-05-01</span>
|
||||
<span style="font-size:var(--font-body-sm);color:var(--pri);font-weight:500">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
72
docs/prototypes/mp/08-pkg-other/article-detail.html
Normal file
72
docs/prototypes/mp/08-pkg-other/article-detail.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=375, initial-scale=1">
|
||||
<title>文章详情 - HMS小程序原型</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">文章详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<div style="margin-bottom:var(--gap-md)">
|
||||
<h1 style="font-size:var(--font-h1);font-weight:700;color:var(--tx);line-height:1.4;margin-bottom:12px">高血压日常管理指南</h1>
|
||||
<div class="flex-row gap-xs" style="flex-wrap:wrap">
|
||||
<span class="tag tag--info">心内科</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">5分钟阅读</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">2026-05-15</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-cap);color:var(--tx3);margin-top:8px">李明 主任医师 审阅</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="line-height:2;font-size:var(--font-body);color:var(--tx)">
|
||||
<p style="margin-bottom:var(--gap-md)">高血压是一种常见的慢性疾病，长期血压控制不佳会增加心脑血管疾病的风险。以下是一些日常管理建议：</p>
|
||||
|
||||
<p style="font-weight:600;margin-bottom:8px">一、规律用药</p>
|
||||
<p style="margin-bottom:var(--gap-md)">遵医嘱按时服药，不可自行停药或调整剂量。建议设置用药提醒。</p>
|
||||
|
||||
<p style="font-weight:600;margin-bottom:8px">二、低盐饮食</p>
|
||||
<p style="margin-bottom:var(--gap-md)">每日钠盐摄入量控制在6g以下。减少加工食品和外卖的摄入。</p>
|
||||
|
||||
<p style="font-weight:600;margin-bottom:8px">三、适量运动</p>
|
||||
<p style="margin-bottom:var(--gap-md)">每周进行150分钟中等强度有氧运动，如快走、游泳等。避免剧烈运动。</p>
|
||||
|
||||
<p style="font-weight:600;margin-bottom:8px">四、定期监测</p>
|
||||
<p style="margin-bottom:var(--gap-md)">建议每日早晚各测一次血压，记录数据供医生参考。</p>
|
||||
|
||||
<p style="font-weight:600;margin-bottom:8px">五、情绪管理</p>
|
||||
<p>保持心情平和，避免过度紧张和焦虑。可以通过冥想、深呼吸等方式放松。</p>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:var(--gap-sm);margin-top:var(--gap-lg)">
|
||||
<button class="btn btn--outline" style="flex:1">收藏</button>
|
||||
<button class="btn btn--primary" style="flex:1">分享</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
110
docs/prototypes/mp/08-pkg-other/article-list.html
Normal file
110
docs/prototypes/mp/08-pkg-other/article-list.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=375, initial-scale=1">
|
||||
<title>健康文章 - HMS小程序原型</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">健康文章</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="page-shell">
|
||||
|
||||
<div class="search-bar">
|
||||
<span class="search-bar__icon">🔍</span>
|
||||
<input class="search-bar__input" type="text" placeholder="搜索文章...">
|
||||
</div>
|
||||
|
||||
<div class="filter-pills">
|
||||
<div class="filter-pill filter-pill--active">全部</div>
|
||||
<div class="filter-pill">高血压</div>
|
||||
<div class="filter-pill">糖尿病</div>
|
||||
<div class="filter-pill">肾病</div>
|
||||
<div class="filter-pill">饮食</div>
|
||||
<div class="filter-pill">运动</div>
|
||||
</div>
|
||||
|
||||
<div class="card-list mt-md">
|
||||
<div class="card card--pressable">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:6px">高血压日常管理指南</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">详细介绍高血压患者在日常生活中的注意事项，包括饮食、运动、用药等方面的科学建议。</div>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="tag tag--info">高血压</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">5分钟阅读</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">2026-05-15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card--pressable">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:6px">糖尿病患者饮食建议</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">科学的饮食控制是糖尿病管理的基础，本文为您详细介绍如何合理安排每日膳食。</div>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="tag tag--success">饮食</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">3分钟阅读</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">2026-05-14</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card--pressable">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:6px">透析患者的生活质量提升</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">通过合理的生活方式调整，透析患者也可以拥有良好的生活质量。</div>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="tag tag--info">肾病</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">8分钟阅读</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">2026-05-12</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card--pressable">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:6px">运动与心血管健康</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">适量运动对心血管系统的保护作用已被大量研究证实。</div>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="tag tag--warning">运动</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">6分钟阅读</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">2026-05-10</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card--pressable">
|
||||
<div style="font-size:var(--font-body);color:var(--tx);font-weight:600;margin-bottom:6px">如何正确测量血压</div>
|
||||
<div style="font-size:var(--font-body-sm);color:var(--tx3);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">正确的血压测量方法对高血压的诊断和管理至关重要。</div>
|
||||
<div class="flex-row gap-xs">
|
||||
<span class="tag tag--info">高血压</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">4分钟阅读</span>
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3)">2026-05-08</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<button class="pagination__btn" disabled>上一页</button>
|
||||
<span class="pagination__info">1 / 3</span>
|
||||
<button class="pagination__btn">下一页</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
docs/prototypes/mp/08-pkg-other/consultation-detail.html
Normal file
82
docs/prototypes/mp/08-pkg-other/consultation-detail.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=375, initial-scale=1">
|
||||
<title>咨询详情 - HMS小程序原型</title>
|
||||
<link rel="stylesheet" href="../shared/tokens.css">
|
||||
<link rel="stylesheet" href="../shared/components.css">
|
||||
<link rel="stylesheet" href="../shared/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">9:41</div>
|
||||
<div class="status-bar__center"></div>
|
||||
<div class="status-bar__right">
|
||||
<div class="status-bar__signal">
|
||||
<div class="status-bar__bar" style="height:4px"></div>
|
||||
<div class="status-bar__bar" style="height:6px"></div>
|
||||
<div class="status-bar__bar" style="height:9px"></div>
|
||||
<div class="status-bar__bar" style="height:12px"></div>
|
||||
</div>
|
||||
<div class="status-bar__battery"><div class="status-bar__battery-fill"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar__back">‹</div>
|
||||
<span class="nav-bar__title">咨询详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
<div style="display:flex;align-items:center;gap:var(--gap-xs);padding:var(--gap-xs) var(--page-pad);background:var(--card);border-bottom:1px solid var(--bd-light);position:sticky;top:0;z-index:10">
|
||||
<div class="avatar avatar--sm">张</div>
|
||||
<div>
|
||||
<div style="font-size:var(--font-body);font-weight:600;color:var(--tx)">张医生 · 心内科</div>
|
||||
</div>
|
||||
<span class="tag tag--success" style="margin-left:auto">在线</span>
|
||||
</div>
|
||||
|
||||
<div class="page-shell">
|
||||
<div class="chat-list">
|
||||
<div style="text-align:center;margin-bottom:var(--gap-sm)">
|
||||
<span style="font-size:var(--font-cap);color:var(--tx3);background:var(--surface-alt);padding:4px 12px;border-radius:var(--r-pill)">今天 09:00</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble chat-bubble--left">
|
||||
您好，请问您哪里不舒服？
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble chat-bubble--right">
|
||||
医生您好，我最近一周血压有点偏高，经常头晕头痛。
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble chat-bubble--left">
|
||||
请问您目前有服用降压药吗？血压最高到过多少？
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble chat-bubble--right">
|
||||
在吃氨氯地平，每天一片。今早测了155/95。
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble chat-bubble--left">
|
||||
了解了。血压确实偏高，建议：<br>1. 增加缬沙坦80mg，每日一次<br>2. 低盐饮食<br>3. 一周后复查<br>我先给您开个处方。
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble chat-bubble--right">
|
||||
好的，谢谢医生！
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:80px"></div>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-bar">
|
||||
<input class="chat-input-bar__field" type="text" placeholder="输入消息...">
|
||||
<button class="btn btn--primary btn--sm">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
568
docs/prototypes/mp/index.html
Normal file
568
docs/prototypes/mp/index.html
Normal file
@@ -0,0 +1,568 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HMS 小程序原型稿 · 页面导航</title>
|
||||
<style>
|
||||
:root {
|
||||
--pri: #C4623A;
|
||||
--success: #5B7A5E;
|
||||
--bg: #F5F0EB;
|
||||
--card: #FFFFFF;
|
||||
--tx: #2D2A26;
|
||||
--tx2: #5A554F;
|
||||
--tx3: #78716C;
|
||||
--bd: #E8E2DC;
|
||||
--bd-light: #F0EBE5;
|
||||
--info: #3B82F6;
|
||||
--warning: #C4873A;
|
||||
--danger: #B54A4A;
|
||||
--card-r: 12px;
|
||||
--shadow-sm: 0 1px 4px rgba(45,42,38,0.04);
|
||||
--shadow-md: 0 2px 12px rgba(45,42,38,0.08);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--tx);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--bd);
|
||||
padding: 40px 0 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--tx);
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 14px;
|
||||
color: var(--tx3);
|
||||
}
|
||||
|
||||
.page-header .stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.page-header .stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header .stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--pri);
|
||||
}
|
||||
|
||||
.page-header .stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--tx3);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px 64px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--tx);
|
||||
}
|
||||
|
||||
.section-header .count {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--tx3);
|
||||
background: var(--bd-light);
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-grid.compact {
|
||||
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
|
||||
}
|
||||
|
||||
.link-card {
|
||||
display: block;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--bd-light);
|
||||
border-radius: var(--card-r);
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--accent-color);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.link-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--bd);
|
||||
}
|
||||
|
||||
.link-card:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.link-card .card-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--tx);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.link-card .card-path {
|
||||
font-size: 12px;
|
||||
color: var(--tx3);
|
||||
font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.link-card:hover .card-name {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 32px 0 48px;
|
||||
font-size: 13px;
|
||||
color: var(--tx3);
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: var(--pri);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page-header { padding: 28px 16px 24px; }
|
||||
.page-header h1 { font-size: 22px; }
|
||||
.page-header .stats { gap: 20px; }
|
||||
.page-header .stat-value { font-size: 20px; }
|
||||
.container { padding: 20px 16px 48px; }
|
||||
.card-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
||||
.card-grid.compact { grid-template-columns: repeat(2, 1fr); }
|
||||
.link-card { padding: 12px; }
|
||||
.link-card .card-name { font-size: 14px; }
|
||||
.link-card .card-path { font-size: 11px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="page-header">
|
||||
<h1>HMS 小程序原型稿 · 页面导航</h1>
|
||||
<p>Health Management System — 微信患者端 / 医护端原型页面一览</p>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">59</div>
|
||||
<div class="stat-label">原型页面</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">8</div>
|
||||
<div class="stat-label">页面分组</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">66</div>
|
||||
<div class="stat-label">小程序页面</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- 1. Tab 页面 -->
|
||||
<section class="section" style="--accent-color: #C4623A;">
|
||||
<div class="section-header">
|
||||
<h2>Tab 页面</h2>
|
||||
<span class="count">4 页</span>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<a class="link-card" href="01-tabs/home.html">
|
||||
<div class="card-name">首页</div>
|
||||
<div class="card-path">pages/index/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="01-tabs/health.html">
|
||||
<div class="card-name">健康</div>
|
||||
<div class="card-path">pages/health/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="01-tabs/messages.html">
|
||||
<div class="card-name">消息</div>
|
||||
<div class="card-path">pages/messages/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="01-tabs/profile.html">
|
||||
<div class="card-name">我的</div>
|
||||
<div class="card-path">pages/profile/index</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 主包页面 -->
|
||||
<section class="section" style="--accent-color: #5B7A5E;">
|
||||
<div class="section-header">
|
||||
<h2>主包页面</h2>
|
||||
<span class="count">8 页</span>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<a class="link-card" href="02-main/login.html">
|
||||
<div class="card-name">登录</div>
|
||||
<div class="card-path">pages/login/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="02-main/consultation.html">
|
||||
<div class="card-name">咨询</div>
|
||||
<div class="card-path">pages/consultation/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="02-main/mall.html">
|
||||
<div class="card-name">商城</div>
|
||||
<div class="card-path">pages/mall/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="02-main/appointment.html">
|
||||
<div class="card-name">预约列表</div>
|
||||
<div class="card-path">pages/appointment/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="02-main/appointment-create.html">
|
||||
<div class="card-name">创建预约</div>
|
||||
<div class="card-path">pages/appointment/create</div>
|
||||
</a>
|
||||
<a class="link-card" href="02-main/appointment-detail.html">
|
||||
<div class="card-name">预约详情</div>
|
||||
<div class="card-path">pages/appointment/detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="02-main/user-agreement.html">
|
||||
<div class="card-name">用户协议</div>
|
||||
<div class="card-path">pages/user-agreement</div>
|
||||
</a>
|
||||
<a class="link-card" href="02-main/privacy-policy.html">
|
||||
<div class="card-name">隐私政策</div>
|
||||
<div class="card-path">pages/privacy-policy</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. 健康子包 -->
|
||||
<section class="section" style="--accent-color: #3B82F6;">
|
||||
<div class="section-header">
|
||||
<h2>健康子包</h2>
|
||||
<span class="count">5 页</span>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<a class="link-card" href="03-pkg-health/trend.html">
|
||||
<div class="card-name">趋势分析</div>
|
||||
<div class="card-path">pages/pkg-health/trend</div>
|
||||
</a>
|
||||
<a class="link-card" href="03-pkg-health/input.html">
|
||||
<div class="card-name">体征录入</div>
|
||||
<div class="card-path">pages/pkg-health/input</div>
|
||||
</a>
|
||||
<a class="link-card" href="03-pkg-health/daily-monitoring.html">
|
||||
<div class="card-name">日常监测</div>
|
||||
<div class="card-path">pages/pkg-health/daily-monitoring</div>
|
||||
</a>
|
||||
<a class="link-card" href="03-pkg-health/alerts.html">
|
||||
<div class="card-name">健康告警</div>
|
||||
<div class="card-path">pages/pkg-health/alerts</div>
|
||||
</a>
|
||||
<a class="link-card" href="03-pkg-health/device-sync.html">
|
||||
<div class="card-name">设备同步</div>
|
||||
<div class="card-path">pages/pkg-health/device-sync</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. 医生端核心 -->
|
||||
<section class="section" style="--accent-color: #C4873A;">
|
||||
<div class="section-header">
|
||||
<h2>医生端核心</h2>
|
||||
<span class="count">8 页</span>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<a class="link-card" href="04-pkg-doctor-core/index.html">
|
||||
<div class="card-name">工作台</div>
|
||||
<div class="card-path">pages/pkg-doctor/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="04-pkg-doctor-core/patients.html">
|
||||
<div class="card-name">患者列表</div>
|
||||
<div class="card-path">pages/pkg-doctor/patients</div>
|
||||
</a>
|
||||
<a class="link-card" href="04-pkg-doctor-core/patient-detail.html">
|
||||
<div class="card-name">患者详情</div>
|
||||
<div class="card-path">pages/pkg-doctor/patient-detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="04-pkg-doctor-core/consultation.html">
|
||||
<div class="card-name">咨询列表</div>
|
||||
<div class="card-path">pages/pkg-doctor/consultation</div>
|
||||
</a>
|
||||
<a class="link-card" href="04-pkg-doctor-core/consultation-detail.html">
|
||||
<div class="card-name">咨询详情</div>
|
||||
<div class="card-path">pages/pkg-doctor/consultation-detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="04-pkg-doctor-core/followup.html">
|
||||
<div class="card-name">随访列表</div>
|
||||
<div class="card-path">pages/pkg-doctor/followup</div>
|
||||
</a>
|
||||
<a class="link-card" href="04-pkg-doctor-core/followup-detail.html">
|
||||
<div class="card-name">随访详情</div>
|
||||
<div class="card-path">pages/pkg-doctor/followup-detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="04-pkg-doctor-core/action-inbox.html">
|
||||
<div class="card-name">待办事项</div>
|
||||
<div class="card-path">pages/pkg-doctor/action-inbox</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. 医生端临床 -->
|
||||
<section class="section" style="--accent-color: #B54A4A;">
|
||||
<div class="section-header">
|
||||
<h2>医生端临床</h2>
|
||||
<span class="count">10 页</span>
|
||||
</div>
|
||||
<div class="card-grid compact">
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/dialysis.html">
|
||||
<div class="card-name">透析记录列表</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/dialysis</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/dialysis-detail.html">
|
||||
<div class="card-name">透析详情</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/dialysis/detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/dialysis-create.html">
|
||||
<div class="card-name">创建透析记录</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/dialysis/create</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/prescription.html">
|
||||
<div class="card-name">处方列表</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/prescription</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/prescription-detail.html">
|
||||
<div class="card-name">处方详情</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/prescription/detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/prescription-create.html">
|
||||
<div class="card-name">创建处方</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/prescription/create</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/report.html">
|
||||
<div class="card-name">检验报告列表</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/report</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/report-detail.html">
|
||||
<div class="card-name">检验报告详情</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/report/detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/alerts.html">
|
||||
<div class="card-name">临床告警列表</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/alerts</div>
|
||||
</a>
|
||||
<a class="link-card" href="05-pkg-doctor-clinical/alert-detail.html">
|
||||
<div class="card-name">告警详情</div>
|
||||
<div class="card-path">pages/pkg-doctor-clinical/alerts/detail</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. 商城子包 -->
|
||||
<section class="section" style="--accent-color: #C4623A;">
|
||||
<div class="section-header">
|
||||
<h2>商城子包</h2>
|
||||
<span class="count">3 页</span>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<a class="link-card" href="06-pkg-mall/detail.html">
|
||||
<div class="card-name">商品详情</div>
|
||||
<div class="card-path">pages/pkg-mall/detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="06-pkg-mall/exchange.html">
|
||||
<div class="card-name">兑换记录</div>
|
||||
<div class="card-path">pages/pkg-mall/exchange</div>
|
||||
</a>
|
||||
<a class="link-card" href="06-pkg-mall/orders.html">
|
||||
<div class="card-name">订单列表</div>
|
||||
<div class="card-path">pages/pkg-mall/orders</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. 个人中心子包 -->
|
||||
<section class="section" style="--accent-color: #5B7A5E;">
|
||||
<div class="section-header">
|
||||
<h2>个人中心子包</h2>
|
||||
<span class="count">17 页</span>
|
||||
</div>
|
||||
<div class="card-grid compact">
|
||||
<a class="link-card" href="07-pkg-profile/family.html">
|
||||
<div class="card-name">家人管理</div>
|
||||
<div class="card-path">pages/pkg-profile/family</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/family-add.html">
|
||||
<div class="card-name">添加家人</div>
|
||||
<div class="card-path">pages/pkg-profile/family-add</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/reports.html">
|
||||
<div class="card-name">体检报告</div>
|
||||
<div class="card-path">pages/pkg-profile/reports</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/report-detail.html">
|
||||
<div class="card-name">报告详情</div>
|
||||
<div class="card-path">pages/pkg-profile/report-detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/followups.html">
|
||||
<div class="card-name">随访记录</div>
|
||||
<div class="card-path">pages/pkg-profile/followups</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/followup-detail.html">
|
||||
<div class="card-name">随访详情</div>
|
||||
<div class="card-path">pages/pkg-profile/followup-detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/medication.html">
|
||||
<div class="card-name">用药记录</div>
|
||||
<div class="card-path">pages/pkg-profile/medication</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/settings.html">
|
||||
<div class="card-name">设置</div>
|
||||
<div class="card-path">pages/pkg-profile/settings</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/dialysis-records.html">
|
||||
<div class="card-name">透析记录</div>
|
||||
<div class="card-path">pages/pkg-profile/dialysis-records</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/dialysis-record-detail.html">
|
||||
<div class="card-name">透析详情</div>
|
||||
<div class="card-path">pages/pkg-profile/dialysis-record-detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/dialysis-prescriptions.html">
|
||||
<div class="card-name">透析处方</div>
|
||||
<div class="card-path">pages/pkg-profile/dialysis-prescriptions</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/dialysis-prescription-detail.html">
|
||||
<div class="card-name">处方详情</div>
|
||||
<div class="card-path">pages/pkg-profile/dialysis-prescription-detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/consents.html">
|
||||
<div class="card-name">知情同意书</div>
|
||||
<div class="card-path">pages/pkg-profile/consents</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/health-records.html">
|
||||
<div class="card-name">健康档案</div>
|
||||
<div class="card-path">pages/pkg-profile/health-records</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/diagnoses.html">
|
||||
<div class="card-name">诊断记录</div>
|
||||
<div class="card-path">pages/pkg-profile/diagnoses</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/elder-mode.html">
|
||||
<div class="card-name">长者模式</div>
|
||||
<div class="card-path">pages/pkg-profile/elder-mode</div>
|
||||
</a>
|
||||
<a class="link-card" href="07-pkg-profile/events.html">
|
||||
<div class="card-name">线下活动</div>
|
||||
<div class="card-path">pages/pkg-profile/events</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. 其他子包 -->
|
||||
<section class="section" style="--accent-color: #78716C;">
|
||||
<div class="section-header">
|
||||
<h2>其他子包</h2>
|
||||
<span class="count">5 页</span>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<a class="link-card" href="08-pkg-other/ai-report-list.html">
|
||||
<div class="card-name">AI报告列表</div>
|
||||
<div class="card-path">pages/ai-report/list</div>
|
||||
</a>
|
||||
<a class="link-card" href="08-pkg-other/ai-report-detail.html">
|
||||
<div class="card-name">AI报告详情</div>
|
||||
<div class="card-path">pages/ai-report/detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="08-pkg-other/article-list.html">
|
||||
<div class="card-name">文章列表</div>
|
||||
<div class="card-path">pages/article/index</div>
|
||||
</a>
|
||||
<a class="link-card" href="08-pkg-other/article-detail.html">
|
||||
<div class="card-name">文章详情</div>
|
||||
<div class="card-path">pages/article/detail</div>
|
||||
</a>
|
||||
<a class="link-card" href="08-pkg-other/consultation-detail.html">
|
||||
<div class="card-name">咨询详情</div>
|
||||
<div class="card-path">pages/pkg-consultation/detail</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p>HMS Health Management System · 小程序原型稿 · <a href="../../">返回文档</a></p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
760
docs/prototypes/mp/shared/components.css
Normal file
760
docs/prototypes/mp/shared/components.css
Normal file
@@ -0,0 +1,760 @@
|
||||
/* ============================================
|
||||
HMS 小程序统一组件库 · Component Classes
|
||||
全局统一，所有页面共享，不允许自定义独特样式
|
||||
============================================ */
|
||||
|
||||
/* ── PageShell ── */
|
||||
.page-shell {
|
||||
min-height: 100%;
|
||||
background: var(--bg);
|
||||
padding: var(--page-pad);
|
||||
padding-bottom: calc(var(--page-pad) + 34px); /* safe-area */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page-shell--sm { padding: var(--gap-sm); }
|
||||
.page-shell--none { padding: 0; }
|
||||
.page-shell--lg { padding: var(--gap-lg); }
|
||||
|
||||
/* ── ContentCard ── */
|
||||
.card {
|
||||
background: var(--card);
|
||||
border-radius: var(--card-r);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--card-pad);
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
}
|
||||
.card--outlined {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--bd);
|
||||
}
|
||||
.card--elevated {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.card--sm { padding: var(--card-pad-sm); }
|
||||
.card--lg { padding: var(--card-pad-lg); }
|
||||
.card--none { padding: 0; }
|
||||
.card--pressable { cursor: pointer; }
|
||||
.card--pressable:active {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* ── StatusTag ── */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: var(--r-pill);
|
||||
font-size: var(--font-micro);
|
||||
font-weight: 500;
|
||||
padding: 4px 12px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tag--sm { font-size: 11px; padding: 2px 8px; }
|
||||
.tag--success { background: #ECFDF5; color: var(--success); }
|
||||
.tag--warning { background: #FFF7ED; color: var(--warning); }
|
||||
.tag--error { background: #FEF2F2; color: var(--danger); }
|
||||
.tag--info { background: var(--info-light); color: var(--info); }
|
||||
.tag--default { background: #F5F5F4; color: var(--tx3); }
|
||||
|
||||
/* ── SectionTitle ── */
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: var(--gap-sm);
|
||||
}
|
||||
.section-title__bar {
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: var(--pri);
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.section-title__text {
|
||||
font-size: var(--font-h2);
|
||||
font-weight: 600;
|
||||
color: var(--tx);
|
||||
}
|
||||
.section-title__subtitle {
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx3);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.section-title__action {
|
||||
margin-left: auto;
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--pri);
|
||||
min-height: var(--touch-min);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── SearchSection ── */
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--card);
|
||||
border-radius: var(--card-r);
|
||||
height: var(--input-h);
|
||||
padding: 0 var(--gap-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
gap: 8px;
|
||||
}
|
||||
.search-bar__icon {
|
||||
font-size: 20px;
|
||||
color: var(--tx3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.search-bar__input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx);
|
||||
background: transparent;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
.search-bar__input::placeholder { color: var(--tx3); }
|
||||
|
||||
/* Filter tabs (pill variant) */
|
||||
.filter-pills {
|
||||
display: flex;
|
||||
gap: var(--gap-xs);
|
||||
margin-top: var(--gap-sm);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.filter-pill {
|
||||
padding: 8px 20px;
|
||||
border-radius: var(--r-pill);
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx3);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--bd);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.filter-pill--active {
|
||||
background: var(--pri);
|
||||
color: var(--white);
|
||||
border-color: var(--pri);
|
||||
}
|
||||
|
||||
/* ── CardList ── */
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
.card-list--md { gap: var(--gap-md); }
|
||||
|
||||
/* ── PaginationBar ── */
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--gap-sm);
|
||||
margin-top: var(--gap-md);
|
||||
}
|
||||
.pagination__btn {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--bd);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 0 16px;
|
||||
height: var(--touch-min);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx);
|
||||
cursor: pointer;
|
||||
}
|
||||
.pagination__btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.pagination__info {
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx3);
|
||||
}
|
||||
|
||||
/* ── PageHeader ── */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--touch-min);
|
||||
padding: 0 var(--page-pad);
|
||||
background: var(--bg);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.page-header__back {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: var(--tx);
|
||||
cursor: pointer;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.page-header__title {
|
||||
font-size: var(--font-h1);
|
||||
font-weight: 600;
|
||||
color: var(--tx);
|
||||
}
|
||||
.page-header__actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: var(--gap-xs);
|
||||
}
|
||||
|
||||
/* ── EmptyState ── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--gap-2xl) var(--gap-xl);
|
||||
text-align: center;
|
||||
}
|
||||
.empty-state__icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-alt);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-hero);
|
||||
font-family: var(--font-serif);
|
||||
color: var(--tx3);
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
.empty-state__text {
|
||||
font-size: var(--font-num);
|
||||
color: var(--tx2);
|
||||
margin-bottom: var(--gap-xs);
|
||||
}
|
||||
.empty-state__hint {
|
||||
font-size: var(--font-h2);
|
||||
color: var(--tx3);
|
||||
}
|
||||
.empty-state__action {
|
||||
margin-top: var(--gap-lg);
|
||||
}
|
||||
|
||||
/* ── ErrorState ── */
|
||||
.error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--gap-2xl) var(--gap-xl);
|
||||
text-align: center;
|
||||
}
|
||||
.error-state__icon {
|
||||
font-size: var(--font-display);
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
.error-state__text {
|
||||
font-size: var(--font-body-lg);
|
||||
color: var(--tx2);
|
||||
}
|
||||
.error-state__action {
|
||||
margin-top: var(--gap-lg);
|
||||
}
|
||||
|
||||
/* ── LoadingCard (Skeleton) ── */
|
||||
.skeleton {
|
||||
background: var(--card);
|
||||
border-radius: var(--card-r);
|
||||
padding: var(--card-pad);
|
||||
animation: skeleton-pulse 1.5s infinite;
|
||||
}
|
||||
@keyframes skeleton-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
.skeleton__line {
|
||||
background: var(--bd-light);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.skeleton__line--title { width: 60%; height: 16px; }
|
||||
.skeleton__line--text { width: 100%; height: 12px; }
|
||||
.skeleton__line--short { width: 40%; height: 12px; }
|
||||
.skeleton__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--bd-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Buttons ── */
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--btn-h);
|
||||
border-radius: var(--r-pill);
|
||||
font-size: var(--font-body-lg);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
font-family: var(--font-family);
|
||||
padding: 0 var(--gap-lg);
|
||||
}
|
||||
.btn:active { opacity: 0.85; }
|
||||
.btn--primary {
|
||||
background: var(--pri);
|
||||
color: var(--white);
|
||||
}
|
||||
.btn--outline {
|
||||
background: transparent;
|
||||
color: var(--pri);
|
||||
border: 2px solid var(--pri);
|
||||
}
|
||||
.btn--sm {
|
||||
height: 36px;
|
||||
font-size: var(--font-body-sm);
|
||||
padding: 0 16px;
|
||||
}
|
||||
.btn--full { width: 100%; }
|
||||
.btn--danger {
|
||||
background: var(--danger);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* ── Form Fields ── */
|
||||
.form-group {
|
||||
margin-bottom: var(--gap-md);
|
||||
}
|
||||
.form-label {
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx2);
|
||||
margin-bottom: var(--gap-xs);
|
||||
display: block;
|
||||
}
|
||||
.form-label--required::after {
|
||||
content: '*';
|
||||
color: var(--danger);
|
||||
margin-left: 4px;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: var(--input-h);
|
||||
border: 1px solid var(--bd);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 0 var(--gap-md);
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx);
|
||||
background: var(--card);
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-family);
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--pri); }
|
||||
.form-input::placeholder { color: var(--tx3); }
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
border: 1px solid var(--bd);
|
||||
border-radius: var(--r-sm);
|
||||
padding: var(--gap-sm);
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx);
|
||||
background: var(--card);
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-family);
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-textarea:focus { border-color: var(--pri); }
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
height: var(--input-h);
|
||||
border: 1px solid var(--bd);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 0 var(--gap-md);
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx);
|
||||
background: var(--card);
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-family);
|
||||
outline: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2378716C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 16px center;
|
||||
}
|
||||
|
||||
/* ── Stat Card (数据统计卡片) ── */
|
||||
.stat-card {
|
||||
background: var(--card);
|
||||
border-radius: var(--card-r);
|
||||
padding: var(--card-pad);
|
||||
box-shadow: var(--shadow-sm);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-card__value {
|
||||
font-size: var(--font-num-lg);
|
||||
font-weight: 700;
|
||||
color: var(--tx);
|
||||
font-family: var(--font-serif);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stat-card__label {
|
||||
font-size: var(--font-cap);
|
||||
color: var(--tx3);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.stat-card--primary .stat-card__value { color: var(--pri); }
|
||||
.stat-card--success .stat-card__value { color: var(--success); }
|
||||
.stat-card--danger .stat-card__value { color: var(--danger); }
|
||||
.stat-card--warning .stat-card__value { color: var(--warning); }
|
||||
|
||||
/* ── Stat Grid ── */
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
|
||||
/* ── Info Row (详情信息行) ── */
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--gap-sm) 0;
|
||||
border-bottom: 1px solid var(--bd-light);
|
||||
}
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-row__label {
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info-row__value {
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx);
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ── List Item (列表项) ── */
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap-sm);
|
||||
padding: var(--gap-sm);
|
||||
background: var(--card);
|
||||
border-radius: var(--card-r);
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.list-item:active { opacity: 0.85; }
|
||||
.list-item__icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--r-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.list-item__icon--orange { background: var(--pri-light); }
|
||||
.list-item__icon--green { background: var(--success-light); }
|
||||
.list-item__icon--blue { background: var(--info-light); }
|
||||
.list-item__icon--red { background: var(--danger-light); }
|
||||
.list-item__icon--amber { background: var(--warning-light); }
|
||||
.list-item__content { flex: 1; min-width: 0; }
|
||||
.list-item__title {
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.list-item__desc {
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx3);
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.list-item__right {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
.list-item__arrow {
|
||||
color: var(--tx3);
|
||||
font-size: 14px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ── Menu Item (设置菜单项) ── */
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
padding: 0 var(--page-pad);
|
||||
background: var(--card);
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--bd-light);
|
||||
}
|
||||
.menu-item:active { opacity: 0.85; }
|
||||
.menu-item__icon {
|
||||
font-size: 22px;
|
||||
margin-right: var(--gap-sm);
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.menu-item__text {
|
||||
flex: 1;
|
||||
font-size: var(--font-body);
|
||||
color: var(--tx);
|
||||
}
|
||||
.menu-item__extra {
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx3);
|
||||
margin-right: 8px;
|
||||
}
|
||||
.menu-item__arrow {
|
||||
color: var(--tx3);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Avatar ── */
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--pri-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-h1);
|
||||
color: var(--pri);
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.avatar--lg { width: 72px; height: 72px; font-size: 36px; }
|
||||
.avatar--sm { width: 36px; height: 36px; font-size: 18px; }
|
||||
|
||||
/* ── Divider ── */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--bd-light);
|
||||
margin: var(--gap-sm) 0;
|
||||
}
|
||||
|
||||
/* ── Section (带标题的内容区) ── */
|
||||
.section {
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
/* ── Quick Entry Grid (快捷入口网格) ── */
|
||||
.quick-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
.quick-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.quick-item__icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--r);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
.quick-item__icon--orange { background: var(--pri-light); }
|
||||
.quick-item__icon--green { background: var(--success-light); }
|
||||
.quick-item__icon--blue { background: var(--info-light); }
|
||||
.quick-item__icon--amber { background: var(--warning-light); }
|
||||
.quick-item__icon--red { background: var(--danger-light); }
|
||||
.quick-item__label {
|
||||
font-size: var(--font-body-sm);
|
||||
color: var(--tx2);
|
||||
}
|
||||
|
||||
/* ── Banner / Swiper ── */
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
border-radius: var(--card-r);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, var(--pri) 0%, var(--pri-dark) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--white);
|
||||
}
|
||||
.banner__content {
|
||||
padding: var(--gap-lg);
|
||||
text-align: center;
|
||||
}
|
||||
.banner__title {
|
||||
font-size: var(--font-h1);
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.banner__subtitle {
|
||||
font-size: var(--font-body-sm);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.banner__dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-top: var(--gap-sm);
|
||||
}
|
||||
.banner__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
.banner__dot--active { background: var(--white); width: 16px; border-radius: 3px; }
|
||||
|
||||
/* ── Chat (咨询对话) ── */
|
||||
.chat-list { display: flex; flex-direction: column; gap: var(--gap-sm); }
|
||||
.chat-bubble {
|
||||
max-width: 75%;
|
||||
padding: var(--gap-sm);
|
||||
border-radius: var(--r-sm);
|
||||
font-size: var(--font-body);
|
||||
line-height: var(--line-height);
|
||||
word-break: break-all;
|
||||
}
|
||||
.chat-bubble--left {
|
||||
background: var(--card);
|
||||
color: var(--tx);
|
||||
align-self: flex-start;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.chat-bubble--right {
|
||||
background: var(--pri);
|
||||
color: var(--white);
|
||||
align-self: flex-end;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.chat-input-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap-xs);
|
||||
padding: var(--gap-sm) var(--page-pad);
|
||||
background: var(--card);
|
||||
border-top: 1px solid var(--bd-light);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
.chat-input-bar__field {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
border: 1px solid var(--bd);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 0 16px;
|
||||
font-size: var(--font-body);
|
||||
outline: none;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
/* ── Time / Date display ── */
|
||||
.time-label {
|
||||
font-size: var(--font-cap);
|
||||
color: var(--tx3);
|
||||
}
|
||||
|
||||
/* ── Progress Bar ── */
|
||||
.progress {
|
||||
height: 6px;
|
||||
background: var(--bd-light);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress__bar {
|
||||
height: 100%;
|
||||
background: var(--pri);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
/* ── Notification Badge ── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 9px;
|
||||
background: var(--danger);
|
||||
color: var(--white);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/* ── Chip (小标签) ── */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--r-sm);
|
||||
font-size: var(--font-body-sm);
|
||||
background: var(--surface-alt);
|
||||
color: var(--tx2);
|
||||
}
|
||||
|
||||
/* ── Utility ── */
|
||||
.text-pri { color: var(--pri); }
|
||||
.text-success { color: var(--success); }
|
||||
.text-danger { color: var(--danger); }
|
||||
.text-warning { color: var(--warning); }
|
||||
.text-tx3 { color: var(--tx3); }
|
||||
.text-tx2 { color: var(--tx2); }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.font-serif { font-family: var(--font-serif); }
|
||||
.font-bold { font-weight: 600; }
|
||||
.mt-xs { margin-top: var(--gap-xs); }
|
||||
.mt-sm { margin-top: var(--gap-sm); }
|
||||
.mt-md { margin-top: var(--gap-md); }
|
||||
.mt-lg { margin-top: var(--gap-lg); }
|
||||
.mb-xs { margin-bottom: var(--gap-xs); }
|
||||
.mb-sm { margin-bottom: var(--gap-sm); }
|
||||
.mb-md { margin-bottom: var(--gap-md); }
|
||||
.mb-lg { margin-bottom: var(--gap-lg); }
|
||||
.gap-xs { gap: var(--gap-xs); }
|
||||
.gap-sm { gap: var(--gap-sm); }
|
||||
.flex-row { display: flex; align-items: center; }
|
||||
.flex-between { display: flex; align-items: center; justify-content: space-between; }
|
||||
.flex-1 { flex: 1; min-width: 0; }
|
||||
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
243
docs/prototypes/mp/shared/frame.css
Normal file
243
docs/prototypes/mp/shared/frame.css
Normal file
@@ -0,0 +1,243 @@
|
||||
/* ============================================
|
||||
HMS 小程序原型 · Phone Frame Simulator
|
||||
模拟微信小程序外观（375×812 iPhone视口）
|
||||
============================================ */
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-body);
|
||||
line-height: var(--line-height);
|
||||
color: var(--tx);
|
||||
background: #E8E2DC;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* ── Phone Frame ── */
|
||||
.phone {
|
||||
width: 375px;
|
||||
min-height: 812px;
|
||||
background: var(--bg);
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(45, 42, 38, 0.25), 0 0 0 1px rgba(45, 42, 38, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Status Bar ── */
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 24px 0;
|
||||
background: var(--card);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--tx);
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
.status-bar__left { width: 54px; }
|
||||
.status-bar__center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 8px;
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.status-bar__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 72px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.status-bar__battery {
|
||||
width: 24px;
|
||||
height: 12px;
|
||||
border: 1.5px solid var(--tx);
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar__battery::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: 3px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
background: var(--tx);
|
||||
border-radius: 0 1px 1px 0;
|
||||
}
|
||||
.status-bar__battery-fill {
|
||||
position: absolute;
|
||||
left: 1.5px;
|
||||
top: 1.5px;
|
||||
bottom: 1.5px;
|
||||
width: 65%;
|
||||
background: var(--tx);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.status-bar__signal {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 1.5px;
|
||||
height: 12px;
|
||||
}
|
||||
.status-bar__bar {
|
||||
width: 3px;
|
||||
background: var(--tx);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* ── Nav Bar ── */
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--card);
|
||||
padding: 0 var(--page-pad);
|
||||
position: relative;
|
||||
border-bottom: 0.5px solid var(--bd-light);
|
||||
z-index: 15;
|
||||
}
|
||||
.nav-bar--bg { background: var(--bg); border-bottom: none; }
|
||||
.nav-bar__title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--tx);
|
||||
}
|
||||
.nav-bar__back {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: var(--tx);
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-bar__home {
|
||||
position: absolute;
|
||||
left: 42px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: var(--tx);
|
||||
}
|
||||
.nav-bar__actions {
|
||||
position: absolute;
|
||||
right: var(--page-pad);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
gap: var(--gap-xs);
|
||||
}
|
||||
|
||||
/* ── Content Area ── */
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* ── Tab Bar ── */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
height: var(--tabbar-safe);
|
||||
padding-top: 6px;
|
||||
padding-bottom: 34px;
|
||||
background: var(--card);
|
||||
border-top: 0.5px solid var(--bd-light);
|
||||
position: relative;
|
||||
z-index: 15;
|
||||
}
|
||||
.tab-bar__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
cursor: pointer;
|
||||
min-width: 56px;
|
||||
}
|
||||
.tab-bar__icon {
|
||||
font-size: 22px;
|
||||
color: var(--tx3);
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.tab-bar__label {
|
||||
font-size: 10px;
|
||||
color: var(--tx3);
|
||||
}
|
||||
.tab-bar__item--active .tab-bar__icon,
|
||||
.tab-bar__item--active .tab-bar__label {
|
||||
color: var(--pri);
|
||||
}
|
||||
|
||||
/* ── Home Indicator ── */
|
||||
.home-indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 134px;
|
||||
height: 5px;
|
||||
background: var(--tx);
|
||||
border-radius: 3px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* ── Page Label (原型标注) ── */
|
||||
.page-label {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(45, 42, 38, 0.8);
|
||||
color: white;
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 500px) {
|
||||
body { padding: 0; background: var(--bg); }
|
||||
.phone {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.page-label { display: none; }
|
||||
}
|
||||
93
docs/prototypes/mp/shared/tokens.css
Normal file
93
docs/prototypes/mp/shared/tokens.css
Normal file
@@ -0,0 +1,93 @@
|
||||
/* ============================================
|
||||
HMS 小程序 Design Tokens
|
||||
温润东方 · Warm Eastern Design
|
||||
来源: apps/miniprogram/src/styles/tokens.scss + variables.scss
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* ── Primary · 赤陶橙 ── */
|
||||
--pri: #C4623A;
|
||||
--pri-light: #F0DDD4;
|
||||
--pri-dark: #8B3E1F;
|
||||
--pri-surface: #F5F0EB;
|
||||
|
||||
/* ── Success · 鼠尾草绿 ── */
|
||||
--success: #5B7A5E;
|
||||
--success-light: #E8F0E8;
|
||||
--success-dark: #3D5A40;
|
||||
|
||||
/* ── Surfaces ── */
|
||||
--bg: #F5F0EB;
|
||||
--card: #FFFFFF;
|
||||
--white: #FFFFFF;
|
||||
--surface-alt: #EDE8E2;
|
||||
|
||||
/* ── Text ── */
|
||||
--tx: #2D2A26;
|
||||
--tx2: #5A554F;
|
||||
--tx3: #78716C;
|
||||
|
||||
/* ── Borders ── */
|
||||
--bd: #E8E2DC;
|
||||
--bd-light: #F0EBE5;
|
||||
|
||||
/* ── Semantic ── */
|
||||
--danger: #B54A4A;
|
||||
--danger-light: #FDEAEA;
|
||||
--warning: #C4873A;
|
||||
--warning-light: #FFF3E0;
|
||||
--info: #3B82F6;
|
||||
--info-light: #EFF6FF;
|
||||
|
||||
/* ── Typography Scale (11级) ── */
|
||||
--font-display: 72px;
|
||||
--font-hero: 48px;
|
||||
--font-h1: 28px;
|
||||
--font-h2: 24px;
|
||||
--font-body-lg: 28px;
|
||||
--font-body: 22px;
|
||||
--font-body-sm: 18px;
|
||||
--font-num: 30px;
|
||||
--font-num-lg: 34px;
|
||||
--font-cap: 14px;
|
||||
--font-micro: 12px;
|
||||
--font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
--font-serif: Georgia, 'Times New Roman', serif;
|
||||
--line-height: 1.5;
|
||||
|
||||
/* ── Spacing ── */
|
||||
--gap-2xs: 4px;
|
||||
--gap-xs: 8px;
|
||||
--gap-sm: 16px;
|
||||
--gap-md: 20px;
|
||||
--section-gap: 28px;
|
||||
--gap-lg: 32px;
|
||||
--gap-xl: 40px;
|
||||
--gap-2xl: 56px;
|
||||
--page-pad: 28px;
|
||||
|
||||
/* ── Radius ── */
|
||||
--r-xs: 8px;
|
||||
--r-sm: 12px;
|
||||
--r: 16px;
|
||||
--r-lg: 20px;
|
||||
--r-pill: 999px;
|
||||
|
||||
/* ── Shadows ── */
|
||||
--shadow-sm: 0 1px 4px rgba(45, 42, 38, 0.04);
|
||||
--shadow-md: 0 2px 12px rgba(45, 42, 38, 0.08);
|
||||
--shadow-lg: 0 8px 32px rgba(45, 42, 38, 0.12);
|
||||
|
||||
/* ── Structural ── */
|
||||
--touch-min: 48px;
|
||||
--btn-h: 56px;
|
||||
--input-h: 56px;
|
||||
--card-pad: 28px;
|
||||
--card-pad-sm: 20px;
|
||||
--card-pad-lg: 32px;
|
||||
--card-r: 12px;
|
||||
--tabbar-h: 56px;
|
||||
--tabbar-safe: 100px;
|
||||
--navbar-h: 44px;
|
||||
--statusbar-h: 44px;
|
||||
}
|
||||
Reference in New Issue
Block a user