Просмотр исходного кода

chore(frontend): archive static design prototypes under public/

17846405080 1 месяц назад
Родитель
Сommit
f25614e5de
17 измененных файлов с 7009 добавлено и 0 удалено
  1. 122 0
      campus_health_app/frontend/campus-health-app/public/assets/auth_test.html
  2. 328 0
      campus_health_app/frontend/campus-health-app/public/assets/diet_mobile_design_a.html
  3. 349 0
      campus_health_app/frontend/campus-health-app/public/assets/diet_mobile_design_b.html
  4. 288 0
      campus_health_app/frontend/campus-health-app/public/assets/diet_mobile_design_c.html
  5. 437 0
      campus_health_app/frontend/campus-health-app/public/assets/exercise_detail.html
  6. 747 0
      campus_health_app/frontend/campus-health-app/public/assets/health_monitoring_mobile.html
  7. 430 0
      campus_health_app/frontend/campus-health-app/public/assets/home-main-option1.html
  8. 529 0
      campus_health_app/frontend/campus-health-app/public/assets/school_services_mobile_design_a.html
  9. 467 0
      campus_health_app/frontend/campus-health-app/public/assets/school_services_mobile_design_b.html
  10. 408 0
      campus_health_app/frontend/campus-health-app/public/assets/school_services_mobile_design_c.html
  11. 409 0
      campus_health_app/frontend/campus-health-app/public/assets/steps_detail.html
  12. 487 0
      campus_health_app/frontend/campus-health-app/public/assets/weight_mobile_design_a.html
  13. 347 0
      campus_health_app/frontend/campus-health-app/public/assets/weight_mobile_design_b.html
  14. 376 0
      campus_health_app/frontend/campus-health-app/public/assets/weight_mobile_design_c.html
  15. 430 0
      campus_health_app/frontend/campus-health-app/public/home-main-option1.html
  16. 474 0
      campus_health_app/frontend/campus-health-app/public/home-main-option2.html
  17. 381 0
      campus_health_app/frontend/campus-health-app/public/home-main-option3.html

+ 122 - 0
campus_health_app/frontend/campus-health-app/public/assets/auth_test.html

