|
|
@@ -0,0 +1,747 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
+ <title>健康监测 - 数智健调系统</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --brand-teal: #01847F;
|
|
|
+ --brand-teal-soft: rgba(1, 132, 127, 0.08);
|
|
|
+ --brand-teal-deep: #016c68;
|
|
|
+ --brand-pink: #F9D2E4;
|
|
|
+ --brand-pink-deep: #8b4c63;
|
|
|
+ --text-main: #0f172a;
|
|
|
+ --text-muted: #6b7280;
|
|
|
+ --bg-main: #f5f5f5;
|
|
|
+ --card-bg: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
|
|
+ background: var(--bg-main);
|
|
|
+ color: var(--text-main);
|
|
|
+ min-height: 100vh;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部导航 */
|
|
|
+ .header {
|
|
|
+ background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-deep) 100%);
|
|
|
+ padding: 16px 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-btn {
|
|
|
+ background: rgba(255,255,255,0.2);
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主内容区 */
|
|
|
+ .main-content {
|
|
|
+ padding: 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 健康评分卡片 */
|
|
|
+ .health-score-card {
|
|
|
+ background: linear-gradient(135deg, var(--brand-teal) 0%, #0a9d96 100%);
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 20px;
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-ring {
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-ring svg {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-ring-bg {
|
|
|
+ fill: none;
|
|
|
+ stroke: rgba(255,255,255,0.2);
|
|
|
+ stroke-width: 8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-ring-progress {
|
|
|
+ fill: none;
|
|
|
+ stroke: white;
|
|
|
+ stroke-width: 8;
|
|
|
+ stroke-linecap: round;
|
|
|
+ stroke-dasharray: 251.2;
|
|
|
+ stroke-dashoffset: 37.68; /* 85% = 251.2 * 0.15 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-value {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-number {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-label {
|
|
|
+ font-size: 10px;
|
|
|
+ opacity: 0.8;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-info {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-status {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ background: rgba(255,255,255,0.2);
|
|
|
+ padding: 6px 14px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ opacity: 0.9;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 指标网格 */
|
|
|
+ .metrics-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-item {
|
|
|
+ background: var(--card-bg);
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 14px 12px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: transform 0.2s, box-shadow 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-item:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-value {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: var(--text-main);
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-unit {
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-status {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-normal {
|
|
|
+ background: var(--brand-teal-soft);
|
|
|
+ color: var(--brand-teal-deep);
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-warning {
|
|
|
+ background: #fef3c7;
|
|
|
+ color: #b45309;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 快捷操作 */
|
|
|
+ .quick-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quick-btn {
|
|
|
+ flex: 1;
|
|
|
+ background: var(--card-bg);
|
|
|
+ border: none;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-main);
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
+ }
|
|
|
+
|
|
|
+ .quick-btn.primary {
|
|
|
+ background: var(--brand-teal);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 区块标题 */
|
|
|
+ .section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--text-main);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-action {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--brand-teal);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 趋势图卡片 */
|
|
|
+ .trend-card {
|
|
|
+ background: var(--card-bg);
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
+ }
|
|
|
+
|
|
|
+ .trend-tabs {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trend-tab {
|
|
|
+ padding: 6px 14px;
|
|
|
+ border-radius: 16px;
|
|
|
+ font-size: 13px;
|
|
|
+ border: none;
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: var(--text-muted);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trend-tab.active {
|
|
|
+ background: var(--brand-teal-soft);
|
|
|
+ color: var(--brand-teal-deep);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trend-chart {
|
|
|
+ height: 140px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 8px;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-bar {
|
|
|
+ width: 28px;
|
|
|
+ background: linear-gradient(180deg, var(--brand-teal) 0%, rgba(1, 132, 127, 0.4) 100%);
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-bar::after {
|
|
|
+ content: attr(data-value);
|
|
|
+ position: absolute;
|
|
|
+ top: -20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 10px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-labels {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-label {
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ width: 28px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 生活建议卡片 */
|
|
|
+ .tips-scroll {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ margin: 0 -16px;
|
|
|
+ padding: 0 16px 8px;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-scroll::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-card {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 140px;
|
|
|
+ background: var(--card-bg);
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 16px 14px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
+ border-top: 3px solid var(--brand-teal);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-card.pink { border-top-color: var(--brand-pink-deep); }
|
|
|
+ .tip-card.orange { border-top-color: #f59e0b; }
|
|
|
+ .tip-card.purple { border-top-color: #8b5cf6; }
|
|
|
+
|
|
|
+ .tip-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-title {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--text-main);
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-desc {
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 慢性病提醒 */
|
|
|
+ .chronic-card {
|
|
|
+ background: var(--card-bg);
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
+ border-left: 4px solid #f59e0b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chronic-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chronic-name {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--text-main);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chronic-badge {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #d1fae5;
|
|
|
+ color: #047857;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chronic-tips {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chronic-tips li {
|
|
|
+ margin: 4px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chronic-reminder {
|
|
|
+ margin-top: 12px;
|
|
|
+ padding-top: 12px;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #f59e0b;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 经期监测 */
|
|
|
+ .menstrual-card {
|
|
|
+ background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 16px;
|
|
|
+ border: 1px solid #fbcfe8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menstrual-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menstrual-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--brand-pink-deep);
|
|
|
+ }
|
|
|
+
|
|
|
+ .phase-badge {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: white;
|
|
|
+ color: var(--brand-pink-deep);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menstrual-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menstrual-stat {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menstrual-stat-value {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: var(--brand-pink-deep);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menstrual-stat-label {
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phase-bar {
|
|
|
+ display: flex;
|
|
|
+ gap: 3px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phase-segment {
|
|
|
+ flex: 1;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ background: rgba(139, 76, 99, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .phase-segment.active {
|
|
|
+ background: var(--brand-pink-deep);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menstrual-btn {
|
|
|
+ width: 100%;
|
|
|
+ background: var(--brand-pink-deep);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部导航 */
|
|
|
+ .bottom-nav {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 8px 0 20px;
|
|
|
+ box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item.active {
|
|
|
+ color: var(--brand-teal);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-icon {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-center {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-deep) 100%);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-top: -20px;
|
|
|
+ box-shadow: 0 4px 12px rgba(1, 132, 127, 0.4);
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <header class="header">
|
|
|
+ <button class="back-btn">← 返回</button>
|
|
|
+ <h1 class="header-title">健康监测</h1>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <main class="main-content">
|
|
|
+ <!-- 健康评分 -->
|
|
|
+ <section class="health-score-card">
|
|
|
+ <div class="score-ring">
|
|
|
+ <svg width="90" height="90" viewBox="0 0 90 90">
|
|
|
+ <circle class="score-ring-bg" cx="45" cy="45" r="40"/>
|
|
|
+ <circle class="score-ring-progress" cx="45" cy="45" r="40"/>
|
|
|
+ </svg>
|
|
|
+ <div class="score-value">
|
|
|
+ <div class="score-number">85</div>
|
|
|
+ <div class="score-label">健康分</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="score-info">
|
|
|
+ <div class="score-status">
|
|
|
+ <span>✓</span>
|
|
|
+ <span>状态良好</span>
|
|
|
+ </div>
|
|
|
+ <p class="score-desc">心率、血压、血氧指标均在正常范围内,继续保持!</p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 核心指标 -->
|
|
|
+ <section class="metrics-grid">
|
|
|
+ <div class="metric-item">
|
|
|
+ <div class="metric-icon">💗</div>
|
|
|
+ <div class="metric-value">72<span class="metric-unit">bpm</span></div>
|
|
|
+ <div class="metric-label">心率</div>
|
|
|
+ <span class="metric-status status-normal">正常</span>
|
|
|
+ </div>
|
|
|
+ <div class="metric-item">
|
|
|
+ <div class="metric-icon">🩺</div>
|
|
|
+ <div class="metric-value">120<span class="metric-unit">/80</span></div>
|
|
|
+ <div class="metric-label">血压</div>
|
|
|
+ <span class="metric-status status-normal">正常</span>
|
|
|
+ </div>
|
|
|
+ <div class="metric-item">
|
|
|
+ <div class="metric-icon">🫁</div>
|
|
|
+ <div class="metric-value">98<span class="metric-unit">%</span></div>
|
|
|
+ <div class="metric-label">血氧</div>
|
|
|
+ <span class="metric-status status-normal">正常</span>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 快捷操作 -->
|
|
|
+ <section class="quick-actions">
|
|
|
+ <button class="quick-btn primary">📝 记录数据</button>
|
|
|
+ <button class="quick-btn">📊 详细报告</button>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 趋势图 -->
|
|
|
+ <section>
|
|
|
+ <div class="section-header">
|
|
|
+ <span class="section-title">数据趋势</span>
|
|
|
+ <span class="section-action">查看更多 ›</span>
|
|
|
+ </div>
|
|
|
+ <div class="trend-card">
|
|
|
+ <div class="trend-tabs">
|
|
|
+ <button class="trend-tab active">心率</button>
|
|
|
+ <button class="trend-tab">血压</button>
|
|
|
+ <button class="trend-tab">血氧</button>
|
|
|
+ </div>
|
|
|
+ <div class="trend-chart">
|
|
|
+ <div class="chart-bar" style="height: 70%" data-value="68"></div>
|
|
|
+ <div class="chart-bar" style="height: 75%" data-value="72"></div>
|
|
|
+ <div class="chart-bar" style="height: 85%" data-value="78"></div>
|
|
|
+ <div class="chart-bar" style="height: 72%" data-value="70"></div>
|
|
|
+ <div class="chart-bar" style="height: 78%" data-value="74"></div>
|
|
|
+ <div class="chart-bar" style="height: 80%" data-value="76"></div>
|
|
|
+ <div class="chart-bar" style="height: 75%" data-value="72"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-labels">
|
|
|
+ <span class="chart-label">周一</span>
|
|
|
+ <span class="chart-label">周二</span>
|
|
|
+ <span class="chart-label">周三</span>
|
|
|
+ <span class="chart-label">周四</span>
|
|
|
+ <span class="chart-label">周五</span>
|
|
|
+ <span class="chart-label">周六</span>
|
|
|
+ <span class="chart-label">周日</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 生活建议 -->
|
|
|
+ <section>
|
|
|
+ <div class="section-header">
|
|
|
+ <span class="section-title">生活建议</span>
|
|
|
+ </div>
|
|
|
+ <div class="tips-scroll">
|
|
|
+ <div class="tip-card">
|
|
|
+ <div class="tip-icon">🏃</div>
|
|
|
+ <div class="tip-title">运动</div>
|
|
|
+ <div class="tip-desc">每日30分钟中等强度有氧运动</div>
|
|
|
+ </div>
|
|
|
+ <div class="tip-card pink">
|
|
|
+ <div class="tip-icon">🥗</div>
|
|
|
+ <div class="tip-title">饮食</div>
|
|
|
+ <div class="tip-desc">减少盐分摄入,多吃蔬果</div>
|
|
|
+ </div>
|
|
|
+ <div class="tip-card orange">
|
|
|
+ <div class="tip-icon">😴</div>
|
|
|
+ <div class="tip-title">睡眠</div>
|
|
|
+ <div class="tip-desc">保证7-8小时充足睡眠</div>
|
|
|
+ </div>
|
|
|
+ <div class="tip-card purple">
|
|
|
+ <div class="tip-icon">💧</div>
|
|
|
+ <div class="tip-title">饮水</div>
|
|
|
+ <div class="tip-desc">每天饮水约2000毫升</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 慢性病监测 -->
|
|
|
+ <section>
|
|
|
+ <div class="section-header">
|
|
|
+ <span class="section-title">健康提醒</span>
|
|
|
+ </div>
|
|
|
+ <div class="chronic-card">
|
|
|
+ <div class="chronic-header">
|
|
|
+ <span class="chronic-name">高血压监测</span>
|
|
|
+ <span class="chronic-badge">轻度</span>
|
|
|
+ </div>
|
|
|
+ <ul class="chronic-tips">
|
|
|
+ <li>避免剧烈运动和憋气动作</li>
|
|
|
+ <li>运动前后监测血压变化</li>
|
|
|
+ <li>推荐有氧运动如快走、游泳</li>
|
|
|
+ </ul>
|
|
|
+ <div class="chronic-reminder">📅 下次检查:2026年2月15日</div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 经期监测 -->
|
|
|
+ <section>
|
|
|
+ <div class="section-header">
|
|
|
+ <span class="section-title">经期监测</span>
|
|
|
+ </div>
|
|
|
+ <div class="menstrual-card">
|
|
|
+ <div class="menstrual-header">
|
|
|
+ <span class="menstrual-title">生理周期</span>
|
|
|
+ <span class="phase-badge">卵泡期</span>
|
|
|
+ </div>
|
|
|
+ <div class="menstrual-info">
|
|
|
+ <div class="menstrual-stat">
|
|
|
+ <div class="menstrual-stat-value">5</div>
|
|
|
+ <div class="menstrual-stat-label">距下次月经(天)</div>
|
|
|
+ </div>
|
|
|
+ <div class="menstrual-stat">
|
|
|
+ <div class="menstrual-stat-value">28</div>
|
|
|
+ <div class="menstrual-stat-label">周期长度(天)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="phase-bar">
|
|
|
+ <div class="phase-segment"></div>
|
|
|
+ <div class="phase-segment active"></div>
|
|
|
+ <div class="phase-segment"></div>
|
|
|
+ <div class="phase-segment"></div>
|
|
|
+ </div>
|
|
|
+ <button class="menstrual-btn">📝 记录经期</button>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <!-- 底部导航 -->
|
|
|
+ <nav class="bottom-nav">
|
|
|
+ <a href="#" class="nav-item">
|
|
|
+ <span class="nav-icon">🏠</span>
|
|
|
+ <span>首页</span>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-item">
|
|
|
+ <span class="nav-icon">🏃</span>
|
|
|
+ <span>动作</span>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-item">
|
|
|
+ <div class="nav-center">+</div>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-item active">
|
|
|
+ <span class="nav-icon">🏫</span>
|
|
|
+ <span>校园</span>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-item">
|
|
|
+ <span class="nav-icon">👤</span>
|
|
|
+ <span>我的</span>
|
|
|
+ </a>
|
|
|
+ </nav>
|
|
|
+</body>
|
|
|
+</html>
|