liaoxg
/
cfc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    :root {
      --bg-primary: #0A1A2F;
      --bg-secondary: #10264A;
      --card-bg-from: #17294A;
      --card-bg-to: #101F3B;
      --card-border: rgba(255,255,255,0.07);
      --card-radius: 14px;
      --text-primary: #F5F8FC;
      --text-secondary: rgba(235,243,255,0.72);
      --accent-1: #FF8C42;
      --accent-2: #5AB0FF;
      --accent-3: #FF6B9D;
      --accent-4: #10B981;
      --five-earth: #FF8C42;
      --five-fire: #FF6B9D;
      --five-metal: #6366F1;
      --five-wood: #10B981;
      --five-water: #F59E0B;
      --grid-dot-color: #FFFFFF;
      --grid-dot-opacity: 0.04;
      --grid-size: 44px;
      --font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
      --display-font: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    }

    body {
      width: 1280px; height: 720px; overflow: hidden;
      background: var(--bg-primary);
      font-family: var(--font-family);
      position: relative;
      margin: 0; padding: 0;
      color: var(--text-primary);
    }

    .grid-overlay {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-image: radial-gradient(var(--grid-dot-color) 1px, transparent 1px);
      background-size: var(--grid-size) var(--grid-size);
      opacity: var(--grid-dot-opacity);
      z-index: 0;
      pointer-events: none;
    }

    .slide-header { position: absolute; top: 20px; left: 40px; right: 40px; height: 50px;
      display: flex; align-items: baseline; gap: 16px; z-index: 10; }
    .overline { font-size: 10px; font-weight: 700; letter-spacing: 2px;
      color: var(--accent-1); opacity: 0.8; text-transform: uppercase; white-space: nowrap; }
    .page-title { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.2; margin: 0; }

    .slide-footer { position: absolute; bottom: 12px; left: 40px; right: 40px; height: 20px;
      display: flex; justify-content: space-between; align-items: center; z-index: 10; }
    .footer-section { font-size: 10px; color: var(--text-secondary); opacity: 0.5; letter-spacing: 1px; }
    .footer-page { font-size: 10px; color: var(--text-secondary); opacity: 0.5; }

    .content-area {
      position: absolute; top: 80px; left: 40px; right: 40px; bottom: 40px;
      display: flex; flex-direction: column; gap: 12px;
      z-index: 2;
    }

    .row-label {
      display: flex; align-items: center; gap: 12px;
      font-size: 13px; font-weight: 700; color: var(--text-primary);
      flex-shrink: 0;
    }
    .row-label::before {
      content: ""; width: 4px; height: 14px; border-radius: 2px;
      background: var(--accent-1); flex-shrink: 0;
    }
    .row-label .loop-note {
      font-size: 11px; font-weight: 600; color: var(--accent-4);
      display: flex; align-items: center; gap: 6px; margin-left: auto;
    }
    .row-label .loop-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-4); }

    .card {
      border-radius: var(--card-radius);
      background: linear-gradient(135deg, var(--card-bg-from), var(--card-bg-to));
      border: 1px solid var(--card-border);
      box-shadow: 0 12px 24px rgba(0,0,0,0.3);
      padding: 16px;
      box-sizing: border-box;
      position: relative;
      display: flex;
    }

    /* Row 1: embodied row - two horizontal cards */
    .emb-row { display: flex; gap: 16px; }
    .emb-card { flex: 1; min-width: 0; align-items: center; gap: 16px; }
    .emb-img-wrap {
      width: 190px; height: 170px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
      border: 1px solid var(--card-border); background: rgba(0,0,0,0.25);
    }
    .emb-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .emb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .emb-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .emb-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 1px; white-space: nowrap; }
    .badge-robot { background: rgba(255,140,66,0.2); color: #FDBA74; border: 1px solid rgba(255,140,66,0.4); }
    .badge-cook { background: rgba(16,185,129,0.2); color: #6EE7B7; border: 1px solid rgba(16,185,129,0.4); }
    .emb-body { font-size: 12px; line-height: 1.65; color: var(--text-secondary); }
    .emb-body strong { color: var(--text-primary); font-weight: 700; }
    .app-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
    .app-chip {
      background: rgba(255,140,66,0.12);
      border: 1px solid rgba(255,140,66,0.35);
      border-radius: 6px; padding: 3px 9px;
      font-size: 11px; color: var(--accent-1);
    }
    .app-chip.green { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); color: var(--accent-4); }

    /* Row 2: wearable row - three cards */
    .wear-row { display: flex; gap: 16px; }
    .wear-card {
      flex: 1; min-width: 0; flex-direction: column; padding: 14px;
    }
    .wear-card .img-wrap {
      width: 100%; height: 140px; border-radius: 10px; overflow: hidden;
      border: 1px solid var(--card-border); background: rgba(0,0,0,0.25);
      margin-bottom: 10px; flex-shrink: 0;
    }
    .wear-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .wear-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
    .wear-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 1px; white-space: nowrap; }
    .badge-glasses { background: rgba(99,102,241,0.2); color: #A5B4FC; border: 1px solid rgba(99,102,241,0.4); }
    .badge-band { background: rgba(90,176,255,0.2); color: #93C5FD; border: 1px solid rgba(90,176,255,0.4); }
    .badge-phone { background: rgba(16,185,129,0.2); color: #6EE7B7; border: 1px solid rgba(16,185,129,0.4); }
    .wear-body { font-size: 11.5px; line-height: 1.6; color: var(--text-secondary); }
    .wear-body strong { color: var(--text-primary); font-weight: 700; }

    /* Bottom: evolution path */
    .evo-card {
      flex-shrink: 0;
      border-radius: var(--card-radius);
      background: linear-gradient(135deg, var(--card-bg-from), var(--card-bg-to));
      border: 1px solid var(--card-border);
      padding: 12px 24px;
      display: flex; align-items: center;
    }
    .evo-label { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-right: 20px; white-space: nowrap; }
    .evo-path { flex: 1; display: flex; align-items: center; }
    .evo-step { display: flex; align-items: center; gap: 10px; flex: 1; }
    .evo-dot {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800;
    }
    .evo-step.current .evo-dot { background: var(--accent-1); color: #FFF; box-shadow: 0 0 12px rgba(255,140,66,0.5); }
    .evo-step.mid .evo-dot { background: rgba(90,176,255,0.15); color: var(--accent-2); border: 1px solid rgba(90,176,255,0.5); }
    .evo-step.goal .evo-dot { background: rgba(16,185,129,0.15); color: var(--accent-4); border: 1px solid rgba(16,185,129,0.5); }
    .evo-text .evo-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
    .evo-text .evo-desc { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; }
    .evo-arrow { color: var(--accent-1); font-size: 13px; font-weight: 700; margin: 0 6px; flex-shrink: 0; opacity: 0.7; }
  </style>
</head>
<body>
  <div class="grid-overlay" data-decoration-layer="background" aria-hidden="true"></div>

  <header class="slide-header">
    <span class="overline">PART 06 &mdash; 未来展望</span>
    <h1 class="page-title">未来展望：AI 健康教练走进生活场</h1>
  </header>

  <div class="content-area">
    <!-- Row 1: embodied -->
    <div class="row-label">
      具身智能 &middot; 走进生活场
      <span class="loop-note"><span class="loop-dot"></span>感知 &rarr; 决策 &rarr; 执行 &nbsp;完整闭环</span>
    </div>
    <div class="emb-row">
      <div class="card emb-card" data-card-id="c1">
        <div class="emb-img-wrap"><img src="../images/slide_26_1_robot.png" alt="陪伴机器人与家庭生活场景"></div>
        <div class="emb-info">
          <div class="emb-title">陪伴机器人 <span class="emb-badge badge-robot">健康管家</span></div>
          <div class="emb-body">
            让 AI 健康教练从<strong>"对话框"走进"生活场"</strong>——机器人完成健康提醒、陪伴训练、体征采集等物理动作。
          </div>
          <div class="app-chip-row" data-chart-type="metric_row">
            <div class="app-chip">健康提醒</div>
            <div class="app-chip">陪伴训练</div>
            <div class="app-chip">体征采集</div>
            <div class="app-chip">老人陪护</div>
          </div>
        </div>
      </div>

      <div class="card emb-card" data-card-id="c2">
        <div class="emb-img-wrap"><img src="../images/slide_26_5_cook.png" alt="炒菜机器人按营养方案烹饪"></div>
        <div class="emb-info">
          <div class="emb-title">炒菜机器人 <span class="emb-badge badge-cook">精准营养</span></div>
          <div class="emb-body">
            AI 营养方案<strong>直达餐盘</strong>——依据全家健康画像自动生成少油控盐菜谱，从"推荐吃什么"到"直接做好端上桌"。
          </div>
          <div class="app-chip-row" data-chart-type="metric_row">
            <div class="app-chip green">营养菜谱</div>
            <div class="app-chip green">少油控盐</div>
            <div class="app-chip green">慢病食养</div>
            <div class="app-chip green">全家口味</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Row 2: wearables -->
    <div class="row-label">
      智能穿戴 &middot; 随身健康感知
    </div>
    <div class="wear-row">
      <div class="card wear-card" data-card-id="c3">
        <div class="img-wrap"><img src="../images/slide_26_2_glasses.png" alt="智能 AR 眼镜健康数据全息投影"></div>
        <div class="wear-title">智能眼镜 <span class="wear-badge badge-glasses">AR 感知</span></div>
        <div class="wear-body">
          <strong>实时健康叠加</strong>：AR 全息投影心率/睡眠/压力数据<br>
          <strong>AI 望诊</strong>：舌诊、面色等中医图像健康检测<br>
          <strong>情绪识别</strong>：微表情 + 语音情绪连续感知
        </div>
      </div>
      <div class="card wear-card" data-card-id="c4">
        <div class="img-wrap"><img src="../images/slide_26_3_wristband.png" alt="智能手环生命体征监测"></div>
        <div class="wear-title">智能手环 <span class="wear-badge badge-band">连续监测</span></div>
        <div class="wear-body">
          <strong>生命体征</strong>：心率/睡眠/运动连续追踪<br>
          <strong>主动预警</strong>：异常自动分级预警 + 随访跟踪<br>
          <strong>行为感知</strong>：端侧小模型低延迟本地推理
        </div>
      </div>
      <div class="card wear-card" data-card-id="c5">
        <div class="img-wrap"><img src="../images/slide_26_4_earbuds.png" alt="智能耳机语音健康教练"></div>
        <div class="wear-title">智能耳机 <span class="wear-badge badge-phone">语音教练</span></div>
        <div class="wear-body">
          <strong>语音健康教练</strong>：随时随地对话式指导<br>
          <strong>冥想引导</strong>：呼吸训练 / 情绪疏导<br>
          <strong>语音情绪识别</strong>：感知家庭成员情绪状态
        </div>
      </div>
    </div>

    <!-- Evolution path -->
    <div class="evo-card" data-card-id="c6">
      <div class="evo-label">技术演进路径</div>
      <div class="evo-path">
        <div class="evo-step current">
          <div class="evo-dot">1</div>
          <div class="evo-text">
            <div class="evo-name">单点 AI</div>
            <div class="evo-desc">对话框式健康教练（当前）</div>
          </div>
        </div>
        <span class="evo-arrow">&rarr;</span>
        <div class="evo-step mid">
          <div class="evo-dot">2</div>
          <div class="evo-text">
            <div class="evo-name">家庭数字孪生</div>
            <div class="evo-desc">"如果&hellip;&hellip;会怎样"推式规划</div>
          </div>
        </div>
        <span class="evo-arrow">&rarr;</span>
        <div class="evo-step mid">
          <div class="evo-dot">3</div>
          <div class="evo-text">
            <div class="evo-name">具身智能 &times; 穿戴</div>
            <div class="evo-desc">感知&ndash;决策&ndash;执行生活场闭环</div>
          </div>
        </div>
        <span class="evo-arrow">&rarr;</span>
        <div class="evo-step goal">
          <div class="evo-dot">4</div>
          <div class="evo-text">
            <div class="evo-name">开放生态</div>
            <div class="evo-desc">家庭健康服务超级入口（2029）</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="slide-footer">
    <span class="footer-section">PART 06 &mdash; 未来展望</span>
    <span class="footer-page">26 / 28</span>
  </footer>
</body>
</html>