@@ -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>认证流程测试 - 校园运动健康APP</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: #01847F;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .test-section {
+            margin-bottom: 30px;
+            padding: 20px;
+            border: 2px solid #e5e7eb;
+            border-radius: 8px;
+        }
+        .test-section h2 {
+            color: #1f2937;
+            margin-top: 0;
+        }
+        .test-link {
+            display: inline-block;
+            background: #01847F;
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 6px;
+            margin: 5px 10px 5px 0;
+            transition: background-color 0.3s;
+        }
+        .test-link:hover {
+            background: #016B66;
+        }
+        .feature-list {
+            list-style-type: none;
+            padding: 0;
+        }
+        .feature-list li {
+            padding: 8px 0;
+            border-bottom: 1px solid #f3f4f6;
+        }
+        .feature-list li:before {
+            content: "✓";
+            color: #01847F;
+            font-weight: bold;
+            margin-right: 10px;
+        }
+        .note {
+            background-color: #E6F7F6;
+            color: #016B66;
+            padding: 15px;
+            border-radius: 6px;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🏥 校园运动健康APP - 认证流程测试</h1>
+        
+        <div class="test-section">
+            <h2>🔐 认证页面导航</h2>
+            <p>点击以下链接测试各个认证页面:</p>
+            <a href="../../src/app/modules/auth/login/login.component.html" class="test-link">登录页面</a>
+            <a href="../../src/app/modules/auth/register/register.component.html" class="test-link">注册页面</a>
+            <a href="../../src/app/modules/auth/forgot-password/forgot-password.component.html" class="test-link">忘记密码</a>
+            <a href="../../src/app/modules/auth/verify-phone/verify-phone.component.html" class="test-link">手机验证</a>
+        </div>
+
+        <div class="test-section">
+            <h2>✨ 已完成的功能</h2>
+            <ul class="feature-list">
+                <li>统一系统配色方案 (#01847F 品牌色)</li>
+                <li>登录页面样式适配</li>
+                <li>注册页面前端模拟功能</li>
+                <li>忘记密码前端模拟功能</li>
+                <li>手机验证前端模拟功能</li>
+                <li>移除所有网络API依赖</li>
+                <li>完整的表单验证</li>
+                <li>响应式移动端设计</li>
+            </ul>
+        </div>
+
+        <div class="test-section">
+            <h2>🧪 测试说明</h2>
+            <h3>登录测试:</h3>
+            <p>任意用户名和密码都可以登录成功(前端模拟)</p>
+            
+            <h3>注册测试:</h3>
+            <p>填写完整信息后会显示注册成功提示,然后跳转到登录页面</p>
+            
+            <h3>忘记密码测试:</h3>
+            <p>1. 输入手机号发送验证码</p>
+            <p>2. 输入验证码:<strong>123456</strong></p>
+            <p>3. 设置新密码完成重置</p>
+            
+            <h3>手机验证测试:</h3>
+            <p>验证码固定为:<strong>123456</strong></p>
+        </div>
+
+        <div class="note">
+            <strong>注意:</strong> 所有功能均为前端模拟,不会发送真实的网络请求。验证码统一为 123456,所有操作都会成功并跳转到相应页面。
+        </div>
+    </div>
+</body>
+</html>

+ 328 - 0
campus_health_app/frontend/campus-health-app/public/assets/diet_mobile_design_a.html

@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>饮食管理 - 方案 A (视觉/卡片)</title>
+    <style>
+        :root {
+            --bg-dark: #0f172a;
+            --card-dark: #1e293b;
+            --text-light: #f8fafc;
+            --text-dim: #94a3b8;
+            --accent: #10b981; /* Emerald */
+            --accent-glow: rgba(16, 185, 129, 0.5);
+            --warning: #f59e0b;
+            --danger: #ef4444;
+        }
+
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-light);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            margin: 0;
+            padding-bottom: 90px;
+        }
+
+        /* 沉浸式顶部 */
+        .hero-section {
+            background: radial-gradient(circle at top right, #064e3b, var(--bg-dark));
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-bottom-left-radius: 30px;
+            border-bottom-right-radius: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+
+        .nav-bar {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        
+        .nav-title { font-size: 18px; font-weight: 600; }
+        .nav-icon { font-size: 20px; color: var(--text-dim); }
+
+        /* 环形进度条容器 */
+        .progress-ring-container {
+            position: relative;
+            width: 220px;
+            height: 220px;
+            margin: 10px 0 30px;
+        }
+
+        .ring-bg {
+            fill: none;
+            stroke: #334155;
+            stroke-width: 15;
+        }
+
+        .ring-progress {
+            fill: none;
+            stroke: var(--accent);
+            stroke-width: 15;
+            stroke-dasharray: 565; /* 2 * PI * 90 */
+            stroke-dashoffset: 113; /* 80% progress (1600/2000) */
+            stroke-linecap: round;
+            filter: drop-shadow(0 0 10px var(--accent-glow));
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+
+        .ring-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .calories-val {
+            font-size: 36px;
+            font-weight: 800;
+            line-height: 1;
+        }
+        
+        .calories-unit { font-size: 14px; color: var(--text-dim); font-weight: 400; }
+
+        .goal-subtext {
+            margin-top: 8px;
+            font-size: 12px;
+            color: var(--text-dim);
+            background: rgba(255,255,255,0.1);
+            padding: 4px 10px;
+            border-radius: 20px;
+        }
+
+        /* 宏量营养素条 */
+        .macros-bar {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            max-width: 340px;
+            background: rgba(255,255,255,0.05);
+            border-radius: 16px;
+            padding: 15px 20px;
+            backdrop-filter: blur(10px);
+            margin-top: -20px; /* Overlap hero */
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .macro-item {
+            text-align: center;
+            flex: 1;
+        }
+
+        .macro-val { font-size: 16px; font-weight: 700; color: var(--text-light); }
+        .macro-lbl { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+        
+        .macro-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-bottom: 2px;
+        }
+        
+        .dot-p { background-color: #f59e0b; } /* Protein */
+        .dot-c { background-color: #3b82f6; } /* Carbs */
+        .dot-f { background-color: #ef4444; } /* Fat */
+
+        /* 内容区域 */
+        .content-area {
+            padding: 24px 20px;
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+        
+        .section-title { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
+
+        /* 餐食卡片 */
+        .meal-card {
+            background: var(--card-dark);
+            border-radius: 16px;
+            padding: 16px;
+            margin-bottom: 16px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .meal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+        
+        .meal-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+        .meal-time { font-size: 12px; color: var(--text-dim); }
+        
+        .meal-cal { 
+            background: rgba(16, 185, 129, 0.1); 
+            color: var(--accent); 
+            padding: 4px 8px; 
+            border-radius: 8px; 
+            font-size: 12px; 
+            font-weight: 600;
+        }
+
+        .food-items {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+        
+        .food-tag {
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 12px;
+            color: var(--text-dim);
+        }
+
+        /* 底部主按钮 */
+        .action-bar {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+            display: flex;
+            gap: 12px;
+            z-index: 100;
+        }
+
+        .btn-log {
+            flex: 1;
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 16px;
+            border-radius: 16px;
+            font-size: 16px;
+            font-weight: 600;
+            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .btn-mini {
+            width: 54px;
+            background: var(--card-dark);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 16px;
+            color: var(--text-light);
+            font-size: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="hero-section">
+        <div class="nav-bar">
+            <span class="nav-icon">❮</span>
+            <span class="nav-title">饮食管理</span>
+            <span class="nav-icon">📊</span>
+        </div>
+
+        <div class="progress-ring-container">
+            <svg width="220" height="220" viewBox="0 0 220 220">
+                <circle class="ring-bg" cx="110" cy="110" r="90"></circle>
+                <circle class="ring-progress" cx="110" cy="110" r="90"></circle>
+            </svg>
+            <div class="ring-content">
+                <div class="calories-val">1,600</div>
+                <div class="calories-unit">已摄入 (kcal)</div>
+                <div class="goal-subtext">剩余 400 kcal</div>
+            </div>
+        </div>
+
+        <div class="macros-bar">
+            <div class="macro-item">
+                <div class="macro-dot dot-p"></div>
+                <div class="macro-val">60g</div>
+                <div class="macro-lbl">蛋白质</div>
+            </div>
+            <div class="macro-item">
+                <div class="macro-dot dot-c"></div>
+                <div class="macro-val">170g</div>
+                <div class="macro-lbl">碳水</div>
+            </div>
+            <div class="macro-item">
+                <div class="macro-dot dot-f"></div>
+                <div class="macro-val">40g</div>
+                <div class="macro-lbl">脂肪</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="content-area">
+        <div class="section-header">
+            <div class="section-title">今日记录</div>
+            <div style="font-size:12px; color:var(--accent);">查看详情</div>
+        </div>
+
+        <div class="meal-card">
+            <div class="meal-header">
+                <div class="meal-title">🍳 早餐</div>
+                <div class="meal-cal">450 kcal</div>
+            </div>
+            <div class="food-items">
+                <span class="food-tag">全麦面包</span>
+                <span class="food-tag">鸡蛋</span>
+                <span class="food-tag">牛奶</span>
+                <span class="food-tag">苹果</span>
+            </div>
+        </div>
+
+        <div class="meal-card">
+            <div class="meal-header">
+                <div class="meal-title">🍱 午餐</div>
+                <div class="meal-cal">650 kcal</div>
+            </div>
+            <div class="food-items">
+                <span class="food-tag">米饭</span>
+                <span class="food-tag">鸡胸肉</span>
+                <span class="food-tag">青菜</span>
+                <span class="food-tag">番茄蛋汤</span>
+            </div>
+        </div>
+
+        <div class="meal-card">
+            <div class="meal-header">
+                <div class="meal-title">🍜 晚餐</div>
+                <div class="meal-cal">500 kcal</div>
+            </div>
+            <div class="food-items">
+                <span class="food-tag">面条</span>
+                <span class="food-tag">瘦肉</span>
+                <span class="food-tag">西兰花</span>
+                <span class="food-tag">胡萝卜</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="action-bar">
+        <button class="btn-mini">📅</button>
+        <button class="btn-log">
+            <span>+ 记录饮食</span>
+        </button>
+    </div>
+
+</body>
+</html>

+ 349 - 0
campus_health_app/frontend/campus-health-app/public/assets/diet_mobile_design_b.html

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>饮食管理 - 方案 B (清单/时间轴)</title>
+    <style>
+        :root {
+            --primary: #f97316; /* Orange */
+            --bg-page: #fff7ed;
+            --bg-card: #ffffff;
+            --text-main: #431407;
+            --text-light: #9a3412;
+            --border: #fed7aa;
+        }
+
+        body {
+            background-color: var(--bg-page);
+            color: var(--text-main);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            margin: 0;
+            padding-bottom: 80px;
+        }
+
+        /* 顶部日历条 */
+        .calendar-strip-container {
+            background: var(--bg-card);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(249, 115, 22, 0.1);
+        }
+
+        .header-top {
+            padding: 12px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .month-selector {
+            font-weight: 700;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--text-main);
+        }
+
+        .calendar-days {
+            display: flex;
+            justify-content: space-between;
+            padding: 12px 16px;
+        }
+
+        .day-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 6px;
+            font-size: 12px;
+            color: var(--text-light);
+            padding: 6px 10px;
+            border-radius: 12px;
+            position: relative;
+        }
+
+        .day-item.active {
+            background: var(--primary);
+            color: white;
+            box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
+        }
+
+        /* 统计摘要 */
+        .daily-summary {
+            margin: 16px;
+            background: linear-gradient(135deg, #ffedd5 0%, #fff7ed 100%);
+            border-radius: 16px;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            border: 1px solid var(--border);
+        }
+
+        .sum-main {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .sum-label { font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
+        .sum-val { font-size: 24px; font-weight: 800; color: var(--text-main); }
+        .sum-unit { font-size: 14px; font-weight: 500; }
+
+        .sum-chart {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        
+        /* 简单的CSS饼图模拟 */
+        .pie-chart {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: conic-gradient(var(--primary) 0% 80%, #fed7aa 80% 100%);
+            position: relative;
+        }
+        
+        .pie-chart::after {
+            content: "";
+            position: absolute;
+            inset: 15px;
+            background: #fff7ed;
+            border-radius: 50%;
+        }
+
+        /* 时间轴 */
+        .timeline-container {
+            padding: 0 16px;
+        }
+
+        .meal-group {
+            margin-bottom: 20px;
+            position: relative;
+            padding-left: 24px;
+        }
+        
+        .meal-group::before {
+            content: "";
+            position: absolute;
+            left: 7px;
+            top: 24px;
+            bottom: -20px;
+            width: 2px;
+            background: #fed7aa;
+        }
+        
+        .meal-group:last-child::before { display: none; }
+
+        .meal-time-marker {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: var(--primary);
+            border: 3px solid white;
+            box-shadow: 0 0 0 1px var(--border);
+            z-index: 1;
+        }
+
+        .meal-card {
+            background: var(--bg-card);
+            border-radius: 12px;
+            padding: 14px;
+            border: 1px solid var(--border);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
+        }
+
+        .meal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        .meal-type { font-weight: 700; font-size: 15px; color: var(--text-main); }
+        .meal-time { font-size: 12px; color: var(--text-light); margin-left: 8px; font-weight: 400; }
+        .meal-cal { font-weight: 600; font-size: 14px; color: var(--primary); }
+
+        .food-list {
+            font-size: 13px;
+            color: #57534e;
+            line-height: 1.5;
+        }
+
+        /* 底部导航 */
+        .bottom-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: var(--bg-card);
+            border-top: 1px solid var(--border);
+            display: flex;
+            padding: 10px 0;
+            padding-bottom: max(10px, env(safe-area-inset-bottom));
+        }
+
+        .nav-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+            color: var(--text-light);
+            font-size: 10px;
+        }
+
+        .nav-item.active { color: var(--primary); }
+        .nav-icon { font-size: 20px; }
+
+        /* 悬浮添加按钮 */
+        .fab-add {
+            position: fixed;
+            bottom: 80px;
+            right: 20px;
+            background: var(--primary);
+            color: white;
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28px;
+            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
+            border: none;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="calendar-strip-container">
+        <div class="header-top">
+            <div class="month-selector">2025年 12月 ▾</div>
+            <div style="font-size:20px;">🍊</div>
+        </div>
+        <div class="calendar-days">
+            <div class="day-item">
+                <span>一</span>
+                <span style="font-weight:600;">2</span>
+            </div>
+            <div class="day-item">
+                <span>二</span>
+                <span style="font-weight:600;">3</span>
+            </div>
+            <div class="day-item">
+                <span>三</span>
+                <span style="font-weight:600;">4</span>
+            </div>
+            <div class="day-item">
+                <span>四</span>
+                <span style="font-weight:600;">5</span>
+            </div>
+            <div class="day-item active">
+                <span>五</span>
+                <span style="font-weight:600;">6</span>
+            </div>
+            <div class="day-item">
+                <span>六</span>
+                <span style="font-weight:600;">7</span>
+            </div>
+            <div class="day-item">
+                <span>日</span>
+                <span style="font-weight:600;">8</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="daily-summary">
+        <div class="sum-main">
+            <div class="sum-label">今日已摄入</div>
+            <div class="sum-val">1,600 <span class="sum-unit">kcal</span></div>
+            <div class="sum-label" style="margin-top:8px;">剩余预算 400</div>
+        </div>
+        <div class="sum-chart">
+            <div class="pie-chart"></div>
+            <div style="position:absolute; font-size:12px; font-weight:bold; color:var(--primary);">80%</div>
+        </div>
+    </div>
+
+    <div class="timeline-container">
+        
+        <div class="meal-group">
+            <div class="meal-time-marker"></div>
+            <div class="meal-card">
+                <div class="meal-header">
+                    <div>
+                        <span class="meal-type">早餐</span>
+                        <span class="meal-time">07:30</span>
+                    </div>
+                    <span class="meal-cal">450</span>
+                </div>
+                <div class="food-list">
+                    全麦面包,鸡蛋,牛奶,苹果
+                </div>
+            </div>
+        </div>
+
+        <div class="meal-group">
+            <div class="meal-time-marker"></div>
+            <div class="meal-card">
+                <div class="meal-header">
+                    <div>
+                        <span class="meal-type">午餐</span>
+                        <span class="meal-time">12:00</span>
+                    </div>
+                    <span class="meal-cal">650</span>
+                </div>
+                <div class="food-list">
+                    米饭,鸡胸肉,青菜,番茄蛋汤
+                </div>
+            </div>
+        </div>
+
+        <div class="meal-group">
+            <div class="meal-time-marker"></div>
+            <div class="meal-card">
+                <div class="meal-header">
+                    <div>
+                        <span class="meal-type">晚餐</span>
+                        <span class="meal-time">18:30</span>
+                    </div>
+                    <span class="meal-cal">500</span>
+                </div>
+                <div class="food-list">
+                    面条,瘦肉,西兰花,胡萝卜
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <button class="fab-add">+</button>
+
+    <div class="bottom-nav">
+        <div class="nav-item active">
+            <div class="nav-icon">📖</div>
+            <span>记录</span>
+        </div>
+        <div class="nav-item">
+            <div class="nav-icon">📊</div>
+            <span>分析</span>
+        </div>
+        <div class="nav-item">
+            <div class="nav-icon">👤</div>
+            <span>我的</span>
+        </div>
+    </div>
+
+</body>
+</html>

+ 288 - 0
campus_health_app/frontend/campus-health-app/public/assets/diet_mobile_design_c.html

@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>饮食管理 - 方案 C (网格/相册)</title>
+    <style>
+        :root {
+            --primary: #ec4899; /* Pink */
+            --bg-page: #fdf2f8;
+            --bg-card: #ffffff;
+            --text-main: #831843;
+            --text-light: #be185d;
+            --border: #fbcfe8;
+        }
+
+        body {
+            background-color: var(--bg-page);
+            color: var(--text-main);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            margin: 0;
+            padding-bottom: 80px;
+        }
+
+        /* 顶部导航 */
+        .header {
+            padding: 16px 20px;
+            background: var(--bg-card);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 2px 8px rgba(236, 72, 153, 0.05);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .date-title {
+            font-size: 18px;
+            font-weight: 700;
+        }
+
+        .header-actions span {
+            font-size: 20px;
+            margin-left: 16px;
+        }
+
+        /* 仪表盘概览 */
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+            padding: 16px 20px;
+        }
+
+        .stat-card {
+            background: var(--bg-card);
+            border-radius: 16px;
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100px;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.03);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-card.large {
+            grid-column: span 2;
+            background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
+            color: white;
+        }
+
+        .stat-label { font-size: 12px; font-weight: 500; opacity: 0.9; }
+        .stat-value { font-size: 28px; font-weight: 800; margin-top: 4px; }
+        .stat-unit { font-size: 14px; font-weight: 500; opacity: 0.9; }
+
+        .stat-progress {
+            height: 6px;
+            background: #fce7f3;
+            border-radius: 3px;
+            margin-top: auto;
+            overflow: hidden;
+        }
+        
+        .progress-fill {
+            height: 100%;
+            background: var(--primary);
+            border-radius: 3px;
+        }
+
+        /* 餐食网格 (类似Instagram) */
+        .meal-grid-header {
+            padding: 0 20px;
+            margin-bottom: 12px;
+            font-size: 16px;
+            font-weight: 700;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .meal-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            padding: 0 20px 20px;
+        }
+
+        .meal-item {
+            background: var(--bg-card);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.04);
+            display: flex;
+            flex-direction: column;
+        }
+
+        .meal-img-placeholder {
+            height: 120px;
+            background: #fce7f3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 32px;
+            color: var(--primary);
+        }
+
+        .meal-info {
+            padding: 12px;
+        }
+
+        .meal-type {
+            font-size: 14px;
+            font-weight: 700;
+            margin-bottom: 4px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .meal-cal-badge {
+            font-size: 10px;
+            background: #fdf2f8;
+            color: var(--primary);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+        }
+
+        .meal-desc {
+            font-size: 11px;
+            color: var(--text-light);
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            line-height: 1.4;
+        }
+
+        .add-meal-card {
+            border: 2px dashed var(--border);
+            border-radius: 16px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-light);
+            background: transparent;
+            box-shadow: none;
+            height: 100%;
+            min-height: 180px;
+            cursor: pointer;
+        }
+
+        /* 底部标签栏 */
+        .tab-bar {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--bg-card);
+            padding: 6px;
+            border-radius: 30px;
+            display: flex;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            z-index: 100;
+        }
+
+        .tab-item {
+            padding: 10px 20px;
+            border-radius: 24px;
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-light);
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .tab-item.active {
+            background: var(--primary);
+            color: white;
+            box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
+        }
+
+    </style>
+</head>
+<body>
+
+    <header class="header">
+        <div class="date-title">今天</div>
+        <div class="header-actions">
+            <span>🔍</span>
+            <span>⚙️</span>
+        </div>
+    </header>
+
+    <div class="dashboard-grid">
+        <div class="stat-card large">
+            <div class="stat-label">剩余热量</div>
+            <div class="stat-value">400 <span class="stat-unit">kcal</span></div>
+            <div style="margin-top:auto; font-size:12px; opacity:0.9;">总预算 2,000</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-label">蛋白质</div>
+            <div class="stat-value">60<span class="stat-unit">g</span></div>
+            <div class="stat-progress"><div class="progress-fill" style="width:75%"></div></div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-label">碳水</div>
+            <div class="stat-value">170<span class="stat-unit">g</span></div>
+            <div class="stat-progress"><div class="progress-fill" style="width:85%"></div></div>
+        </div>
+    </div>
+
+    <div class="meal-grid-header">
+        <span>餐食记录</span>
+        <span style="font-size:12px; color:#be185d; font-weight:500;">全部 3 餐</span>
+    </div>
+
+    <div class="meal-grid">
+        <div class="meal-item">
+            <div class="meal-img-placeholder">🥪</div>
+            <div class="meal-info">
+                <div class="meal-type">
+                    早餐
+                    <span class="meal-cal-badge">450</span>
+                </div>
+                <div class="meal-desc">全麦面包, 鸡蛋, 牛奶, 苹果</div>
+            </div>
+        </div>
+
+        <div class="meal-item">
+            <div class="meal-img-placeholder">🍱</div>
+            <div class="meal-info">
+                <div class="meal-type">
+                    午餐
+                    <span class="meal-cal-badge">650</span>
+                </div>
+                <div class="meal-desc">米饭, 鸡胸肉, 青菜, 番茄蛋汤</div>
+            </div>
+        </div>
+
+        <div class="meal-item">
+            <div class="meal-img-placeholder">🥗</div>
+            <div class="meal-info">
+                <div class="meal-type">
+                    晚餐
+                    <span class="meal-cal-badge">500</span>
+                </div>
+                <div class="meal-desc">面条, 瘦肉, 西兰花, 胡萝卜</div>
+            </div>
+        </div>
+
+        <div class="add-meal-card">
+            <div style="font-size:24px; margin-bottom:8px;">+</div>
+            <div style="font-size:12px; font-weight:600;">加餐/零食</div>
+        </div>
+    </div>
+
+    <div class="tab-bar">
+        <div class="tab-item active">日记</div>
+        <div class="tab-item">食谱</div>
+        <div class="tab-item">分析</div>
+    </div>
+
+</body>
+</html>

+ 437 - 0
campus_health_app/frontend/campus-health-app/public/assets/exercise_detail.html

@@ -0,0 +1,437 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>运动详情</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      --bg: #e5e7eb;
+      --shell: #f9fafb;
+      --card: #ffffff;
+      --accent: #f97316; /* Orange for Exercise */
+      --accent-soft: #fff7ed;
+      --text-main: #111827;
+      --text-muted: #6b7280;
+      --danger: #ef4444;
+      --success: #22c55e;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: radial-gradient(circle at top, #ffedd5 0, #e5e7eb 30%, #111827 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: #020617;
+      box-shadow:
+        0 25px 60px rgba(15, 23, 42, 0.9),
+        0 0 0 8px rgba(15, 23, 42, 0.85);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: #f9fafb;
+      padding: 0; /* Remove padding for full width header */
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      position: relative;
+    }
+
+    /* Header */
+    .nav-header {
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: #fff;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .back-btn {
+      border: none;
+      background: none;
+      font-size: 20px;
+      color: var(--text-main);
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+    }
+    .back-btn:hover { background: #f3f4f6; }
+
+    .page-title {
+      font-size: 17px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .content-area {
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    /* Today's Overview Card */
+    .hero-card {
+      border-radius: 24px;
+      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+      padding: 20px;
+      color: white;
+      box-shadow: 0 10px 25px rgba(234, 88, 12, 0.3);
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .hero-bg-icon {
+      position: absolute;
+      right: -20px;
+      bottom: -20px;
+      font-size: 120px;
+      opacity: 0.1;
+      pointer-events: none;
+    }
+
+    .hero-label {
+      font-size: 13px;
+      font-weight: 500;
+      opacity: 0.9;
+      margin-bottom: 8px;
+    }
+
+    .hero-main-stat {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+      margin-bottom: 16px;
+    }
+
+    .hero-number {
+      font-size: 42px;
+      font-weight: 800;
+      line-height: 1;
+    }
+
+    .hero-unit {
+      font-size: 16px;
+      font-weight: 600;
+      opacity: 0.9;
+    }
+
+    .hero-stats-row {
+      display: flex;
+      gap: 24px;
+      padding-top: 16px;
+      border-top: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .stat-item {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .stat-val {
+      font-size: 18px;
+      font-weight: 700;
+    }
+
+    .stat-lbl {
+      font-size: 11px;
+      opacity: 0.8;
+    }
+
+    /* Section Title */
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      margin-bottom: 4px;
+    }
+
+    .section-title {
+      font-size: 15px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .section-action {
+      font-size: 12px;
+      color: var(--accent);
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    /* Activity List */
+    .activity-list {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .activity-card {
+      background: white;
+      border-radius: 16px;
+      padding: 12px 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+    }
+
+    .activity-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: var(--accent-soft);
+      color: var(--accent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+
+    .activity-info {
+      flex: 1;
+    }
+
+    .activity-name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .activity-time {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .activity-stat {
+      text-align: right;
+    }
+
+    .activity-kcal {
+      font-size: 14px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .activity-kcal-unit {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    /* Weekly Chart (Simple CSS Bar Chart) */
+    .chart-card {
+      background: white;
+      border-radius: 20px;
+      padding: 20px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
+    }
+
+    .bar-chart {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      height: 120px;
+      padding-top: 20px;
+    }
+
+    .bar-group {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+    }
+
+    .bar-track {
+      width: 8px;
+      height: 100%;
+      background: #f3f4f6;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+    }
+
+    .bar-fill {
+      width: 100%;
+      background: var(--accent);
+      border-radius: 4px;
+      transition: height 0.5s ease;
+    }
+
+    .bar-label {
+      font-size: 10px;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+
+    .history-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid #f3f4f6;
+    }
+    .history-item:last-child { border-bottom: none; }
+    
+    .history-date { font-size: 13px; color: var(--text-main); font-weight: 500; }
+    .history-val { font-size: 13px; color: var(--text-muted); }
+
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header class="nav-header">
+        <button class="back-btn" onclick="history.back()">❮</button>
+        <div class="page-title">运动详情</div>
+      </header>
+
+      <div class="content-area">
+        <!-- Today's Status -->
+        <section class="hero-card">
+          <div class="hero-bg-icon">🏃</div>
+          <div class="hero-label">今日运动总时长</div>
+          <div class="hero-main-stat">
+            <span class="hero-number">55</span>
+            <span class="hero-unit">分钟</span>
+          </div>
+          <div class="hero-stats-row">
+            <div class="stat-item">
+              <span class="stat-val">320</span>
+              <span class="stat-lbl">千卡消耗</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-val">2</span>
+              <span class="stat-lbl">运动次数</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-val">84</span>
+              <span class="stat-lbl">今日评分</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- Today's Activities -->
+        <section>
+          <div class="section-header">
+            <div class="section-title">今日记录</div>
+            <div class="section-action">+ 补录</div>
+          </div>
+          <div class="activity-list">
+            <article class="activity-card">
+              <div class="activity-icon">🏃</div>
+              <div class="activity-info">
+                <div class="activity-name">晨跑</div>
+                <div class="activity-time">07:30 - 08:00 · 户外</div>
+              </div>
+              <div class="activity-stat">
+                <div class="activity-kcal">200</div>
+                <div class="activity-kcal-unit">kcal</div>
+              </div>
+            </article>
+
+            <article class="activity-card">
+              <div class="activity-icon" style="color:#8b5cf6; background:#f5f3ff;">🧘</div>
+              <div class="activity-info">
+                <div class="activity-name">功能性力量训练</div>
+                <div class="activity-time">18:00 - 18:25 · 健身房</div>
+              </div>
+              <div class="activity-stat">
+                <div class="activity-kcal">120</div>
+                <div class="activity-kcal-unit">kcal</div>
+              </div>
+            </article>
+          </div>
+        </section>
+
+        <!-- Weekly History -->
+        <section>
+          <div class="section-header">
+            <div class="section-title">本周趋势</div>
+            <div class="section-action">查看全部 &gt;</div>
+          </div>
+          <div class="chart-card">
+            <div class="bar-chart">
+              <!-- Monday -->
+              <div class="bar-group">
+                <div class="bar-track"><div class="bar-fill" style="height: 60%"></div></div>
+                <div class="bar-label">一</div>
+              </div>
+              <!-- Tuesday -->
+              <div class="bar-group">
+                <div class="bar-track"><div class="bar-fill" style="height: 40%"></div></div>
+                <div class="bar-label">二</div>
+              </div>
+              <!-- Wednesday -->
+              <div class="bar-group">
+                <div class="bar-track"><div class="bar-fill" style="height: 0%"></div></div>
+                <div class="bar-label">三</div>
+              </div>
+              <!-- Thursday -->
+              <div class="bar-group">
+                <div class="bar-track"><div class="bar-fill" style="height: 80%"></div></div>
+                <div class="bar-label">四</div>
+              </div>
+              <!-- Friday -->
+              <div class="bar-group">
+                <div class="bar-track"><div class="bar-fill" style="height: 30%"></div></div>
+                <div class="bar-label">五</div>
+              </div>
+              <!-- Saturday -->
+              <div class="bar-group">
+                <div class="bar-track"><div class="bar-fill" style="height: 90%; background: #fbbf24;"></div></div>
+                <div class="bar-label">六</div>
+              </div>
+              <!-- Sunday (Today) -->
+              <div class="bar-group">
+                <div class="bar-track"><div class="bar-fill" style="height: 55%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);"></div></div>
+                <div class="bar-label">日</div>
+              </div>
+            </div>
+            
+            <div style="margin-top: 16px;">
+              <div class="history-item">
+                <span class="history-date">本周总计</span>
+                <span class="history-val">245 分钟 / 1500 kcal</span>
+              </div>
+              <div class="history-item">
+                <span class="history-date">日均</span>
+                <span class="history-val">35 分钟</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+      </div>
+    </div>
+  </div>
+</body>
+</html>

+ 747 - 0
campus_health_app/frontend/campus-health-app/public/assets/health_monitoring_mobile.html

@@ -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>

+ 430 - 0
campus_health_app/frontend/campus-health-app/public/assets/home-main-option1.html

@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>主页面蓝本一:卡片概览视图(体重 + 运动 + 饮食)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      --bg: #ede9fe;
+      --bg-bottom: #0f172a;
+      --card: #ffffff;
+      --accent: #6366f1;
+      --accent-soft: #eef2ff;
+      --accent-strong: #4f46e5;
+      --text-main: #0f172a;
+      --text-muted: #6b7280;
+      --danger: #ef4444;
+      --success: #22c55e;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: radial-gradient(circle at top, #f5f3ff 0, #e0f2fe 35%, #020617 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: #f9fafb;
+      box-shadow:
+        0 25px 60px rgba(15, 23, 42, 0.55),
+        0 0 0 8px rgba(15, 23, 42, 0.6);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 55%, #020617 100%);
+      padding: 18px 16px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      overflow-y: auto;
+    }
+
+    .header-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 4px;
+    }
+
+    .hello {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .hello span {
+      display: block;
+    }
+
+    .sub {
+      margin-top: 4px;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 999px;
+      background: radial-gradient(circle at 30% 20%, #fee2e2, #4f46e5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #f9fafb;
+      font-size: 16px;
+      font-weight: 600;
+      box-shadow: 0 6px 18px rgba(79, 70, 229, 0.55);
+    }
+
+    .section-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+      letter-spacing: 0.02em;
+    }
+
+    .section-sub {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .kpi-row {
+      margin-top: 10px;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .kpi-card {
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
+      padding: 8px 9px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .kpi-label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .kpi-icon {
+      width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      background: var(--accent-soft);
+      color: var(--accent-strong);
+    }
+
+    .kpi-main {
+      display: flex;
+      align-items: baseline;
+      gap: 2px;
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .kpi-unit {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .kpi-extra {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .ring-card {
+      margin-top: 4px;
+      border-radius: 20px;
+      background: linear-gradient(145deg, #eef2ff 0%, #e0f2fe 30%, #0f172a 100%);
+      padding: 14px 14px 12px;
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 12px;
+      align-items: center;
+      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.55);
+    }
+
+    .ring {
+      width: 92px;
+      height: 92px;
+      border-radius: 50%;
+      background:
+        conic-gradient(from 220deg, #22c55e 0 140deg, #0f172a 140deg 360deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .ring::after {
+      content: "";
+      position: absolute;
+      inset: 18px;
+      border-radius: 50%;
+      background: rgba(15, 23, 42, 0.96);
+    }
+
+    .ring-inner {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #e5e7eb;
+      gap: 2px;
+    }
+
+    .ring-main {
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .ring-sub {
+      font-size: 10px;
+      color: #9ca3af;
+    }
+
+    .ring-desc {
+      font-size: 11px;
+      color: #e5e7eb;
+      line-height: 1.4;
+    }
+
+    .ring-desc strong { color: #facc15; }
+
+    .ring-text-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #f9fafb;
+      margin-bottom: 4px;
+    }
+
+    .ring-text-sub {
+      font-size: 11px;
+      color: #cbd5f5;
+      margin-bottom: 6px;
+    }
+
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .chip {
+      border-radius: 999px;
+      padding: 3px 8px;
+      font-size: 10px;
+      background: rgba(15, 23, 42, 0.55);
+      color: #e5e7eb;
+      border: 1px solid rgba(148, 163, 184, 0.4);
+    }
+
+    .stack-section {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-top: 10px;
+    }
+
+    .stack-card {
+      border-radius: 18px;
+      background: #ffffff;
+      padding: 10px 12px;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 10px;
+      align-items: center;
+      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
+    }
+
+    .stack-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      background: radial-gradient(circle at 30% 20%, #fee2e2, #f97316);
+      color: #ffffff;
+    }
+
+    .stack-icon.green {
+      background: radial-gradient(circle at 30% 20%, #dcfce7, #22c55e);
+    }
+
+    .stack-icon.purple {
+      background: radial-gradient(circle at 30% 20%, #e0f2fe, #6366f1);
+    }
+
+    .stack-text-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .stack-text-sub {
+      margin-top: 2px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .stack-main-number {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text-main);
+      text-align: right;
+    }
+
+    .stack-main-number span {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-left: 2px;
+    }
+
+    .footer-hint {
+      margin-top: 8px;
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header class="header-row">
+        <div>
+          <p class="hello"><span>你好,李同学</span><span>今天感觉如何?</span></p>
+          <p class="sub">下面是你今天最重要的三个数字:体重 · 运动 · 饮食</p>
+        </div>
+        <div class="avatar">LS</div>
+      </header>
+
+      <section>
+        <p class="section-title">关键数字一览</p>
+        <div class="kpi-row">
+          <div class="kpi-card">
+            <div class="kpi-label">
+              <div class="kpi-icon">⚖️</div>
+              <span>今日体重</span>
+            </div>
+            <div class="kpi-main">
+              <span>65.2</span>
+              <span class="kpi-unit">kg</span>
+            </div>
+            <div class="kpi-extra">目标 63kg · 差 2.2kg</div>
+          </div>
+
+          <div class="kpi-card">
+            <div class="kpi-label">
+              <div class="kpi-icon">🏃</div>
+              <span>今日运动</span>
+            </div>
+            <div class="kpi-main">
+              <span>42</span>
+              <span class="kpi-unit">分钟</span>
+            </div>
+            <div class="kpi-extra">8,230 步 · 完成目标的 82%</div>
+          </div>
+
+          <div class="kpi-card">
+            <div class="kpi-label">
+              <div class="kpi-icon">🥗</div>
+              <span>饮食热量</span>
+            </div>
+            <div class="kpi-main">
+              <span>1,580</span>
+              <span class="kpi-unit">kcal</span>
+            </div>
+            <div class="kpi-extra">目标 2,000kcal · 剩余 420kcal</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="ring-card">
+        <div class="ring">
+          <div class="ring-inner">
+            <div class="ring-main">68%</div>
+            <div class="ring-sub">今日进度</div>
+          </div>
+        </div>
+        <div>
+          <div class="ring-text-title">今天的整体状态不错</div>
+          <div class="ring-text-sub">结合体重 · 运动 · 饮食三个维度计算</div>
+          <p class="ring-desc">如果在今晚前再<span>完成 15 分钟中等强度运动</span>,就可以点亮本周的健康勋章。</p>
+          <div class="chips">
+            <span class="chip">睡眠已达标</span>
+            <span class="chip">饮水略少 · 再喝 400ml</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="stack-section">
+        <div class="stack-card">
+          <div class="stack-icon purple">💤</div>
+          <div>
+            <div class="stack-text-title">昨晚睡眠</div>
+            <div class="stack-text-sub">7 小时 20 分 · 评分 86 / 100</div>
+          </div>
+          <div class="stack-main-number">良好<span>睡眠</span></div>
+        </div>
+
+        <div class="stack-card">
+          <div class="stack-icon green">🔥</div>
+          <div>
+            <div class="stack-text-title">体能训练摘要</div>
+            <div class="stack-text-sub">上一次训练消耗 320 千卡 · 功能性力量训练</div>
+          </div>
+          <div class="stack-main-number">55<span>分钟</span></div>
+        </div>
+
+        <div class="stack-card">
+          <div class="stack-icon">
+            <span>👣</span>
+          </div>
+          <div>
+            <div class="stack-text-title">今日步数</div>
+            <div class="stack-text-sub">2025 年 12 月 7 日 · 总计步数</div>
+          </div>
+          <div class="stack-main-number">2,417<span>步</span></div>
+        </div>
+      </section>
+
+      <p class="footer-hint">蓝本一 · 适合作为 APP 首页的「健康总览」视图:顶部是三大关键数字,中部是综合进度环,底部是睡眠 / 训练 / 步数摘要。</p>
+    </div>
+  </div>
+</body>
+</html>

+ 529 - 0
campus_health_app/frontend/campus-health-app/public/assets/school_services_mobile_design_a.html

@@ -0,0 +1,529 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>校园服务 - 方案 A(卡片信息流)</title>
+  <style>
+    :root {
+      --brand-teal: #01847F;
+      --brand-pink: #F9D2E4;
+      --phone-shell: #f3f4f6;
+      --phone-inner: #ffffff;
+      --card: #ffffff;
+      --accent: var(--brand-teal);
+      --accent-soft: rgba(1, 132, 127, 0.08);
+      --accent-strong: #016c68;
+      --text-main: #0f172a;
+      --text-muted: #6b7280;
+      --line-soft: #e5e7eb;
+      --warning: #f97316;
+      --danger: #ef4444;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: var(--phone-inner);
+      box-shadow:
+        0 18px 40px rgba(15, 23, 42, 0.22),
+        0 0 0 1px rgba(15, 23, 42, 0.06);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: #f9fafb;
+      padding: 14px 14px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      overflow-y: auto;
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 2px;
+    }
+
+    .back-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.04);
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .page-title-group {
+      flex: 1;
+      text-align: center;
+    }
+
+    .page-title {
+      font-size: 17px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .page-sub {
+      margin-top: 2px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 999px;
+      background: radial-gradient(circle at 30% 20%, #fee2e2, #22c55e);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      color: #f9fafb;
+      box-shadow: 0 6px 14px rgba(34, 197, 94, 0.4);
+    }
+
+    .chips-row {
+      display: flex;
+      gap: 8px;
+      margin-top: 6px;
+      overflow-x: auto;
+      padding-bottom: 2px;
+    }
+
+    .chip {
+      flex-shrink: 0;
+      border-radius: 999px;
+      padding: 4px 10px;
+      font-size: 11px;
+      background: var(--accent-soft);
+      color: var(--accent-strong);
+      border: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .chip.secondary {
+      background: #f3f4f6;
+      color: var(--text-muted);
+    }
+
+    .chip-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--accent);
+    }
+
+    .section-title-row {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      margin-top: 8px;
+      margin-bottom: 6px;
+    }
+
+    .section-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .section-hint {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .card {
+      border-radius: 18px;
+      background: var(--card);
+      padding: 12px 12px 10px;
+      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
+      margin-bottom: 10px;
+    }
+
+    .hero-card {
+      position: relative;
+      overflow: hidden;
+      background: var(--accent);
+      color: #ffffff;
+      padding: 14px 14px 12px;
+      margin-top: 2px;
+    }
+
+    .hero-main {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .hero-text-title {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .hero-text-sub {
+      margin-top: 4px;
+      font-size: 11px;
+      color: #dcfce7;
+    }
+
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin-top: 6px;
+      font-size: 10px;
+      padding: 3px 8px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.5);
+      border: 1px solid rgba(190, 242, 100, 0.6);
+    }
+
+    .hero-number {
+      text-align: right;
+    }
+
+    .hero-number-main {
+      font-size: 22px;
+      font-weight: 700;
+    }
+
+    .hero-number-sub {
+      font-size: 11px;
+      color: #bbf7d0;
+    }
+
+    .hero-foot {
+      margin-top: 8px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+      color: #bbf7d0;
+    }
+
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 6px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.45);
+      font-size: 10px;
+    }
+
+    .restaurant-main {
+      display: grid;
+      grid-template-columns: 72px 1fr auto;
+      gap: 10px;
+      align-items: center;
+      margin-bottom: 6px;
+    }
+
+    .thumb {
+      width: 72px;
+      height: 72px;
+      border-radius: 14px;
+      background: linear-gradient(135deg, #01847F, #02a39a);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .thumb::after {
+      content: "校园食堂";
+      position: absolute;
+      left: 6px;
+      bottom: 6px;
+      font-size: 10px;
+      color: #fefce8;
+      text-shadow: 0 1px 3px rgba(0,0,0,0.35);
+    }
+
+    .badge-corner {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 999px;
+      background: var(--accent);
+      color: #ffffff;
+    }
+
+    .badge-queue {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 999px;
+      background: var(--brand-pink);
+      color: #016c68;
+    }
+
+    .restaurant-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .restaurant-meta {
+      margin-top: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .rating-row {
+      margin-top: 4px;
+      font-size: 11px;
+      color: var(--accent-strong);
+    }
+
+    .pill-btn {
+      font-size: 11px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      border: none;
+      background: var(--accent);
+      color: #ffffff;
+      box-shadow: 0 6px 14px rgba(1, 132, 127, 0.35);
+    }
+
+    .mini-list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-top: 6px;
+    }
+
+    .mini-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      padding: 6px 8px;
+      border-radius: 10px;
+      background: #f9fafb;
+    }
+
+    .mini-row strong {
+      font-size: 12px;
+      color: var(--text-main);
+    }
+
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 999px;
+      background: var(--accent);
+      margin-right: 4px;
+    }
+
+    .status-ok { color: var(--accent-strong); }
+    .status-busy { color: #e56b8a; }
+
+    .two-column {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-top: 6px;
+    }
+
+    .tiny-card {
+      border-radius: 12px;
+      padding: 8px;
+      background: #f9fafb;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .tiny-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-main);
+      margin-bottom: 4px;
+    }
+
+    .tagline {
+      margin-top: 1px;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .timeline {
+      margin-top: 4px;
+      border-left: 1px dashed var(--line-soft);
+      padding-left: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .timeline-item {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .timeline-item strong { color: var(--text-main); }
+
+    .link-row {
+      margin-top: 6px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 11px;
+      color: var(--accent-strong);
+    }
+
+    .link-row span {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .footer-hint {
+      margin-top: 4px;
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header>
+        <div class="back-pill">❮ 返回</div>
+        <div class="page-title-group">
+          <div class="page-title">校园服务</div>
+          <div class="page-sub">吃饭 · 运动 · 场馆 一站式入口</div>
+        </div>
+        <div class="avatar">SC</div>
+      </header>
+
+      <div class="chips-row">
+        <div class="chip"><span class="chip-dot"></span> 就近吃什么</div>
+        <div class="chip secondary">🏃 约同学去运动</div>
+        <div class="chip secondary">🏟️ 快速约场地</div>
+      </div>
+
+      <section>
+        <div class="section-title-row">
+          <div class="section-title">今日推荐 · 校园饮食</div>
+          <div class="section-hint">根据你当前所在校区 · 运动消耗智能推荐</div>
+        </div>
+
+        <div class="card">
+          <div class="restaurant-main">
+            <div class="thumb">
+              <div class="badge-corner">推荐</div>
+              <div class="badge-queue">排队约 8 分钟</div>
+            </div>
+            <div>
+              <div class="restaurant-title">青春餐厅 · 轻食窗口</div>
+              <div class="restaurant-meta">📍 东区食堂 3 楼 · 距离你约 450 m</div>
+              <div class="rating-row">★★★★★ 4.7 · 低油少盐 · 适合运动后恢复</div>
+            </div>
+            <div>
+              <button class="pill-btn">去看看</button>
+            </div>
+          </div>
+
+          <div class="mini-list">
+            <div class="mini-row">
+              <div><span class="dot"></span><strong>乐活自选</strong> · 西区一层</div>
+              <div class="status-ok">空闲 · 无需排队</div>
+            </div>
+            <div class="mini-row">
+              <div><span class="dot" style="background:var(--warning);"></span><strong>活力餐吧</strong> · 北区二层</div>
+              <div class="status-busy">略拥挤 · 预计 15 分钟</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="section-title-row">
+          <div class="section-title">运动与场馆</div>
+          <div class="section-hint">今天运动打卡 & 场馆空闲情况一目了然</div>
+        </div>
+
+        <div class="card">
+          <div class="two-column">
+            <div class="tiny-card">
+              <div class="tiny-title">今晚一起跑步吗?</div>
+              <div class="tagline">破晓跑团 · 19:00 田径场 · 剩 4 个名额</div>
+              <div class="timeline">
+                <div class="timeline-item"><strong>18:30</strong> 热身 &amp; 讲解路线</div>
+                <div class="timeline-item"><strong>19:00</strong> 集体慢跑 5 km</div>
+              </div>
+            </div>
+            <div class="tiny-card">
+              <div class="tiny-title">场馆预约概览</div>
+              <div class="tagline">🏀 篮球馆 19:00 · 还有 2 个场地</div>
+              <div class="tagline">🏸 羽毛球馆 18:00 · 易约到</div>
+              <div class="tagline">⚽ 足球场 · 20:00 已满</div>
+            </div>
+          </div>
+
+          <div class="link-row">
+            <span>🏃 发现更多运动队伍 ›</span>
+            <span>📅 查看全部场馆空闲表 ›</span>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="section-title-row">
+          <div class="section-title">健康小贴士</div>
+          <div class="section-hint">根据你今天的步数 · 运动 · 饮食给出的轻量建议</div>
+        </div>
+
+        <div class="card">
+          <div class="mini-list">
+            <div class="mini-row">
+              <div><strong>🥤 饭前先喝一杯水</strong></div>
+              <div>有助于控制食量</div>
+            </div>
+            <div class="mini-row">
+              <div><strong>🏃 运动后拉伸 5 分钟</strong></div>
+              <div>减少第二天酸痛</div>
+            </div>
+            <div class="mini-row">
+              <div><strong>🌙 睡前 2 小时内避免大餐</strong></div>
+              <div>帮助提升睡眠质量</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <p class="footer-hint">方案 A:以「信息流卡片」为主,顶部轻量入口,下面依次展示饮食推荐 / 运动场馆 / 健康小贴士,适合日常浏览。</p>
+    </div>
+  </div>
+</body>
+</html>

+ 467 - 0
campus_health_app/frontend/campus-health-app/public/assets/school_services_mobile_design_b.html

@@ -0,0 +1,467 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>校园服务 - 方案 B(功能宫格 + 状态总览)</title>
+  <style>
+    :root {
+      --brand-teal: #01847F;
+      --brand-pink: #F9D2E4;
+      --shell: #f3f4f6;
+      --inner: #ffffff;
+      --accent: var(--brand-teal);
+      --accent-soft: rgba(1, 132, 127, 0.08);
+      --accent-strong: #016c68;
+      --text-main: #0f172a;
+      --text-muted: #6b7280;
+      --card: #ffffff;
+      --line-soft: #e5e7eb;
+      --success: var(--brand-teal);
+      --warning: #e56b8a;
+      --danger: #ef4444;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: var(--inner);
+      box-shadow:
+        0 18px 40px rgba(15, 23, 42, 0.22),
+        0 0 0 1px rgba(15, 23, 42, 0.06);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: #f9fafb;
+      padding: 14px 14px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      overflow-y: auto;
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--text-main);
+      margin-bottom: 6px;
+    }
+
+    .nav-left {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .nav-back {
+      font-size: 11px;
+      opacity: .8;
+    }
+
+    .nav-title {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .nav-sub {
+      font-size: 11px;
+      opacity: .85;
+    }
+
+    .campus-badge {
+      padding: 4px 10px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.3);
+      font-size: 11px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .search-bar {
+      margin-top: 4px;
+      padding: 7px 10px;
+      border-radius: 999px;
+      background: #ffffff;
+      border: 1px solid var(--line-soft);
+      color: var(--text-muted);
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .search-bar span:last-child {
+      opacity: .7;
+    }
+
+    .grid-section {
+      margin-top: 8px;
+      border-radius: 18px;
+      background: #f9fafb;
+      padding: 10px 10px 8px;
+      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+    }
+
+    .grid-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-bottom: 8px;
+    }
+
+    .grid-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .grid-sub {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+    }
+
+    .feature-tile {
+      border-radius: 16px;
+      padding: 10px 9px;
+      background: var(--card);
+      border: 1px solid var(--accent-soft);
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .feature-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      background: linear-gradient(135deg, #01847F, #02a39a);
+      color: #ffffff;
+    }
+
+    .feature-text-main {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .feature-text-sub {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .feature-badge {
+      margin-top: 4px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 6px;
+      border-radius: 999px;
+      font-size: 10px;
+      background: var(--accent-soft);
+      color: var(--accent-strong);
+    }
+
+    .feature-badge.green {
+      background: rgba(1, 132, 127, 0.08);
+      color: var(--accent-strong);
+    }
+
+    .feature-badge.orange {
+      background: rgba(249, 210, 228, 0.55);
+      color: #8b4c63;
+    }
+
+    .section {
+      margin-top: 10px;
+    }
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-bottom: 6px;
+    }
+
+    .section-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .section-hint {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .card {
+      border-radius: 16px;
+      background: var(--card);
+      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
+      padding: 10px 10px 8px;
+      margin-bottom: 8px;
+    }
+
+    .state-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    .state-card {
+      border-radius: 14px;
+      background: #f9fafb;
+      padding: 8px 8px 6px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .state-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-main);
+      margin-bottom: 4px;
+    }
+
+    .bar-bg {
+      margin-top: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: #e5e7eb;
+      overflow: hidden;
+    }
+
+    .bar-fill {
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--success), var(--accent));
+      width: 70%;
+    }
+
+    .bar-fill.busy {
+      background: linear-gradient(90deg, #F9D2E4, #f973a8);
+      width: 88%;
+    }
+
+    .state-footer {
+      margin-top: 4px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+    }
+
+    .state-ok { color: var(--success); }
+    .state-busy { color: var(--warning); }
+
+    .timeline {
+      margin-top: 4px;
+      border-left: 1px dashed var(--line-soft);
+      padding-left: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .timeline strong { color: var(--text-main); }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-top: 4px;
+    }
+
+    .list-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      padding: 6px 8px;
+      border-radius: 10px;
+      background: #f9fafb;
+    }
+
+    .list-row strong { color: var(--text-main); }
+
+    .pill-link {
+      margin-top: 4px;
+      font-size: 11px;
+      color: var(--accent-strong);
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .footer-hint {
+      margin-top: 6px;
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header>
+        <div class="nav-left">
+          <div class="nav-back">❮ 返回</div>
+          <div class="nav-title">校园服务</div>
+          <div class="nav-sub">常用服务都在这里,一屏查看「吃 · 动 · 场馆」</div>
+        </div>
+        <div>
+          <div class="campus-badge">🏫 东区 · 晴 26℃</div>
+        </div>
+      </header>
+
+      <div class="search-bar">🔍 搜索餐厅 / 场馆 / 队伍<span>例如「羽毛球」</span></div>
+
+      <section class="grid-section">
+        <div class="grid-header">
+          <div class="grid-title">快捷功能</div>
+          <div class="grid-sub">将最常用的 4 个入口放在手边</div>
+        </div>
+        <div class="feature-grid">
+          <div class="feature-tile">
+            <div class="feature-icon">🍱</div>
+            <div>
+              <div class="feature-text-main">校园饮食</div>
+              <div class="feature-text-sub">今日推荐 3 家适合运动后</div>
+              <div class="feature-badge green">现在多数窗口 · 排队 &lt; 10 分钟</div>
+            </div>
+          </div>
+          <div class="feature-tile">
+            <div class="feature-icon">🏃</div>
+            <div>
+              <div class="feature-text-main">运动组队</div>
+              <div class="feature-text-sub">本周有 6 场公开训练</div>
+              <div class="feature-badge">今晚 19:00 跑步团仍可报名</div>
+            </div>
+          </div>
+          <div class="feature-tile">
+            <div class="feature-icon">🏟️</div>
+            <div>
+              <div class="feature-text-main">场馆预约</div>
+              <div class="feature-text-sub">篮球 / 羽毛球 / 游泳馆</div>
+              <div class="feature-badge orange">黄金时段部分场地已满</div>
+            </div>
+          </div>
+          <div class="feature-tile">
+            <div class="feature-icon">📋</div>
+            <div>
+              <div class="feature-text-main">我的约队 &amp; 预约</div>
+              <div class="feature-text-sub">一键查看已加入队伍和场馆</div>
+              <div class="feature-badge green">今晚有 2 场活动待参加</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <div class="section-title">今日状态总览</div>
+          <div class="section-hint">帮你快速判断「现在去不去」</div>
+        </div>
+
+        <div class="card">
+          <div class="state-row">
+            <div class="state-card">
+              <div class="state-title">食堂拥挤指数</div>
+              <div>午餐高峰 · 部分窗口排队</div>
+              <div class="bar-bg"><div class="bar-fill busy"></div></div>
+              <div class="state-footer">
+                <span class="state-busy">建议错峰 10 分钟再去</span>
+                <span>实时刷新 · 1 分钟前</span>
+              </div>
+            </div>
+            <div class="state-card">
+              <div class="state-title">运动场地空闲</div>
+              <div>晚间 18:00-20:00 时段</div>
+              <div class="bar-bg"><div class="bar-fill"></div></div>
+              <div class="state-footer">
+                <span class="state-ok">羽毛球 / 网球场余量充足</span>
+                <span>2 小时后略忙</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <div class="section-title">我的今日安排</div>
+          <div class="section-hint">一屏查看与你相关的就餐和运动提醒</div>
+        </div>
+        <div class="card">
+          <div class="timeline">
+            <div><strong>12:30</strong> 校园餐厅「青春餐厅」自动推荐轻食套餐</div>
+            <div><strong>18:00</strong> 羽毛球馆 3 号场 · 已预约 · 建议提前 10 分钟到场</div>
+            <div><strong>21:30</strong> 睡前拉伸 10 分钟 · 帮助放松腿部肌群</div>
+          </div>
+          <div class="pill-link">📅 查看本周全部运动 / 就餐提醒 ›</div>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <div class="section-title">常用入口</div>
+          <div class="section-hint">快速跳转到其他健康相关页面</div>
+        </div>
+        <div class="card">
+          <div class="list">
+            <div class="list-row">
+              <div><strong>🏃 运动详情</strong></div>
+              <div>查看今日运动时长</div>
+            </div>
+            <div class="list-row">
+              <div><strong>👣 步数详情</strong></div>
+              <div>查看本周步数趋势</div>
+            </div>
+            <div class="list-row">
+              <div><strong>🥗 饮食管理</strong></div>
+              <div>打开今日饮食记录</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <p class="footer-hint">方案 B:顶部以搜索 + 宫格入口为主,下方给出「今日状态总览」与「个人运动 / 就餐时间线」,适合作为更工具化的总控台视图。</p>
+    </div>
+  </div>
+</body>
+</html>

+ 408 - 0
campus_health_app/frontend/campus-health-app/public/assets/school_services_mobile_design_c.html

@@ -0,0 +1,408 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>校园服务 - 方案 C(顶部分段 Tab)</title>
+  <style>
+    :root {
+      --brand-teal: #01847F;
+      --brand-pink: #F9D2E4;
+      --shell: #f3f4f6;
+      --inner: #ffffff;
+      --accent: var(--brand-teal);
+      --accent-soft: rgba(1, 132, 127, 0.08);
+      --accent-strong: #016c68;
+      --text-main: #0f172a;
+      --text-muted: #6b7280;
+      --card: #ffffff;
+      --line-soft: #e5e7eb;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: var(--inner);
+      box-shadow:
+        0 18px 40px rgba(15, 23, 42, 0.22),
+        0 0 0 1px rgba(15, 23, 42, 0.06);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: #f9fafb;
+      padding: 14px 14px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      overflow-y: auto;
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .header-left {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .back-link {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .header-title {
+      font-size: 17px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .header-sub {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .badge-day {
+      padding: 4px 10px;
+      border-radius: 999px;
+      background: var(--accent-soft);
+      color: var(--accent-strong);
+      font-size: 11px;
+    }
+
+    .segmented {
+      margin-top: 8px;
+      border-radius: 999px;
+      background: #e5e7eb;
+      padding: 3px;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 3px;
+      font-size: 12px;
+    }
+
+    .seg-item {
+      text-align: center;
+      padding: 6px 0;
+      border-radius: 999px;
+      color: var(--text-muted);
+    }
+
+    .seg-item.active {
+      background: #ffffff;
+      color: var(--text-main);
+      font-weight: 600;
+      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
+    }
+
+    .seg-item span {
+      display: block;
+      font-size: 10px;
+      color: #9ca3af;
+      margin-top: 2px;
+    }
+
+    .tab-note {
+      margin-top: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .card {
+      border-radius: 18px;
+      background: var(--card);
+      padding: 10px 10px 8px;
+      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
+      margin-top: 8px;
+    }
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-bottom: 6px;
+    }
+
+    .section-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .section-hint {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .horizontal-cards {
+      display: flex;
+      gap: 8px;
+      overflow-x: auto;
+      padding-bottom: 2px;
+      margin-top: 4px;
+    }
+
+    .h-card {
+      min-width: 190px;
+      border-radius: 16px;
+      background: #f9fafb;
+      padding: 8px 8px 6px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .h-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-main);
+      margin-bottom: 4px;
+    }
+
+    .tagline {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 6px;
+      border-radius: 999px;
+      font-size: 10px;
+      margin-top: 4px;
+      background: var(--accent-soft);
+      color: var(--accent-strong);
+    }
+
+    .pill.blue {
+      background: rgba(1, 132, 127, 0.08);
+      color: var(--accent-strong);
+    }
+
+    .pill.orange {
+      background: rgba(249, 210, 228, 0.6);
+      color: #8b4c63;
+    }
+
+    .chips-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin-top: 4px;
+    }
+
+    .chip {
+      border-radius: 999px;
+      padding: 2px 6px;
+      font-size: 10px;
+      background: var(--accent-soft);
+      color: var(--accent-strong);
+    }
+
+    .mini-list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-top: 4px;
+    }
+
+    .mini-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      padding: 6px 8px;
+      border-radius: 10px;
+      background: #f9fafb;
+    }
+
+    .mini-row strong { color: var(--text-main); }
+
+    .timeline {
+      margin-top: 4px;
+      border-left: 1px dashed var(--line-soft);
+      padding-left: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .timeline strong { color: var(--text-main); }
+
+    .two-column {
+      display: grid;
+      grid-template-columns: 1.1fr 1fr;
+      gap: 8px;
+      margin-top: 4px;
+    }
+
+    .tiny-card {
+      border-radius: 14px;
+      background: #f9fafb;
+      padding: 8px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .tiny-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-main);
+      margin-bottom: 4px;
+    }
+
+    .pill-link {
+      margin-top: 4px;
+      font-size: 11px;
+      color: var(--accent-strong);
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .footer-hint {
+      margin-top: 4px;
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header>
+        <div class="header-left">
+          <div class="back-link">❮ 返回</div>
+          <div class="header-title">校园服务</div>
+          <div class="header-sub">在一个页面里切换「吃饭 / 运动 / 日程」视角</div>
+        </div>
+        <div class="badge-day">周三 · 第 10 教学周</div>
+      </header>
+
+      <div class="segmented">
+        <div class="seg-item active">🍱 吃饭<span>推荐餐厅 &amp; 排队</span></div>
+        <div class="seg-item">🏃 运动<span>队伍 &amp; 训练</span></div>
+        <div class="seg-item">📅 日程<span>个人预约 &amp; 提醒</span></div>
+      </div>
+
+      <div class="tab-note">当前展示的是「吃饭」视图,其他 Tab 内容在下方示例。</div>
+
+      <!-- 吃饭 Tab -->
+      <section class="card">
+        <div class="section-header">
+          <div class="section-title">附近推荐餐厅</div>
+          <div class="section-hint">按健康程度与距离排序</div>
+        </div>
+        <div class="horizontal-cards">
+          <div class="h-card">
+            <div class="h-title">青春餐厅 · 轻食专区</div>
+            <div class="tagline">📍 东区 3 楼 · 距离你约 450 m</div>
+            <div class="pill">排队约 8 分钟 · 健康评分 4.8 / 5</div>
+            <div class="chips-row">
+              <div class="chip">低油少盐</div>
+              <div class="chip">适合减脂期</div>
+              <div class="chip">支持校园卡支付</div>
+            </div>
+          </div>
+          <div class="h-card">
+            <div class="h-title">活力食堂 · 特色简餐</div>
+            <div class="tagline">📍 北区 2 楼 · 距离 620 m</div>
+            <div class="pill orange">略拥挤 · 建议错峰 10 分钟</div>
+            <div class="chips-row">
+              <div class="chip">高蛋白套餐</div>
+              <div class="chip">可拼桌</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="mini-list">
+          <div class="mini-row">
+            <div><strong>🍣 智慧餐厅</strong> · 支持自助称重</div>
+            <div>步行约 8 分钟</div>
+          </div>
+          <div class="mini-row">
+            <div><strong>🥗 沙拉吧</strong> · 运动后轻食</div>
+            <div>剩余 12 份套餐</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 运动 Tab 示例 -->
+      <section class="card">
+        <div class="section-header">
+          <div class="section-title">「运动」视图示例</div>
+          <div class="section-hint">切换 Tab 后的主内容</div>
+        </div>
+        <div class="two-column">
+          <div class="tiny-card">
+            <div class="tiny-title">我的队伍 · 破晓跑团</div>
+            <div class="timeline">
+              <div><strong>今晚 19:00</strong> 田径场集合 · LSD 慢跑 5 km</div>
+              <div><strong>签到奖励</strong> +30 体力积分 · 连续第 3 天</div>
+            </div>
+            <div class="pill blue">查看本周训练时间线 ›</div>
+          </div>
+          <div class="tiny-card">
+            <div class="tiny-title">场馆预约一览</div>
+            <div class="tagline">🏀 室内篮球馆 · 19:00 仅剩 1 场</div>
+            <div class="tagline">🏸 羽毛球馆 · 18:00 充足</div>
+            <div class="tagline">🏊 游泳馆 · 21:00 略拥挤</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 日程 Tab 示例 -->
+      <section class="card">
+        <div class="section-header">
+          <div class="section-title">「日程」视图示例</div>
+          <div class="section-hint">聚焦今天要去的餐厅、运动和场馆</div>
+        </div>
+        <div class="mini-list">
+          <div class="mini-row">
+            <div><strong>🍱 今日就餐安排</strong></div>
+            <div>中午 青春餐厅 · 晚上清淡晚餐</div>
+          </div>
+          <div class="mini-row">
+            <div><strong>🏃 运动打卡</strong></div>
+            <div>19:00 破晓跑团 · 记得提前热身</div>
+          </div>
+          <div class="mini-row">
+            <div><strong>🏟️ 场馆预约</strong></div>
+            <div>羽毛球馆 3 号场 · 18:00-19:00</div>
+          </div>
+        </div>
+        <div class="pill-link">📚 打开「我的日程」页,查看全部安排 ›</div>
+      </section>
+
+      <p class="footer-hint">方案 C:通过顶部分段 Tab 在「吃饭 / 运动 / 日程」三个视角间切换,适合做成一个大模块内部的子导航,减少页面跳转。</p>
+    </div>
+  </div>
+</body>
+</html>

+ 409 - 0
campus_health_app/frontend/campus-health-app/public/assets/steps_detail.html

@@ -0,0 +1,409 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>步数详情</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      --bg: #e5e7eb;
+      --shell: #f9fafb;
+      --card: #ffffff;
+      --accent: #4f46e5; /* Indigo for Steps */
+      --accent-soft: #eef2ff;
+      --text-main: #111827;
+      --text-muted: #6b7280;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: radial-gradient(circle at top, #e0e7ff 0, #e5e7eb 30%, #111827 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: #020617;
+      box-shadow:
+        0 25px 60px rgba(15, 23, 42, 0.9),
+        0 0 0 8px rgba(15, 23, 42, 0.85);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: #f9fafb;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      position: relative;
+    }
+
+    /* Header */
+    .nav-header {
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: #fff;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .back-btn {
+      border: none;
+      background: none;
+      font-size: 20px;
+      color: var(--text-main);
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+    }
+    .back-btn:hover { background: #f3f4f6; }
+
+    .page-title {
+      font-size: 17px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .content-area {
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    /* Hero Card */
+    .hero-card {
+      border-radius: 24px;
+      background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
+      padding: 24px 20px;
+      color: white;
+      box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
+      position: relative;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .ring-container {
+      position: relative;
+      width: 160px;
+      height: 160px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16px;
+    }
+
+    /* Simple CSS Ring using conic-gradient */
+    .progress-ring {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: conic-gradient(
+        #ffffff 82%, 
+        rgba(255,255,255,0.2) 82% 100%
+      );
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /* Cutout center */
+      mask: radial-gradient(transparent 58%, black 60%);
+      -webkit-mask: radial-gradient(transparent 58%, black 60%);
+    }
+
+    .ring-content {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .step-count {
+      font-size: 32px;
+      font-weight: 800;
+      line-height: 1;
+    }
+
+    .step-label {
+      font-size: 12px;
+      opacity: 0.8;
+      margin-top: 4px;
+    }
+
+    .hero-stats-row {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding-top: 16px;
+      border-top: 1px solid rgba(255,255,255,0.15);
+    }
+
+    .stat-item {
+      text-align: center;
+      flex: 1;
+    }
+
+    .stat-val {
+      display: block;
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .stat-lbl {
+      font-size: 11px;
+      opacity: 0.7;
+    }
+
+    /* Hourly Chart */
+    .chart-section {
+      background: white;
+      border-radius: 20px;
+      padding: 16px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.03);
+    }
+
+    .chart-header {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      color: var(--text-main);
+    }
+
+    .hourly-chart {
+      display: flex;
+      align-items: flex-end;
+      gap: 4px;
+      height: 100px;
+      padding-bottom: 20px; /* space for x-axis */
+      position: relative;
+    }
+
+    .hour-bar {
+      flex: 1;
+      background: var(--accent-soft);
+      border-radius: 2px;
+      height: 100%; /* max height container */
+      position: relative;
+    }
+    
+    .hour-fill {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: var(--accent);
+      border-radius: 2px;
+      min-height: 4px;
+    }
+
+    .x-axis {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    /* Weekly List */
+    .history-list {
+      background: white;
+      border-radius: 20px;
+      padding: 0 16px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.03);
+    }
+
+    .history-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 0;
+      border-bottom: 1px solid #f3f4f6;
+    }
+    .history-row:last-child { border-bottom: none; }
+
+    .h-date {
+      font-size: 14px;
+      color: var(--text-main);
+      font-weight: 500;
+    }
+
+    .h-steps {
+      font-size: 15px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .h-bar-bg {
+      flex: 1;
+      height: 6px;
+      background: #f3f4f6;
+      border-radius: 99px;
+      margin: 0 16px;
+      overflow: hidden;
+    }
+    
+    .h-bar-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 99px;
+    }
+    
+    .goal-pill {
+      display: inline-block;
+      padding: 4px 10px;
+      background: rgba(255,255,255,0.2);
+      border-radius: 99px;
+      font-size: 11px;
+      margin-bottom: 12px;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header class="nav-header">
+        <button class="back-btn" onclick="history.back()">❮</button>
+        <div class="page-title">步数详情</div>
+      </header>
+
+      <div class="content-area">
+        <!-- Hero Card -->
+        <section class="hero-card">
+          <div class="goal-pill">目标 10,000 步</div>
+          <div class="ring-container">
+            <div class="progress-ring"></div>
+            <div class="ring-content">
+              <span class="step-count">8,230</span>
+              <span class="step-label">今日步数</span>
+            </div>
+          </div>
+          
+          <div class="hero-stats-row">
+            <div class="stat-item">
+              <span class="stat-val">5.8</span>
+              <span class="stat-lbl">公里</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-val">342</span>
+              <span class="stat-lbl">千卡</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-val">8</span>
+              <span class="stat-lbl">楼层</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- Hourly Trend -->
+        <section class="chart-section">
+          <div class="chart-header">今日分布</div>
+          <div class="hourly-chart">
+            <!-- Simulated hourly data -->
+            <div class="hour-bar"><div class="hour-fill" style="height: 10%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 5%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 0%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 0%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 0%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 0%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 20%"></div></div> <!-- 6am -->
+            <div class="hour-bar"><div class="hour-fill" style="height: 60%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 30%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 15%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 10%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 20%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 40%"></div></div> <!-- 12pm -->
+            <div class="hour-bar"><div class="hour-fill" style="height: 20%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 10%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 15%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 50%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 80%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 30%"></div></div> <!-- 6pm -->
+            <div class="hour-bar"><div class="hour-fill" style="height: 10%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 5%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 0%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 0%"></div></div>
+            <div class="hour-bar"><div class="hour-fill" style="height: 0%"></div></div>
+
+            <div class="x-axis">
+              <span>00:00</span>
+              <span>06:00</span>
+              <span>12:00</span>
+              <span>18:00</span>
+              <span>23:59</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- History List -->
+        <section>
+          <div class="chart-header" style="margin: 0 0 8px 4px;">过去 7 天</div>
+          <div class="history-list">
+            <div class="history-row">
+              <div class="h-date">今天</div>
+              <div class="h-bar-bg"><div class="h-bar-fill" style="width: 82%"></div></div>
+              <div class="h-steps">8,230</div>
+            </div>
+            <div class="history-row">
+              <div class="h-date">周六</div>
+              <div class="h-bar-bg"><div class="h-bar-fill" style="width: 100%"></div></div>
+              <div class="h-steps">11,402</div>
+            </div>
+            <div class="history-row">
+              <div class="h-date">周五</div>
+              <div class="h-bar-bg"><div class="h-bar-fill" style="width: 65%"></div></div>
+              <div class="h-steps">6,521</div>
+            </div>
+            <div class="history-row">
+              <div class="h-date">周四</div>
+              <div class="h-bar-bg"><div class="h-bar-fill" style="width: 90%"></div></div>
+              <div class="h-steps">9,200</div>
+            </div>
+            <div class="history-row">
+              <div class="h-date">周三</div>
+              <div class="h-bar-bg"><div class="h-bar-fill" style="width: 45%"></div></div>
+              <div class="h-steps">4,500</div>
+            </div>
+            <div class="history-row">
+              <div class="h-date">周二</div>
+              <div class="h-bar-bg"><div class="h-bar-fill" style="width: 75%"></div></div>
+              <div class="h-steps">7,800</div>
+            </div>
+            <div class="history-row">
+              <div class="h-date">周一</div>
+              <div class="h-bar-bg"><div class="h-bar-fill" style="width: 85%"></div></div>
+              <div class="h-steps">8,600</div>
+            </div>
+          </div>
+        </section>
+
+      </div>
+    </div>
+  </div>
+</body>
+</html>

+ 487 - 0
campus_health_app/frontend/campus-health-app/public/assets/weight_mobile_design_a.html

@@ -0,0 +1,487 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>体重管理 - 方案 A (简约卡片)</title>
+    <style>
+        :root {
+            --primary: #4f46e5;
+            --primary-light: #eef2ff;
+            --text-main: #0f172a;
+            --text-sub: #64748b;
+            --bg: #f8fafc;
+            --card-bg: #ffffff;
+            --success: #10b981;
+            --danger: #ef4444;
+            --warning: #f59e0b;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+
+        body {
+            background-color: var(--bg);
+            color: var(--text-main);
+            padding-bottom: 80px; /* 底部导航预留 */
+        }
+
+        /* 顶部导航 */
+        .header {
+            background: var(--card-bg);
+            padding: 16px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+        }
+
+        .header h1 {
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .header-actions button {
+            background: none;
+            border: none;
+            color: var(--primary);
+            font-size: 14px;
+            font-weight: 500;
+            margin-left: 16px;
+        }
+
+        /* 主容器 */
+        .container {
+            padding: 16px;
+            max-width: 480px;
+            margin: 0 auto;
+        }
+
+        /* 核心指标卡片 */
+        .summary-card {
+            background: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%);
+            border-radius: 20px;
+            padding: 24px;
+            color: white;
+            margin-bottom: 20px;
+            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .summary-card::after {
+            content: "";
+            position: absolute;
+            right: -20px;
+            top: -20px;
+            width: 120px;
+            height: 120px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 50%;
+        }
+
+        .summary-label {
+            font-size: 13px;
+            opacity: 0.9;
+            margin-bottom: 8px;
+        }
+
+        .summary-value {
+            font-size: 42px;
+            font-weight: 700;
+            display: flex;
+            align-items: baseline;
+            gap: 6px;
+        }
+
+        .summary-unit {
+            font-size: 16px;
+            font-weight: 500;
+            opacity: 0.9;
+        }
+
+        .summary-stats {
+            margin-top: 20px;
+            display: flex;
+            gap: 24px;
+        }
+
+        .stat-item .label {
+            font-size: 11px;
+            opacity: 0.8;
+            margin-bottom: 2px;
+        }
+
+        .stat-item .value {
+            font-size: 15px;
+            font-weight: 600;
+        }
+
+        .stat-badge {
+            background: rgba(255,255,255,0.2);
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 11px;
+            margin-left: 6px;
+        }
+
+        /* 图表区域 */
+        .chart-section {
+            background: var(--card-bg);
+            border-radius: 16px;
+            padding: 16px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+
+        .section-title {
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .period-selector {
+            background: var(--bg);
+            padding: 3px;
+            border-radius: 8px;
+            display: flex;
+        }
+
+        .period-selector button {
+            border: none;
+            background: none;
+            padding: 4px 12px;
+            font-size: 12px;
+            border-radius: 6px;
+            color: var(--text-sub);
+            font-weight: 500;
+        }
+
+        .period-selector button.active {
+            background: white;
+            color: var(--text-main);
+            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+        }
+
+        .chart-placeholder {
+            height: 180px;
+            background: linear-gradient(180deg, rgba(79, 70, 229, 0.05) 0%, rgba(255,255,255,0) 100%);
+            border-bottom: 1px solid #e2e8f0;
+            position: relative;
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-around;
+            padding-bottom: 10px;
+        }
+        
+        /* 模拟折线图点 */
+        .chart-point {
+            width: 8px;
+            height: 8px;
+            background: var(--primary);
+            border-radius: 50%;
+            border: 2px solid white;
+            position: relative;
+            z-index: 2;
+        }
+        
+        .chart-line {
+            position: absolute;
+            top: 50%;
+            left: 10px;
+            right: 10px;
+            height: 2px;
+            background: #e2e8f0;
+            z-index: 1;
+        }
+
+        /* 指标网格 */
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+            margin-bottom: 24px;
+        }
+
+        .metric-card {
+            background: var(--card-bg);
+            padding: 16px;
+            border-radius: 16px;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+        }
+
+        .metric-icon {
+            width: 32px;
+            height: 32px;
+            background: var(--primary-light);
+            color: var(--primary);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            margin-bottom: 12px;
+        }
+
+        .metric-label {
+            font-size: 12px;
+            color: var(--text-sub);
+            margin-bottom: 4px;
+        }
+
+        .metric-value {
+            font-size: 18px;
+            font-weight: 700;
+        }
+
+        .metric-status {
+            font-size: 11px;
+            margin-top: 4px;
+            display: inline-block;
+        }
+        
+        .status-good { color: var(--success); }
+        .status-warning { color: var(--warning); }
+
+        /* 历史记录列表 */
+        .history-list {
+            background: var(--card-bg);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+        }
+
+        .list-header {
+            padding: 16px;
+            border-bottom: 1px solid #f1f5f9;
+            font-size: 15px;
+            font-weight: 600;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .list-item {
+            padding: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #f8fafc;
+        }
+        
+        .list-item:last-child {
+            border-bottom: none;
+        }
+
+        .item-left {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .item-date {
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .item-tags {
+            display: flex;
+            gap: 6px;
+        }
+
+        .tag {
+            font-size: 10px;
+            padding: 2px 6px;
+            background: #f1f5f9;
+            color: var(--text-sub);
+            border-radius: 4px;
+        }
+
+        .item-right {
+            text-align: right;
+        }
+
+        .item-weight {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--text-main);
+        }
+
+        .item-change {
+            font-size: 11px;
+            color: var(--success);
+            font-weight: 500;
+        }
+        
+        .item-change.up { color: var(--danger); }
+
+        /* 底部浮动按钮 (FAB) - Alternative Style */
+        .fab {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            width: 56px;
+            height: 56px;
+            background: var(--primary);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+            border: none;
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+
+    <header class="header">
+        <h1>体重记录</h1>
+        <div class="header-actions">
+            <button>设置目标</button>
+        </div>
+    </header>
+
+    <div class="container">
+        <!-- 概览卡片 -->
+        <div class="summary-card">
+            <div class="summary-label">当前体重 (12月6日)</div>
+            <div class="summary-value">
+                65.2 <span class="summary-unit">kg</span>
+                <span class="stat-badge">-0.8 kg</span>
+            </div>
+            
+            <div class="summary-stats">
+                <div class="stat-item">
+                    <div class="label">距离目标</div>
+                    <div class="value">还有 2.2 kg</div>
+                </div>
+                <div class="stat-item">
+                    <div class="label">本周变化</div>
+                    <div class="value">-0.5 kg</div>
+                </div>
+                <div class="stat-item">
+                    <div class="label">BMI</div>
+                    <div class="value">21.3</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 趋势图表 -->
+        <section class="chart-section">
+            <div class="section-header">
+                <div class="section-title">体重趋势</div>
+                <div class="period-selector">
+                    <button class="active">周</button>
+                    <button>月</button>
+                    <button>年</button>
+                </div>
+            </div>
+            <div class="chart-placeholder">
+                <!-- 简单模拟CSS图表 -->
+                <div style="height: 60%; width: 14%; background: #eef2ff; border-radius: 4px 4px 0 0; margin: 0 2px;"></div>
+                <div style="height: 55%; width: 14%; background: #eef2ff; border-radius: 4px 4px 0 0; margin: 0 2px;"></div>
+                <div style="height: 70%; width: 14%; background: #eef2ff; border-radius: 4px 4px 0 0; margin: 0 2px;"></div>
+                <div style="height: 65%; width: 14%; background: #eef2ff; border-radius: 4px 4px 0 0; margin: 0 2px;"></div>
+                <div style="height: 50%; width: 14%; background: #eef2ff; border-radius: 4px 4px 0 0; margin: 0 2px;"></div>
+                <div style="height: 45%; width: 14%; background: #eef2ff; border-radius: 4px 4px 0 0; margin: 0 2px;"></div>
+                <div style="height: 40%; width: 14%; background: #818cf8; border-radius: 4px 4px 0 0; margin: 0 2px;"></div>
+                
+                <div style="position: absolute; bottom: -20px; left:0; right:0; display:flex; justify-content:space-around; font-size:10px; color:#94a3b8;">
+                    <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
+                </div>
+            </div>
+        </section>
+
+        <!-- 详细指标 -->
+        <div class="metrics-grid">
+            <div class="metric-card">
+                <div class="metric-icon">💧</div>
+                <div class="metric-label">体脂率</div>
+                <div class="metric-value">18.6%</div>
+                <div class="metric-status status-good">标准</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-icon">💪</div>
+                <div class="metric-label">肌肉量</div>
+                <div class="metric-value">48.2 kg</div>
+                <div class="metric-status status-good">优</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-icon">🦴</div>
+                <div class="metric-label">骨量</div>
+                <div class="metric-value">2.8 kg</div>
+                <div class="metric-status">正常</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-icon">🔥</div>
+                <div class="metric-label">基础代谢</div>
+                <div class="metric-value">1450</div>
+                <div class="metric-status">kcal</div>
+            </div>
+        </div>
+
+        <!-- 最近记录 -->
+        <div class="history-list">
+            <div class="list-header">
+                <span>最近记录</span>
+                <span style="color:var(--primary); font-size:13px; font-weight:500;">查看全部 ></span>
+            </div>
+            <div class="list-item">
+                <div class="item-left">
+                    <div class="item-date">今天, 08:30</div>
+                    <div class="item-tags">
+                        <span class="tag">空腹</span>
+                        <span class="tag">晨起</span>
+                    </div>
+                </div>
+                <div class="item-right">
+                    <div class="item-weight">65.2 kg</div>
+                    <div class="item-change">-0.3 kg</div>
+                </div>
+            </div>
+            <div class="list-item">
+                <div class="item-left">
+                    <div class="item-date">昨天, 08:15</div>
+                    <div class="item-tags">
+                        <span class="tag">空腹</span>
+                    </div>
+                </div>
+                <div class="item-right">
+                    <div class="item-weight">65.5 kg</div>
+                    <div class="item-change up">+0.1 kg</div>
+                </div>
+            </div>
+            <div class="list-item">
+                <div class="item-left">
+                    <div class="item-date">12月4日, 08:20</div>
+                    <div class="item-tags">
+                        <span class="tag">空腹</span>
+                    </div>
+                </div>
+                <div class="item-right">
+                    <div class="item-weight">65.4 kg</div>
+                    <div class="item-change">-0.2 kg</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <button class="fab">+</button>
+
+</body>
+</html>

+ 347 - 0
campus_health_app/frontend/campus-health-app/public/assets/weight_mobile_design_b.html

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>体重管理 - 方案 B (视觉化/目标感)</title>
+    <style>
+        :root {
+            --bg-dark: #0f172a;
+            --card-dark: #1e293b;
+            --text-light: #f8fafc;
+            --text-dim: #94a3b8;
+            --accent: #8b5cf6; /* Violet */
+            --accent-glow: rgba(139, 92, 246, 0.5);
+            --secondary: #3b82f6; /* Blue */
+            --success: #10b981;
+        }
+
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-light);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            margin: 0;
+            padding-bottom: 90px;
+        }
+
+        /* 沉浸式顶部 */
+        .hero-section {
+            background: radial-gradient(circle at top right, #2e1065, var(--bg-dark));
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-bottom-left-radius: 30px;
+            border-bottom-right-radius: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+
+        .nav-bar {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        
+        .nav-title { font-size: 18px; font-weight: 600; }
+        .nav-icon { font-size: 20px; color: var(--text-dim); }
+
+        /* 环形进度条容器 */
+        .progress-ring-container {
+            position: relative;
+            width: 220px;
+            height: 220px;
+            margin: 10px 0 30px;
+        }
+
+        .ring-bg {
+            fill: none;
+            stroke: #334155;
+            stroke-width: 15;
+        }
+
+        .ring-progress {
+            fill: none;
+            stroke: var(--accent);
+            stroke-width: 15;
+            stroke-dasharray: 565; /* 2 * PI * 90 */
+            stroke-dashoffset: 140; /* 75% progress */
+            stroke-linecap: round;
+            filter: drop-shadow(0 0 10px var(--accent-glow));
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+
+        .ring-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        }
+
+        .current-weight {
+            font-size: 36px;
+            font-weight: 800;
+            line-height: 1;
+        }
+        
+        .weight-unit { font-size: 14px; color: var(--text-dim); font-weight: 400; }
+
+        .goal-subtext {
+            margin-top: 8px;
+            font-size: 12px;
+            color: var(--text-dim);
+            background: rgba(255,255,255,0.1);
+            padding: 4px 10px;
+            border-radius: 20px;
+        }
+
+        /* 统计概览条 */
+        .stats-bar {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            max-width: 340px;
+            background: rgba(255,255,255,0.05);
+            border-radius: 16px;
+            padding: 15px 20px;
+            backdrop-filter: blur(10px);
+            margin-top: -20px; /* Overlap hero */
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .stat-box {
+            text-align: center;
+        }
+
+        .stat-val { font-size: 18px; font-weight: 700; color: var(--text-light); }
+        .stat-lbl { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+        .stat-val.highlight { color: var(--success); }
+
+        /* 内容区域 */
+        .content-area {
+            padding: 24px 20px;
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+        
+        .section-title { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
+
+        /* 连续打卡卡片 */
+        .streak-card {
+            background: linear-gradient(90deg, #f59e0b, #d97706);
+            border-radius: 16px;
+            padding: 16px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 24px;
+            color: white;
+            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
+        }
+
+        .streak-info { display: flex; align-items: center; gap: 12px; }
+        .streak-icon { font-size: 24px; }
+        .streak-text div:first-child { font-weight: 700; font-size: 16px; }
+        .streak-text div:last-child { font-size: 11px; opacity: 0.9; }
+        .streak-count { font-size: 24px; font-weight: 800; }
+
+        /* 阶段目标列表 */
+        .milestone-list {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .milestone-item {
+            background: var(--card-dark);
+            border-radius: 16px;
+            padding: 16px;
+            display: flex;
+            gap: 16px;
+            align-items: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .milestone-item.active {
+            border: 1px solid var(--accent);
+            background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent);
+        }
+
+        .ms-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.05);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: var(--text-dim);
+            z-index: 1;
+        }
+        
+        .milestone-item.active .ms-icon {
+            background: var(--accent);
+            color: white;
+            box-shadow: 0 0 15px var(--accent-glow);
+        }
+        
+        .milestone-item.done .ms-icon {
+            background: var(--success);
+            color: white;
+        }
+
+        .ms-content { flex: 1; z-index: 1; }
+        .ms-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+        .ms-desc { font-size: 11px; color: var(--text-dim); }
+
+        .ms-progress {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 3px;
+            background: var(--accent);
+            width: 75%; /* demo */
+        }
+
+        /* 底部主按钮 */
+        .action-bar {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+            display: flex;
+            gap: 12px;
+            z-index: 100;
+        }
+
+        .btn-log {
+            flex: 1;
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 16px;
+            border-radius: 16px;
+            font-size: 16px;
+            font-weight: 600;
+            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .btn-mini {
+            width: 54px;
+            background: var(--card-dark);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 16px;
+            color: var(--text-light);
+            font-size: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="hero-section">
+        <div class="nav-bar">
+            <span class="nav-icon">❮</span>
+            <span class="nav-title">我的目标</span>
+            <span class="nav-icon">⚙</span>
+        </div>
+
+        <div class="progress-ring-container">
+            <svg width="220" height="220" viewBox="0 0 220 220">
+                <circle class="ring-bg" cx="110" cy="110" r="90"></circle>
+                <circle class="ring-progress" cx="110" cy="110" r="90"></circle>
+            </svg>
+            <div class="ring-content">
+                <div class="current-weight">65.2<span class="weight-unit">kg</span></div>
+                <div class="goal-subtext">目标 63.0 kg</div>
+            </div>
+        </div>
+
+        <div class="stats-bar">
+            <div class="stat-box">
+                <div class="stat-val highlight">-0.8</div>
+                <div class="stat-lbl">本周变化 (kg)</div>
+            </div>
+            <div class="stat-box">
+                <div class="stat-val">2.2</div>
+                <div class="stat-lbl">剩余 (kg)</div>
+            </div>
+            <div class="stat-box">
+                <div class="stat-val">89</div>
+                <div class="stat-lbl">坚持天数</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="content-area">
+        
+        <div class="streak-card">
+            <div class="streak-info">
+                <div class="streak-icon">🔥</div>
+                <div class="streak-text">
+                    <div>连续记录打卡</div>
+                    <div>保持好习惯,见证蜕变</div>
+                </div>
+            </div>
+            <div class="streak-count">7天</div>
+        </div>
+
+        <div class="section-header">
+            <div class="section-title">阶段里程碑</div>
+            <div style="font-size:12px; color:var(--accent);">查看全部</div>
+        </div>
+
+        <div class="milestone-list">
+            <div class="milestone-item done">
+                <div class="ms-icon">✓</div>
+                <div class="ms-content">
+                    <div class="ms-title">初见成效</div>
+                    <div class="ms-desc">累计减重 1.0 kg</div>
+                </div>
+            </div>
+
+            <div class="milestone-item active">
+                <div class="ms-icon">🎯</div>
+                <div class="ms-content">
+                    <div class="ms-title">第一阶段目标</div>
+                    <div class="ms-desc">达到 65.0 kg · 还差 0.2 kg</div>
+                </div>
+                <div class="ms-progress"></div>
+            </div>
+
+            <div class="milestone-item">
+                <div class="ms-icon">🔓</div>
+                <div class="ms-content">
+                    <div class="ms-title">体脂率突破</div>
+                    <div class="ms-desc">体脂率降至 18% 以下</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="action-bar">
+        <button class="btn-mini">📊</button>
+        <button class="btn-log">
+            <span>⚖️ 记录今日体重</span>
+        </button>
+    </div>
+
+</body>
+</html>

+ 376 - 0
campus_health_app/frontend/campus-health-app/public/assets/weight_mobile_design_c.html

@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>体重管理 - 方案 C (时间轴/日志)</title>
+    <style>
+        :root {
+            --primary: #0ea5e9; /* Sky Blue */
+            --bg-page: #f0f4f8;
+            --bg-card: #ffffff;
+            --text-main: #334155;
+            --text-light: #64748b;
+            --border: #e2e8f0;
+        }
+
+        body {
+            background-color: var(--bg-page);
+            color: var(--text-main);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            margin: 0;
+            padding-bottom: 80px;
+        }
+
+        /* 顶部日历条 */
+        .calendar-strip-container {
+            background: var(--bg-card);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+
+        .header-top {
+            padding: 12px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .month-selector {
+            font-weight: 700;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .calendar-days {
+            display: flex;
+            justify-content: space-between;
+            padding: 12px 16px;
+        }
+
+        .day-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 6px;
+            font-size: 12px;
+            color: var(--text-light);
+            padding: 6px 10px;
+            border-radius: 12px;
+            position: relative;
+        }
+
+        .day-item.active {
+            background: var(--primary);
+            color: white;
+            box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
+        }
+
+        .day-item .dot {
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background: var(--primary);
+            position: absolute;
+            bottom: 4px;
+        }
+        
+        .day-item.active .dot { background: white; }
+
+        /* 统计摘要 */
+        .period-summary {
+            margin: 16px;
+            background: var(--bg-card);
+            border-radius: 12px;
+            padding: 16px;
+            display: flex;
+            justify-content: space-between;
+            border: 1px solid var(--border);
+        }
+
+        .sum-item {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .sum-label { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
+        .sum-val { font-size: 18px; font-weight: 700; color: var(--text-main); }
+        .sum-change { font-size: 11px; color: #10b981; }
+
+        /* 时间轴 */
+        .timeline-container {
+            padding: 0 16px;
+        }
+
+        .timeline-date-group {
+            margin-bottom: 20px;
+        }
+
+        .date-header {
+            font-size: 13px;
+            color: var(--text-light);
+            margin-bottom: 10px;
+            padding-left: 12px;
+            font-weight: 500;
+        }
+
+        .log-card {
+            background: var(--bg-card);
+            border-radius: 16px;
+            padding: 16px;
+            margin-bottom: 12px;
+            position: relative;
+            border-left: 4px solid var(--primary);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
+        }
+
+        .log-card.after-meal { border-left-color: #f59e0b; }
+
+        .log-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 12px;
+        }
+
+        .log-time {
+            font-size: 14px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .log-tag {
+            font-size: 10px;
+            padding: 2px 6px;
+            background: #f1f5f9;
+            color: var(--text-light);
+            border-radius: 4px;
+            font-weight: 400;
+        }
+
+        .log-body {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+
+        .data-point .label { font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
+        .data-point .value { font-size: 20px; font-weight: 700; color: var(--text-main); }
+        .data-point .unit { font-size: 12px; font-weight: 400; color: var(--text-light); }
+
+        .log-footer {
+            margin-top: 12px;
+            padding-top: 10px;
+            border-top: 1px dashed var(--border);
+            font-size: 12px;
+            color: var(--text-light);
+        }
+
+        /* 底部导航 */
+        .bottom-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: var(--bg-card);
+            border-top: 1px solid var(--border);
+            display: flex;
+            padding: 10px 0;
+            padding-bottom: max(10px, env(safe-area-inset-bottom));
+        }
+
+        .nav-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+            color: var(--text-light);
+            font-size: 10px;
+        }
+
+        .nav-item.active { color: var(--primary); }
+        .nav-icon { font-size: 20px; }
+
+        /* 悬浮添加按钮 */
+        .fab-add {
+            position: fixed;
+            bottom: 70px;
+            right: 20px;
+            background: var(--text-main);
+            color: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            border: none;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="calendar-strip-container">
+        <div class="header-top">
+            <div class="month-selector">2025年 12月 ▾</div>
+            <div style="font-size:20px;">📊</div>
+        </div>
+        <div class="calendar-days">
+            <div class="day-item">
+                <span>周一</span>
+                <span style="font-weight:600;">2</span>
+                <div class="dot"></div>
+            </div>
+            <div class="day-item">
+                <span>周二</span>
+                <span style="font-weight:600;">3</span>
+                <div class="dot"></div>
+            </div>
+            <div class="day-item">
+                <span>周三</span>
+                <span style="font-weight:600;">4</span>
+                <div class="dot"></div>
+            </div>
+            <div class="day-item">
+                <span>周四</span>
+                <span style="font-weight:600;">5</span>
+            </div>
+            <div class="day-item active">
+                <span>周五</span>
+                <span style="font-weight:600;">6</span>
+                <div class="dot"></div>
+            </div>
+            <div class="day-item">
+                <span>周六</span>
+                <span style="font-weight:600;">7</span>
+            </div>
+            <div class="day-item">
+                <span>周日</span>
+                <span style="font-weight:600;">8</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="period-summary">
+        <div class="sum-item">
+            <span class="sum-label">本周平均</span>
+            <span class="sum-val">65.3</span>
+        </div>
+        <div class="sum-item">
+            <span class="sum-label">最高</span>
+            <span class="sum-val">65.5</span>
+        </div>
+        <div class="sum-item">
+            <span class="sum-label">最低</span>
+            <span class="sum-val">65.2</span>
+        </div>
+        <div class="sum-item">
+            <span class="sum-label">变化</span>
+            <span class="sum-change">↓ 0.3kg</span>
+        </div>
+    </div>
+
+    <div class="timeline-container">
+        
+        <div class="timeline-date-group">
+            <div class="date-header">今天, 12月6日</div>
+            
+            <div class="log-card">
+                <div class="log-header">
+                    <div class="log-time">
+                        08:30
+                        <span class="log-tag">空腹</span>
+                    </div>
+                    <div style="font-size:18px;">🗑️</div>
+                </div>
+                <div class="log-body">
+                    <div class="data-point">
+                        <div class="label">体重</div>
+                        <div class="value">65.2 <span class="unit">kg</span></div>
+                    </div>
+                    <div class="data-point">
+                        <div class="label">体脂率</div>
+                        <div class="value">18.6 <span class="unit">%</span></div>
+                    </div>
+                </div>
+                <div class="log-footer">
+                    备注:昨晚睡得很好,感觉身体轻盈。
+                </div>
+            </div>
+        </div>
+
+        <div class="timeline-date-group">
+            <div class="date-header">昨天, 12月5日</div>
+            
+            <div class="log-card">
+                <div class="log-header">
+                    <div class="log-time">
+                        08:15
+                        <span class="log-tag">空腹</span>
+                    </div>
+                </div>
+                <div class="log-body">
+                    <div class="data-point">
+                        <div class="label">体重</div>
+                        <div class="value">65.5 <span class="unit">kg</span></div>
+                    </div>
+                    <div class="data-point">
+                        <div class="label">体脂率</div>
+                        <div class="value">18.8 <span class="unit">%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="log-card after-meal">
+                <div class="log-header">
+                    <div class="log-time">
+                        20:00
+                        <span class="log-tag">餐后</span>
+                        <span class="log-tag">运动后</span>
+                    </div>
+                </div>
+                <div class="log-body">
+                    <div class="data-point">
+                        <div class="label">体重</div>
+                        <div class="value">66.1 <span class="unit">kg</span></div>
+                    </div>
+                </div>
+                <div class="log-footer">
+                    晚上吃了火锅,体重略有回升。
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <button class="fab-add">+</button>
+
+    <div class="bottom-nav">
+        <div class="nav-item active">
+            <div class="nav-icon">📅</div>
+            <span>日志</span>
+        </div>
+        <div class="nav-item">
+            <div class="nav-icon">📈</div>
+            <span>趋势</span>
+        </div>
+        <div class="nav-item">
+            <div class="nav-icon">⚙️</div>
+            <span>设置</span>
+        </div>
+    </div>
+
+</body>
+</html>

+ 430 - 0
campus_health_app/frontend/campus-health-app/public/home-main-option1.html

@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>主页面蓝本一:卡片概览视图(体重 + 运动 + 饮食)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      --bg: #ede9fe;
+      --bg-bottom: #0f172a;
+      --card: #ffffff;
+      --accent: #6366f1;
+      --accent-soft: #eef2ff;
+      --accent-strong: #4f46e5;
+      --text-main: #0f172a;
+      --text-muted: #6b7280;
+      --danger: #ef4444;
+      --success: #22c55e;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: radial-gradient(circle at top, #f5f3ff 0, #e0f2fe 35%, #020617 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: #f9fafb;
+      box-shadow:
+        0 25px 60px rgba(15, 23, 42, 0.55),
+        0 0 0 8px rgba(15, 23, 42, 0.6);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 55%, #020617 100%);
+      padding: 18px 16px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      overflow-y: auto;
+    }
+
+    .header-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 4px;
+    }
+
+    .hello {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .hello span {
+      display: block;
+    }
+
+    .sub {
+      margin-top: 4px;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 999px;
+      background: radial-gradient(circle at 30% 20%, #fee2e2, #4f46e5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #f9fafb;
+      font-size: 16px;
+      font-weight: 600;
+      box-shadow: 0 6px 18px rgba(79, 70, 229, 0.55);
+    }
+
+    .section-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+      letter-spacing: 0.02em;
+    }
+
+    .section-sub {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .kpi-row {
+      margin-top: 10px;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .kpi-card {
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
+      padding: 8px 9px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .kpi-label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .kpi-icon {
+      width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      background: var(--accent-soft);
+      color: var(--accent-strong);
+    }
+
+    .kpi-main {
+      display: flex;
+      align-items: baseline;
+      gap: 2px;
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .kpi-unit {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .kpi-extra {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .ring-card {
+      margin-top: 4px;
+      border-radius: 20px;
+      background: linear-gradient(145deg, #eef2ff 0%, #e0f2fe 30%, #0f172a 100%);
+      padding: 14px 14px 12px;
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 12px;
+      align-items: center;
+      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.55);
+    }
+
+    .ring {
+      width: 92px;
+      height: 92px;
+      border-radius: 50%;
+      background:
+        conic-gradient(from 220deg, #22c55e 0 140deg, #0f172a 140deg 360deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .ring::after {
+      content: "";
+      position: absolute;
+      inset: 18px;
+      border-radius: 50%;
+      background: rgba(15, 23, 42, 0.96);
+    }
+
+    .ring-inner {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #e5e7eb;
+      gap: 2px;
+    }
+
+    .ring-main {
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .ring-sub {
+      font-size: 10px;
+      color: #9ca3af;
+    }
+
+    .ring-desc {
+      font-size: 11px;
+      color: #e5e7eb;
+      line-height: 1.4;
+    }
+
+    .ring-desc strong { color: #facc15; }
+
+    .ring-text-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #f9fafb;
+      margin-bottom: 4px;
+    }
+
+    .ring-text-sub {
+      font-size: 11px;
+      color: #cbd5f5;
+      margin-bottom: 6px;
+    }
+
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .chip {
+      border-radius: 999px;
+      padding: 3px 8px;
+      font-size: 10px;
+      background: rgba(15, 23, 42, 0.55);
+      color: #e5e7eb;
+      border: 1px solid rgba(148, 163, 184, 0.4);
+    }
+
+    .stack-section {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-top: 10px;
+    }
+
+    .stack-card {
+      border-radius: 18px;
+      background: #ffffff;
+      padding: 10px 12px;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 10px;
+      align-items: center;
+      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
+    }
+
+    .stack-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      background: radial-gradient(circle at 30% 20%, #fee2e2, #f97316);
+      color: #ffffff;
+    }
+
+    .stack-icon.green {
+      background: radial-gradient(circle at 30% 20%, #dcfce7, #22c55e);
+    }
+
+    .stack-icon.purple {
+      background: radial-gradient(circle at 30% 20%, #e0f2fe, #6366f1);
+    }
+
+    .stack-text-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .stack-text-sub {
+      margin-top: 2px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .stack-main-number {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text-main);
+      text-align: right;
+    }
+
+    .stack-main-number span {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-left: 2px;
+    }
+
+    .footer-hint {
+      margin-top: 8px;
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header class="header-row">
+        <div>
+          <p class="hello"><span>你好,郑同学</span><span>今天感觉如何?</span></p>
+          <p class="sub">下面是你今天最重要的三个数字:体重 · 运动 · 饮食</p>
+        </div>
+        <div class="avatar">LS</div>
+      </header>
+
+      <section>
+        <p class="section-title">关键数字一览</p>
+        <div class="kpi-row">
+          <div class="kpi-card">
+            <div class="kpi-label">
+              <div class="kpi-icon">⚖️</div>
+              <span>今日体重</span>
+            </div>
+            <div class="kpi-main">
+              <span>65.2</span>
+              <span class="kpi-unit">kg</span>
+            </div>
+            <div class="kpi-extra">目标 63kg · 差 2.2kg</div>
+          </div>
+
+          <div class="kpi-card">
+            <div class="kpi-label">
+              <div class="kpi-icon">🏃</div>
+              <span>今日运动</span>
+            </div>
+            <div class="kpi-main">
+              <span>42</span>
+              <span class="kpi-unit">分钟</span>
+            </div>
+            <div class="kpi-extra">8,230 步 · 完成目标的 82%</div>
+          </div>
+
+          <div class="kpi-card">
+            <div class="kpi-label">
+              <div class="kpi-icon">🥗</div>
+              <span>饮食热量</span>
+            </div>
+            <div class="kpi-main">
+              <span>1,580</span>
+              <span class="kpi-unit">kcal</span>
+            </div>
+            <div class="kpi-extra">目标 2,000kcal · 剩余 420kcal</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="ring-card">
+        <div class="ring">
+          <div class="ring-inner">
+            <div class="ring-main">68%</div>
+            <div class="ring-sub">今日进度</div>
+          </div>
+        </div>
+        <div>
+          <div class="ring-text-title">今天的整体状态不错</div>
+          <div class="ring-text-sub">结合体重 · 运动 · 饮食三个维度计算</div>
+          <p class="ring-desc">如果在今晚前再<span>完成 15 分钟中等强度运动</span>,就可以点亮本周的健康勋章。</p>
+          <div class="chips">
+            <span class="chip">睡眠已达标</span>
+            <span class="chip">饮水略少 · 再喝 400ml</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="stack-section">
+        <div class="stack-card">
+          <div class="stack-icon purple">💤</div>
+          <div>
+            <div class="stack-text-title">昨晚睡眠</div>
+            <div class="stack-text-sub">7 小时 20 分 · 评分 86 / 100</div>
+          </div>
+          <div class="stack-main-number">良好<span>睡眠</span></div>
+        </div>
+
+        <div class="stack-card">
+          <div class="stack-icon green">🔥</div>
+          <div>
+            <div class="stack-text-title">体能训练摘要</div>
+            <div class="stack-text-sub">上一次训练消耗 320 千卡 · 功能性力量训练</div>
+          </div>
+          <div class="stack-main-number">55<span>分钟</span></div>
+        </div>
+
+        <div class="stack-card">
+          <div class="stack-icon">
+            <span>👣</span>
+          </div>
+          <div>
+            <div class="stack-text-title">今日步数</div>
+            <div class="stack-text-sub">2025 年 12 月 7 日 · 总计步数</div>
+          </div>
+          <div class="stack-main-number">2,417<span>步</span></div>
+        </div>
+      </section>
+
+      <p class="footer-hint">蓝本一 · 适合作为 APP 首页的「健康总览」视图:顶部是三大关键数字,中部是综合进度环,底部是睡眠 / 训练 / 步数摘要。</p>
+    </div>
+  </div>
+</body>
+</html>

+ 474 - 0
campus_health_app/frontend/campus-health-app/public/home-main-option2.html

@@ -0,0 +1,474 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>主页面蓝本二:背景氛围 + 训练摘要</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      --bg-dark: #020617;
+      --bg-top: #0b1120;
+      --card: #ffffff;
+      --accent: #f97316;
+      --accent-soft: #fef3c7;
+      --text-main: #0f172a;
+      --text-muted: #6b7280;
+      --pill: rgba(15, 23, 42, 0.75);
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: radial-gradient(circle at top, #1f2937 0, #020617 60%, #000000 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: #020617;
+      box-shadow:
+        0 25px 60px rgba(0, 0, 0, 0.9),
+        0 0 0 8px rgba(15, 23, 42, 0.9);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: linear-gradient(180deg, #020617 0%, #020617 40%, #f9fafb 100%);
+      padding: 14px 14px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      overflow-y: auto;
+    }
+
+    .status-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      color: #e5e7eb;
+      opacity: 0.9;
+    }
+
+    .hero {
+      margin-top: 8px;
+      border-radius: 18px;
+      overflow: hidden;
+      position: relative;
+      height: 190px;
+      background:
+        linear-gradient(135deg, rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.8)),
+        url("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&w=800") center/cover no-repeat;
+    }
+
+    .hero-overlay {
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle at top left, rgba(251, 191, 36, 0.5), transparent 55%);
+    }
+
+    .hero-content {
+      position: relative;
+      z-index: 1;
+      height: 100%;
+      padding: 14px 14px 12px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      color: #f9fafb;
+    }
+
+    .weather {
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .weather-main {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .weather-sub {
+      font-size: 11px;
+      opacity: 0.85;
+    }
+
+    .hero-icons {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      margin-top: 18px;
+    }
+
+    .halo {
+      width: 54px;
+      height: 54px;
+      border-radius: 999px;
+      position: relative;
+      background: radial-gradient(circle at 30% 20%, rgba(254, 249, 195, 0.85), rgba(248, 250, 252, 0));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .halo-ring {
+      position: absolute;
+      inset: 3px;
+      border-radius: 999px;
+      border: 4px solid rgba(250, 250, 249, 0.9);
+      border-right-color: rgba(250, 250, 249, 0.1);
+      border-bottom-color: rgba(250, 250, 249, 0.1);
+      opacity: 0.9;
+    }
+
+    .halo-icon {
+      position: relative;
+      z-index: 1;
+      font-size: 22px;
+      color: #fefce8;
+    }
+
+    .hero-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+    }
+
+    .hero-pill {
+      padding: 3px 10px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.7);
+      border: 1px solid rgba(248, 250, 252, 0.2);
+      font-size: 11px;
+    }
+
+    .hero-metric {
+      text-align: right;
+      font-size: 11px;
+    }
+
+    .hero-metric strong { font-size: 16px; }
+
+    .card {
+      border-radius: 18px;
+      background: var(--card);
+      padding: 12px 14px;
+      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 6px;
+    }
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .card-title span.icon {
+      width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      background: linear-gradient(135deg, #fed7aa, #f97316);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      color: #fff7ed;
+    }
+
+    .card-header small {
+      font-size: 11px;
+      color: #f97316;
+      font-weight: 500;
+    }
+
+    .card-main-text {
+      font-size: 13px;
+      color: var(--text-main);
+      margin-bottom: 6px;
+    }
+
+    .card-main-text strong { color: #f97316; }
+
+    .card-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-top: 6px;
+      border-top: 1px solid #e5e7eb;
+      margin-top: 4px;
+    }
+
+    .card-label {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .card-number {
+      font-size: 22px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .card-number span {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-left: 2px;
+    }
+
+    .kpi-grid {
+      margin-top: 10px;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .kpi-card {
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
+      padding: 9px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .kpi-label-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .kpi-label-main {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .kpi-icon-circle {
+      width: 20px;
+      height: 20px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      background: #eff6ff;
+      color: #2563eb;
+    }
+
+    .kpi-value {
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .kpi-value span {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-left: 2px;
+    }
+
+    .kpi-caption {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .steps-card {
+      margin-top: 8px;
+      border-radius: 18px;
+      background: #f3f4ff;
+      padding: 10px 12px 9px;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+    }
+
+    .steps-left {
+      font-size: 11px;
+      color: #6b7280;
+    }
+
+    .steps-number {
+      font-size: 26px;
+      font-weight: 800;
+      letter-spacing: 1px;
+      color: #111827;
+      line-height: 1;
+    }
+
+    .steps-number span {
+      font-size: 13px;
+      margin-left: 4px;
+      font-weight: 500;
+    }
+
+    .steps-date {
+      font-size: 11px;
+      color: #6b7280;
+    }
+
+    .steps-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 10px;
+      background: linear-gradient(145deg, #4f46e5, #7c3aed);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #e5e7eb;
+      font-size: 18px;
+      box-shadow: 0 8px 20px rgba(79, 70, 229, 0.5);
+    }
+
+    .footer-hint {
+      margin-top: 8px;
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <div class="status-bar">
+        <span>9:41</span>
+        <span>校园健康 · 今日</span>
+      </div>
+
+      <section class="hero">
+        <div class="hero-overlay"></div>
+        <div class="hero-content">
+          <div>
+            <div class="weather">
+              <div class="weather-main">☁️ <span>20°</span></div>
+              <div class="weather-sub">局部多云 · 最高 21° · 最低 8°</div>
+            </div>
+            <div class="hero-icons">
+              <div class="halo">
+                <div class="halo-ring"></div>
+                <div class="halo-icon">🎧</div>
+              </div>
+              <div class="halo">
+                <div class="halo-ring"></div>
+                <div class="halo-icon">🏃</div>
+              </div>
+            </div>
+          </div>
+          <div class="hero-footer">
+            <div class="hero-pill">今天适合轻中等强度运动,注意补水。</div>
+            <div class="hero-metric">
+              <div>今日消耗约</div>
+              <div><strong>320</strong> kcal</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="card" style="margin-top: 10px;">
+        <div class="card-header">
+          <div class="card-title">
+            <span class="icon">🔥</span>
+            <span>体能训练摘要</span>
+          </div>
+          <small>上一次训练 · 功能性力量</small>
+        </div>
+        <p class="card-main-text">在上一次体能训练中,你消耗了 <strong>120 千卡</strong>,主要以下肢力量为主。</p>
+        <div class="card-row">
+          <div class="card-label">本次训练时长</div>
+          <div class="card-number">55<span>分钟</span></div>
+        </div>
+        <div class="card-row" style="margin-top: 4px; border-top-style: dotted;">
+          <div class="card-label">本周累计训练</div>
+          <div class="card-number">3<span>次</span></div>
+        </div>
+      </section>
+
+      <section class="kpi-grid">
+        <div class="kpi-card">
+          <div class="kpi-label-row">
+            <div class="kpi-label-main">
+              <div class="kpi-icon-circle">⚖️</div>
+              <span>今日体重</span>
+            </div>
+          </div>
+          <div class="kpi-value">65.2<span>kg</span></div>
+          <div class="kpi-caption">目标 63kg · 已完成约 70%</div>
+        </div>
+
+        <div class="kpi-card">
+          <div class="kpi-label-row">
+            <div class="kpi-label-main">
+              <div class="kpi-icon-circle">🥗</div>
+              <span>饮食情况</span>
+            </div>
+          </div>
+          <div class="kpi-value">1,580<span>kcal</span></div>
+          <div class="kpi-caption">已记录三餐 · 剩余 420kcal 可用</div>
+        </div>
+
+        <div class="kpi-card">
+          <div class="kpi-label-row">
+            <div class="kpi-label-main">
+              <div class="kpi-icon-circle">💤</div>
+              <span>昨晚睡眠</span>
+            </div>
+          </div>
+          <div class="kpi-value">7.3<span>小时</span></div>
+          <div class="kpi-caption">评分 86 / 100 · 深睡 2.1 小时</div>
+        </div>
+
+        <div class="kpi-card">
+          <div class="kpi-label-row">
+            <div class="kpi-label-main">
+              <div class="kpi-icon-circle">🏃</div>
+              <span>今日运动</span>
+            </div>
+          </div>
+          <div class="kpi-value">8,230<span>步</span></div>
+          <div class="kpi-caption">运动 42 分钟 · 完成目标的 82%</div>
+        </div>
+      </section>
+
+      <section class="steps-card">
+        <div>
+          <div class="steps-left">总计</div>
+          <div class="steps-number">2,417<span>步</span></div>
+          <div class="steps-date">2025 年 12 月 7 日</div>
+        </div>
+        <div class="steps-icon">👣</div>
+      </section>
+
+      <p class="footer-hint">蓝本二 · 适合突出「氛围感 + 最近训练」:顶部是天气和发光图标,中部是体能训练摘要,底部用卡片展示体重、饮食、睡眠和步数。</p>
+    </div>
+  </div>
+</body>
+</html>

+ 381 - 0
campus_health_app/frontend/campus-health-app/public/home-main-option3.html

@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>主页面蓝本三:列表摘要 + 大号数字</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      --bg: #e5e7eb;
+      --shell: #f9fafb;
+      --card: #ffffff;
+      --accent: #6366f1;
+      --accent-soft: #eef2ff;
+      --text-main: #111827;
+      --text-muted: #6b7280;
+      --danger: #ef4444;
+      --success: #22c55e;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+      min-height: 100vh;
+      background: radial-gradient(circle at top, #e0f2fe 0, #e5e7eb 30%, #111827 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 12px;
+    }
+
+    .phone {
+      width: 390px;
+      max-width: 100%;
+      height: 844px;
+      border-radius: 32px;
+      background: #020617;
+      box-shadow:
+        0 25px 60px rgba(15, 23, 42, 0.9),
+        0 0 0 8px rgba(15, 23, 42, 0.85);
+      padding: 18px 16px 22px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .phone-inner {
+      flex: 1;
+      border-radius: 24px;
+      background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 55%, #020617 100%);
+      padding: 12px 14px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      overflow-y: auto;
+    }
+
+    .header-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .header-left {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .greeting {
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .date {
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .tag-today {
+      padding: 3px 10px;
+      border-radius: 999px;
+      background: #eef2ff;
+      color: #4f46e5;
+      font-size: 11px;
+      font-weight: 500;
+    }
+
+    .hero-card {
+      margin-top: 6px;
+      border-radius: 20px;
+      background: linear-gradient(135deg, #4f46e5 0%, #6366f1 40%, #0f172a 100%);
+      padding: 14px 14px 12px;
+      color: #e5e7eb;
+      box-shadow: 0 16px 38px rgba(79, 70, 229, 0.55);
+      display: grid;
+      grid-template-columns: minmax(0, 1.5fr) auto;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .hero-title {
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      opacity: 0.95;
+    }
+
+    .hero-sub {
+      margin-top: 4px;
+      font-size: 11px;
+      color: #c7d2fe;
+    }
+
+    .hero-pills {
+      margin-top: 6px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .hero-pill {
+      padding: 3px 8px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.6);
+      border: 1px solid rgba(191, 219, 254, 0.4);
+      font-size: 10px;
+      color: #e5e7eb;
+    }
+
+    .hero-number-wrap {
+      text-align: right;
+    }
+
+    .hero-number-label {
+      font-size: 10px;
+      color: #c7d2fe;
+    }
+
+    .hero-number {
+      font-size: 26px;
+      font-weight: 800;
+      line-height: 1.1;
+      color: #f9fafb;
+    }
+
+    .hero-number span {
+      font-size: 12px;
+      font-weight: 500;
+      margin-left: 2px;
+    }
+
+    .list-section {
+      margin-top: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .list-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .summary-card {
+      border-radius: 20px;
+      background: var(--card);
+      padding: 10px 12px;
+      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .summary-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      color: #f9fafb;
+      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
+    }
+
+    .summary-icon.workout {
+      background: radial-gradient(circle at 30% 20%, #fed7aa, #f97316);
+    }
+
+    .summary-icon.weight {
+      background: radial-gradient(circle at 30% 20%, #e0f2fe, #6366f1);
+    }
+
+    .summary-icon.food {
+      background: radial-gradient(circle at 30% 20%, #dcfce7, #22c55e);
+    }
+
+    .summary-text-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+    }
+
+    .summary-text-sub {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .summary-main-number {
+      text-align: right;
+      font-size: 22px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .summary-main-number span {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-left: 2px;
+    }
+
+    .inline-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-top: 6px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .inline-row strong { color: var(--accent); }
+
+    .block-card {
+      margin-top: 8px;
+      border-radius: 18px;
+      background: #f3f4ff;
+      padding: 9px 11px;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 8px;
+      align-items: flex-end;
+    }
+
+    .block-label {
+      font-size: 11px;
+      color: #6b7280;
+    }
+
+    .block-number {
+      font-size: 26px;
+      font-weight: 800;
+      color: #111827;
+      line-height: 1.1;
+    }
+
+    .block-number span {
+      font-size: 13px;
+      font-weight: 500;
+      margin-left: 3px;
+    }
+
+    .block-date {
+      font-size: 11px;
+      color: #6b7280;
+      margin-top: 2px;
+    }
+
+    .block-icon {
+      width: 34px;
+      height: 34px;
+      border-radius: 12px;
+      background: linear-gradient(145deg, #4f46e5, #7c3aed);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #e5e7eb;
+      font-size: 20px;
+      box-shadow: 0 8px 22px rgba(79, 70, 229, 0.6);
+    }
+
+    .bottom-note {
+      margin-top: 10px;
+      font-size: 10px;
+      color: #9ca3af;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="phone">
+    <div class="phone-inner">
+      <header class="header-row">
+        <div class="header-left">
+          <div class="greeting">你好,郑同学</div>
+          <div class="date">2025 年 12 月 7 日 · 星期日</div>
+        </div>
+        <div class="tag-today">今日总览</div>
+      </header>
+
+      <section class="hero-card">
+        <div>
+          <div class="hero-title">今日健康概览</div>
+          <div class="hero-sub">体重、运动与饮食是否都在轨道上?</div>
+          <div class="hero-pills">
+            <span class="hero-pill">体重较目标差 2.2kg</span>
+            <span class="hero-pill">今日步数 8,230 · 运动 42 分钟</span>
+            <span class="hero-pill">饮食已摄入 1,580 / 2,000 kcal</span>
+          </div>
+        </div>
+        <div class="hero-number-wrap">
+          <div class="hero-number-label">综合评分</div>
+          <div class="hero-number">84<span>/ 100</span></div>
+          <div class="hero-number-label">已完成本周目标的 3 / 7 天</div>
+        </div>
+      </section>
+
+      <section class="list-section">
+        <div class="list-title">今日关键摘要</div>
+
+        <article class="summary-card">
+          <div class="summary-icon workout">🏃</div>
+          <div>
+            <div class="summary-text-title">体能训练</div>
+            <div class="summary-text-sub">上一次训练中你消耗了 120 千卡 · 功能性力量训练。</div>
+          </div>
+          <div class="summary-main-number">55<span>分钟</span></div>
+        </article>
+
+        <article class="summary-card">
+          <div class="summary-icon weight">⚖️</div>
+          <div>
+            <div class="summary-text-title">今日体重</div>
+            <div class="summary-text-sub">当前 65.2kg · 较上次 -0.4kg · 较目标差 2.2kg。</div>
+          </div>
+          <div class="summary-main-number">65.2<span>kg</span></div>
+        </article>
+
+        <article class="summary-card">
+          <div class="summary-icon food">🥗</div>
+          <div>
+            <div class="summary-text-title">饮食情况</div>
+            <div class="summary-text-sub">今日已摄入 1,580kcal · 还可摄入约 420kcal,蛋白质 78g。</div>
+          </div>
+          <div class="summary-main-number">1,580<span>kcal</span></div>
+        </article>
+
+        <article class="summary-card">
+          <div class="summary-icon" style="background: radial-gradient(circle at 30% 20%, #e0f2fe,#38bdf8);">💤</div>
+          <div>
+            <div class="summary-text-title">昨晚睡眠</div>
+            <div class="summary-text-sub">7 小时 20 分 · 评分 86 / 100 · 深睡 2.1 小时。</div>
+          </div>
+          <div class="summary-main-number">86<span>分</span></div>
+        </article>
+      </section>
+
+      <section class="block-card">
+        <div>
+          <div class="block-label">总计</div>
+          <div class="block-number">2,417<span>步</span></div>
+          <div class="block-date">2025 年 12 月 7 日</div>
+        </div>
+        <div class="block-icon">👣</div>
+      </section>
+
+      <div class="inline-row">
+        <span>本周目标:<strong>5 天达到 7,500 步</strong></span>
+        <span>已完成:<strong>3 / 5 天</strong></span>
+      </div>
+
+      <p class="bottom-note">蓝本三 · 以「列表摘要 + 大号数字」为主:训练、体重、饮食和睡眠分别用卡片展示,底部用醒目的步数卡片总结今日活动量。</p>
+    </div>
+  </div>
+</body>
+</html>