|
@@ -0,0 +1,2882 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+<head>
|
|
|
|
|
+<meta charset="UTF-8" />
|
|
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
|
|
|
|
|
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
|
|
|
|
|
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0d1117" />
|
|
|
|
|
+<title>浠艾福 · 页面重新设计 · 高保真原型</title>
|
|
|
|
|
+<style>
|
|
|
|
|
+ /* =========================================================
|
|
|
|
|
+ 浠艾福 Redesign — Design Tokens (v4.0)
|
|
|
|
|
+ 方向:Calm Premium Wellness
|
|
|
|
|
+ - 以白色/浅中性为底,五维色彩仅作强调色
|
|
|
|
|
+ - 内联 SVG 图标取代 emoji
|
|
|
|
|
+ - 克制的动效:ease-out 入场、spring 抽屉、reduced-motion 降级
|
|
|
|
|
+ ========================================================= */
|
|
|
|
|
+ :root {
|
|
|
|
|
+ /* 品牌中性(暖色基底,呼应 flash 页) */
|
|
|
|
|
+ --bg: #FFF7F1;
|
|
|
|
|
+ --bg-soft: #FBEDE1;
|
|
|
|
|
+ --surface: #FFFFFF;
|
|
|
|
|
+ --surface-2: #FFFDFB;
|
|
|
|
|
+ --ink: #3D2B1F;
|
|
|
|
|
+ --ink-2: #7A6650;
|
|
|
|
|
+ --ink-3: #B49A83;
|
|
|
|
|
+ --line: #F2E7DA;
|
|
|
|
|
+ --line-strong: #E8D9C7;
|
|
|
|
|
+
|
|
|
|
|
+ /* 品牌主色(行动/关键按钮)——暖橙,沿用 flash 页 */
|
|
|
|
|
+ --brand: #F97316;
|
|
|
|
|
+ --brand-ink: #7C2D12;
|
|
|
|
|
+ --brand-soft: #FFF1E6;
|
|
|
|
|
+
|
|
|
|
|
+ /* 五维强调色(严格沿用 flash 页取值) */
|
|
|
|
|
+ --dim-body: #FF8C42; /* 身 · 主动健康 */
|
|
|
|
|
+ --dim-body-soft: #FFEAD9;
|
|
|
|
|
+ --dim-mind: #FF6B9D; /* 心 · 大爱相随 */
|
|
|
|
|
+ --dim-mind-soft: #FFE0EC;
|
|
|
|
|
+ --dim-wisdom: #6366F1; /* 智 · 赋能未来 */
|
|
|
|
|
+ --dim-wisdom-soft: #E9E9FE;
|
|
|
|
|
+ --dim-action: #10B981; /* 行 · 人际和谐 */
|
|
|
|
|
+ --dim-action-soft: #DEF7EF;
|
|
|
|
|
+ --dim-wealth: #F59E0B; /* 富 · 利他创富 */
|
|
|
|
|
+ --dim-wealth-soft: #FEF0D6;
|
|
|
|
|
+
|
|
|
|
|
+ /* 语义 */
|
|
|
|
|
+ --ok: #10B981;
|
|
|
|
|
+ --warn: #F59E0B;
|
|
|
|
|
+ --danger: #EF5350;
|
|
|
|
|
+
|
|
|
|
|
+ /* 圆角 */
|
|
|
|
|
+ --r-sm: 10px;
|
|
|
|
|
+ --r-md: 16px;
|
|
|
|
|
+ --r-lg: 22px;
|
|
|
|
|
+ --r-xl: 28px;
|
|
|
|
|
+ --r-pill: 999px;
|
|
|
|
|
+
|
|
|
|
|
+ /* 阴影 —— 轻、暖 */
|
|
|
|
|
+ --sh-1: 0 1px 2px rgba(124,45,18,0.04), 0 2px 8px rgba(124,45,18,0.05);
|
|
|
|
|
+ --sh-2: 0 4px 16px rgba(124,45,18,0.07);
|
|
|
|
|
+ --sh-3: 0 12px 40px rgba(124,45,18,0.12);
|
|
|
|
|
+ --sh-brand: 0 6px 20px rgba(249,115,22,0.30);
|
|
|
|
|
+
|
|
|
|
|
+ /* 动效 */
|
|
|
|
|
+ --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
|
|
|
|
+ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
|
|
|
|
|
+ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
|
|
|
|
|
+ --t-fast: 160ms;
|
|
|
|
|
+ --t-base: 240ms;
|
|
|
|
|
+ --t-slow: 360ms;
|
|
|
|
|
+
|
|
|
|
|
+ /* 字号基线(移动端 ≥14px 正文) */
|
|
|
|
|
+ --fs-xs: 11px;
|
|
|
|
|
+ --fs-sm: 12px;
|
|
|
|
|
+ --fs-base: 14px;
|
|
|
|
|
+ --fs-md: 15px;
|
|
|
|
|
+ --fs-lg: 17px;
|
|
|
|
|
+ --fs-xl: 20px;
|
|
|
|
|
+ --fs-2xl: 26px;
|
|
|
|
|
+ --fs-3xl: 32px;
|
|
|
|
|
+
|
|
|
|
|
+ --tab-h: 64px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
|
|
|
|
|
+ html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
|
|
|
|
|
+ body {
|
|
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
|
|
|
|
|
+ background: #F3E9DD;
|
|
|
|
|
+ color: var(--ink);
|
|
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ min-height: 100dvh;
|
|
|
|
|
+ padding: 24px 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+ button, [role="button"], .tap { touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
|
|
|
|
|
+ input, textarea, select { font-size: 16px; font-family: inherit; }
|
|
|
|
|
+ svg { display: block; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 演示外壳(Preview Shell,非产品布局) ===== */
|
|
|
|
|
+ .stage {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ max-width: 408px;
|
|
|
|
|
+ background: var(--bg);
|
|
|
|
|
+ border-radius: 44px;
|
|
|
|
|
+ box-shadow: 0 30px 80px rgba(20,30,55,0.28);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ height: min(880px, 92vh);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ border: 10px solid #0E1320;
|
|
|
|
|
+ }
|
|
|
|
|
+ .notch {
|
|
|
|
|
+ position: absolute; top: 0; left: 50%; transform: translateX(-50%);
|
|
|
|
|
+ width: 132px; height: 26px; background: #0E1320; border-radius: 0 0 16px 16px; z-index: 60;
|
|
|
|
|
+ }
|
|
|
|
|
+ .statusbar {
|
|
|
|
|
+ height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between;
|
|
|
|
|
+ padding: 0 26px; font-size: 13px; font-weight: 600; color: var(--ink);
|
|
|
|
|
+ padding-top: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .statusbar .sb-right { display: flex; align-items: center; gap: 6px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== App 视图容器 ===== */
|
|
|
|
|
+ .app { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
|
|
|
|
|
+ .screen-scroll {
|
|
|
|
|
+ flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
|
|
|
|
|
+ overscroll-behavior: contain; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 16px);
|
|
|
|
|
+ }
|
|
|
|
|
+ .screen { display: none; animation: screenIn var(--t-base) var(--ease-out) both; }
|
|
|
|
|
+ .screen.active { display: block; }
|
|
|
|
|
+ @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 顶部栏(每页) ===== */
|
|
|
|
|
+ .topbar {
|
|
|
|
|
+ padding: calc(env(safe-area-inset-top, 0px) + 6px) 18px 10px;
|
|
|
|
|
+ display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
|
|
|
+ background: var(--surface);
|
|
|
|
|
+ position: sticky; top: 0; z-index: 20;
|
|
|
|
|
+ border-bottom: 1px solid var(--line);
|
|
|
|
|
+ }
|
|
|
|
|
+ .topbar .tb-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
|
|
|
+ .tb-greet { font-size: var(--fs-sm); color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
|
|
|
|
|
+ .tb-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.2px; }
|
|
|
|
|
+ .tb-right { display: flex; align-items: center; gap: 10px; }
|
|
|
|
|
+ .icon-btn {
|
|
|
|
|
+ width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft);
|
|
|
|
|
+ display: flex; align-items: center; justify-content: center; color: var(--ink-2);
|
|
|
|
|
+ position: relative; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
|
|
|
|
|
+ }
|
|
|
|
|
+ .icon-btn:active { transform: scale(0.92); background: var(--line); }
|
|
|
|
|
+ .icon-btn .badge {
|
|
|
|
|
+ position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
|
|
|
|
|
+ background: var(--danger); border: 2px solid var(--surface);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 成员切换 chips */
|
|
|
|
|
+ .member-switch { display: flex; gap: 6px; align-items: center; }
|
|
|
|
|
+ .mchip {
|
|
|
|
|
+ display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill);
|
|
|
|
|
+ background: var(--bg-soft); border: 1.5px solid transparent; transition: all var(--t-fast) var(--ease-out);
|
|
|
|
|
+ }
|
|
|
|
|
+ .mchip.on { background: var(--brand-soft); border-color: var(--brand); }
|
|
|
|
|
+ .mchip:active { transform: scale(0.95); }
|
|
|
|
|
+ .mchip .ava { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
|
|
|
|
|
+ .mchip .nm { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 通用卡片/区块 ===== */
|
|
|
|
|
+ .pad { padding: 0 16px; }
|
|
|
|
|
+ .section { margin-top: 16px; }
|
|
|
|
|
+ .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-bottom: 10px; }
|
|
|
|
|
+ .sec-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
|
|
|
|
|
+ .sec-more { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
|
|
|
|
|
+ .card {
|
|
|
|
|
+ background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
|
|
|
|
|
+ padding: 16px; margin: 0 16px 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .card.flush { margin: 0 0 0 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 能量英雄模块(首页签名 · 暖桃橙,呼应 flash 页) ===== */
|
|
|
|
|
+ .energy-hero {
|
|
|
|
|
+ margin: 14px 16px 0; background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
|
|
|
|
|
+ border-radius: var(--r-xl); padding: 18px; color: #7C2D12; position: relative; overflow: hidden;
|
|
|
|
|
+ box-shadow: var(--sh-2);
|
|
|
|
|
+ }
|
|
|
|
|
+ .energy-hero::after {
|
|
|
|
|
+ content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
|
|
|
|
|
+ background: radial-gradient(circle, rgba(249,115,22,0.30), transparent 70%); border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+ .eh-top { display: flex; justify-content: space-between; align-items: flex-start; }
|
|
|
|
|
+ .eh-label { font-size: var(--fs-sm); color: rgba(124,45,18,0.6); }
|
|
|
|
|
+ .eh-score { font-size: var(--fs-3xl); font-weight: 800; line-height: 1; margin-top: 2px; color: #7C2D12; }
|
|
|
|
|
+ .eh-score small { font-size: var(--fs-base); font-weight: 600; color: rgba(124,45,18,0.55); margin-left: 4px; }
|
|
|
|
|
+ .eh-sub { font-size: var(--fs-xs); color: rgba(124,45,18,0.5); margin-top: 6px; }
|
|
|
|
|
+ .eh-link { font-size: var(--fs-sm); color: #7C2D12; background: rgba(124,45,18,0.10); padding: 6px 12px; border-radius: var(--r-pill); font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .eh-link:active { transform: scale(0.95); }
|
|
|
|
|
+ .ring-wrap { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
|
|
|
|
|
+ .ring { width: 132px; height: 132px; flex: none; position: relative; }
|
|
|
|
|
+ .ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
|
|
|
+ .ring .rc-val { font-size: var(--fs-2xl); font-weight: 800; color: #7C2D12; }
|
|
|
|
|
+ .ring .rc-lab { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
|
|
|
|
|
+ .dim-bars { flex: 1; display: flex; flex-direction: column; gap: 9px; }
|
|
|
|
|
+ .dbar { display: flex; align-items: center; gap: 8px; }
|
|
|
|
|
+ .dbar .dl { font-size: var(--fs-xs); width: 30px; color: rgba(124,45,18,0.8); flex: none; }
|
|
|
|
|
+ .dbar .dt { flex: 1; height: 7px; background: rgba(124,45,18,0.12); border-radius: var(--r-pill); overflow: hidden; }
|
|
|
|
|
+ .dbar .df { height: 100%; border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
|
|
|
|
|
+ .dbar .dv { font-size: var(--fs-xs); width: 22px; text-align: right; color: #7C2D12; font-weight: 600; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== Next Best Action ===== */
|
|
|
|
|
+ .nba {
|
|
|
|
|
+ margin: 14px 16px 0; border-radius: var(--r-lg); padding: 14px 16px; display: flex; align-items: center; gap: 13px;
|
|
|
|
|
+ background: var(--surface); box-shadow: var(--sh-1); position: relative; overflow: hidden;
|
|
|
|
|
+ border-left: 4px solid var(--brand);
|
|
|
|
|
+ }
|
|
|
|
|
+ .nba:active { transform: scale(0.99); }
|
|
|
|
|
+ .nba .nba-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .nba .nba-info { flex: 1; min-width: 0; }
|
|
|
|
|
+ .nba .nba-t { font-size: var(--fs-md); font-weight: 700; }
|
|
|
|
|
+ .nba .nba-s { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
|
|
|
|
|
+ .nba .nba-go { font-size: var(--fs-sm); font-weight: 700; color: var(--brand); flex: none; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 任务行 / 挑战 ===== */
|
|
|
|
|
+ .row {
|
|
|
|
|
+ display: flex; align-items: center; gap: 12px; padding: 13px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .row + .row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .row .rk { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .row .ri { flex: 1; min-width: 0; }
|
|
|
|
|
+ .row .rt { font-size: var(--fs-base); font-weight: 600; }
|
|
|
|
|
+ .row .rm { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
|
|
|
|
|
+ .pill-btn {
|
|
|
|
|
+ flex: none; padding: 7px 14px; border-radius: var(--r-pill); background: var(--brand); color: #fff;
|
|
|
|
|
+ font-size: var(--fs-sm); font-weight: 700; border: none; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
|
|
|
|
|
+ }
|
|
|
|
|
+ .pill-btn:active { transform: scale(0.94); }
|
|
|
|
|
+ .pill-btn.done { background: var(--dim-action-soft); color: var(--ok); }
|
|
|
|
|
+
|
|
|
|
|
+ /* 家庭动态 */
|
|
|
|
|
+ .feed-item { display: flex; gap: 11px; padding: 11px 0; align-items: flex-start; }
|
|
|
|
|
+ .feed-item + .feed-item { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .feed-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); }
|
|
|
|
|
+ .feed-item .fi-t { font-size: var(--fs-base); color: var(--ink); line-height: 1.4; }
|
|
|
|
|
+ .feed-item .fi-t b { font-weight: 700; }
|
|
|
|
|
+ .feed-item .fi-time { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 推荐横滑 */
|
|
|
|
|
+ .hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 4px; overscroll-behavior: contain; scrollbar-width: none; }
|
|
|
|
|
+ .hscroll::-webkit-scrollbar { display: none; }
|
|
|
|
|
+ .rec-card { flex: none; width: 168px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
|
|
|
|
|
+ .rec-card:active { transform: scale(0.98); }
|
|
|
|
|
+ .rec-cover { height: 96px; }
|
|
|
|
|
+ .rec-body { padding: 10px; }
|
|
|
|
|
+ .rec-cat { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); display: inline-block; }
|
|
|
|
|
+ .rec-tt { font-size: var(--fs-base); font-weight: 600; margin-top: 7px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
|
|
|
+ .rec-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== TabBar(自定义) ===== */
|
|
|
|
|
+ .tabbar {
|
|
|
|
|
+ position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
|
|
|
|
|
+ background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.4) blur(14px);
|
|
|
|
|
+ border-top: 1px solid var(--line); display: flex; align-items: stretch; z-index: 40;
|
|
|
|
|
+ padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab {
|
|
|
|
|
+ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
|
|
|
|
|
+ color: var(--ink-3); transition: color var(--t-fast); position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab .t-ic { transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .tab.on { color: var(--brand); }
|
|
|
|
|
+ .tab.on .t-ic { transform: translateY(-1px); }
|
|
|
|
|
+ .tab .t-tx { font-size: 10.5px; font-weight: 600; }
|
|
|
|
|
+ .tab-center {
|
|
|
|
|
+ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab-center .c-btn {
|
|
|
|
|
+ width: 52px; height: 52px; border-radius: 50%; margin-top: -22px; background: linear-gradient(135deg, #FF8C42, #FF6B9D);
|
|
|
|
|
+ display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--sh-brand);
|
|
|
|
|
+ transition: transform var(--t-fast) var(--ease-out);
|
|
|
|
|
+ }
|
|
|
|
|
+ .tab-center:active .c-btn { transform: scale(0.9) rotate(-8deg); }
|
|
|
|
|
+ .tab-center .c-tx { font-size: 10px; font-weight: 700; color: var(--brand); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 五维 底部抽屉 ===== */
|
|
|
|
|
+ .sheet-mask { position: absolute; inset: 0; background: rgba(16,22,38,0.42); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base); z-index: 50; }
|
|
|
|
|
+ .sheet-mask.show { opacity: 1; visibility: visible; }
|
|
|
|
|
+ .sheet {
|
|
|
|
|
+ position: absolute; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--surface);
|
|
|
|
|
+ border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
|
|
|
|
|
+ transform: translateY(100%); transition: transform var(--t-slow) var(--ease-drawer);
|
|
|
|
|
+ box-shadow: var(--sh-3); max-height: 82%; overflow-y: auto; overscroll-behavior: contain;
|
|
|
|
|
+ }
|
|
|
|
|
+ .sheet.show { transform: translateY(0); }
|
|
|
|
|
+ .sheet-grip { width: 38px; height: 4px; background: var(--line-strong); border-radius: 4px; margin: 4px auto 14px; }
|
|
|
|
|
+ .sheet-title { font-size: var(--fs-xl); font-weight: 800; text-align: center; }
|
|
|
|
|
+ .sheet-sub { text-align: center; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; margin-bottom: 16px; }
|
|
|
|
|
+ .dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
|
|
|
+ .dim-tile {
|
|
|
|
|
+ border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px;
|
|
|
|
|
+ border: 1.5px solid transparent; transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
|
|
|
|
|
+ }
|
|
|
|
|
+ .dim-tile:active { transform: scale(0.97); border-color: var(--line-strong); }
|
|
|
|
|
+ .dim-tile .dt-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
|
|
|
|
|
+ .dim-tile .dt-nm { font-size: var(--fs-md); font-weight: 700; }
|
|
|
|
|
+ .dim-tile .dt-ds { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
|
|
|
|
|
+ .dim-tile .dt-sc { font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }
|
|
|
|
|
+ .dim-tile .dt-track { height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
|
|
|
|
|
+ .dim-tile .dt-fill { height: 100%; border-radius: var(--r-pill); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 健康页 ===== */
|
|
|
|
|
+ .seg { display: flex; gap: 6px; padding: 4px; background: var(--bg-soft); border-radius: var(--r-pill); margin: 14px 16px 0; }
|
|
|
|
|
+ .seg .sg { flex: 1; text-align: center; padding: 9px 0; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .seg .sg.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
|
|
|
|
|
+ .radar-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; text-align: center; }
|
|
|
|
|
+ .radar-card svg { margin: 0 auto; }
|
|
|
|
|
+ .data-row { display: flex; gap: 12px; margin: 14px 16px 0; }
|
|
|
|
|
+ .data-col { flex: 1; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 14px; }
|
|
|
|
|
+ .data-col .dc-t { font-size: var(--fs-base); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 成长页 ===== */
|
|
|
|
|
+ .ms-card { margin: 14px 16px 0; background: linear-gradient(135deg, #FFFFFF, #FFF6EE); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
|
|
|
|
|
+ .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
|
|
|
|
|
+ .ms-it { background: var(--surface); border-radius: var(--r-md); padding: 14px 8px; text-align: center; box-shadow: var(--sh-1); }
|
|
|
|
|
+ .ms-it .mv { font-size: var(--fs-xl); font-weight: 800; }
|
|
|
|
|
+ .ms-it .ml { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
|
|
|
|
|
+ .today-prog { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
|
|
|
+ .tp-item { background: var(--surface); border-radius: var(--r-md); padding: 13px; box-shadow: var(--sh-1); display: flex; align-items: center; gap: 10px; transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .tp-item:active { transform: scale(0.97); }
|
|
|
|
|
+ .tp-item .tp-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .tp-item .tp-l { font-size: var(--fs-sm); font-weight: 600; }
|
|
|
|
|
+ .tp-item .tp-st { font-size: var(--fs-xs); margin-top: 2px; font-weight: 600; }
|
|
|
|
|
+ .tp-st.pend { color: var(--brand); }
|
|
|
|
|
+ .tp-st.done { color: var(--ok); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 我的页 ===== */
|
|
|
|
|
+ .id-card { margin: 14px 16px 0; background: linear-gradient(135deg, #FF8C42, #FF6B9D); border-radius: var(--r-xl); padding: 18px; color: #fff; display: flex; align-items: center; gap: 14px; box-shadow: var(--sh-2); }
|
|
|
|
|
+ .id-ava { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex: none; border: 2px solid rgba(255,255,255,0.35); }
|
|
|
|
|
+ .id-meta { flex: 1; min-width: 0; }
|
|
|
|
|
+ .id-nm { font-size: var(--fs-xl); font-weight: 800; display: flex; align-items: center; gap: 8px; }
|
|
|
|
|
+ .id-lv { font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: var(--r-pill); }
|
|
|
|
|
+ .id-sub { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); margin-top: 5px; }
|
|
|
|
|
+ .id-pts { text-align: right; flex: none; }
|
|
|
|
|
+ .id-pts .pv { font-size: var(--fs-xl); font-weight: 800; }
|
|
|
|
|
+ .id-pts .pl { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); }
|
|
|
|
|
+ .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
|
|
|
|
+ .ach { background: var(--surface); border-radius: var(--r-md); padding: 14px 6px; text-align: center; box-shadow: var(--sh-1); transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .ach:active { transform: scale(0.96); }
|
|
|
|
|
+ .ach .ai { width: 38px; height: 38px; border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
+ .ach .av { font-size: var(--fs-md); font-weight: 800; }
|
|
|
|
|
+ .ach .al { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
|
|
|
|
|
+ .menu-list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
|
|
|
|
|
+ .menu-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; transition: background var(--t-fast); }
|
|
|
|
|
+ .menu-row:active { background: var(--bg-soft); }
|
|
|
|
|
+ .menu-row + .menu-row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .menu-row .mr-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .menu-row .mr-tx { flex: 1; font-size: var(--fs-base); font-weight: 600; }
|
|
|
|
|
+ .menu-row .mr-ar { color: var(--ink-3); }
|
|
|
|
|
+
|
|
|
|
|
+ /* 家庭成员条 */
|
|
|
|
|
+ .fam-strip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 16px 6px; overscroll-behavior: contain; scrollbar-width: none; }
|
|
|
|
|
+ .fam-strip::-webkit-scrollbar { display: none; }
|
|
|
|
|
+ .fam-it { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
|
|
|
|
|
+ .fam-av { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; position: relative; }
|
|
|
|
|
+ .fam-av.add { background: var(--bg-soft); color: var(--ink-3); border: 1.5px dashed var(--line-strong); }
|
|
|
|
|
+ .fam-tag { position: absolute; bottom: -2px; right: -2px; font-size: 8px; font-weight: 700; color: #fff; border-radius: var(--r-pill); padding: 1px 5px; }
|
|
|
|
|
+ .fam-nm { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 登录页 ===== */
|
|
|
|
|
+ .login { flex: 1; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top,0px) + 50px) 28px 28px; }
|
|
|
|
|
+ .login .lg-logo { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, #FF8C42, #FF6B9D); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 22px; box-shadow: var(--sh-brand); }
|
|
|
|
|
+ .login .lg-h { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: 1px; }
|
|
|
|
|
+ .login .lg-s { font-size: var(--fs-md); color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
|
|
|
|
|
+ .login .lg-fields { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
|
|
|
|
|
+ .field { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: flex; align-items: center; gap: 10px; transition: border-color var(--t-fast); }
|
|
|
|
|
+ .field:focus-within { border-color: var(--brand); }
|
|
|
|
|
+ .field input { flex: 1; border: none; outline: none; background: transparent; color: var(--ink); font-size: var(--fs-base); }
|
|
|
|
|
+ .field .fc-ic { color: var(--ink-3); flex: none; }
|
|
|
|
|
+ .lg-btn { margin-top: 22px; background: var(--brand); color: #fff; border: none; border-radius: var(--r-md); padding: 16px; font-size: var(--fs-lg); font-weight: 700; box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .lg-btn:active { transform: scale(0.98); }
|
|
|
|
|
+ .lg-alt { margin-top: 16px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
|
|
|
|
|
+ .lg-alt b { color: var(--brand); font-weight: 700; }
|
|
|
|
|
+ .lg-terms { margin-top: auto; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; padding-bottom: 10px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 状态:骨架 / 空 / 错误 ===== */
|
|
|
|
|
+ .skeleton { background: linear-gradient(90deg, #F6E7D7 25%, #FCEFDF 50%, #F6E7D7 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
|
|
|
|
|
+ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
|
|
|
|
+ .empty-state { text-align: center; padding: 48px 24px; }
|
|
|
|
|
+ .empty-state .es-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--ink-3); }
|
|
|
|
|
+ .empty-state .es-t { font-size: var(--fs-md); font-weight: 700; }
|
|
|
|
|
+ .empty-state .es-s { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
|
|
|
|
|
+ .empty-state .es-btn { margin-top: 18px; display: inline-block; background: var(--brand); color: #fff; padding: 11px 22px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; }
|
|
|
|
|
+
|
|
|
|
|
+ /* Toast */
|
|
|
|
|
+ .toast { position: absolute; left: 50%; bottom: calc(var(--tab-h) + 24px); transform: translate(-50%, 20px); background: #1A2133; color: #fff; font-size: var(--fs-sm); font-weight: 600; padding: 11px 18px; border-radius: var(--r-pill); opacity: 0; pointer-events: none; transition: transform var(--t-base) var(--ease-out), opacity var(--t-base); z-index: 70; box-shadow: var(--sh-3); max-width: 80%; text-align: center; }
|
|
|
|
|
+ .toast.show { opacity: 1; transform: translate(-50%, 0); }
|
|
|
|
|
+
|
|
|
|
|
+ /* 演示切换条 */
|
|
|
|
|
+ .demo-bar { position: fixed; top: 16px; right: 16px; z-index: 200; background: #1A2133; border-radius: var(--r-pill); padding: 6px; display: flex; gap: 4px; box-shadow: var(--sh-3); }
|
|
|
|
|
+ .demo-bar button { border: none; background: transparent; color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); opacity: 0.6; }
|
|
|
|
|
+ .demo-bar button.on { background: var(--brand); opacity: 1; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 入场 stagger */
|
|
|
|
|
+ .stagger > * { opacity: 0; transform: translateY(8px); animation: itemIn var(--t-base) var(--ease-out) forwards; }
|
|
|
|
|
+ .stagger > *:nth-child(1) { animation-delay: 20ms; }
|
|
|
|
|
+ .stagger > *:nth-child(2) { animation-delay: 60ms; }
|
|
|
|
|
+ .stagger > *:nth-child(3) { animation-delay: 100ms; }
|
|
|
|
|
+ .stagger > *:nth-child(4) { animation-delay: 140ms; }
|
|
|
|
|
+ .stagger > *:nth-child(5) { animation-delay: 180ms; }
|
|
|
|
|
+ .stagger > *:nth-child(6) { animation-delay: 220ms; }
|
|
|
|
|
+ @keyframes itemIn { to { opacity: 1; transform: translateY(0); } }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 闪屏(还原原 flash 页暖色基因) ===== */
|
|
|
|
|
+ #splash {
|
|
|
|
|
+ position: absolute; inset: 0; z-index: 9999;
|
|
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
|
|
+ background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
|
|
|
|
|
+ }
|
|
|
|
|
+ #splash.hide { opacity: 0; visibility: hidden; }
|
|
|
|
|
+ .sp-bg { position: absolute; inset: 0; pointer-events: none; }
|
|
|
|
|
+ .sp-c { position: absolute; border-radius: 50%; opacity: .12; }
|
|
|
|
|
+ .sp-c1 { width: 200px; height: 200px; background: #FF8C42; top: -50px; right: -40px; animation: sp-float1 4s ease-in-out infinite; }
|
|
|
|
|
+ .sp-c2 { width: 140px; height: 140px; background: #FF6B9D; bottom: 40px; left: -30px; animation: sp-float2 5s ease-in-out infinite; }
|
|
|
|
|
+ .sp-c3 { width: 90px; height: 90px; background: #6366F1; top: 50%; right: -20px; animation: sp-float3 6s ease-in-out infinite; }
|
|
|
|
|
+ @keyframes sp-float1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-15px) scale(1.05)} }
|
|
|
|
|
+ @keyframes sp-float2 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(10px) scale(1.08)} }
|
|
|
|
|
+ @keyframes sp-float3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(10deg)} }
|
|
|
|
|
+ .sp-body { display: flex; flex-direction: column; align-items: center; animation: sp-body-in .8s cubic-bezier(.16,1,.3,1) both; padding: 0 24px; }
|
|
|
|
|
+ @keyframes sp-body-in { from { opacity:0; transform: translateY(20px) scale(.96);} to {opacity:1; transform: none;} }
|
|
|
|
|
+ .sp-logo { width: 80px; height: 80px; border-radius: 20px; background: rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; color:#F97316; margin-bottom: 14px; box-shadow: 0 8px 32px rgba(249,115,22,.25); animation: sp-pulse 2.5s ease-in-out infinite; }
|
|
|
|
|
+ @keyframes sp-pulse { 0%,100%{box-shadow:0 8px 32px rgba(249,115,22,.25)} 50%{box-shadow:0 8px 48px rgba(249,115,22,.45)} }
|
|
|
|
|
+ .sp-name { font-size: 32px; font-weight: 800; color: #7C2D12; letter-spacing: 5px; }
|
|
|
|
|
+ .sp-en { font-size: 11px; color: rgba(124,45,18,.5); letter-spacing: 3px; margin-top: 2px; }
|
|
|
|
|
+ .sp-id { font-size: 14px; font-weight: 600; color: rgba(124,45,18,.85); letter-spacing: 1px; margin-top: 16px; text-align: center; line-height: 1.5; }
|
|
|
|
|
+ .sp-dims { display: flex; flex-direction: row; gap: 14px; margin-top: 18px; }
|
|
|
|
|
+ .sp-dim { display:flex; flex-direction:column; align-items:center; gap:6px; animation: sp-dim-in .5s ease both; }
|
|
|
|
|
+ .sp-dc { width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:700; box-shadow: 0 4px 12px rgba(124,45,18,.12); }
|
|
|
|
|
+ .sp-dim:nth-child(1){animation-delay:.1s} .sp-dim:nth-child(2){animation-delay:.2s} .sp-dim:nth-child(3){animation-delay:.3s} .sp-dim:nth-child(4){animation-delay:.4s} .sp-dim:nth-child(5){animation-delay:.5s}
|
|
|
|
|
+ @keyframes sp-dim-in { from{opacity:0; transform:translateY(8px) scale(.8)} to{opacity:1; transform:none} }
|
|
|
|
|
+ .sp-tag { font-size: 13px; color: rgba(124,45,18,.7); letter-spacing: 2px; margin-top: 16px; text-align:center; }
|
|
|
|
|
+ .sp-dots { position:absolute; bottom: 70px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
|
|
|
|
|
+ .sp-dots span { width: 7px; height: 7px; border-radius:50%; background: rgba(249,115,22,.6); animation: sp-dot 1.4s ease-in-out infinite both; }
|
|
|
|
|
+ .sp-dots span:nth-child(1){animation-delay:-.32s} .sp-dots span:nth-child(2){animation-delay:-.16s} .sp-dots span:nth-child(3){animation-delay:0s}
|
|
|
|
|
+ @keyframes sp-dot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }
|
|
|
|
|
+ .sp-enter { position:absolute; bottom: 34px; left:0; right:0; text-align:center; font-size:12px; color: rgba(124,45,18,.5); letter-spacing:2px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 通用:Task 页返回栏(隐藏 TabBar 的二级页) ===== */
|
|
|
|
|
+ .nav-bar {
|
|
|
|
|
+ padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 10px;
|
|
|
|
|
+ display: flex; align-items: center; gap: 10px;
|
|
|
|
|
+ background: var(--surface); position: sticky; top: 0; z-index: 20;
|
|
|
|
|
+ border-bottom: 1px solid var(--line);
|
|
|
|
|
+ }
|
|
|
|
|
+ .nav-bar .nb-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: var(--bg-soft); flex: none; transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .nav-bar .nb-back:active { transform: scale(0.9); }
|
|
|
|
|
+ .nav-bar .nb-t { font-size: var(--fs-lg); font-weight: 800; flex: 1; min-width: 0; }
|
|
|
|
|
+ .nav-bar .nb-a { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; flex: none; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 五维能量总览(深读 · 全屏) ===== */
|
|
|
|
|
+ .ov-hero {
|
|
|
|
|
+ margin: 14px 16px 0; padding: 18px; border-radius: var(--r-xl); position: relative; overflow: hidden;
|
|
|
|
|
+ background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
|
|
|
|
|
+ box-shadow: var(--sh-2);
|
|
|
|
|
+ }
|
|
|
|
|
+ .ov-hero::after {
|
|
|
|
|
+ content: ""; position: absolute; left: -30px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%;
|
|
|
|
|
+ background: radial-gradient(circle, rgba(255,107,157,0.28), transparent 70%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .ov-score { display: flex; align-items: flex-end; gap: 10px; position: relative; }
|
|
|
|
|
+ .ov-score .os-n { font-size: 44px; font-weight: 800; line-height: 1; color: #7C2D12; }
|
|
|
|
|
+ .ov-score .os-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.6); padding-bottom: 5px; }
|
|
|
|
|
+ .ov-delta { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--ok); background: rgba(16,185,129,0.14); padding: 4px 10px; border-radius: var(--r-pill); }
|
|
|
|
|
+ .ov-delta.down { color: var(--danger); background: rgba(239,83,80,0.12); }
|
|
|
|
|
+ .ov-cap { font-size: var(--fs-sm); color: rgba(124,45,18,0.65); margin-top: 6px; position: relative; }
|
|
|
|
|
+ .ov-radar { display: flex; justify-content: center; padding: 18px 0 6px; position: relative; }
|
|
|
|
|
+ .ov-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 10px; position: relative; }
|
|
|
|
|
+ .ov-lg { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: rgba(124,45,18,0.75); font-weight: 600; }
|
|
|
|
|
+ .ov-lg i { width: 8px; height: 8px; border-radius: 2px; display: block; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 趋势折线 */
|
|
|
|
|
+ .trend-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
|
|
|
|
|
+ .trend-tabs { display: flex; gap: 6px; background: var(--bg-soft); padding: 3px; border-radius: var(--r-pill); margin-bottom: 14px; }
|
|
|
|
|
+ .trend-tabs .tt { flex: 1; text-align: center; padding: 7px 0; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .trend-tabs .tt.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
|
|
|
|
|
+ .trend-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
|
|
|
|
|
+ .trend-legend .tl { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
|
|
|
|
|
+ .trend-legend .tl i { width: 14px; height: 3px; border-radius: 2px; display: block; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 家人对比 */
|
|
|
|
|
+ .cmp-list { display: flex; flex-direction: column; }
|
|
|
|
|
+ .cmp-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
|
|
|
|
|
+ .cmp-row + .cmp-row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .cmp-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-sm); font-weight: 700; flex: none; }
|
|
|
|
|
+ .cmp-info { flex: 1; min-width: 0; }
|
|
|
|
|
+ .cmp-nm { display: flex; align-items: baseline; gap: 6px; }
|
|
|
|
|
+ .cmp-nm .cn { font-size: var(--fs-base); font-weight: 600; }
|
|
|
|
|
+ .cmp-nm .cr { font-size: var(--fs-xs); color: var(--ink-3); }
|
|
|
|
|
+ .cmp-bar { height: 7px; background: var(--bg-soft); border-radius: var(--r-pill); margin-top: 6px; overflow: hidden; }
|
|
|
|
|
+ .cmp-bar .cf { height: 100%; border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
|
|
|
|
|
+ .cmp-sc { font-size: var(--fs-md); font-weight: 800; flex: none; width: 34px; text-align: right; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 建议卡 */
|
|
|
|
|
+ .adv-card { display: flex; gap: 11px; padding: 13px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .adv-card:active { transform: scale(0.98); }
|
|
|
|
|
+ .adv-card + .adv-card { margin-top: 10px; }
|
|
|
|
|
+ .adv-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .adv-tx { flex: 1; min-width: 0; }
|
|
|
|
|
+ .adv-t { font-size: var(--fs-base); font-weight: 600; }
|
|
|
|
|
+ .adv-s { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
|
|
|
|
|
+ .adv-pri { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); flex: none; align-self: flex-start; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 维度详情(Task 页) ===== */
|
|
|
|
|
+ .dim-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
|
|
|
|
|
+ .dim-hero .dh-top { display: flex; align-items: center; gap: 12px; position: relative; }
|
|
|
|
|
+ .dim-hero .dh-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
|
|
|
|
|
+ .dim-hero .dh-nm { font-size: var(--fs-xl); font-weight: 800; }
|
|
|
|
|
+ .dim-hero .dh-ds { font-size: var(--fs-sm); opacity: 0.8; margin-top: 2px; }
|
|
|
|
|
+ .dim-hero .dh-sc { margin-left: auto; text-align: right; }
|
|
|
|
|
+ .dim-hero .dh-sc .n { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
|
|
|
|
|
+ .dim-hero .dh-sc .l { font-size: var(--fs-xs); opacity: 0.75; margin-top: 2px; }
|
|
|
|
|
+ .sub-score { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; position: relative; }
|
|
|
|
|
+ .sub-score .ss { background: rgba(255,255,255,0.55); border-radius: var(--r-md); padding: 11px 12px; }
|
|
|
|
|
+ .sub-score .ss .sl { font-size: var(--fs-xs); opacity: 0.78; font-weight: 600; }
|
|
|
|
|
+ .sub-score .ss .sv { font-size: var(--fs-lg); font-weight: 800; margin-top: 3px; }
|
|
|
|
|
+ .sub-score .ss .sv small { font-size: var(--fs-xs); font-weight: 600; opacity: 0.7; margin-left: 2px; }
|
|
|
|
|
+
|
|
|
|
|
+ .metric-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
|
|
|
|
|
+ .metric-row + .metric-row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .metric-row .mi { flex: 1; min-width: 0; }
|
|
|
|
|
+ .metric-row .mn { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 6px; }
|
|
|
|
|
+ .metric-row .mv { font-size: var(--fs-md); font-weight: 800; flex: none; }
|
|
|
|
|
+ .metric-row .mr { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
|
|
|
|
|
+ .tag-ref { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); flex: none; }
|
|
|
|
|
+ .tag-ref.hi { background: rgba(239,83,80,0.12); color: var(--danger); }
|
|
|
|
|
+ .tag-ref.mid { background: rgba(245,158,11,0.14); color: #B45309; }
|
|
|
|
|
+ .tag-ref.ok { background: var(--dim-action-soft); color: var(--ok); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 报告上传流程 ===== */
|
|
|
|
|
+ .up-steps { display: flex; align-items: center; gap: 6px; padding: 16px 18px 6px; }
|
|
|
|
|
+ .up-step { display: flex; align-items: center; gap: 6px; flex: none; }
|
|
|
|
|
+ .up-step .us-n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--bg-soft); color: var(--ink-3); flex: none; }
|
|
|
|
|
+ .up-step .us-t { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
|
|
|
|
|
+ .up-step.on .us-n { background: var(--brand); color: #fff; }
|
|
|
|
|
+ .up-step.on .us-t { color: var(--brand-ink); }
|
|
|
|
|
+ .up-step.done .us-n { background: var(--dim-action); color: #fff; }
|
|
|
|
|
+ .up-step.done .us-t { color: var(--ink-2); }
|
|
|
|
|
+ .up-step-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 12px; }
|
|
|
|
|
+ .up-step-line.done { background: var(--dim-action); }
|
|
|
|
|
+
|
|
|
|
|
+ .up-zone { margin: 14px 16px 0; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 30px 20px; text-align: center; transition: border-color var(--t-fast), background var(--t-fast); }
|
|
|
|
|
+ .up-zone:active { border-color: var(--brand); background: var(--brand-soft); }
|
|
|
|
|
+ .up-zone .uz-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
|
|
|
|
|
+ .up-zone .uz-t { font-size: var(--fs-md); font-weight: 700; }
|
|
|
|
|
+ .up-zone .uz-s { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
|
|
|
|
|
+ .up-btns { display: flex; gap: 10px; margin-top: 18px; }
|
|
|
|
|
+ .up-btns .ub { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 13px; font-size: var(--fs-base); font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .up-btns .ub:active { transform: scale(0.97); }
|
|
|
|
|
+ .up-btns .ub.pri { background: var(--brand); color: #fff; border-color: var(--brand); }
|
|
|
|
|
+
|
|
|
|
|
+ .up-preview { margin: 14px 16px 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); background: var(--surface); }
|
|
|
|
|
+ .up-thumb { height: 168px; background: linear-gradient(135deg, #FFF3E6, #FFE2C7); position: relative; display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
+ .up-thumb .paper { width: 118px; height: 148px; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(124,45,18,0.16); padding: 12px 10px; }
|
|
|
|
|
+ .up-thumb .paper .pl { height: 6px; border-radius: 3px; background: #F2E7DA; margin-bottom: 7px; }
|
|
|
|
|
+ .up-thumb .paper .pl.t { width: 56%; background: #E8D9C7; height: 8px; }
|
|
|
|
|
+ .up-thumb .badge-ok { position: absolute; right: 12px; top: 12px; background: var(--dim-action); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 4px; }
|
|
|
|
|
+ .up-meta { padding: 14px; }
|
|
|
|
|
+ .up-fname { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 7px; }
|
|
|
|
|
+ .up-fmeta { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; }
|
|
|
|
|
+
|
|
|
|
|
+ .ocr-box { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
|
|
|
|
|
+ .ocr-bar { height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; margin-top: 12px; }
|
|
|
|
|
+ .ocr-bar .of { height: 100%; background: linear-gradient(90deg, var(--brand), #FF6B9D); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
|
|
|
|
|
+ .ocr-step { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: var(--fs-sm); }
|
|
|
|
|
+ .ocr-step .os-ic { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--bg-soft); color: var(--ink-3); }
|
|
|
|
|
+ .ocr-step.done .os-ic { background: var(--dim-action); color: #fff; }
|
|
|
|
|
+ .ocr-step.run .os-ic { background: var(--brand-soft); color: var(--brand); }
|
|
|
|
|
+ .ocr-step .os-t { color: var(--ink-2); }
|
|
|
|
|
+ .ocr-step.done .os-t, .ocr-step.run .os-t { color: var(--ink); font-weight: 600; }
|
|
|
|
|
+ .spin { animation: spin 1s linear infinite; transform-origin: center; }
|
|
|
|
|
+ @keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
|
+
|
|
|
|
|
+ .fix-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
|
|
|
|
|
+ .fix-row + .fix-row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .fix-row .fi { flex: 1; min-width: 0; }
|
|
|
|
|
+ .fix-row .fn { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 6px; }
|
|
|
|
|
+ .fix-row .fv { font-size: var(--fs-md); font-weight: 800; }
|
|
|
|
|
+ .fix-row .fw { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
|
|
|
|
|
+ .low-conf { background: rgba(245,158,11,0.14); color: #B45309; font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); }
|
|
|
|
|
+
|
|
|
|
|
+ .up-actions { padding: 6px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
|
|
|
|
|
+ .btn-primary { width: 100%; background: var(--brand); color: #fff; border: none; border-radius: var(--r-md); padding: 16px; font-size: var(--fs-lg); font-weight: 700; box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }
|
|
|
|
|
+ .btn-primary:active { transform: scale(0.98); }
|
|
|
|
|
+ .btn-primary:disabled { background: var(--line-strong); box-shadow: none; color: var(--ink-3); }
|
|
|
|
|
+ .btn-ghost { width: 100%; background: transparent; color: var(--ink-2); border: none; padding: 14px; font-size: var(--fs-base); font-weight: 600; margin-top: 4px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 成长报告卡 / 分享卡 ===== */
|
|
|
|
|
+ .rpt-tabs { display: flex; gap: 8px; margin: 14px 16px 0; }
|
|
|
|
|
+ .rpt-tabs .rtt { flex: 1; text-align: center; padding: 11px 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); font-size: var(--fs-base); font-weight: 700; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .rpt-tabs .rtt.on { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
|
|
|
|
|
+
|
|
|
|
|
+ .share-card {
|
|
|
|
|
+ margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; position: relative; overflow: hidden;
|
|
|
|
|
+ background: linear-gradient(150deg, #FFF7ED 0%, #FFEDD5 52%, #FED7AA 100%);
|
|
|
|
|
+ box-shadow: var(--sh-2);
|
|
|
|
|
+ }
|
|
|
|
|
+ .share-card::before { content: ""; position: absolute; right: -46px; top: -46px; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,157,0.30), transparent 70%); }
|
|
|
|
|
+ .share-card::after { content: ""; position: absolute; left: -40px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%); }
|
|
|
|
|
+ .sc-brand { display: flex; align-items: center; gap: 8px; position: relative; }
|
|
|
|
|
+ .sc-brand .scb-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.9); color: var(--brand); display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
+ .sc-brand .scb-tx { font-size: var(--fs-sm); font-weight: 800; color: #7C2D12; letter-spacing: 0.5px; }
|
|
|
|
|
+ .sc-title { font-size: var(--fs-xl); font-weight: 800; color: #7C2D12; margin-top: 14px; position: relative; line-height: 1.3; }
|
|
|
|
|
+ .sc-sub { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 5px; position: relative; }
|
|
|
|
|
+ .sc-dims { display: flex; gap: 8px; margin-top: 18px; position: relative; }
|
|
|
|
|
+ .sc-dim { flex: 1; background: rgba(255,255,255,0.62); border-radius: var(--r-md); padding: 10px 6px; text-align: center; }
|
|
|
|
|
+ .sc-dim .sd-n { font-size: var(--fs-md); font-weight: 800; }
|
|
|
|
|
+ .sc-dim .sd-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); margin-top: 2px; font-weight: 600; }
|
|
|
|
|
+ .sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(124,45,18,0.14); position: relative; }
|
|
|
|
|
+ .sc-foot .sf-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
|
|
|
|
|
+ .sc-foot .sf-r { font-size: var(--fs-xs); font-weight: 700; color: #7C2D12; }
|
|
|
|
|
+
|
|
|
|
|
+ .badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
|
|
|
+ .bg-item { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 10px; text-align: center; transition: transform var(--t-fast) var(--ease-out); position: relative; overflow: hidden; }
|
|
|
|
|
+ .bg-item:active { transform: scale(0.96); }
|
|
|
|
|
+ .bg-item.locked { opacity: 0.55; }
|
|
|
|
|
+ .bg-ring { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }
|
|
|
|
|
+ .bg-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
|
|
|
|
|
+ .bg-item.locked .bg-ring::after { border-color: var(--ink-3); }
|
|
|
|
|
+ .bg-nm { font-size: var(--fs-sm); font-weight: 700; }
|
|
|
|
|
+ .bg-dt { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
|
|
|
|
|
+ .bg-lock { position: absolute; right: 8px; top: 8px; color: var(--ink-3); }
|
|
|
|
|
+
|
|
|
|
|
+ .share-actions { display: flex; gap: 10px; margin: 16px 16px 0; }
|
|
|
|
|
+ .share-actions .sa { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 700; transition: transform var(--t-fast) var(--ease-out); }
|
|
|
|
|
+ .share-actions .sa:active { transform: scale(0.97); }
|
|
|
|
|
+ .share-actions .sa.pri { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
|
|
|
|
|
+ .share-actions .sa.sec { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 成果 / 成就(突出成果 + 驱动继续完成) ===== */
|
|
|
|
|
+ .ach-hero {
|
|
|
|
|
+ margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; position: relative; overflow: hidden;
|
|
|
|
|
+ background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
|
|
|
|
|
+ box-shadow: var(--sh-2); color: #7C2D12;
|
|
|
|
|
+ }
|
|
|
|
|
+ .ach-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,66,0.32), transparent 70%); }
|
|
|
|
|
+ .ach-hero .ah-t { font-size: var(--fs-md); font-weight: 800; position: relative; }
|
|
|
|
|
+ .ach-hero .ah-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.65); margin-top: 4px; position: relative; line-height: 1.5; }
|
|
|
|
|
+ .ah-ring-wrap { display: flex; align-items: center; gap: 18px; margin-top: 16px; position: relative; }
|
|
|
|
|
+ .ah-ring { width: 116px; height: 116px; flex: none; position: relative; }
|
|
|
|
|
+ .ah-ring .ah-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
|
|
|
+ .ah-ring .ah-c .n { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
|
|
|
|
|
+ .ah-ring .ah-c .l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); margin-top: 2px; }
|
|
|
|
|
+ .ah-stats { flex: 1; display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
|
+ .ah-stat { display: flex; align-items: center; gap: 8px; }
|
|
|
|
|
+ .ah-stat .as-v { font-size: var(--fs-lg); font-weight: 800; min-width: 52px; }
|
|
|
|
|
+ .ah-stat .as-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
|
|
|
|
|
+ .ah-stat .as-bar { flex: 1; height: 6px; background: rgba(124,45,18,0.12); border-radius: var(--r-pill); overflow: hidden; }
|
|
|
|
|
+ .ah-stat .as-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
|
|
|
|
|
+
|
|
|
|
|
+ /* 连续打卡火苗条 */
|
|
|
|
|
+ .streak { display: flex; gap: 6px; margin-top: 14px; position: relative; }
|
|
|
|
|
+ .streak .sd { flex: 1; text-align: center; }
|
|
|
|
|
+ .streak .sd .dot { width: 100%; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; color: rgba(124,45,18,0.35); }
|
|
|
|
|
+ .streak .sd.done .dot { background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(249,115,22,0.35); }
|
|
|
|
|
+ .streak .sd.today .dot { outline: 2px solid var(--brand); outline-offset: 2px; }
|
|
|
|
|
+ .streak .sd .dl { font-size: 9.5px; color: rgba(124,45,18,0.55); margin-top: 4px; font-weight: 600; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 任务:完成态 + 继续驱动 */
|
|
|
|
|
+ .task-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; position: relative; }
|
|
|
|
|
+ .task-item + .task-item { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .task-item .tk-ck {
|
|
|
|
|
+ width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none;
|
|
|
|
|
+ display: flex; align-items: center; justify-content: center; background: transparent;
|
|
|
|
|
+ transition: all var(--t-base) var(--ease-out);
|
|
|
|
|
+ }
|
|
|
|
|
+ .task-item .tk-ck:active { transform: scale(0.88); }
|
|
|
|
|
+ .task-item.done .tk-ck { background: var(--ok); border-color: var(--ok); }
|
|
|
|
|
+ .task-item .tk-bd { flex: 1; min-width: 0; }
|
|
|
|
|
+ .task-item .tk-t { font-size: var(--fs-base); font-weight: 600; transition: color var(--t-base); }
|
|
|
|
|
+ .task-item.done .tk-t { color: var(--ink-3); text-decoration: line-through; }
|
|
|
|
|
+ .task-item .tk-m { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
|
|
|
|
|
+ .task-item .tk-pts { font-size: var(--fs-xs); font-weight: 800; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: var(--r-pill); flex: none; }
|
|
|
|
|
+ .task-item.done .tk-pts { color: var(--ok); background: var(--dim-action-soft); }
|
|
|
|
|
+ /* 完成后高亮 */
|
|
|
|
|
+ @keyframes taskPop { 0% { background: rgba(16,185,129,0.16); } 100% { background: transparent; } }
|
|
|
|
|
+ .task-item.just-done { animation: taskPop 1.1s var(--ease-out); }
|
|
|
|
|
+
|
|
|
|
|
+ /* 成果解锁横幅(完成任务后浮现) */
|
|
|
|
|
+ .unlock-toast {
|
|
|
|
|
+ position: absolute; left: 16px; right: 16px; top: 60px; z-index: 65;
|
|
|
|
|
+ display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: var(--r-lg);
|
|
|
|
|
+ background: linear-gradient(135deg, #FFF7ED, #FFEDD5); color: #7C2D12;
|
|
|
|
|
+ box-shadow: var(--sh-3); border: 1.5px solid rgba(249,115,22,0.4);
|
|
|
|
|
+ transform: translateY(-16px); opacity: 0; pointer-events: none;
|
|
|
|
|
+ transition: transform var(--t-slow) var(--ease-drawer), opacity var(--t-base);
|
|
|
|
|
+ }
|
|
|
|
|
+ .unlock-toast.show { transform: translateY(0); opacity: 1; }
|
|
|
|
|
+ .unlock-toast .ut-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .unlock-toast .ut-t { font-size: var(--fs-base); font-weight: 800; }
|
|
|
|
|
+ .unlock-toast .ut-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 2px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 分享卡:可截图样式加强 */
|
|
|
|
|
+ .share-card.hero-share { padding: 24px 20px; }
|
|
|
|
|
+ .sc-streak { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.7); color: #7C2D12; font-size: var(--fs-xs); font-weight: 800; padding: 4px 11px; border-radius: var(--r-pill); margin-top: 12px; position: relative; }
|
|
|
|
|
+ .sc-ach { display: flex; gap: 8px; margin-top: 14px; position: relative; }
|
|
|
|
|
+ .sc-ach-item { flex: 1; text-align: center; background: rgba(255,255,255,0.55); border-radius: var(--r-md); padding: 9px 4px; }
|
|
|
|
|
+ .sc-ach-item .n { font-size: var(--fs-sm); font-weight: 800; color: #7C2D12; }
|
|
|
|
|
+ .sc-ach-item .l { font-size: 10px; color: rgba(124,45,18,0.55); margin-top: 2px; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 成就徽章(放大 + 解锁动画) */
|
|
|
|
|
+ .bg-item .bg-ring svg { transition: transform var(--t-base) var(--ease-out); }
|
|
|
|
|
+ .bg-item:active .bg-ring svg { transform: scale(1.12) rotate(-6deg); }
|
|
|
|
|
+ @keyframes badgeUnlock { 0% { transform: scale(0.6) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
|
|
|
|
|
+ .bg-item.just-unlocked .bg-ring { animation: badgeUnlock .7s var(--ease-out); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 肠道问卷 / 9.9 陪跑 / D7 报告 ===== */
|
|
|
|
|
+ .qz-wrap { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
|
|
|
|
|
+ .qz-prog { display: flex; align-items: center; gap: 8px; padding: 18px 20px 10px; }
|
|
|
|
|
+ .qz-prog .qp-bar { flex: 1; height: 5px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
|
|
|
|
|
+ .qz-prog .qp-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease-out); }
|
|
|
|
|
+ .qz-prog .qp-tx { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; flex: none; }
|
|
|
|
|
+ .qz-q { padding: 14px 0; }
|
|
|
|
|
+ .qz-q .qq-dim { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: 0.5px; }
|
|
|
|
|
+ .qz-q .qq-t { font-size: var(--fs-lg); font-weight: 700; margin-top: 6px; line-height: 1.45; }
|
|
|
|
|
+ .qz-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
|
|
|
|
|
+ .qz-opt {
|
|
|
|
|
+ display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: var(--r-md);
|
|
|
|
|
+ background: var(--surface); border: 1.5px solid var(--line); cursor: pointer;
|
|
|
|
|
+ transition: all var(--t-fast) var(--ease-out);
|
|
|
|
|
+ }
|
|
|
|
|
+ .qz-opt:active { transform: scale(0.98); }
|
|
|
|
|
+ .qz-opt.on { border-color: var(--brand); background: var(--brand-soft); }
|
|
|
|
|
+ .qz-opt .qo-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
+ .qz-opt.on .qo-dot { border-color: var(--brand); }
|
|
|
|
|
+ .qz-opt .qo-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
|
|
|
|
|
+ .qz-opt.on .qo-dot::after { background: var(--brand); }
|
|
|
|
|
+ .qz-opt .qo-t { flex: 1; font-size: var(--fs-base); font-weight: 600; }
|
|
|
|
|
+ .qz-opt .qo-s { font-size: var(--fs-sm); color: var(--ink-3); flex: none; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 风险结果页 */
|
|
|
|
|
+ .risk-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
|
|
|
|
|
+ .risk-hero.low { background: linear-gradient(135deg, #EAF3DE, #C0DD97); }
|
|
|
|
|
+ .risk-hero.mid { background: linear-gradient(135deg, #FFF7ED, #FED7AA); }
|
|
|
|
|
+ .risk-hero.high { background: linear-gradient(135deg, #FCEBEB, #F7C1C1); }
|
|
|
|
|
+ .risk-hero .rh-score { font-size: 46px; font-weight: 800; line-height: 1; }
|
|
|
|
|
+ .risk-hero .rh-unit { font-size: var(--fs-base); font-weight: 600; opacity: 0.7; margin-top: 4px; }
|
|
|
|
|
+ .risk-hero .rh-lv { display: inline-block; margin-top: 12px; background: rgba(255,255,255,0.8); font-size: var(--fs-md); font-weight: 800; padding: 5px 16px; border-radius: var(--r-pill); }
|
|
|
|
|
+ .risk-hero .rh-tip { font-size: var(--fs-sm); margin-top: 10px; opacity: 0.8; }
|
|
|
|
|
+ .risk-factors { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
|
|
|
|
|
+ .rf-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 12px; }
|
|
|
|
|
+ .rf-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
|
|
|
|
|
+ .rf-row + .rf-row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .rf-row .rf-d { font-size: var(--fs-sm); color: var(--ink-2); flex: 1; }
|
|
|
|
|
+ .rf-row .rf-b { width: 56px; height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; flex: none; }
|
|
|
|
|
+ .rf-row .rf-b i { display: block; height: 100%; border-radius: var(--r-pill); }
|
|
|
|
|
+ .rf-row .rf-s { font-size: var(--fs-sm); font-weight: 700; width: 26px; text-align: right; flex: none; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 9.9 陪跑 7 天 */
|
|
|
|
|
+ .prep-card { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; background: linear-gradient(135deg, #FFF7ED, #FFEDD5); box-shadow: var(--sh-2); color: #7C2D12; position: relative; overflow: hidden; }
|
|
|
|
|
+ .prep-card .pc-t { font-size: var(--fs-lg); font-weight: 800; }
|
|
|
|
|
+ .prep-card .pc-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 6px; line-height: 1.5; }
|
|
|
|
|
+ .prep-price { margin-top: 14px; display: flex; align-items: flex-end; gap: 10px; }
|
|
|
|
|
+ .prep-price .pp-n { font-size: 38px; font-weight: 800; line-height: 1; }
|
|
|
|
|
+ .prep-price .pp-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); padding-bottom: 5px; }
|
|
|
|
|
+ .prep-list { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 6px 16px; }
|
|
|
|
|
+ .prep-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; }
|
|
|
|
|
+ .prep-item + .prep-item { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .prep-item .pi-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 7 天打卡格 */
|
|
|
|
|
+ .d7-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin-top: 14px; }
|
|
|
|
|
+ .d7-cell { aspect-ratio: 1; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,0.55); color: rgba(124,45,18,0.4); }
|
|
|
|
|
+ .d7-cell.done { background: var(--brand); color: #fff; }
|
|
|
|
|
+ .d7-cell.today { outline: 2px solid var(--brand); outline-offset: 2px; color: #7C2D12; }
|
|
|
|
|
+ .d7-ach { display: flex; gap: 9px; margin-top: 16px; }
|
|
|
|
|
+ .d7-ach .da { flex: 1; background: rgba(255,255,255,0.62); border-radius: var(--r-md); padding: 11px 6px; text-align: center; }
|
|
|
|
|
+ .d7-ach .da .v { font-size: var(--fs-lg); font-weight: 800; }
|
|
|
|
|
+ .d7-ach .da .l { font-size: var(--fs-xs); color: rgba(124,45,18,0.65); margin-top: 2px; font-weight: 600; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 变化曲线(报告内) */
|
|
|
|
|
+ .trend-box { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
|
|
|
|
|
+ .tb-row { padding: 12px 0; }
|
|
|
|
|
+ .tb-row + .tb-row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .tb-head { display: flex; align-items: baseline; justify-content: space-between; }
|
|
|
|
|
+ .tb-name { font-size: var(--fs-base); font-weight: 700; }
|
|
|
|
|
+ .tb-val { font-size: var(--fs-sm); font-weight: 800; }
|
|
|
|
|
+ .tb-spark { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 9px; }
|
|
|
|
|
+ .tb-spark i { flex: 1; background: var(--brand-soft); border-radius: 3px 3px 0 0; min-height: 4px; }
|
|
|
|
|
+ .tb-spark i.last { background: var(--brand); }
|
|
|
|
|
+ .tb-note { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 9px; line-height: 1.5; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 发现卡(报告) */
|
|
|
|
|
+ .find-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px; }
|
|
|
|
|
+ .find-card .fc-h { display: flex; gap: 9px; align-items: flex-start; }
|
|
|
|
|
+ .find-card .fc-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .find-card .fc-t { font-size: var(--fs-base); font-weight: 700; line-height: 1.4; }
|
|
|
|
|
+ .find-card .fc-obs { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 9px; line-height: 1.6; }
|
|
|
|
|
+ .find-card .fc-tip { margin-top: 10px; background: var(--brand-soft); border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-sm); color: var(--brand-ink); line-height: 1.55; font-weight: 600; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 准备度 */
|
|
|
|
|
+ .chk-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
|
|
|
|
|
+ .chk-row + .chk-row { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .chk-row .ck-ic { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
|
|
|
|
|
+ .chk-row.done .ck-ic { background: var(--ok); color: #fff; }
|
|
|
|
|
+ .chk-row.todo .ck-ic { background: var(--bg-soft); color: var(--ink-3); }
|
|
|
|
|
+ .chk-row .ck-t { flex: 1; font-size: var(--fs-base); font-weight: 600; }
|
|
|
|
|
+ .chk-row .ck-n { font-size: var(--fs-xs); color: var(--ink-3); }
|
|
|
|
|
+
|
|
|
|
|
+ /* 缺口对照 */
|
|
|
|
|
+ .gap-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
|
|
|
+ .gap-col { border-radius: var(--r-md); padding: 13px; }
|
|
|
|
|
+ .gap-col .gc-h { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.5px; margin-bottom: 9px; }
|
|
|
|
|
+ .gap-col.know { background: var(--dim-action-soft); }
|
|
|
|
|
+ .gap-col.know .gc-h { color: var(--ok); }
|
|
|
|
|
+ .gap-col.unk { background: var(--bg-soft); }
|
|
|
|
|
+ .gap-col.unk .gc-h { color: var(--ink-3); }
|
|
|
|
|
+ .gap-col li { font-size: var(--fs-sm); line-height: 1.7; list-style: none; }
|
|
|
|
|
+
|
|
|
|
|
+ /* 检测行动卡 */
|
|
|
|
|
+ .buy-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
|
|
|
|
|
+ .buy-hd { padding: 16px; background: linear-gradient(135deg, #FFF7ED, #FFEDD5); color: #7C2D12; }
|
|
|
|
|
+ .buy-hd .bh-t { font-size: var(--fs-lg); font-weight: 800; }
|
|
|
|
|
+ .buy-hd .bh-p { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
|
|
|
|
|
+ .buy-hd .bh-n { font-size: 30px; font-weight: 800; }
|
|
|
|
|
+ .buy-hd .bh-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); }
|
|
|
|
|
+ .buy-hd .bh-o { font-size: var(--fs-sm); text-decoration: line-through; opacity: 0.6; margin-left: 4px; }
|
|
|
|
|
+ .buy-bd { padding: 6px 16px 16px; }
|
|
|
|
|
+ .buy-line { display: flex; align-items: center; gap: 9px; padding: 11px 0; font-size: var(--fs-sm); }
|
|
|
|
|
+ .buy-line + .buy-line { border-top: 1px solid var(--line); }
|
|
|
|
|
+ .buy-line .bl-t { flex: 1; color: var(--ink-2); }
|
|
|
|
|
+ .buy-line .bl-v { font-weight: 800; }
|
|
|
|
|
+ .installment { margin: 10px 16px 0; background: var(--brand-soft); border-radius: var(--r-md); padding: 13px 15px; display: flex; align-items: center; gap: 11px; }
|
|
|
|
|
+ .installment .in-n { font-size: var(--fs-md); font-weight: 800; color: var(--brand-ink); }
|
|
|
|
|
+ .installment .in-t { font-size: var(--fs-sm); color: var(--brand-ink); opacity: 0.85; margin-top: 2px; }
|
|
|
|
|
+ .why-now { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px; }
|
|
|
|
|
+ .why-now .wn-i { display: flex; gap: 10px; padding: 9px 0; align-items: flex-start; }
|
|
|
|
|
+ .why-now .wn-n { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
|
|
|
|
|
+ .why-now .wn-t { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
|
|
|
|
|
+ .why-now .wn-t b { color: var(--ink); }
|
|
|
|
|
+
|
|
|
|
|
+ .report-hd { padding: 22px 20px 6px; text-align: center; }
|
|
|
|
|
+ .report-hd .rph-big { font-size: 52px; font-weight: 800; line-height: 1; color: #7C2D12; }
|
|
|
|
|
+ .report-hd .rph-sub { font-size: var(--fs-base); color: rgba(124,45,18,0.75); margin-top: 8px; }
|
|
|
|
|
+ .report-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; background: linear-gradient(135deg, #FFF7ED, #FED7AA); box-shadow: var(--sh-2); position: relative; overflow: hidden; }
|
|
|
|
|
+ .report-hero .rp-t { font-size: var(--fs-xl); font-weight: 800; color: #7C2D12; }
|
|
|
|
|
+ .report-hero .rp-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.72); margin-top: 8px; line-height: 1.6; }
|
|
|
|
|
+ .legal { padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; text-align: center; }
|
|
|
|
|
+
|
|
|
|
|
+ @media (prefers-reduced-motion: reduce) {
|
|
|
|
|
+ * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
|
|
|
|
|
+ .screen, .stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
|
|
|
|
|
+ .sp-c, .sp-logo, .sp-body, .sp-dim, .sp-dots span { animation: none !important; }
|
|
|
|
|
+ }
|
|
|
|
|
+ @media (max-width: 360px) {
|
|
|
|
|
+ .ring { width: 116px; height: 116px; }
|
|
|
|
|
+ .ring-wrap { gap: 12px; }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+
|
|
|
|
|
+<!-- 演示态切换 -->
|
|
|
|
|
+<div class="demo-bar">
|
|
|
|
|
+ <button id="db-in" class="on">已登录</button>
|
|
|
|
|
+ <button id="db-out">未登录</button>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<div class="stage">
|
|
|
|
|
+ <div class="notch"></div>
|
|
|
|
|
+ <div class="statusbar">
|
|
|
|
|
+ <span id="clock">9:41</span>
|
|
|
|
|
+ <span class="sb-right">
|
|
|
|
|
+ <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"/><rect x="4.5" y="4.5" width="3" height="7.5" rx="1"/><rect x="9" y="2" width="3" height="10" rx="1"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg>
|
|
|
|
|
+ <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M8 2.4c2.2-1.8 5.3-1.4 6.6 1 .9 1.7.3 4-1.3 5.2C11.2 10.4 9.5 11 8 11 6.5 11 4.8 10.4 2.7 8.6 1.1 7.4.5 5.2 1.4 3.5 2.7 1.1 5.8.6 8 2.4Z"/></svg>
|
|
|
|
|
+ <svg width="24" height="12" viewBox="0 0 24 12" fill="currentColor"><rect x="1" y="1.5" width="19" height="9" rx="2.5"/><rect x="2.5" y="3" width="14" height="6" rx="1" fill="#fff"/><rect x="21" y="4" width="2" height="4" rx="1"/></svg>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="app">
|
|
|
|
|
+ <!-- ============ 首页 / Root ============ -->
|
|
|
|
|
+ <div class="screen active" id="screen-home">
|
|
|
|
|
+ <div class="screen-scroll">
|
|
|
|
|
+ <div class="topbar">
|
|
|
|
|
+ <div class="tb-left">
|
|
|
|
|
+ <span class="tb-greet"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg> 晚上好,林晓</span>
|
|
|
|
|
+ <span class="tb-title">家庭主页</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tb-right">
|
|
|
|
|
+ <div class="member-switch">
|
|
|
|
|
+ <div class="mchip on" data-member="me" onclick="switchMember('me')"><span class="ava" style="background:#F97316">林</span><span class="nm">我</span></div>
|
|
|
|
|
+ <div class="mchip" data-member="yu" onclick="switchMember('yu')"><span class="ava" style="background:#FF7A45">宇</span><span class="nm">小宇</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="icon-btn" onclick="toast('暂无新消息')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="badge"></span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 能量英雄 -->
|
|
|
|
|
+ <div class="energy-hero" onclick="openDim()">
|
|
|
|
|
+ <div class="eh-top">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <div class="eh-label">全家五维能量</div>
|
|
|
|
|
+ <div class="eh-score" id="eh-score">78<small>分</small></div>
|
|
|
|
|
+ <div class="eh-sub" id="eh-sub">较上周 +4 · 身维度领先</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="eh-link" onclick="event.stopPropagation();openOverview()">查看详情 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ring-wrap">
|
|
|
|
|
+ <div class="ring" id="hero-ring"></div>
|
|
|
|
|
+ <div class="dim-bars" id="hero-bars"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Next Best Action -->
|
|
|
|
|
+ <div class="nba" id="nba" onclick="openQuiz()">
|
|
|
|
|
+ <div class="nba-ic" style="background:var(--dim-body-soft);color:var(--dim-body)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg></div>
|
|
|
|
|
+ <div class="nba-info">
|
|
|
|
|
+ <div class="nba-t" id="nba-t">先做五维健康筛查</div>
|
|
|
|
|
+ <div class="nba-s" id="nba-s">肥胖 · 三高 · 痛风 · 便秘 · 腹泻 · 睡眠 · 过敏 · 免费</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="nba-go">去评估 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="nba" onclick="openReport7()">
|
|
|
|
|
+ <div class="nba-ic" style="background:var(--brand-soft);color:var(--brand)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div>
|
|
|
|
|
+ <div class="nba-info">
|
|
|
|
|
+ <div class="nba-t">查看 7 天准备报告</div>
|
|
|
|
|
+ <div class="nba-s">示例:饮食结构 4→7 · 准备度 80%</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="nba-go">看报告 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 今日任务 -->
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">今日任务</span><span class="sec-more" onclick="toast('进入任务中心')">全部 ›</span></div>
|
|
|
|
|
+ <div class="card" id="task-card"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 家庭挑战 -->
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">家庭挑战</span><span class="sec-more" onclick="toast('管理挑战')">管理 ›</span></div>
|
|
|
|
|
+ <div class="card" id="challenge-card"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 家庭动态 -->
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">家庭动态</span></div>
|
|
|
|
|
+ <div class="card" id="feed-card"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 推荐阅读 -->
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">推荐阅读</span><span class="sec-more" onclick="toast('更多文章')">更多 ›</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="hscroll" id="rec-scroll"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 健康 / Root ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-health">
|
|
|
|
|
+ <div class="screen-scroll">
|
|
|
|
|
+ <div class="topbar">
|
|
|
|
|
+ <div class="tb-left"><span class="tb-greet">科学管理全家健康</span><span class="tb-title">健康</span></div>
|
|
|
|
|
+ <div class="tb-right"><div class="icon-btn" onclick="toast('健康洞察')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 16v-5M12 8h.01"/><circle cx="12" cy="12" r="9"/></svg></div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="seg">
|
|
|
|
|
+ <div class="sg on" onclick="setHealthSeg('body',this)">身体</div>
|
|
|
|
|
+ <div class="sg" onclick="setHealthSeg('cognitive',this)">认知</div>
|
|
|
|
|
+ <div class="sg" onclick="setHealthSeg('mental',this)">心理</div>
|
|
|
|
|
+ <div class="sg" onclick="setHealthSeg('wealth',this)">财富</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="radar-card" id="radar-card"></div>
|
|
|
|
|
+ <div class="data-row">
|
|
|
|
|
+ <div class="data-col">
|
|
|
|
|
+ <div class="dc-t" style="cursor:pointer" onclick="openUpload('body')"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--dim-body)" stroke-width="2"><path d="M12 3v18M3 12h18"/><circle cx="12" cy="12" r="9"/></svg> 上传报告</div>
|
|
|
|
|
+ <div id="report-list"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="data-col">
|
|
|
|
|
+ <div class="dc-t"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--dim-wisdom)" stroke-width="2"><path d="M9 11l3 3 8-8"/><path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9"/></svg> 在线测评</div>
|
|
|
|
|
+ <div id="quiz-list"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="section"><div class="sec-head"><span class="sec-title">最近记录</span><span class="sec-more" onclick="toast('全部报告')">查看全部 ›</span></div></div>
|
|
|
|
|
+ <div class="hscroll" id="health-rec"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 成长 / Root ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-growth">
|
|
|
|
|
+ <div class="screen-scroll">
|
|
|
|
|
+ <div class="topbar">
|
|
|
|
|
+ <div class="tb-left"><span class="tb-greet">看见改变正在发生</span><span class="tb-title">成长</span></div>
|
|
|
|
|
+ <div class="tb-right"><div class="icon-btn" onclick="toast('成长档案')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="ach-hero">
|
|
|
|
|
+ <div class="ah-t" id="ach-title">本周成果</div>
|
|
|
|
|
+ <div class="ah-s" id="ach-sub">完成 12 项任务 · 连续打卡 12 天</div>
|
|
|
|
|
+ <div class="ah-ring-wrap">
|
|
|
|
|
+ <div class="ah-ring" id="ach-ring"></div>
|
|
|
|
|
+ <div class="ah-stats">
|
|
|
|
|
+ <div class="ah-stat"><span class="as-v" id="ach-task-v">12</span><span class="as-l">项任务</span><span class="as-bar"><i id="ach-task-b" style="width:60%"></i></span></div>
|
|
|
|
|
+ <div class="ah-stat"><span class="as-v" style="color:var(--dim-wealth)">1,240</span><span class="as-l">成长分</span><span class="as-bar"><i id="ach-pt-b" style="width:72%;background:var(--dim-wealth)"></i></span></div>
|
|
|
|
|
+ <div class="ah-stat"><span class="as-v" style="color:var(--dim-wisdom)">4</span><span class="as-l">枚徽章</span><span class="as-bar"><i id="ach-bg-b" style="width:40%;background:var(--dim-wisdom)"></i></span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="streak" id="ach-streak"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="nba" style="border-left-color:var(--dim-wealth);background:linear-gradient(135deg,#FFF7ED,#FFEDD5)" onclick="openReport()">
|
|
|
|
|
+ <div class="nba-ic" style="background:rgba(255,255,255,0.7);color:var(--dim-wealth)">
|
|
|
|
|
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M8 4v16"/></svg>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="nba-info">
|
|
|
|
|
+ <div class="nba-t" style="color:#7C2D12">本周成长报告已生成</div>
|
|
|
|
|
+ <div class="nba-s" style="color:rgba(124,45,18,0.7)">五维里程碑 · 可保存分享给家人朋友</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="nba-go" style="color:#7C2D12">查看 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">今日成长</span><span class="sec-more" id="growth-date">10-06</span></div>
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div class="today-prog" id="today-prog"></div>
|
|
|
|
|
+ <div style="display:flex;justify-content:space-between;margin-top:14px;font-size:var(--fs-sm);color:var(--ink-2)">
|
|
|
|
|
+ <span id="growth-done">已完成 3/5</span><span style="color:var(--dim-mind);font-weight:600">🔥 连续 12 天</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">今日任务</span><span class="sec-more" onclick="toast('任务中心')">更多 ›</span></div>
|
|
|
|
|
+ <div class="card" style="padding-top:4px;padding-bottom:4px">
|
|
|
|
|
+ <div id="growth-tasks"></div>
|
|
|
|
|
+ <div id="growth-next" style="display:none;margin-top:6px;padding:13px 0 4px;border-top:1px dashed var(--line-strong)">
|
|
|
|
|
+ <div style="display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600">
|
|
|
|
|
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg>
|
|
|
|
|
+ 再完成 <b id="next-n" style="color:var(--brand)">1</b> 项解锁「本周全勤」
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="section"><div class="sec-head"><span class="sec-title">家庭挑战</span></div></div>
|
|
|
|
|
+ <div class="hscroll" id="growth-rec"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 我的 / Root ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-profile">
|
|
|
|
|
+ <div class="screen-scroll">
|
|
|
|
|
+ <div class="topbar" style="background:transparent;border:none;position:relative">
|
|
|
|
|
+ <div class="tb-left"><span class="tb-greet">照顾家庭,从照顾好自己开始</span><span class="tb-title">我的</span></div>
|
|
|
|
|
+ <div class="tb-right"><div class="icon-btn" onclick="toast('设置')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 2.6 14H2.5a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9 2.6V2.5a2 2 0 1 1 4 0v.1A1.6 1.6 0 0 0 17 4.6a1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21.4 12H21.5a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg></div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="id-card">
|
|
|
|
|
+ <div class="id-ava">林</div>
|
|
|
|
|
+ <div class="id-meta">
|
|
|
|
|
+ <div class="id-nm">林晓 <span class="id-lv">黄金会员</span></div>
|
|
|
|
|
+ <div class="id-sub">家长 · 家庭创建者</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="id-pts"><div class="pv">2,480</div><div class="pl">积分</div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="fam-strip" style="margin-top:16px">
|
|
|
|
|
+ <div class="fam-it"><div class="fam-av" style="background:#F97316">林<span class="fam-tag" style="background:#F97316">我</span></div><div class="fam-nm">林晓</div></div>
|
|
|
|
|
+ <div class="fam-it"><div class="fam-av" style="background:#FF7A45">宇<span class="fam-tag" style="background:#FF7A45">子</span></div><div class="fam-nm">小宇</div></div>
|
|
|
|
|
+ <div class="fam-it"><div class="fam-av" style="background:#F2588E">柚<span class="fam-tag" style="background:#F2588E">女</span></div><div class="fam-nm">小柚</div></div>
|
|
|
|
|
+ <div class="fam-it"><div class="fam-av" style="background:#12B981">爷<span class="fam-tag" style="background:#12B981">父</span></div><div class="fam-nm">爷爷</div></div>
|
|
|
|
|
+ <div class="fam-it" onclick="toast('添加成员')"><div class="fam-av add">+</div><div class="fam-nm">添加</div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">我的成就</span></div>
|
|
|
|
|
+ <div class="card"><div class="ach-grid" id="ach-grid"></div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="sec-head"><span class="sec-title">我的订单</span><span class="sec-more" onclick="toast('全部订单')">全部 ›</span></div>
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div style="display:flex;justify-content:space-around;text-align:center">
|
|
|
|
|
+ <div class="tap" style="flex:1" onclick="toast('待付款')"><div style="font-size:var(--fs-lg);font-weight:800">1</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待付款</div></div>
|
|
|
|
|
+ <div class="tap" style="flex:1" onclick="toast('待发货')"><div style="font-size:var(--fs-lg);font-weight:800">0</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待发货</div></div>
|
|
|
|
|
+ <div class="tap" style="flex:1" onclick="toast('待收货')"><div style="font-size:var(--fs-lg);font-weight:800">2</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待收货</div></div>
|
|
|
|
|
+ <div class="tap" style="flex:1" onclick="toast('售后')"><div style="font-size:var(--fs-lg);font-weight:800">0</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">售后</div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="section">
|
|
|
|
|
+ <div class="menu-list">
|
|
|
|
|
+ <div class="menu-row" onclick="toast('服务中心')"><div class="mr-ic" style="background:var(--dim-wisdom-soft);color:var(--dim-wisdom)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V8l7-4 7 4v13"/><path d="M9 21v-6h6v6"/></svg></div><div class="mr-tx">服务中心</div><div class="mr-ar">›</div></div>
|
|
|
|
|
+ <div class="menu-row" onclick="toast('我的报告')"><div class="mr-ic" style="background:var(--dim-body-soft);color:var(--dim-body)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></div><div class="mr-tx">我的报告</div><div class="mr-ar">›</div></div>
|
|
|
|
|
+ <div class="menu-row" onclick="toast('财富中心')"><div class="mr-ic" style="background:var(--dim-wealth-soft);color:var(--dim-wealth)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></div><div class="mr-tx">财富中心</div><div class="mr-ar">›</div></div>
|
|
|
|
|
+ <div class="menu-row" onclick="toast('设置')"><div class="mr-ic" style="background:var(--bg-soft);color:var(--ink-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 2.6 14H2.5a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9 2.6V2.5a2 2 0 1 1 4 0v.1A1.6 1.6 0 0 0 17 4.6a1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21.4 12H21.5a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg></div><div class="mr-tx">设置</div><div class="mr-ar">›</div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 登录(未登录根) ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-login" style="display:none">
|
|
|
|
|
+ <div class="login">
|
|
|
|
|
+ <div class="lg-logo"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
|
|
|
|
|
+ <div class="lg-h">浠艾福</div>
|
|
|
|
|
+ <div class="lg-s">您的专属家庭五维健康管家<br/>先看见,先了解,不等问题发生</div>
|
|
|
|
|
+ <div class="lg-fields">
|
|
|
|
|
+ <div class="field"><span class="fc-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M4 7l8 6 8-6"/></svg></span><input placeholder="手机号 / 邮箱" inputmode="email" autocomplete="username" /></div>
|
|
|
|
|
+ <div class="field"><span class="fc-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span><input placeholder="密码" type="password" autocomplete="current-password" /></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <button class="lg-btn" onclick="demoLogin()">登录 / 注册</button>
|
|
|
|
|
+ <div class="lg-alt">还没有账号?<b onclick="demoLogin()">免费体验 ›</b></div>
|
|
|
|
|
+ <div class="lg-terms">登录即代表同意《用户协议》与《隐私政策》<br/>亿图腾科技出品</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 五维能量总览(深读 · 全屏,隐藏 TabBar) ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-overview">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:24px">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t">五维能量总览</div>
|
|
|
|
|
+ <div class="nb-a" onclick="toast('切换到:本周')">本周</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ov-hero">
|
|
|
|
|
+ <div class="ov-score">
|
|
|
|
|
+ <div class="os-n" id="ov-n">76</div>
|
|
|
|
|
+ <div class="os-u">综合能量</div>
|
|
|
|
|
+ <div class="ov-delta" id="ov-delta">↑ 4 较上周</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ov-cap">全家 4 位成员 · 较上周整体向好,<b>行</b> 维度提升最明显</div>
|
|
|
|
|
+ <div class="ov-radar" id="ov-radar"></div>
|
|
|
|
|
+ <div class="ov-legend" id="ov-legend"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="trend-card">
|
|
|
|
|
+ <div class="trend-tabs" id="ov-trend-tabs">
|
|
|
|
|
+ <div class="tt on" data-range="week" onclick="setOvRange('week', this)">近 7 天</div>
|
|
|
|
|
+ <div class="tt" data-range="month" onclick="setOvRange('month', this)">近 30 天</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="ov-trend"></div>
|
|
|
|
|
+ <div class="trend-legend" id="ov-trend-legend"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">家人对比</div>
|
|
|
|
|
+ <div class="sec-more" onclick="toast('查看全部成员')">全部 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card cmp-list" id="ov-cmp"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">本月行动建议</div>
|
|
|
|
|
+ <div class="sec-more" onclick="toast('已生成专属计划')">生成计划 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="pad" id="ov-adv"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 维度详情(Task 页,隐藏 TabBar) ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-dim">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:24px">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t" id="dim-nav-title">维度详情</div>
|
|
|
|
|
+ <div class="nb-a" onclick="toast('切换成员')">小宇</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="dim-hero-slot"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">关键指标</div>
|
|
|
|
|
+ <div class="sec-more" onclick="openUpload('body')">上传报告 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card" id="dim-metrics"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">本周趋势</div>
|
|
|
|
|
+ <div class="sec-more" onclick="toast('查看历史')">历史 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="trend-card" style="margin-top:0" id="dim-trend"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">今日建议动作</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="pad" id="dim-actions"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">最近记录</div>
|
|
|
|
|
+ <div class="sec-more" onclick="openUpload('')">补充数据 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card" id="dim-records"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 报告上传流程(Task 页) ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-upload">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:0">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="closeUpload()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t">上传健康报告</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="up-steps" id="up-steps"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 步骤1 选择 -->
|
|
|
|
|
+ <div id="up-step-pick">
|
|
|
|
|
+ <div class="up-zone" onclick="pickFile()">
|
|
|
|
|
+ <div class="uz-ic"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/></svg></div>
|
|
|
|
|
+ <div class="uz-t">拍照或选择报告图片</div>
|
|
|
|
|
+ <div class="uz-s">支持体检报告、化验单、影像报告<br/>自动识别关键指标,识别后可修改</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="up-btns" style="padding:0 16px">
|
|
|
|
|
+ <div class="ub pri" onclick="pickFile()"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.4"/></svg>拍照</div>
|
|
|
|
|
+ <div class="ub" onclick="pickFile()"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 3-2 6 4"/></svg>相册</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sec-head section"><div class="sec-title">已上传待确认</div></div>
|
|
|
|
|
+ <div class="card" id="up-pending"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 步骤2 识别中 -->
|
|
|
|
|
+ <div id="up-step-ocr" style="display:none">
|
|
|
|
|
+ <div class="up-preview">
|
|
|
|
|
+ <div class="up-thumb">
|
|
|
|
|
+ <div class="paper">
|
|
|
|
|
+ <div class="pl t"></div><div class="pl"></div><div class="pl"></div><div class="pl" style="width:70%"></div><div class="pl"></div><div class="pl" style="width:60%"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="badge-ok"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>已选</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="up-meta">
|
|
|
|
|
+ <div class="up-fname"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>体检报告_20260928.jpg</div>
|
|
|
|
|
+ <div class="up-fmeta">2.4 MB · 等待识别解析</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ocr-box">
|
|
|
|
|
+ <div style="display:flex;align-items:center;gap:8px">
|
|
|
|
|
+ <div style="font-size:var(--fs-md);font-weight:700">正在智能识别</div>
|
|
|
|
|
+ <div style="margin-left:auto;font-size:var(--fs-sm);font-weight:800;color:var(--brand)" id="ocr-pct">0%</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ocr-bar"><div class="of" id="ocr-fill" style="width:0%"></div></div>
|
|
|
|
|
+ <div style="margin-top:10px" id="ocr-steps"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 步骤3 确认 -->
|
|
|
|
|
+ <div id="up-step-fix" style="display:none">
|
|
|
|
|
+ <div class="ocr-box" style="margin-top:14px">
|
|
|
|
|
+ <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
|
|
|
|
|
+ <div style="font-size:var(--fs-md);font-weight:700">识别结果确认</div>
|
|
|
|
|
+ <div style="margin-left:auto"><span class="low-conf">2 项需确认</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5">已自动填入 6 项指标,标黄项置信度低,请核对</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card" id="up-fix-list"></div>
|
|
|
|
|
+ <div class="card" style="background:var(--brand-soft);box-shadow:none">
|
|
|
|
|
+ <div style="display:flex;gap:10px;align-items:flex-start">
|
|
|
|
|
+ <div style="color:var(--brand);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">数据仅用于家庭健康参考</div>
|
|
|
|
|
+ <div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.8;margin-top:4px;line-height:1.5">报告解读不构成医疗诊断,如有异常请及时就医</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 步骤4 完成 -->
|
|
|
|
|
+ <div id="up-step-done" style="display:none">
|
|
|
|
|
+ <div style="text-align:center;padding:40px 24px 20px">
|
|
|
|
|
+ <div style="width:88px;height:88px;border-radius:50%;background:var(--dim-action-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 18px">
|
|
|
|
|
+ <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="font-size:var(--fs-xl);font-weight:800">报告已归档</div>
|
|
|
|
|
+ <div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:8px;line-height:1.6">已识别 6 项指标并计入「身」维度<br/>综合能量 <b style="color:var(--ok)">+3 分</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card" id="up-done-list"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="up-actions" id="up-actions"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 成长报告与分享(Task 页) ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-report">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:24px">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="backTo('growth')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t">成长报告</div>
|
|
|
|
|
+ <div class="nb-a" onclick="toast('已保存为图片')">保存图片</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="rpt-tabs" id="rpt-tabs">
|
|
|
|
|
+ <div class="rtt on" data-rp="week" onclick="setRptRange('week', this)">本周报告</div>
|
|
|
|
|
+ <div class="rtt" data-rp="month" onclick="setRptRange('month', this)">本月报告</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="rpt-card-slot"></div>
|
|
|
|
|
+ <div class="share-actions" id="rpt-share"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">五维里程碑</div>
|
|
|
|
|
+ <div class="sec-more" onclick="toast('查看全部徽章')">全部 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="badge-grid" id="rpt-badges"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">本周亮点</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card" id="rpt-highlights"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 肠道问卷(0元入口) ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-quiz">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:0">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t">肠道健康自评</div>
|
|
|
|
|
+ <div class="nb-a" onclick="toast('免费 · 不需要付费')">免费</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="qz-prog">
|
|
|
|
|
+ <div class="qp-bar"><i id="qz-bar" style="width:0%"></i></div>
|
|
|
|
|
+ <div class="qp-tx" id="qz-idx">1 / 10</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="qz-wrap">
|
|
|
|
|
+ <div class="qz-q">
|
|
|
|
|
+ <div class="qq-dim" id="qz-dim"></div>
|
|
|
|
|
+ <div class="qq-t" id="qz-title"></div>
|
|
|
|
|
+ <div class="qz-opts" id="qz-opts"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="up-actions" id="qz-actions"></div>
|
|
|
|
|
+ <div class="legal" id="legal-note" style="display:none;padding-top:14px">
|
|
|
|
|
+ 以下问题用于判断是否需要优先就医。本问卷为健康管理筛查参考,<b>不构成医疗诊断</b>。<br/>身体不适请到正规医疗机构就诊。
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 风险结果 + 9.9 陪跑转化 ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-risk">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:24px">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t">你的肠道风险评估</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="risk-slot"></div>
|
|
|
|
|
+ <div id="prep-slot"></div>
|
|
|
|
|
+ <div id="risk-actions"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ 9.9 陪跑 7 天 ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-prep">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:24px">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t">检测前 7 天准备</div>
|
|
|
|
|
+ <div class="nb-a" onclick="toast('9.9 未完成 3 天可退')">可退</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="prep-card">
|
|
|
|
|
+ <div class="pc-t">检测前的肠道准备期</div>
|
|
|
|
|
+ <div class="pc-s">菌群检测有个前提:检测前 3–7 天不能有抗生素、不能大量摄入益生菌、饮食要稳定,否则数据会失真。<b>这 7 天需要有人带你调。</b></div>
|
|
|
|
|
+ <div class="prep-price"><span class="pp-n">9.9</span><span class="pp-u">元 · 7 天陪跑</span></div>
|
|
|
|
|
+ <div class="d7-grid" id="prep-d7"></div>
|
|
|
|
|
+ <div class="d7-ach">
|
|
|
|
|
+ <div class="da"><div class="v">6/7</div><div class="l">已完成</div></div>
|
|
|
|
|
+ <div class="da"><div class="v">4→7</div><div class="l">饮食结构</div></div>
|
|
|
|
|
+ <div class="da"><div class="v">80%</div><div class="l">准备度</div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sec-head section"><div class="sec-title">这 7 天会做什么</div></div>
|
|
|
|
|
+ <div class="prep-list" id="prep-list"></div>
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">第 7 天你将拿到</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="prep-list" id="prep-output"></div>
|
|
|
|
|
+ <div class="card" style="background:var(--brand-soft);box-shadow:none">
|
|
|
|
|
+ <div style="display:flex;gap:10px;align-items:flex-start">
|
|
|
|
|
+ <div style="color:var(--brand);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">9.9 不打折,这是专业流程必需的一段</div>
|
|
|
|
|
+ <div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.82;margin-top:4px;line-height:1.55">检测本身由你自费(¥1980,可分期),我们赠送的是检测前的准备、检测后的专家解读与 90 天干预方案</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ============ D7 报告(转化关键) ============ -->
|
|
|
|
|
+ <div class="screen" id="screen-report7">
|
|
|
|
|
+ <div class="screen-scroll" style="padding-bottom:0">
|
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
|
+ <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
|
|
|
|
|
+ <div class="nb-t">你的第 7 天报告</div>
|
|
|
|
|
+ <div class="nb-a" onclick="toast('已保存为长图')">保存</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 屏1 成就 -->
|
|
|
|
|
+ <div class="report-hd">
|
|
|
|
|
+ <div class="rph-big">6/7</div>
|
|
|
|
|
+ <div class="rph-sub">你完成了 6 天的准备 · 超过 78% 的用户</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="report-hero">
|
|
|
|
|
+ <div class="rp-t">检测这件事,七成功夫在检测之前</div>
|
|
|
|
|
+ <div class="rp-s">你这 7 天做的,正是那七成。<br/>把基础打好了,接下来才能看清肠道里的答案。</div>
|
|
|
|
|
+ <div class="d7-grid" style="margin-top:16px">
|
|
|
|
|
+ <div class="d7-cell done">一</div><div class="d7-cell done">二</div><div class="d7-cell done">三</div>
|
|
|
|
|
+ <div class="d7-cell done">四</div><div class="d7-cell done">五</div><div class="d7-cell done">六</div>
|
|
|
|
|
+ <div class="d7-cell" style="opacity:.35">日</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 屏2 数据 -->
|
|
|
|
|
+ <div class="sec-head section"><div class="sec-title">这 7 天的变化</div></div>
|
|
|
|
|
+ <div class="trend-box" id="d7-trend"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 屏3 发现 -->
|
|
|
|
|
+ <div class="sec-head section"><div class="sec-title">3 个值得注意的模式</div></div>
|
|
|
|
|
+ <div id="d7-finds"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 屏4 准备度 -->
|
|
|
|
|
+ <div class="sec-head section">
|
|
|
|
|
+ <div class="sec-title">检测准备度</div>
|
|
|
|
|
+ <div class="sec-more">4 / 5 项完成</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="trend-box">
|
|
|
|
|
+ <div id="d7-checks"></div>
|
|
|
|
|
+ <div style="text-align:center;padding-top:14px;border-top:1px solid var(--line);margin-top:6px">
|
|
|
|
|
+ <div style="font-size:40px;font-weight:800;color:var(--brand)">80%</div>
|
|
|
|
|
+ <div style="font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px;font-weight:600">准备度良好,可以检测了</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="find-card" style="margin:12px 0 0;box-shadow:none;background:var(--bg-soft)">
|
|
|
|
|
+ <div class="fc-obs" style="margin-top:0">还差最后一步:<b>检测前 24 小时请保持饮食清淡</b>,不要聚餐、不要大量摄入高纤维食品。完成这步,你的检测数据会更可靠。</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 屏5 缺口 -->
|
|
|
|
|
+ <div class="sec-head section"><div class="sec-title">这 7 天解决了基础,但回答不了根本</div></div>
|
|
|
|
|
+ <div class="gap-2col" style="margin:0 16px">
|
|
|
|
|
+ <div class="gap-col know"><div class="gc-h">你已知道</div>
|
|
|
|
|
+ <li>饮食结构在改善</li><li>腹胀在减轻</li><li>作息开始规律</li></div>
|
|
|
|
|
+ <div class="gap-col unk"><div class="gc-h">你还不知道</div>
|
|
|
|
|
+ <li>菌群多样性水平</li><li>哪些菌在减少</li><li>肠道问题根源</li></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="find-card">
|
|
|
|
|
+ <div class="fc-obs">说到底,这 7 天你做的是<b>改善环境</b>。但环境变好了,<b>里面住着的东西变没变?</b></div>
|
|
|
|
|
+ <div class="fc-tip">单靠调整饮食,你是在盲调。检测,是把盲调变成精准调整的第一步。</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 屏6 行动 -->
|
|
|
|
|
+ <div class="sec-head section"><div class="sec-title">为什么现在做最合适</div></div>
|
|
|
|
|
+ <div class="why-now">
|
|
|
|
|
+ <div class="wn-i"><div class="wn-n">1</div><div class="wn-t">这 7 天的改善<b>能被检测看见</b>——如果拖到下个月再看,这 7 天的效果就看不出来了</div></div>
|
|
|
|
|
+ <div class="wn-i"><div class="wn-n">2</div><div class="wn-t">准备度已达 <b>80%</b>——再晚,检测前干扰因素会降低数据准确性</div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="buy-card">
|
|
|
|
|
+ <div class="buy-hd">
|
|
|
|
|
+ <div class="bh-t">肠道菌群检测</div>
|
|
|
|
|
+ <div class="bh-p"><span class="bh-n">¥1980</span><span class="bh-u">检测机构收取</span><span class="bh-o">已抵扣 9.9</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="buy-bd">
|
|
|
|
|
+ <div class="buy-line"><span class="bl-t">采样盒</span><span class="bl-v" style="color:var(--ok)">免邮寄送</span></div>
|
|
|
|
|
+ <div class="buy-line"><span class="bl-t">专业机构检测 + 报告</span><span class="bl-v">含</span></div>
|
|
|
|
|
+ <div class="buy-line"><span class="bl-t">专家逐项解读(30 分钟)</span><span class="bl-v" style="color:var(--ok)">我们赠送</span></div>
|
|
|
|
|
+ <div class="buy-line"><span class="bl-t">90 天干预方案</span><span class="bl-v" style="color:var(--ok)">我们赠送</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="installment">
|
|
|
|
|
+ <div style="color:var(--brand);flex:none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg></div>
|
|
|
|
|
+ <div><div class="in-n">可分期 · ¥660 × 3 期</div><div class="in-t">月付约 20 元 / 天,不收利息</div></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div style="display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--fs-sm)">
|
|
|
|
|
+ <span style="color:var(--ok)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></span>
|
|
|
|
|
+ <span style="color:var(--ink-2)">检测前随时可退 · 检测后 48 小时内可退</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--fs-sm)">
|
|
|
|
|
+ <span style="color:var(--ok)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></span>
|
|
|
|
|
+ <span style="color:var(--ink-2)">不需要自己去医院,采样盒寄回家</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="up-actions">
|
|
|
|
|
+ <button class="btn-primary" onclick="toast('进入检测预约')">立即预约检测</button>
|
|
|
|
|
+ <button class="btn-ghost" onclick="backTo('home')">再想想</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="legal">本报告基于健康管理目的生成,不构成医疗诊断或治疗建议<br/>肠道菌群检测为健康管理参考,不用于疾病诊断</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 五维抽屉 -->
|
|
|
|
|
+ <div class="sheet-mask" id="dim-mask" onclick="closeDim()"></div>
|
|
|
|
|
+ <div class="sheet" id="dim-sheet">
|
|
|
|
|
+ <div class="sheet-grip"></div>
|
|
|
|
|
+ <div class="sheet-title">五维能量</div>
|
|
|
|
|
+ <div class="sheet-sub">身·心·智·行·富,看见全家看得见的健康闭环</div>
|
|
|
|
|
+ <div class="dim-grid" id="dim-grid"></div>
|
|
|
|
|
+ <div id="dim-more" style="display:none;margin-top:14px">
|
|
|
|
|
+ <button class="btn-primary" style="display:flex;align-items:center;justify-content:center;gap:7px" onclick="openOverviewFromSheet()">
|
|
|
|
|
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/></svg>
|
|
|
|
|
+ 展开五维总览
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <div style="text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px">雷达 · 趋势 · 家人对比 · 行动建议</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 自定义 TabBar -->
|
|
|
|
|
+ <div class="tabbar" id="tabbar">
|
|
|
|
|
+ <div class="tab on" data-tab="home" onclick="setTab('home')">
|
|
|
|
|
+ <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/><path d="M9.5 21v-6h5v6"/></svg></span>
|
|
|
|
|
+ <span class="t-tx">首页</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tab" data-tab="health" onclick="setTab('health')">
|
|
|
|
|
+ <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20s-7-4.4-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.6 12 20 12 20z"/><path d="M5 12h3l2-3 2.5 4 1.5-2H20" stroke-width="1.6"/></svg></span>
|
|
|
|
|
+ <span class="t-tx">健康</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tab-center" onclick="openDim()">
|
|
|
|
|
+ <div class="c-btn"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
|
|
|
|
|
+ <div class="c-tx">五维</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tab" data-tab="growth" onclick="setTab('growth')">
|
|
|
|
|
+ <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/></svg></span>
|
|
|
|
|
+ <span class="t-tx">成长</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tab" data-tab="profile" onclick="setTab('profile')">
|
|
|
|
|
+ <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg></span>
|
|
|
|
|
+ <span class="t-tx">我的</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="toast" id="toast"></div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 成果解锁横幅(完成任务/达成成就时浮现) -->
|
|
|
|
|
+ <div class="unlock-toast" id="unlock-toast">
|
|
|
|
|
+ <div class="ut-ic" id="unlock-ic"></div>
|
|
|
|
|
+ <div style="flex:1;min-width:0">
|
|
|
|
|
+ <div class="ut-t" id="unlock-t">成就解锁</div>
|
|
|
|
|
+ <div class="ut-s" id="unlock-s"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div onclick="openReport()" style="flex:none;font-size:var(--fs-sm);font-weight:800;color:#7C2D12">分享 ›</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 闪屏(还原原 flash 页暖色基因,作为进入 App 的第一屏) -->
|
|
|
|
|
+ <div id="splash" onclick="hideSplash()">
|
|
|
|
|
+ <div class="sp-bg">
|
|
|
|
|
+ <span class="sp-c sp-c1"></span>
|
|
|
|
|
+ <span class="sp-c sp-c2"></span>
|
|
|
|
|
+ <span class="sp-c sp-c3"></span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sp-body">
|
|
|
|
|
+ <div class="sp-logo"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
|
|
|
|
|
+ <div class="sp-name">浠艾福</div>
|
|
|
|
|
+ <div class="sp-en">Care Family</div>
|
|
|
|
|
+ <div class="sp-id">看见全家 · 了解健康 · 主动管理</div>
|
|
|
|
|
+ <div class="sp-dims">
|
|
|
|
|
+ <div class="sp-dim"><span class="sp-dc" style="background:#FF8C42">身</span></div>
|
|
|
|
|
+ <div class="sp-dim"><span class="sp-dc" style="background:#FF6B9D">心</span></div>
|
|
|
|
|
+ <div class="sp-dim"><span class="sp-dc" style="background:#6366F1">智</span></div>
|
|
|
|
|
+ <div class="sp-dim"><span class="sp-dc" style="background:#10B981">行</span></div>
|
|
|
|
|
+ <div class="sp-dim"><span class="sp-dc" style="background:#F59E0B">富</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sp-tag">家里每个人的状态,你真的看见了?</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sp-dots"><span></span><span></span><span></span></div>
|
|
|
|
|
+ <div class="sp-enter">轻触进入</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ /* ============ 数据(演示,已去个人化) ============ */
|
|
|
|
|
+ var DIMS = [
|
|
|
|
|
+ { code:'body', name:'身', desc:'主动健康', color:'var(--dim-body)', soft:'var(--dim-body-soft)', score:84 },
|
|
|
|
|
+ { code:'mind', name:'心', desc:'大爱相随', color:'var(--dim-mind)', soft:'var(--dim-mind-soft)', score:72 },
|
|
|
|
|
+ { code:'wisdom', name:'智', desc:'赋能未来', color:'var(--dim-wisdom)', soft:'var(--dim-wisdom-soft)', score:79 },
|
|
|
|
|
+ { code:'action', name:'行', desc:'人际和谐', color:'var(--dim-action)', soft:'var(--dim-action-soft)', score:68 },
|
|
|
|
|
+ { code:'wealth', name:'富', desc:'利他创富', color:'var(--dim-wealth)', soft:'var(--dim-wealth-soft)', score:75 }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var TASKS = [
|
|
|
|
|
+ { title:'陪小宇完成 20 分钟跳绳', pts:10, dim:'body' },
|
|
|
|
|
+ { title:'小柚英语绘本阅读', pts:8, dim:'wisdom' },
|
|
|
|
|
+ { title:'家庭晚餐不玩手机', pts:5, dim:'action' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var CHALLENGES = [
|
|
|
|
|
+ { title:'21 天亲子共读', prog:14, total:21, dim:'wisdom' },
|
|
|
|
|
+ { title:'全家每周运动 3 次', prog:2, total:3, dim:'body' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var FEED = [
|
|
|
|
|
+ { icon:'check', color:'var(--dim-body)', text:'<b>小宇</b> 完成「跳绳打卡」 +10 分', time:'12 分钟前' },
|
|
|
|
|
+ { icon:'star', color:'var(--dim-wisdom)', text:'<b>小柚</b> 认知测评得分 85', time:'1 小时前' },
|
|
|
|
|
+ { icon:'heart', color:'var(--dim-mind)', text:'<b>爷爷</b> 完成今日情绪打卡', time:'今天 08:30' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var RECS = [
|
|
|
|
|
+ { cat:'主动健康', c:1, t:'孩子挑食怎么办?3 个温和的引导法', meta:'1.2万 阅读', bg:'var(--dim-body)' },
|
|
|
|
|
+ { cat:'赋能未来', c:2, t:'0-12 岁专注力培养路线图', meta:'8621 阅读', bg:'var(--dim-wisdom)' },
|
|
|
|
|
+ { cat:'人际和谐', c:3, t:'把“你怎么又…”换成这样说话', meta:'1.5万 阅读', bg:'var(--dim-action)' },
|
|
|
|
|
+ { cat:'大爱相随', c:4, t:'父母的情绪,是家的天气', meta:'2.3万 阅读', bg:'var(--dim-mind)' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var ACH = [
|
|
|
|
|
+ { ic:'coin', c:'var(--dim-wealth)', v:'2480', l:'积分' },
|
|
|
|
|
+ { ic:'flame', c:'var(--dim-mind)', v:'12', l:'连续打卡' },
|
|
|
|
|
+ { ic:'check', c:'var(--brand)', v:'48', l:'完成任务' },
|
|
|
|
|
+ { ic:'gift', c:'var(--dim-wealth)', v:'9', l:'获得奖励' },
|
|
|
|
|
+ { ic:'medal', c:'var(--dim-mind)', v:'6', l:'勋章' },
|
|
|
|
|
+ { ic:'book', c:'var(--dim-action)', v:'23', l:'成长记录' },
|
|
|
|
|
+ { ic:'target', c:'var(--brand)', v:'3', l:'挑战' },
|
|
|
|
|
+ { ic:'upload', c:'var(--dim-body)', v:'11', l:'报告' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var PROG = [
|
|
|
|
|
+ { ic:'diet', c:'var(--dim-body)', l:'饮食记录', done:true },
|
|
|
|
|
+ { ic:'run', c:'var(--dim-body)', l:'运动打卡', done:true },
|
|
|
|
|
+ { ic:'moon', c:'var(--dim-mind)', l:'睡眠记录', done:true },
|
|
|
|
|
+ { ic:'smile', c:'var(--dim-mind)', l:'情绪打卡', done:false },
|
|
|
|
|
+ { ic:'bulb', c:'var(--dim-wisdom)', l:'专注练习', done:false },
|
|
|
|
|
+ { ic:'people', c:'var(--dim-action)', l:'互动记录', done:false }
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 新增:五维总览 / 维度详情 / 上传 / 报告 数据 ===== */
|
|
|
|
|
+ var TREND = {
|
|
|
|
|
+ week: {
|
|
|
|
|
+ labels: ['周一','周二','周三','周四','周五','周六','周日'],
|
|
|
|
|
+ lines: [
|
|
|
|
|
+ { name:'综合', color:'var(--brand)', data:[72,73,75,74,76,75,76] },
|
|
|
|
|
+ { name:'身', color:'var(--dim-body)', data:[80,81,82,81,84,83,84] },
|
|
|
|
|
+ { name:'心', color:'var(--dim-mind)', data:[68,70,69,71,72,71,72] }
|
|
|
|
|
+ ]
|
|
|
|
|
+ },
|
|
|
|
|
+ month: {
|
|
|
|
|
+ labels: ['1日','5日','10日','15日','20日','25日','30日'],
|
|
|
|
|
+ lines: [
|
|
|
|
|
+ { name:'综合', color:'var(--brand)', data:[70,71,73,72,74,75,76] },
|
|
|
|
|
+ { name:'身', color:'var(--dim-body)', data:[78,79,81,80,82,83,84] },
|
|
|
|
|
+ { name:'心', color:'var(--dim-mind)', data:[66,68,67,70,71,71,72] }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ var FAMILY = [
|
|
|
|
|
+ { name:'小宇', role:'儿子 · 10 岁', score:84, color:'var(--dim-body)', dim:'body' },
|
|
|
|
|
+ { name:'小柚', role:'女儿 · 7 岁', score:79, color:'var(--dim-wisdom)', dim:'wisdom' },
|
|
|
|
|
+ { name:'爷爷', role:'父亲 · 68 岁', score:68, color:'var(--dim-action)', dim:'action' },
|
|
|
|
|
+ { name:'妈妈', role:'本人', score:72, color:'var(--dim-mind)', dim:'mind' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var ADVICE = [
|
|
|
|
|
+ { dim:'action', icon:'people', pri:'高', priColor:'var(--danger)', priSoft:'rgba(239,83,80,0.12)', t:'本周家庭互动偏少', s:'「行」维度 4 天未记录互动,建议每天 15 分钟无手机陪伴对话' },
|
|
|
|
|
+ { dim:'mind', icon:'moon', pri:'中', priColor:'#B45309', priSoft:'rgba(245,158,11,0.14)', t:'爷爷睡眠时长不足', s:'近 7 天平均 6.2 小时,建议固定就寝时间并晚间减少摄入' },
|
|
|
|
|
+ { dim:'body', icon:'run', pri:'中', priColor:'#B45309', priSoft:'rgba(245,245,158,0.6)', t:'小宇运动量达标', s:'本周运动 4 次达标,保持每周 3 次以上的节奏' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var DIM_METRICS = {
|
|
|
|
|
+ body: [
|
|
|
|
|
+ { n:'BMI', v:'18.6', r:'正常范围 18.5-23.9', ref:'ok', unit:'' },
|
|
|
|
|
+ { n:'血压', v:'112/68', r:'低于 120/80 理想值', ref:'ok', unit:'mmHg' },
|
|
|
|
|
+ { n:'静息心率', v:'72', r:'略高于同龄均值 68', ref:'mid', unit:'bpm' },
|
|
|
|
|
+ { n:'维生素 D', v:'22.4', r:'低于建议下限 30', ref:'hi', unit:'ng/mL' }
|
|
|
|
|
+ ],
|
|
|
|
|
+ mind: [
|
|
|
|
|
+ { n:'情绪稳定性', v:'72', r:'较上周 +5', ref:'ok', unit:'分' },
|
|
|
|
|
+ { n:'平均睡眠', v:'6.8', r:'低于建议 7-9 小时', ref:'mid', unit:'小时' },
|
|
|
|
|
+ { n:'压力感知', v:'偏高', r:'近 3 次自评持续偏高', ref:'hi', unit:'' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ };
|
|
|
|
|
+ var DIM_ACTIONS = {
|
|
|
|
|
+ body: [
|
|
|
|
|
+ { t:'每日 6000 步', s:'今日已 4200 步,还差 1800 步', ic:'run', c:'var(--dim-body)' },
|
|
|
|
|
+ { t:'早餐补充优质蛋白', s:'鸡蛋 1 个 + 豆浆 250ml', ic:'diet', c:'var(--dim-body)' },
|
|
|
|
|
+ { t:'晒太阳 15 分钟', s:'维生素 D 偏低,建议上午户外', ic:'bulb', c:'var(--dim-action)' }
|
|
|
|
|
+ ],
|
|
|
|
|
+ mind: [
|
|
|
|
|
+ { t:'记录今日情绪', s:'30 秒快速打卡', ic:'smile', c:'var(--dim-mind)' },
|
|
|
|
|
+ { t:'4-7-8 呼吸练习', s:'睡前 3 轮,改善入睡', ic:'moon', c:'var(--dim-mind)' },
|
|
|
|
|
+ { t:'亲子对话 15 分钟', s:'放下手机,专心倾听', ic:'people', c:'var(--dim-action)' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ };
|
|
|
|
|
+ var DIM_RECORDS = {
|
|
|
|
|
+ body: [
|
|
|
|
|
+ { t:'跳绳打卡', m:'今天 17:20 · 200 个', ic:'run', c:'var(--dim-body)' },
|
|
|
|
|
+ { t:'饮食记录', m:'今天 12:10 · 3 餐已记录', ic:'diet', c:'var(--dim-body)' },
|
|
|
|
|
+ { t:'体检报告解析', m:'9-28 · 6 项指标已归档', ic:'upload', c:'var(--dim-body)' }
|
|
|
|
|
+ ],
|
|
|
|
|
+ mind: [
|
|
|
|
|
+ { t:'情绪打卡', m:'今天 08:30 · 心情平稳', ic:'smile', c:'var(--dim-mind)' },
|
|
|
|
|
+ { t:'睡眠记录', m:'今天 07:10 · 7 小时 20 分', ic:'moon', c:'var(--dim-mind)' },
|
|
|
|
|
+ { t:'冥想练习', m:'昨天 21:40 · 8 分钟', ic:'flame', c:'var(--dim-mind)' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ };
|
|
|
|
|
+ var BADGES = [
|
|
|
|
|
+ { n:'连续打卡 7 天', d:'已完成', ic:'flame', c:'var(--dim-mind)', locked:false },
|
|
|
|
|
+ { n:'五维首次全测', d:'已完成', ic:'check', c:'var(--dim-body)', locked:false },
|
|
|
|
|
+ { n:'亲子共读 21 天', d:'14/21 天', ic:'book', c:'var(--dim-wisdom)', locked:false },
|
|
|
|
|
+ { n:'运动达人', d:'本周 4 次达标', ic:'run', c:'var(--dim-action)', locked:false },
|
|
|
|
|
+ { n:'健康档案师', d:'上传 10 份报告', ic:'upload', c:'var(--dim-body)', locked:true },
|
|
|
|
|
+ { n:'财富启蒙', d:'完成 5 课', ic:'coin', c:'var(--dim-wealth)', locked:true }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var OCR_STEPS = [
|
|
|
|
|
+ { t:'图像预处理与矫正', ms:400 },
|
|
|
|
|
+ { t:'定位表格与字段区域', ms:600 },
|
|
|
|
|
+ { t:'识别文字与数值', ms:900 },
|
|
|
|
|
+ { t:'匹配健康指标库', ms:500 }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var FIX_FIELDS = [
|
|
|
|
|
+ { n:'身高', v:'142', u:'cm', low:true },
|
|
|
|
|
+ { n:'体重', v:'37.6', u:'kg', low:true },
|
|
|
|
|
+ { n:'收缩压', v:'112', u:'mmHg', low:false },
|
|
|
|
|
+ { n:'舒张压', v:'68', u:'mmHg', low:false },
|
|
|
|
|
+ { n:'静息心率', v:'72', u:'bpm', low:false },
|
|
|
|
|
+ { n:'血红蛋白', v:'132', u:'g/L', low:false }
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
|
|
+ function svgUse(icon, size) {
|
|
|
|
|
+ return '<svg width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-'+icon+'"/></svg>';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 五维能量环(5 段同心弧) ===== */
|
|
|
|
|
+ function buildRing(el, scores, size) {
|
|
|
|
|
+ var ns='http://www.w3.org/2000/svg';
|
|
|
|
|
+ var cx=size/2, cy=size/2;
|
|
|
|
|
+ var html='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">';
|
|
|
|
|
+ var gap=7, maxR=size/2-6;
|
|
|
|
|
+ scores.forEach(function(d,i){
|
|
|
|
|
+ var r=maxR-i*(gap+8);
|
|
|
|
|
+ var c=2*Math.PI*r;
|
|
|
|
|
+ var frac=Math.max(0.04, d.score/100);
|
|
|
|
|
+ html+='<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="7"/>';
|
|
|
|
|
+ html+='<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="'+d.color+'" stroke-width="7" stroke-linecap="round" '+
|
|
|
|
|
+ 'stroke-dasharray="'+(c*frac)+' '+(c-c*frac)+'" transform="rotate(-90 '+cx+' '+cy+')" style="transition:stroke-dasharray .6s cubic-bezier(.23,1,.32,1)"/>';
|
|
|
|
|
+ });
|
|
|
|
|
+ html+='</svg>';
|
|
|
|
|
+ html+='<div class="ring-center"><div class="rc-val">'+ (Math.round(scores.reduce(function(s,d){return s+d.score},0)/scores.length)) +'</div><div class="rc-lab">综合能量</div></div>';
|
|
|
|
|
+ el.innerHTML=html;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 渲染各模块 ===== */
|
|
|
|
|
+ function renderHome() {
|
|
|
|
|
+ buildRing(document.getElementById('hero-ring'), DIMS, 132);
|
|
|
|
|
+ var bars='';
|
|
|
|
|
+ DIMS.forEach(function(d){
|
|
|
|
|
+ bars+='<div class="dbar"><span class="dl">'+d.name+'</span><div class="dt"><div class="df" style="width:'+d.score+'%;background:'+d.color+'"></div></div><span class="dv">'+d.score+'</span></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('hero-bars').innerHTML=bars;
|
|
|
|
|
+
|
|
|
|
|
+ var tc=document.getElementById('task-card');
|
|
|
|
|
+ if (!TASKS.length) {
|
|
|
|
|
+ tc.innerHTML='<div class="empty-state"><div class="es-ic">'+svgUse('check',28)+'</div><div class="es-t">今日任务已清空</div><div class="es-s">去任务中心看看,保持成长节奏</div></div>';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ tc.className='card stagger';
|
|
|
|
|
+ tc.innerHTML=TASKS.map(function(t){
|
|
|
|
|
+ return '<div class="row"><div class="rk" style="background:'+dimSoft(t.dim)+';color:'+dimColor(t.dim)+'">'+svgUse('target',18)+'</div>'+
|
|
|
|
|
+ '<div class="ri"><div class="rt">'+t.title+'</div><div class="rm">+'+t.pts+' 成长分</div></div>'+
|
|
|
|
|
+ '<button class="pill-btn" onclick="completeTask(this)">完成</button></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ var cc=document.getElementById('challenge-card');
|
|
|
|
|
+ cc.className='card stagger';
|
|
|
|
|
+ cc.innerHTML=CHALLENGES.map(function(ch){
|
|
|
|
|
+ var pct=Math.round(ch.prog/ch.total*100);
|
|
|
|
|
+ return '<div class="row"><div class="rk" style="background:'+dimSoft(ch.dim)+';color:'+dimColor(ch.dim)+'">'+svgUse('target',18)+'</div>'+
|
|
|
|
|
+ '<div class="ri"><div class="rt">'+ch.title+'</div><div class="rm">'+ch.prog+' / '+ch.total+' · '+pct+'%</div>'+
|
|
|
|
|
+ '<div style="flex:1;height:6px;background:var(--bg-soft);border-radius:99px;margin-left:8px;max-width:80px"><div style="height:100%;width:'+pct+'%;background:'+dimColor(ch.dim)+';border-radius:99px"></div></div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('feed-card').innerHTML=FEED.map(function(f){
|
|
|
|
|
+ return '<div class="feed-item"><div class="feed-dot" style="color:'+f.color+'">'+svgUse(f.icon,16)+'</div>'+
|
|
|
|
|
+ '<div style="flex:1"><div class="fi-t">'+f.text+'</div><div class="fi-time">'+f.time+'</div></div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('rec-scroll').innerHTML=RECS.map(function(r){
|
|
|
|
|
+ return '<div class="rec-card" onclick="toast(\'打开文章\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+r.bg+','+r.bg+'99)"></div>'+
|
|
|
|
|
+ '<div class="rec-body"><span class="rec-cat" style="background:'+r.bg+'22;color:'+r.bg+'">'+r.cat+'</span>'+
|
|
|
|
|
+ '<div class="rec-tt">'+r.t+'</div><div class="rec-meta">'+r.meta+'</div></div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderHealth() {
|
|
|
|
|
+ // 简易雷达(六边形示意)
|
|
|
|
|
+ var size=240, cx=size/2, cy=size/2, R=size/2-30;
|
|
|
|
|
+ var labels=['生长','睡眠','视力','免疫','营养','运动'];
|
|
|
|
|
+ var vals=[84,72,78,80,70,82];
|
|
|
|
|
+ var n=labels.length, pts=[], pts2=[];
|
|
|
|
|
+ for (var i=0;i<n;i++){
|
|
|
|
|
+ var a=-Math.PI/2 + i*2*Math.PI/n;
|
|
|
|
|
+ pts.push((cx+Math.cos(a)*R).toFixed(1)+','+(cy+Math.sin(a)*R).toFixed(1));
|
|
|
|
|
+ pts2.push((cx+Math.cos(a)*R*vals[i]/100).toFixed(1)+','+(cy+Math.sin(a)*R*vals[i]/100).toFixed(1));
|
|
|
|
|
+ }
|
|
|
|
|
+ var grid='';
|
|
|
|
|
+ [0.25,0.5,0.75,1].forEach(function(f){
|
|
|
|
|
+ var p=[]; for(var i=0;i<n;i++){var a=-Math.PI/2+i*2*Math.PI/n; p.push((cx+Math.cos(a)*R*f).toFixed(1)+','+(cy+Math.sin(a)*R*f).toFixed(1));}
|
|
|
|
|
+ grid+='<polygon points="'+p.join(' ')+'" fill="none" stroke="#EAEDF4"/>';
|
|
|
|
|
+ });
|
|
|
|
|
+ var lbls='';
|
|
|
|
|
+ for(var i=0;i<n;i++){var a=-Math.PI/2+i*2*Math.PI/n; lbls+='<text x="'+(cx+Math.cos(a)*(R+16)).toFixed(1)+'" y="'+(cy+Math.sin(a)*(R+16)+4).toFixed(1)+'" font-size="10" fill="#B49A83" text-anchor="middle">'+labels[i]+'</text>';}
|
|
|
|
|
+ document.getElementById('radar-card').innerHTML=
|
|
|
|
|
+ '<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">'+grid+
|
|
|
|
|
+ '<polygon points="'+pts2.join(' ')+'" fill="rgba(255,140,66,0.18)" stroke="var(--dim-body)" stroke-width="2"/>'+
|
|
|
|
|
+ '<polygon points="'+pts.join(' ')+'" fill="none" stroke="#EAEDF4" stroke-width="1.5"/>'+lbls+'</svg>'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px">身体维度 · 综合 78 分</div>';
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('report-list').innerHTML=
|
|
|
|
|
+ '<div class="row" style="padding:10px 0"><div class="rk" style="background:var(--dim-body-soft);color:var(--dim-body)">'+svgUse('upload',16)+'</div><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">体检报告</div><div class="rm">9-28 已解析</div></div></div>'+
|
|
|
|
|
+ '<div class="row" style="padding:10px 0"><div class="rk" style="background:var(--dim-wisdom-soft);color:var(--dim-wisdom)">'+svgUse('bulb',16)+'</div><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">菌群检测</div><div class="rm">待确认</div></div></div>';
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('quiz-list').innerHTML=
|
|
|
|
|
+ '<div class="row" style="padding:10px 0"><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">认知能力测评</div></div><button class="pill-btn" onclick="toast(\'开始测评\')">开始</button></div>'+
|
|
|
|
|
+ '<div class="row" style="padding:10px 0"><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">心理健康测评</div></div><button class="pill-btn" onclick="toast(\'开始测评\')">开始</button></div>';
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('health-rec').innerHTML=RECS.slice(0,3).map(function(r){
|
|
|
|
|
+ return '<div class="rec-card" onclick="toast(\'查看报告\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+r.bg+','+r.bg+'99)"></div><div class="rec-body"><span class="rec-cat" style="background:'+r.bg+'22;color:'+r.bg+'">'+r.cat+'</span><div class="rec-tt">'+r.t+'</div><div class="rec-meta">'+r.meta+'</div></div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 成果状态(可累积,驱动继续完成) ===== */
|
|
|
|
|
+ var growthState={ doneTasks:{}, baseTasks:12, streak:12, pts:1240, unlocked:false };
|
|
|
|
|
+ var WEEK_DAYS=['一','二','三','四','五','六','日'];
|
|
|
|
|
+
|
|
|
|
|
+ function renderGrowth() {
|
|
|
|
|
+ document.getElementById('today-prog').innerHTML=PROG.map(function(p,i){
|
|
|
|
|
+ return '<div class="tp-item" onclick="toast(\''+(p.done?'已记录':'去记录')+'\')"><div class="tp-ic" style="background:'+p.c+'1a;color:'+p.c+'">'+svgUse(p.ic,18)+'</div>'+
|
|
|
|
|
+ '<div style="flex:1"><div class="tp-l">'+p.l+'</div><div class="tp-st '+(p.done?'done':'pend')+'">'+(p.done?'已完成':'去记录')+'</div></div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+
|
|
|
|
|
+ renderGrowthTasks();
|
|
|
|
|
+ renderGrowthRec();
|
|
|
|
|
+ renderAchievementHero();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderGrowthTasks(){
|
|
|
|
|
+ var html=TASKS.map(function(t,i){
|
|
|
|
|
+ var done=!!growthState.doneTasks[i];
|
|
|
|
|
+ return '<div class="task-item'+(done?' done just-done':'')+'" data-i="'+i+'">'+
|
|
|
|
|
+ '<button class="tk-ck" onclick="doCompleteTask('+i+', this)">'+(done?checkSvg():'')+'</button>'+
|
|
|
|
|
+ '<div class="tk-bd"><div class="tk-t">'+t.title+'</div>'+
|
|
|
|
|
+ '<div class="tk-m"><span>'+(done?'已完成 · 家人可看到':'小宇 · 待完成')+'</span></div></div>'+
|
|
|
|
|
+ '<div class="tk-pts">+'+t.pts+'</div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ document.getElementById('growth-tasks').innerHTML=html;
|
|
|
|
|
+ // 已完成数量与"再完成N项"驱动
|
|
|
|
|
+ var doneN=Object.keys(growthState.doneTasks).length;
|
|
|
|
|
+ var total=TASKS.length;
|
|
|
|
|
+ var next=document.getElementById('growth-next');
|
|
|
|
|
+ if (doneN>0 && doneN<total){
|
|
|
|
|
+ next.style.display='block';
|
|
|
|
|
+ document.getElementById('next-n').textContent=(total-doneN);
|
|
|
|
|
+ } else if (doneN>=total){
|
|
|
|
|
+ next.style.display='block';
|
|
|
|
|
+ document.getElementById('next-n').textContent='0';
|
|
|
|
|
+ next.querySelector('div').lastChild.textContent=' 全部完成,成果已解锁 🎉';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ next.style.display='none';
|
|
|
|
|
+ }
|
|
|
|
|
+ // 清理 just-done 动画类
|
|
|
|
|
+ setTimeout(function(){
|
|
|
|
|
+ document.querySelectorAll('#growth-tasks .just-done').forEach(function(el){ el.classList.remove('just-done'); });
|
|
|
|
|
+ }, 1200);
|
|
|
|
|
+ }
|
|
|
|
|
+ function checkSvg(){
|
|
|
|
|
+ return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function doCompleteTask(i, btn){
|
|
|
|
|
+ if (growthState.doneTasks[i]) return;
|
|
|
|
|
+ growthState.doneTasks[i]=true;
|
|
|
|
|
+ var t=TASKS[i];
|
|
|
|
|
+ growthState.pts += t.pts;
|
|
|
|
|
+ renderGrowthTasks();
|
|
|
|
|
+ renderAchievementHero();
|
|
|
|
|
+ var doneN=Object.keys(growthState.doneTasks).length;
|
|
|
|
|
+
|
|
|
|
|
+ if (!growthState.unlocked && doneN>=2){
|
|
|
|
|
+ growthState.unlocked=true;
|
|
|
|
|
+ setTimeout(function(){ showUnlock('star','成就解锁 · 本周全勤','已连续完成 2 项任务,坚持就是复利'); }, 420);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ toast('完成「'+t.title+'」 · 成长分 +'+t.pts);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderGrowthRec(){
|
|
|
|
|
+ document.getElementById('growth-rec').innerHTML=CHALLENGES.map(function(ch){
|
|
|
|
|
+ var pct=Math.round(ch.prog/ch.total*100);
|
|
|
|
|
+ return '<div class="rec-card" style="width:200px" onclick="toast(\'挑战详情\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+dimColor(ch.dim)+','+dimColor(ch.dim)+'99);height:70px"></div>'+
|
|
|
|
|
+ '<div class="rec-body"><div class="rec-tt">'+ch.title+'</div><div class="rec-meta">'+ch.prog+'/'+ch.total+' · '+pct+'%</div></div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 成果环 + 连击 + 进度条 */
|
|
|
|
|
+ function renderAchievementHero(){
|
|
|
|
|
+ var total=growthState.baseTasks + Object.keys(growthState.doneTasks).length;
|
|
|
|
|
+ var pct=Math.min(1, growthState.baseTasks/total);
|
|
|
|
|
+ var size=116, sw=10, r=(size-sw)/2, c=2*Math.PI*r;
|
|
|
|
|
+ var ring='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">'+
|
|
|
|
|
+ '<circle cx="'+size/2+'" cy="'+size/2+'" r="'+r+'" fill="none" stroke="rgba(124,45,18,0.12)" stroke-width="'+sw+'"/>'+
|
|
|
|
|
+ '<circle cx="'+size/2+'" cy="'+size/2+'" r="'+r+'" fill="none" stroke="var(--brand)" stroke-width="'+sw+'" stroke-linecap="round" stroke-dasharray="'+(c*pct).toFixed(1)+' '+(c-c*pct).toFixed(1)+'" transform="rotate(-90 '+size/2+' '+size/2+')" style="transition:stroke-dasharray .7s cubic-bezier(.23,1,.32,1)"/></svg>'+
|
|
|
|
|
+ '<div class="ah-c"><div class="n">'+growthState.baseTasks+'</div><div class="l">本周任务</div></div>';
|
|
|
|
|
+ var el=document.getElementById('ach-ring');
|
|
|
|
|
+ if (el) el.innerHTML=ring;
|
|
|
|
|
+
|
|
|
|
|
+ var taskPct=Math.min(100, growthState.baseTasks/16*100);
|
|
|
|
|
+ document.getElementById('ach-task-v').textContent=growthState.baseTasks;
|
|
|
|
|
+ document.getElementById('ach-task-b').style.width=taskPct+'%';
|
|
|
|
|
+ document.getElementById('ach-pt-b').style.width=Math.min(100, growthState.pts/1800*100)+'%';
|
|
|
|
|
+ document.getElementById('ach-bg-b').style.width=(growthState.unlocked? '53%':'40%')+'%';
|
|
|
|
|
+ document.getElementById('ach-sub').textContent='完成 '+growthState.baseTasks+' 项任务 · 连续打卡 '+growthState.streak+' 天';
|
|
|
|
|
+ document.getElementById('ach-title').textContent=growthState.unlocked?'本周成果 · 已解锁全勤':'本周成果';
|
|
|
|
|
+
|
|
|
|
|
+ // 连击 7 天
|
|
|
|
|
+ var sh='';
|
|
|
|
|
+ for (var i=0;i<7;i++){
|
|
|
|
|
+ var done=i<6 || (i===6 && true); // 今天待点亮
|
|
|
|
|
+ var cls=i===6? 'today' : (done?'done':'');
|
|
|
|
|
+ sh+='<div class="sd '+cls+'"><div class="dot">'+(i===6?svgUse('flame',15):(done?svgUse('check',15):''))+'</div><div class="dl">'+WEEK_DAYS[i]+'</div></div>';
|
|
|
|
|
+ }
|
|
|
|
|
+ document.getElementById('ach-streak').innerHTML=sh;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 解锁横幅 */
|
|
|
|
|
+ var unlockTimer;
|
|
|
|
|
+ function showUnlock(icon, title, sub){
|
|
|
|
|
+ document.getElementById('unlock-ic').innerHTML=svgUse(icon,20);
|
|
|
|
|
+ document.getElementById('unlock-t').textContent=title;
|
|
|
|
|
+ document.getElementById('unlock-s').textContent=sub;
|
|
|
|
|
+ var el=document.getElementById('unlock-toast');
|
|
|
|
|
+ el.classList.add('show');
|
|
|
|
|
+ clearTimeout(unlockTimer);
|
|
|
|
|
+ unlockTimer=setTimeout(function(){ el.classList.remove('show'); }, 2600);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderProfile() {
|
|
|
|
|
+ document.getElementById('ach-grid').innerHTML=ACH.map(function(a){
|
|
|
|
|
+ return '<div class="ach"><div class="ai" style="background:'+a.c+'1a;color:'+a.c+'">'+svgUse(a.ic,18)+'</div><div class="av">'+a.v+'</div><div class="al">'+a.l+'</div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderDimSheet() {
|
|
|
|
|
+ document.getElementById('dim-grid').innerHTML=DIMS.map(function(d){
|
|
|
|
|
+ return '<div class="dim-tile" style="background:'+d.soft+'" onclick="openDimFromSheet(\''+d.code+'\')">'+
|
|
|
|
|
+ '<div class="dt-ic" style="background:'+d.color+'">'+svgUse('star',20)+'</div>'+
|
|
|
|
|
+ '<div class="dt-nm">'+d.name+' · '+d.desc+'</div>'+
|
|
|
|
|
+ '<div class="dt-sc" style="color:'+d.color+'">'+d.score+' 分</div>'+
|
|
|
|
|
+ '<div class="dt-track"><div class="dt-fill" style="width:'+d.score+'%;background:'+d.color+'"></div></div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ var more=document.getElementById('dim-more');
|
|
|
|
|
+ if (more) more.style.display='block';
|
|
|
|
|
+ }
|
|
|
|
|
+ function openDimFromSheet(code){
|
|
|
|
|
+ closeDim();
|
|
|
|
|
+ setTimeout(function(){ openDimDetail(code); }, 180);
|
|
|
|
|
+ }
|
|
|
|
|
+ function openOverviewFromSheet(){
|
|
|
|
|
+ closeDim();
|
|
|
|
|
+ setTimeout(function(){ openOverview(); }, 180);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function dimColor(code){ var d=DIMS.find(function(x){return x.code===code}); return d?d.color:'var(--brand)'; }
|
|
|
|
|
+ function dimSoft(code){ var d=DIMS.find(function(x){return x.code===code}); return d?d.soft:'var(--brand-soft)'; }
|
|
|
|
|
+ function dimByCode(code){ return DIMS.find(function(x){return x.code===code}) || DIMS[0]; }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 肠道问卷 / 风险分级 / 9.9 陪跑 / D7 报告 ===== */
|
|
|
|
|
+ /* 红旗筛查(必答前置,命中即转就医) */
|
|
|
|
|
+ var REDFLAG=[
|
|
|
|
|
+ { t:'最近是否有便血、黑便,或大便带黏液、脓血?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'近半年是否有非刻意的体重下降(超过 4 公斤)?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'是否有过持续发热(体温超过 37.3℃)伴随排便异常?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'是否存在夜间腹泻,或腹痛把你痛醒?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'近一年是否出现过缺铁性贫血,或长期乏力头晕?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'一级亲属是否有结直肠癌、炎症性肠病或肠易激综合征?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'是否有胸痛、胸闷、心悸,或活动后气促?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'是否出现过一侧肢体麻木无力、言语不清或口角歪斜?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
|
|
|
|
|
+ { t:'是否已有心脑血管疾病、糖尿病或肾病的诊断?', opts:[{t:'没有',s:0},{t:'有',s:1}] }
|
|
|
|
|
+ ];
|
|
|
|
|
+ /* 基础信息 */
|
|
|
|
|
+ var BASIC={ gender:'', h:'', w:'', waist:'' };
|
|
|
|
|
+ /* 五大模块(条件跳转) */
|
|
|
|
|
+ var MODULES={
|
|
|
|
|
+ weight:{ name:'肥胖 / 体重', color:'var(--dim-body)', max:7, qs:[
|
|
|
|
|
+ { t:'近一年你的体重变化', opts:[{t:'基本稳定',s:0},{t:'上升 1–3 公斤',s:1},{t:'上升超过 4 公斤',s:2},{t:'减重后反弹',s:2}] },
|
|
|
|
|
+ { t:'是否尝试过减重', opts:[{t:'没有尝试',s:0},{t:'试过但没坚持',s:1},{t:'反复减反复反弹',s:2}] },
|
|
|
|
|
+ { t:'日常主要困扰', opts:[{t:'没有明显困扰',s:0},{t:'爬楼气喘',s:1},{t:'睡眠打鼾',s:2},{t:'关节不适',s:1},{t:'容易乏力',s:1}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ consti:{ name:'便秘', color:'var(--dim-wealth)', max:8, qs:[
|
|
|
|
|
+ { t:'近 3 个月你的排便次数', opts:[{t:'每周不超过 2 次',s:2},{t:'每周 3–6 次',s:1},{t:'每天 1–2 次',s:0},{t:'每天超过 2 次',s:0}] },
|
|
|
|
|
+ { t:'粪便性状(参考布里斯托分型)', opts:[{t:'干球状或硬便',s:2},{t:'正常成形',s:0},{t:'稀软不成形',s:0}] },
|
|
|
|
|
+ { t:'排便时是否费力、有不尽感或梗阻感', opts:[{t:'从不',s:0},{t:'偶尔',s:1},{t:'经常',s:2}] },
|
|
|
|
|
+ { t:'是否需要手法辅助才能排出', opts:[{t:'不需要',s:0},{t:'偶尔',s:1},{t:'经常',s:2}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ diarrhea:{ name:'腹泻', color:'var(--dim-mind)', max:10, qs:[
|
|
|
|
|
+ { t:'近 4 周你的每日排便次数', opts:[{t:'每天不超过 2 次',s:0},{t:'3 次',s:1},{t:'4 次以上',s:2},{t:'6 次以上',s:3}] },
|
|
|
|
|
+ { t:'粪便性状', opts:[{t:'正常成形',s:0},{t:'糊状',s:1},{t:'水样',s:2},{t:'油亮有油花',s:2}] },
|
|
|
|
|
+ { t:'是否伴有腹痛、里急后重或黏液', opts:[{t:'都没有',s:0},{t:'轻微腹痛',s:1},{t:'明显腹痛或里急后重',s:2},{t:'带黏液',s:1}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ sleep:{ name:'睡眠', color:'var(--dim-wisdom)', max:8, qs:[
|
|
|
|
|
+ { t:'你的平均睡眠时长', opts:[{t:'7–9 小时',s:0},{t:'6–7 小时',s:1},{t:'不足 6 小时',s:2},{t:'超过 9 小时',s:1}] },
|
|
|
|
|
+ { t:'入睡是否困难(超过 30 分钟)', opts:[{t:'不困难',s:0},{t:'偶尔',s:1},{t:'几乎每晚',s:2}] },
|
|
|
|
|
+ { t:'夜间醒来次数', opts:[{t:'没有',s:0},{t:'1 次',s:1},{t:'2 次以上',s:2}] },
|
|
|
|
|
+ { t:'是否打鼾,或被告知呼吸暂停', opts:[{t:'都不',s:0},{t:'打鼾但无暂停',s:1},{t:'有呼吸暂停',s:2}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ allergy:{ name:'过敏', color:'var(--dim-action)', max:8, qs:[
|
|
|
|
|
+ { t:'是否有湿疹、皮肤瘙痒或反复皮疹', opts:[{t:'没有',s:0},{t:'偶尔',s:1},{t:'反复',s:2}] },
|
|
|
|
|
+ { t:'是否有阵发喷嚏、鼻塞、清水鼻涕', opts:[{t:'没有',s:0},{t:'季节性',s:1},{t:'常年',s:2}] },
|
|
|
|
|
+ { t:'是否有过喘息或呼吸困难(非运动诱发)', opts:[{t:'没有',s:0},{t:'有过',s:2}] },
|
|
|
|
|
+ { t:'是否存在食物不耐受或食物过敏', opts:[{t:'没有',s:0},{t:'1 类食物',s:1},{t:'2 类以上',s:2}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ bp:{ name:'血压', color:'var(--danger)', max:9, chronic:true, qs:[
|
|
|
|
|
+ { t:'是否被医生告知过血压偏高或高血压', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊高血压',s:2}] },
|
|
|
|
|
+ { t:'近一年是否规律测量血压', opts:[{t:'每月固定测量',s:0},{t:'偶尔测',s:1},{t:'从不测',s:2}] },
|
|
|
|
|
+ { t:'最近一次血压大概是多少', opts:[{t:'正常或没测过',s:0},{t:'120–139 或 80–89',s:1},{t:'140–159 或 90–99',s:2},{t:'≥160 或 ≥100',s:3}] },
|
|
|
|
|
+ { t:'是否正在服用降压药', opts:[{t:'未被告知需服药',s:0},{t:'正在服药',s:2}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ glu:{ name:'血糖', color:'var(--dim-wealth)', max:9, chronic:true, qs:[
|
|
|
|
|
+ { t:'是否被医生告知过血糖偏高或糖尿病', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊',s:2}] },
|
|
|
|
|
+ { t:'近一年是否做过空腹血糖或糖化血红蛋白检查', opts:[{t:'每年都做',s:0},{t:'做过但不定期',s:1},{t:'从未做过',s:2}] },
|
|
|
|
|
+ { t:'已知空腹血糖是多少(mmol/L)', opts:[{t:'不知道或未测',s:0},{t:'低于 6.1',s:0},{t:'6.1–6.9',s:2},{t:'≥ 7.0',s:3}] },
|
|
|
|
|
+ { t:'是否正在服用降糖药或使用胰岛素', opts:[{t:'没有',s:0},{t:'有',s:2}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ lip:{ name:'血脂', color:'var(--dim-action)', max:6, chronic:true, qs:[
|
|
|
|
|
+ { t:'近一年是否做过血脂四项检查', opts:[{t:'每年都做',s:0},{t:'做过但不定期',s:1},{t:'从未做过',s:2}] },
|
|
|
|
|
+ { t:'是否被告知血脂异常或胆固醇高', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:1},{t:'已确诊',s:2}] },
|
|
|
|
|
+ { t:'已知结果', opts:[{t:'都正常',s:0},{t:'低密度脂蛋白偏高',s:2},{t:'甘油三酯偏高',s:2},{t:'总胆固醇偏高',s:1}] }
|
|
|
|
|
+ ]},
|
|
|
|
|
+ ua:{ name:'尿酸 / 痛风', color:'var(--dim-mind)', max:11, chronic:true, qs:[
|
|
|
|
|
+ { t:'是否被医生告知过尿酸偏高或痛风', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊痛风',s:3}] },
|
|
|
|
|
+ { t:'已知血尿酸是多少(μmol/L)', opts:[{t:'不知道或未测',s:0},{t:'低于 420',s:0},{t:'420–479',s:2},{t:'≥ 480',s:3}] },
|
|
|
|
|
+ { t:'是否有过单侧关节红肿热痛发作(尤其足大拇指关节)', opts:[{t:'没有',s:0},{t:'有过 1 次',s:2},{t:'反复发作',s:3}] },
|
|
|
|
|
+ { t:'是否正在服用降尿酸药物', opts:[{t:'没有',s:0},{t:'有',s:2}] }
|
|
|
|
|
+ ]}
|
|
|
|
|
+ };
|
|
|
|
|
+ var qzState={ phase:'flag', i:0, flagPicks:[], modPicks:{}, active:[], done:false, result:null };
|
|
|
|
|
+
|
|
|
|
|
+ function qzPhaseList(){
|
|
|
|
|
+ if (qzState.phase==='flag') return REDFLAG;
|
|
|
|
|
+ if (qzState.phase==='basic') return [];
|
|
|
|
|
+ var m=MODULES[qzState.active[qzState.i]];
|
|
|
|
|
+ return m ? m.qs : [];
|
|
|
|
|
+ }
|
|
|
|
|
+ function curDimName(){
|
|
|
|
|
+ if (qzState.phase==='flag') return '安全筛查';
|
|
|
|
|
+ if (qzState.phase==='basic') return '基础信息';
|
|
|
|
|
+ var m=MODULES[qzState.active[qzState.i]];
|
|
|
|
|
+ return m ? m.name : '';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderQuiz(){
|
|
|
|
|
+ var wrap=document.getElementById('qz-wrap');
|
|
|
|
|
+ if (qzState.phase==='basic'){ renderBasic(); return; }
|
|
|
|
|
+ var list=qzPhaseList(), q=list[qzState.i];
|
|
|
|
|
+ var total=qzState.phase==='flag'?REDFLAG.length:MODULES[qzState.active[qzState.i]].qs.length;
|
|
|
|
|
+ var globalDone = qzState.phase==='flag'? qzState.i : qzState.i;
|
|
|
|
|
+ document.getElementById('qz-bar').style.width=(globalDone/total*100)+'%';
|
|
|
|
|
+ document.getElementById('qz-idx').textContent=(globalDone+1)+' / '+total;
|
|
|
|
|
+ var dimEl=document.getElementById('qz-dim');
|
|
|
|
|
+ dimEl.textContent = qzState.phase==='flag' ? '第一步 · 安全筛查(必答)' : ('维度 · '+curDimName());
|
|
|
|
|
+ dimEl.style.color = qzState.phase==='flag' ? 'var(--danger)' : 'var(--brand)';
|
|
|
|
|
+ document.getElementById('qz-title').textContent=q.t;
|
|
|
|
|
+ var picked = qzState.phase==='flag'? qzState.flagPicks[qzState.i] : (qzState.modPicks[qzState.active[qzState.i]]||[])[qzState.i];
|
|
|
|
|
+ document.getElementById('qz-opts').innerHTML=q.opts.map(function(o,oi){
|
|
|
|
|
+ return '<div class="qz-opt'+(picked===oi?' on':'')+'" data-oi="'+oi+'" onclick="pickQ('+oi+')">'+
|
|
|
|
|
+ '<span class="qo-dot"></span><span class="qo-t">'+o.t+'</span>'+(o.s>0?'<span class="qo-s">+'+o.s+'</span>':'')+'</div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ var isLast = (qzState.i===total-1);
|
|
|
|
|
+ var acts=document.getElementById('qz-actions');
|
|
|
|
|
+ acts.innerHTML = isLast
|
|
|
|
|
+ ? '<button class="btn-primary" onclick="nextQ()">完成本组</button>'
|
|
|
|
|
+ : '<button class="btn-primary" disabled style="opacity:.45">请选择一项</button>';
|
|
|
|
|
+ if (picked!==undefined){ enableNext(acts, isLast); }
|
|
|
|
|
+ document.getElementById('legal-note').style.display = qzState.phase==='flag' ? 'block' : 'none';
|
|
|
|
|
+ }
|
|
|
|
|
+ function enableNext(acts, isLast){
|
|
|
|
|
+ var btn=acts.querySelector('.btn-primary');
|
|
|
|
|
+ btn.disabled=false; btn.style.opacity='1';
|
|
|
|
|
+ btn.textContent = isLast ? '完成本组' : '下一题';
|
|
|
|
|
+ btn.onclick=nextQ;
|
|
|
|
|
+ }
|
|
|
|
|
+ function renderBasic(){
|
|
|
|
|
+ document.getElementById('qz-bar').style.width='100%';
|
|
|
|
|
+ document.getElementById('qz-idx').textContent='基础信息';
|
|
|
|
|
+ var dimEl=document.getElementById('qz-dim');
|
|
|
|
|
+ dimEl.textContent='第二步 · 基础信息';
|
|
|
|
|
+ dimEl.style.color='var(--brand)';
|
|
|
|
|
+ document.getElementById('qz-title').innerHTML='为了让评估更准确,请填写基础信息';
|
|
|
|
|
+ var g=BASIC.gender;
|
|
|
|
|
+ document.getElementById('qz-opts').innerHTML=
|
|
|
|
|
+ '<div style="display:flex;gap:10px;margin-bottom:14px">'+
|
|
|
|
|
+ ['男','女'].map(function(x){ return '<div class="qz-opt'+(g===x?' on':'')+'" style="flex:1" onclick="pickGender(\''+x+'\')">'+
|
|
|
|
|
+ '<span class="qo-dot"></span><span class="qo-t">'+x+'</span></div>'; }).join('')+'</div>'+
|
|
|
|
|
+ '<div style="display:flex;gap:10px">'+
|
|
|
|
|
+ '<div class="field" style="flex:1"><span class="fc-ic">身高</span><input inputmode="decimal" placeholder="cm" value="'+BASIC.h+'" oninput="setBasic(\'h\',this.value)"/></div>'+
|
|
|
|
|
+ '<div class="field" style="flex:1"><span class="fc-ic">体重</span><input inputmode="decimal" placeholder="kg" value="'+BASIC.w+'" oninput="setBasic(\'w\',this.value)"/></div>'+
|
|
|
|
|
+ '<div class="field" style="flex:1"><span class="fc-ic">腰围</span><input inputmode="decimal" placeholder="cm" value="'+BASIC.waist+'" oninput="setBasic(\'waist\',this.value)"/></div>'+
|
|
|
|
|
+ '</div>'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px;line-height:1.5">腰围请在肚脐水平量一圈。用于判断中心型肥胖(男 ≥90cm,女 ≥85cm)。</div>';
|
|
|
|
|
+ var acts=document.getElementById('qz-actions');
|
|
|
|
|
+ acts.innerHTML='<button class="btn-primary" onclick="decideModules()">继续</button>';
|
|
|
|
|
+ document.getElementById('legal-note').style.display='block';
|
|
|
|
|
+ }
|
|
|
|
|
+ function pickGender(x){ BASIC.gender=x; renderBasic(); }
|
|
|
|
|
+ function setBasic(k,v){ BASIC[k]=v; }
|
|
|
|
|
+
|
|
|
|
|
+ function pickQ(oi){
|
|
|
|
|
+ if (qzState.phase==='flag'){ qzState.flagPicks[qzState.i]=oi; }
|
|
|
|
|
+ else {
|
|
|
|
|
+ var k=qzState.active[qzState.i];
|
|
|
|
|
+ if(!qzState.modPicks[k]) qzState.modPicks[k]=[];
|
|
|
|
|
+ qzState.modPicks[k][qzState.i]=oi;
|
|
|
|
|
+ }
|
|
|
|
|
+ document.querySelectorAll('#qz-opts .qz-opt').forEach(function(el){ el.classList.toggle('on', +el.dataset.oi===oi); });
|
|
|
|
|
+ enableNext(document.getElementById('qz-actions'), false);
|
|
|
|
|
+ }
|
|
|
|
|
+ function nextQ(){
|
|
|
|
|
+ var list=qzPhaseList();
|
|
|
|
|
+ if (qzState.i<list.length-1){ qzState.i++; renderQuiz(); return; }
|
|
|
|
|
+ // 本组完成
|
|
|
|
|
+ if (qzState.phase==='flag'){
|
|
|
|
|
+ var hit=qzState.flagPicks.some(function(p){ return p===1; });
|
|
|
|
|
+ if (hit){ qzState.done=true; renderRedFlagHit(); return; }
|
|
|
|
|
+ qzState.phase='basic'; qzState.i=0; renderBasic(); return;
|
|
|
|
|
+ }
|
|
|
|
|
+ qzState.i++;
|
|
|
|
|
+ if (qzState.i<qzState.active.length){ renderQuiz(); }
|
|
|
|
|
+ else {
|
|
|
|
|
+ showRisk();
|
|
|
|
|
+ TASK_SCREENS.forEach(function(s){
|
|
|
|
|
+ var el=document.getElementById('screen-'+s);
|
|
|
|
|
+ if (el) el.classList.remove('active');
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('screen-risk').classList.add('active');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ function decideModules(){
|
|
|
|
|
+ var h=parseFloat(BASIC.h), w=parseFloat(BASIC.w), waist=parseFloat(BASIC.waist);
|
|
|
|
|
+ var bmi = (h>0 && w>0)? (w/((h/100)*(h/100))) : 0;
|
|
|
|
|
+ var waistBad = waist>0 && ((BASIC.gender==='男'&&waist>=90)||(BASIC.gender==='女'&&waist>=85));
|
|
|
|
|
+ var order=['weight','consti','diarrhea','sleep','allergy','bp','glu','lip','ua'];
|
|
|
|
|
+ qzState.active=order;
|
|
|
|
|
+ qzState.phase='module'; qzState.i=0; renderQuiz();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function modScore(key){
|
|
|
|
|
+ var m=MODULES[key], picks=qzState.modPicks[key]||[], n=0;
|
|
|
|
|
+ m.qs.forEach(function(q,i){ if(picks[i]!==undefined) n+=q.opts[picks[i]].s; });
|
|
|
|
|
+ return n;
|
|
|
|
|
+ }
|
|
|
|
|
+ function moduleLevel(key){
|
|
|
|
|
+ var m=MODULES[key], v=modScore(key), r=v/m.max;
|
|
|
|
|
+ if (r>=0.55) return {n:'需关注', c:'var(--danger)'};
|
|
|
|
|
+ if (r>=0.3) return {n:'中度', c:'var(--warn)'};
|
|
|
|
|
+ if (v>0) return {n:'轻度', c:'var(--dim-wealth)'};
|
|
|
|
|
+ return {n:'良好', c:'var(--ok)'};
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderRedFlagHit(){
|
|
|
|
|
+ var hits=[];
|
|
|
|
|
+ REDFLAG.forEach(function(q,i){ if(qzState.flagPicks[i]===1) hits.push(q.t); });
|
|
|
|
|
+ var cardio = qzState.flagPicks[6]===1 || qzState.flagPicks[7]===1 || qzState.flagPicks[8]===1;
|
|
|
|
|
+ var dept = cardio ? '心内科 / 全科医学科' : '消化内科';
|
|
|
|
|
+ document.getElementById('qz-bar').style.width='100%';
|
|
|
|
|
+ document.getElementById('qz-idx').textContent='安全筛查';
|
|
|
|
|
+ document.getElementById('qz-dim').textContent='筛查结果';
|
|
|
|
|
+ document.getElementById('qz-dim').style.color='var(--danger)';
|
|
|
|
|
+ document.getElementById('qz-title').innerHTML='建议优先到正规医院就诊';
|
|
|
|
|
+ var h='<div class="card" style="border-left:4px solid var(--danger)">'+
|
|
|
|
|
+ '<div style="display:flex;gap:10px;align-items:flex-start;margin-bottom:12px">'+
|
|
|
|
|
+ '<span style="color:var(--danger);flex:none;margin-top:1px">'+svgUse('alert',18)+'</span>'+
|
|
|
|
|
+ '<div><div style="font-size:var(--fs-md);font-weight:800;color:var(--danger)">你描述的情况需要优先明确原因</div>'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px;line-height:1.6">以下情况属于医学上建议优先就诊的信号,我们的服务不能替代医学诊断:</div></div></div>';
|
|
|
|
|
+ hits.forEach(function(t){
|
|
|
|
|
+ h+='<div style="display:flex;gap:8px;padding:8px 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5">'+
|
|
|
|
|
+ '<span style="color:var(--danger);flex:none">·</span><span>'+t+'</span></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ h+='<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6">'+
|
|
|
|
|
+ '建议挂<b>'+dept+'</b>。如症状明显或持续加重,请尽快就医。<br/>'+
|
|
|
|
|
+ '<span style="color:var(--ink-3);font-size:var(--fs-xs)">明确原因后,如果需要长期健康管理,我们再陪你做下一步。</span></div></div>';
|
|
|
|
|
+ document.getElementById('qz-opts').innerHTML=h;
|
|
|
|
|
+ document.getElementById('qz-actions').innerHTML='<button class="btn-primary" onclick="backTo(\'home\')">我知道了</button>';
|
|
|
|
|
+ document.getElementById('legal-note').style.display='block';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function showRisk(){
|
|
|
|
|
+ var keys=qzState.active.slice();
|
|
|
|
|
+ var chronicKeys=['bp','glu','lip','ua'];
|
|
|
|
|
+ var funcKeys=['weight','consti','diarrhea','sleep','allergy'];
|
|
|
|
|
+ function pick(list){ return list.map(function(k){ return {k:k, v:modScore(k), m:MODULES[k]}; }); }
|
|
|
|
|
+
|
|
|
|
|
+ // 功能性五维(决定商业转化)
|
|
|
|
|
+ var funcScored=pick(funcKeys).filter(function(x){ return x.v>0; })
|
|
|
|
|
+ .sort(function(a,b){ return b.v/b.m.max - a.v/a.m.max; });
|
|
|
|
|
+ // 慢病四维(管理状态,不参与商业决策)
|
|
|
|
|
+ var chronicScored=pick(chronicKeys).filter(function(x){ return x.v>0; })
|
|
|
|
|
+ .sort(function(a,b){ return b.v/b.m.max - a.v/a.m.max; });
|
|
|
|
|
+ var chronicHigh=chronicScored.filter(function(x){
|
|
|
|
|
+ var p=x.v/x.m.max; return p>=0.55 || x.v>=4;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ var h=parseFloat(BASIC.h), w=parseFloat(BASIC.w);
|
|
|
|
|
+ var bmi=(h>0&&w>0)? (w/((h/100)*(h/100))) : 0;
|
|
|
|
|
+ var bmiTag = bmi>=28 ? {t:'肥胖症范畴', c:'var(--danger)'} : (bmi>=24? {t:'超重', c:'var(--warn)'} : null);
|
|
|
|
|
+
|
|
|
|
|
+ var hiN=0, midN=0;
|
|
|
|
|
+ funcScored.forEach(function(x){
|
|
|
|
|
+ var lv=moduleLevel(x.k);
|
|
|
|
|
+ if(lv.n==='需关注') hiN++;
|
|
|
|
|
+ else if(lv.n==='中度') midN++;
|
|
|
|
|
+ });
|
|
|
|
|
+ var overall = (hiN>=1||midN>=2)? 'high' : (midN>=1? 'mid' : 'low');
|
|
|
|
|
+
|
|
|
|
|
+ var conf = { low:{n:'低风险', s:'暂时不需要检测', t:'你的情况目前以作息和饮食调整为主。先做三件事,3 个月后我们提醒你复评。'},
|
|
|
|
|
+ mid:{n:'中风险', s:'建议做一次检测', t:'有几个维度需要注意。一次检测能帮你明确方向,少走弯路。'},
|
|
|
|
|
+ high:{n:'高风险', s:'建议尽快检测', t:'你的部分维度需要重点关注,建议尽早做一次检测看看具体方向。'} };
|
|
|
|
|
+ var c=conf[overall];
|
|
|
|
|
+
|
|
|
|
|
+ var top=funcScored.length? funcScored[0].m.name : '无明显异常';
|
|
|
|
|
+ var hero='<div class="risk-hero '+overall+'">'+
|
|
|
|
|
+ '<div class="rh-score" style="font-size:34px">'+c.n+'</div>'+
|
|
|
|
|
+ '<div class="rh-unit">'+c.s+'</div>'+
|
|
|
|
|
+ '<div class="rh-lv">优先关注:'+top+'</div>'+
|
|
|
|
|
+ '<div class="rh-tip">'+c.t+'</div></div>';
|
|
|
|
|
+
|
|
|
|
|
+ // 慢病优先提示(若有)
|
|
|
|
|
+ var chWarn='';
|
|
|
|
|
+ if (chronicHigh.length){
|
|
|
|
|
+ var names=chronicHigh.map(function(x){ return x.m.name; }).join('、');
|
|
|
|
|
+ chWarn='<div class="card" style="border-left:4px solid var(--danger)">'+
|
|
|
|
|
+ '<div style="display:flex;gap:10px;align-items:flex-start">'+
|
|
|
|
|
+ '<span style="color:var(--danger);flex:none;margin-top:1px">'+svgUse('alert',18)+'</span>'+
|
|
|
|
|
+ '<div><div style="font-size:var(--fs-md);font-weight:800;color:var(--danger)">你的 '+names+' 需要优先关注</div>'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px;line-height:1.6">这几个维度的规范管理是「医生方案 + 生活方式」。<b>请遵医嘱定期随诊</b>,我们只能提供生活方式配合建议,不能替代治疗方案,也不建议自行调整用药。</div></div></div>'+
|
|
|
|
|
+ '<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line)">'+
|
|
|
|
|
+ chronicHigh.map(function(x){
|
|
|
|
|
+ var q=x.m.qs, picks=qzState.modPicks[x.k]||[];
|
|
|
|
|
+ var tips=[];
|
|
|
|
|
+ q.forEach(function(qq,i){ if(picks[i]>0) tips.push(qq.opts[picks[i]].t); });
|
|
|
|
|
+ return '<div style="padding:6px 0;font-size:var(--fs-sm);color:var(--ink-2)"><b style="color:var(--ink)">'+x.m.name+':</b>'+tips.slice(0,2).join(';')+'</div>';
|
|
|
|
|
+ }).join('')+
|
|
|
|
|
+ '</div></div>';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 九维得分(分两组)
|
|
|
|
|
+ function dimRows(list){
|
|
|
|
|
+ var out='';
|
|
|
|
|
+ list.forEach(function(k){
|
|
|
|
|
+ var m=MODULES[k], v=modScore(k), lv=moduleLevel(k);
|
|
|
|
|
+ var pct=Math.round(v/m.max*100);
|
|
|
|
|
+ out+='<div class="rf-row" onclick="toast(\''+m.name+':'+v+' 分 · '+lv.n+'\')">'+
|
|
|
|
|
+ '<span class="rf-d">'+m.name+(bmiTag&&k==='weight'&&bmiTag?'('+bmiTag.t+')':'')+'</span>'+
|
|
|
|
|
+ '<span class="rf-b"><i style="width:'+pct+'%;background:'+lv.c+'"></i></span>'+
|
|
|
|
|
+ '<span class="rf-s" style="color:'+lv.c+'">'+v+'</span></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ return out;
|
|
|
|
|
+ }
|
|
|
|
|
+ var fh='<div class="risk-factors"><div class="rf-title">消化 · 代谢 · 睡眠 · 过敏</div>'+dimRows(funcKeys)+'</div>'+
|
|
|
|
|
+ '<div class="risk-factors"><div class="rf-title">三高 · 尿酸(管理状态)</div>'+dimRows(chronicKeys)+
|
|
|
|
|
+ '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);line-height:1.55">'+
|
|
|
|
|
+ '这几项为已知的健康指标状态,<b>不能替代医生的诊断与方案</b>。指尖血糖仪测值不能作为糖尿病诊断依据,需静脉血浆血糖。</div></div>';
|
|
|
|
|
+
|
|
|
|
|
+ var note='<div class="card"><div style="display:flex;gap:10px;align-items:flex-start">'+
|
|
|
|
|
+ '<span style="color:var(--ink-3);flex:none;margin-top:1px">'+svgUse('shield',17)+'</span>'+
|
|
|
|
|
+ '<div><div style="font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)">本评估为健康管理筛查参考</div>'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:5px;line-height:1.6">不构成医疗诊断,也不替代医生的治疗方案。身体不适请到正规医疗机构就诊。</div></div></div></div>';
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('risk-slot').innerHTML=hero+chWarn+fh+note;
|
|
|
|
|
+ qzState.result={overall:overall, topKey:funcScored.length?funcScored[0].k:'weight', chronic:chronicHigh.length>0};
|
|
|
|
|
+ renderPrepBlock(overall);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderPrepBlock(lv){
|
|
|
|
|
+ var slot=document.getElementById('prep-slot'), act=document.getElementById('risk-actions');
|
|
|
|
|
+ var chronic = qzState.result && qzState.result.chronic;
|
|
|
|
|
+ if (lv==='low'){
|
|
|
|
|
+ slot.innerHTML='<div class="card"><div style="display:flex;gap:10px;align-items:flex-start">'+
|
|
|
|
|
+ '<div style="color:var(--ok);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></div>'+
|
|
|
|
|
+ '<div><div style="font-size:var(--fs-base);font-weight:700">我们不建议你现在花钱做检测</div>'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:5px;line-height:1.6">先按下面三件事做,3 个月后我们提醒你复评。</div></div></div>'+
|
|
|
|
|
+ '<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line)">'+
|
|
|
|
|
+ prepRow('check','固定三餐时间,晚餐 7 点前结束')+
|
|
|
|
|
+ prepRow('leaf','每天一份发酵食品(无糖酸奶 / 泡菜)')+
|
|
|
|
|
+ prepRow('run','每周 3 次、每次 30 分钟快走')+
|
|
|
|
|
+ '</div></div>';
|
|
|
|
|
+ act.innerHTML='<div class="up-actions"><button class="btn-primary" onclick="toast(\'已加入 3 个月后复评提醒\')">3 个月后提醒我复评</button><button class="btn-ghost" onclick="backTo(\'home\')">返回首页</button></div>';
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ var push = lv==='high'
|
|
|
|
|
+ ? '你的部分症状与肠道环境可能相关,检测能帮你明确主因。'
|
|
|
|
|
+ : '一次检测能帮你明确方向,少走弯路。';
|
|
|
|
|
+ // 慢病用户:弱化销售,强调配合
|
|
|
|
|
+ var head = chronic
|
|
|
|
|
+ ? '<div class="pc-t">配合医生方案的生活方式准备</div>'
|
|
|
|
|
+ : '<div class="pc-t">检测前的肠道准备期</div>';
|
|
|
|
|
+ var desc = chronic
|
|
|
|
|
+ ? '<div class="pc-s">你的血压 / 血糖 / 血脂 / 尿酸中有需要重点关注的项。<b>请先遵医嘱随诊</b>。这段时间我们能做的,是帮你把饮食与作息配合起来——这是生活方式管理,不是治疗。</div>'
|
|
|
|
|
+ : '<div class="pc-s">菌群检测有个前提:检测前 3–7 天不能有抗生素、不能大量摄入益生菌、饮食要稳定,否则数据会失真。<b>这 7 天需要有人带你调。</b></div>';
|
|
|
|
|
+ var priceNote = chronic
|
|
|
|
|
+ ? '<div style="font-size:var(--fs-xs);color:rgba(124,45,18,0.7);margin-top:8px;line-height:1.5">说明:我们<b>不建议</b>已确诊的用户自行调整用药或用检测替代复诊。检测与解读仅作参考。</div>'
|
|
|
|
|
+ : '';
|
|
|
|
|
+ slot.innerHTML='<div class="sec-head section"><div class="sec-title">'+(chronic?'建议:先配合医生,再做生活方式管理':'建议:检测前先做 7 天准备')+'</div></div>'+
|
|
|
|
|
+ '<div class="prep-card">'+head+desc+
|
|
|
|
|
+ '<div class="prep-price"><span class="pp-n">9.9</span><span class="pp-u">元 · 7 天陪跑</span></div>'+priceNote+'</div>'+
|
|
|
|
|
+ '<div class="card" style="margin-top:14px;background:var(--brand-soft);box-shadow:none">'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">'+(chronic?'遵医嘱是首要的':'检测本身由你自费(¥1980,可分期)')+'</div>'+
|
|
|
|
|
+ '<div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.85;margin-top:6px;line-height:1.55">'+(chronic?'我们提供的是饮食与作息调整建议,配合你的既有治疗方案。':'我们赠送的是<b>检测前准备、检测后专家解读、90 天干预方案</b>。')+'</div></div>';
|
|
|
|
|
+ act.innerHTML='<div class="up-actions"><button class="btn-primary" onclick="openPrep()">9.9 元 · 开始 7 天准备</button>'+
|
|
|
|
|
+ '<button class="btn-ghost" onclick="toast(\'直接检测:¥1980,可分期\')">'+(chronic?'先去做正规复查':'跳过准备,直接预约检测')+'</button></div>';
|
|
|
|
|
+ }
|
|
|
|
|
+ function prepRow(ic,t){
|
|
|
|
|
+ return '<div class="prep-item"><span class="pi-ic" style="background:var(--dim-action-soft);color:var(--ok)">'+svgUse(ic,16)+'</span>'+
|
|
|
|
|
+ '<span style="flex:1;font-size:var(--fs-sm);font-weight:600">'+t+'</span></div>';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderPrepPage(){
|
|
|
|
|
+ var days=['一','二','三','四','五','六','日'];
|
|
|
|
|
+ var h='';
|
|
|
|
|
+ for(var i=0;i<7;i++){
|
|
|
|
|
+ h+='<div class="d7-cell'+(i<6?' done':'')+'">'+days[i]+'</div>';
|
|
|
|
|
+ }
|
|
|
|
|
+ document.getElementById('prep-d7').innerHTML=h;
|
|
|
|
|
+ var tasks=[
|
|
|
|
|
+ {ic:'diet',c:'var(--dim-body)',t:'记录三餐全貌 + 建立准备档案',s:'10 分钟'},
|
|
|
|
|
+ {ic:'target',c:'var(--dim-action)',t:'停用益生菌 / 补剂,改为发酵食品',s:'5 分钟'},
|
|
|
|
|
+ {ic:'leaf',c:'var(--dim-body)',t:'调整精制碳水,晚餐加一份蔬菜',s:'15 分钟'},
|
|
|
|
|
+ {ic:'smile',c:'var(--dim-mind)',t:'记录症状(腹胀 / 排便)与情绪',s:'5 分钟'},
|
|
|
|
|
+ {ic:'bulb',c:'var(--dim-wisdom)',t:'建立固定进餐时间',s:'10 分钟'},
|
|
|
|
|
+ {ic:'check',c:'var(--dim-action)',t:'复核是否误食抗生素类药物',s:'5 分钟'},
|
|
|
|
|
+ {ic:'upload',c:'var(--brand)',t:'生成准备度报告 + 支付检测',s:'10 分钟'}
|
|
|
|
|
+ ];
|
|
|
|
|
+ document.getElementById('prep-list').innerHTML=tasks.map(function(t){
|
|
|
|
|
+ return '<div class="prep-item"><span class="pi-ic" style="background:'+t.c+'1a;color:'+t.c+'">'+svgUse(t.ic,16)+'</span>'+
|
|
|
|
|
+ '<span style="flex:1"><span style="display:block;font-size:var(--fs-base);font-weight:600">'+t.t+'</span>'+
|
|
|
|
|
+ '<span style="display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px">约 '+t.s+'</span></span></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ document.getElementById('prep-output').innerHTML=
|
|
|
|
|
+ '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('chart',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">7 天饮食结构分析 + 变化曲线</span></div>'+
|
|
|
|
|
+ '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('smile',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">症状与情绪趋势变化</span></div>'+
|
|
|
|
|
+ '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('target',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">检测前注意事项清单</span></div>'+
|
|
|
|
|
+ '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('bulb',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">五维能量基线档案</span></div>';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function renderD7(){
|
|
|
|
|
+ var trends=[
|
|
|
|
|
+ { n:'饮食结构评分', v:'4 → 7', col:'var(--brand)', data:[28,38,48,58,68,78,88], note:'精制碳水占比下降、膳食纤维上升,这对肠道环境是有益的调整。' },
|
|
|
|
|
+ { n:'腹胀发生频次', v:'每周 4 次 → 1 次', col:'var(--dim-mind)', data:[82,70,58,48,38,30,22], note:'腹胀频次明显下降,说明你的消化负担在减轻。' },
|
|
|
|
|
+ { n:'排便规律度', v:'不规律 → 基本规律', col:'var(--dim-action)', data:[24,32,44,56,68,78,86], note:'规律性改善通常与菌群多样性正相关,值得进一步了解原因。' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ document.getElementById('d7-trend').innerHTML=trends.map(function(t){
|
|
|
|
|
+ return '<div class="tb-row"><div class="tb-head"><span class="tb-name">'+t.n+'</span>'+
|
|
|
|
|
+ '<span class="tb-val" style="color:'+t.col+'">'+t.v+'</span></div>'+
|
|
|
|
|
+ '<div class="tb-spark">'+t.data.map(function(d,i){ return '<i class="'+(i===t.data.length-1?'last':'')+'" style="height:'+d+'%;background:'+(i===t.data.length-1?t.col:'')+'"></i>'; }).join('')+'</div>'+
|
|
|
|
|
+ '<div class="tb-note">'+t.note+'</div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+
|
|
|
|
|
+ var finds=[
|
|
|
|
|
+ { ic:'chart', c:'var(--brand)', t:'你的症状与饮食结构高度相关',
|
|
|
|
|
+ obs:'你这 7 天里,饮食结构得分高的第 2、4、6 天,腹胀都没有出现;得分低的第 1、3 天,腹胀出现 2 次。',
|
|
|
|
|
+ tip:'这个规律在很多人身上都成立。想知道自己肠道里到底发生了什么,检测能给你答案。' },
|
|
|
|
|
+ { ic:'upload', c:'var(--dim-body)', t:'你的用药史可能影响菌群',
|
|
|
|
|
+ obs:'你在问卷中提到近 3 个月使用过抑酸类药物。这类药物会改变消化道环境,也可能影响菌群检测结果的准确性。',
|
|
|
|
|
+ tip:'这正是我们建议你先调 7 天再测的原因。你已经完成了大部分准备,只差最后一步。' },
|
|
|
|
|
+ { ic:'smile', c:'var(--dim-mind)', t:'情绪与肠道互相牵连',
|
|
|
|
|
+ obs:'你这 7 天里,情绪打卡与腹胀记录出现了 3 次同步波动。',
|
|
|
|
|
+ tip:'肠道与情绪是双向影响的。菌群状况可能是这条链路的关键一环。' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ document.getElementById('d7-finds').innerHTML=finds.map(function(f){
|
|
|
|
|
+ return '<div class="find-card"><div class="fc-h">'+
|
|
|
|
|
+ '<span class="fc-ic" style="background:'+f.c+'1a;color:'+f.c+'">'+svgUse(f.ic,16)+'</span>'+
|
|
|
|
|
+ '<span class="fc-t">'+f.t+'</span></div>'+
|
|
|
|
|
+ '<div class="fc-obs">'+f.obs+'</div>'+
|
|
|
|
|
+ '<div class="fc-tip">'+f.tip+'</div></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+
|
|
|
|
|
+ var checks=[
|
|
|
|
|
+ { t:'停用益生菌 / 补剂', n:'第 2 天起完成', done:true },
|
|
|
|
|
+ { t:'确认近 3 天无抗生素类药物', n:'请自行核对', done:false },
|
|
|
|
|
+ { t:'饮食结构稳定', n:'精制碳水已降低', done:true },
|
|
|
|
|
+ { t:'进餐时间规律', n:'连续 6 天固定', done:true },
|
|
|
|
|
+ { t:'检测前 24 小时饮食清淡', n:'检测当天执行', done:false }
|
|
|
|
|
+ ];
|
|
|
|
|
+ document.getElementById('d7-checks').innerHTML=checks.map(function(c){
|
|
|
|
|
+ return '<div class="chk-row '+(c.done?'done':'todo')+'">'+
|
|
|
|
|
+ '<span class="ck-ic">'+(c.done?svgUse('check',13):svgUse('clock',13))+'</span>'+
|
|
|
|
|
+ '<span class="ck-t">'+c.t+'</span><span class="ck-n">'+c.n+'</span></div>';
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ }
|
|
|
|
|
+ function openQuiz(){
|
|
|
|
|
+ qzState={ phase:'flag', i:0, flagPicks:[], modPicks:{}, active:[], done:false, result:null };
|
|
|
|
|
+ BASIC={ gender:'', h:'', w:'', waist:'' };
|
|
|
|
|
+ renderQuiz();
|
|
|
|
|
+ pushScreen('quiz');
|
|
|
|
|
+ }
|
|
|
|
|
+ function openRisk(){ showRisk(); pushScreen('risk'); }
|
|
|
|
|
+ function openPrep(){
|
|
|
|
|
+ renderPrepPage();
|
|
|
|
|
+ pushScreen('prep');
|
|
|
|
|
+ }
|
|
|
|
|
+ function openReport7(){
|
|
|
|
|
+ renderD7();
|
|
|
|
|
+ pushScreen('report7');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 折线图(趋势) ===== */
|
|
|
|
|
+ function buildLineChart(el, cfg, w, h) {
|
|
|
|
|
+ var pad=8, maxV=100, minV=55;
|
|
|
|
|
+ var n=cfg.labels.length, all=[];
|
|
|
|
|
+ cfg.lines.forEach(function(l){ all=all.concat(l.data); });
|
|
|
|
|
+ var hi=Math.max.apply(null, all), lo=Math.min.apply(null, all);
|
|
|
|
|
+ hi=Math.min(100, Math.ceil((hi+4)/5)*5); lo=Math.max(0, Math.floor((lo-6)/5)*5);
|
|
|
|
|
+ var svg='<svg viewBox="0 0 '+w+' '+h+'" width="100%" height="'+h+'" preserveAspectRatio="none" style="overflow:visible">';
|
|
|
|
|
+ // 网格 + 标签
|
|
|
|
|
+ for(var g=0; g<=3; g++){
|
|
|
|
|
+ var gy=pad+g*((h-pad*2)/3);
|
|
|
|
|
+ svg+='<line x1="0" y1="'+gy.toFixed(1)+'" x2="'+w+'" y2="'+gy.toFixed(1)+'" stroke="var(--line)" stroke-width="1"/>';
|
|
|
|
|
+ svg+='<text x="0" y="'+(gy-4).toFixed(1)+'" font-size="9" fill="#B49A83">'+Math.round(hi-(hi-lo)*(g/3))+'</text>';
|
|
|
|
|
+ }
|
|
|
|
|
+ cfg.labels.forEach(function(l,i){
|
|
|
|
|
+ var lx=pad+i*((w-pad*2)/(n-1));
|
|
|
|
|
+ svg+='<text x="'+lx.toFixed(1)+'" y="'+(h-1)+'" font-size="9.5" fill="#B49A83" text-anchor="middle">'+l+'</text>';
|
|
|
|
|
+ });
|
|
|
|
|
+ function px(i){ return pad+i*((w-pad*2)/(n-1)); }
|
|
|
|
|
+ function py(v){ return pad+(hi-v)/(hi-lo)*((h-pad*2)); }
|
|
|
|
|
+ cfg.lines.forEach(function(l){
|
|
|
|
|
+ var pts=l.data.map(function(v,i){ return px(i).toFixed(1)+','+py(v).toFixed(1); });
|
|
|
|
|
+ var area=pts.join(' ')+','+px(n-1).toFixed(1)+','+h+','+px(0).toFixed(1)+','+h;
|
|
|
|
|
+ svg+='<polygon points="'+area+'" fill="'+l.color+'" opacity="0.08"/>';
|
|
|
|
|
+ svg+='<polyline points="'+pts.join(' ')+'" fill="none" stroke="'+l.color+'" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>';
|
|
|
|
|
+ l.data.forEach(function(v,i){
|
|
|
|
|
+ var last=(i===l.data.length-1);
|
|
|
|
|
+ svg+='<circle cx="'+px(i).toFixed(1)+'" cy="'+py(v).toFixed(1)+'" r="'+(last?4:2.6)+'" fill="#fff" stroke="'+l.color+'" stroke-width="2"/>';
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ svg+='</svg>';
|
|
|
|
|
+ el.innerHTML=svg;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 五维总览:雷达(含家人两轮对比) ===== */
|
|
|
|
|
+ function buildRadarCompare(el, size) {
|
|
|
|
|
+ var cx=size/2, cy=size/2, R=size/2-30, n=DIMS.length;
|
|
|
|
|
+ function pt(i, ratio){
|
|
|
|
|
+ var a=-Math.PI/2+i*2*Math.PI/n;
|
|
|
|
|
+ return [cx+Math.cos(a)*R*ratio, cy+Math.sin(a)*R*ratio];
|
|
|
|
|
+ }
|
|
|
|
|
+ var svg='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">';
|
|
|
|
|
+ [0.25,0.5,0.75,1].forEach(function(r){
|
|
|
|
|
+ var p=DIMS.map(function(d,i){ return pt(i,r).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
|
|
|
|
|
+ svg+='<polygon points="'+p+'" fill="none" stroke="var(--line)" stroke-width="1"/>';
|
|
|
|
|
+ });
|
|
|
|
|
+ for(var i=0;i<n;i++){
|
|
|
|
|
+ var e=pt(i,1);
|
|
|
|
|
+ svg+='<line x1="'+cx+'" y1="'+cy+'" x2="'+e[0].toFixed(1)+'" y2="'+e[1].toFixed(1)+'" stroke="var(--line)" stroke-width="1"/>';
|
|
|
|
|
+ }
|
|
|
|
|
+ // 自家
|
|
|
|
|
+ var mine=DIMS.map(function(d,i){ return pt(i, d.score/100).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
|
|
|
|
|
+ svg+='<polygon points="'+mine+'" fill="rgba(249,115,22,0.18)" stroke="var(--brand)" stroke-width="2"/>';
|
|
|
|
|
+ // 上周虚线
|
|
|
|
|
+ var last=DIMS.map(function(d,i){ return pt(i, Math.max(0.05,(d.score-4)/100)).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
|
|
|
|
|
+ svg+='<polygon points="'+last+'" fill="none" stroke="#B49A83" stroke-width="1.6" stroke-dasharray="4 3"/>';
|
|
|
|
|
+ DIMS.forEach(function(d,i){
|
|
|
|
|
+ var p=pt(i,d.score/100);
|
|
|
|
|
+ svg+='<circle cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" r="3.4" fill="#fff" stroke="'+d.color+'" stroke-width="2"/>';
|
|
|
|
|
+ });
|
|
|
|
|
+ DIMS.forEach(function(d,i){
|
|
|
|
|
+ var lp=pt(i,1.24);
|
|
|
|
|
+ svg+='<text x="'+lp[0].toFixed(1)+'" y="'+(lp[1]+4).toFixed(1)+'" font-size="11" font-weight="700" fill="'+d.color+'" text-anchor="middle">'+d.name+'</text>';
|
|
|
|
|
+ });
|
|
|
|
|
+ svg+='</svg>';
|
|
|
|
|
+ el.innerHTML=svg;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 渲染:五维总览 ===== */
|
|
|
|
|
+ var ovRange='week';
|
|
|
|
|
+ function renderOverview() {
|
|
|
|
|
+ buildRadarCompare(document.getElementById('ov-radar'), 240);
|
|
|
|
|
+ var avg=Math.round(DIMS.reduce(function(s,d){return s+d.score},0)/DIMS.length);
|
|
|
|
|
+ document.getElementById('ov-n').textContent=avg;
|
|
|
|
|
+ var lg='';
|
|
|
|
|
+ DIMS.forEach(function(d){ lg+='<span class="ov-lg"><i style="background:'+d.color+'"></i>'+d.name+' '+d.score+'</span>'; });
|
|
|
|
|
+ lg+='<span class="ov-lg"><i style="background:#B49A83"></i>上周</span>';
|
|
|
|
|
+ document.getElementById('ov-legend').innerHTML=lg;
|
|
|
|
|
+ setOvRange(ovRange, document.querySelector('#ov-trend-tabs .tt.on'));
|
|
|
|
|
+ }
|
|
|
|
|
+ function setOvRange(r, el) {
|
|
|
|
|
+ ovRange=r;
|
|
|
|
|
+ if (el) {
|
|
|
|
|
+ document.querySelectorAll('#ov-trend-tabs .tt').forEach(function(t){ t.classList.remove('on'); });
|
|
|
|
|
+ el.classList.add('on');
|
|
|
|
|
+ }
|
|
|
|
|
+ var cfg=TREND[r];
|
|
|
|
|
+ buildLineChart(document.getElementById('ov-trend'), cfg, 320, 160);
|
|
|
|
|
+ var lgd='';
|
|
|
|
|
+ cfg.lines.forEach(function(l){ lgd+='<span class="tl"><i style="background:'+l.color+'"></i>'+l.name+'</span>'; });
|
|
|
|
|
+ document.getElementById('ov-trend-legend').innerHTML=lgd;
|
|
|
|
|
+
|
|
|
|
|
+ var cmp='';
|
|
|
|
|
+ FAMILY.forEach(function(f){
|
|
|
|
|
+ var w=f.score+'%';
|
|
|
|
|
+ var lvl=f.score>=80?'优秀':(f.score>=70?'良好':'待提升');
|
|
|
|
|
+ cmp+='<div class="cmp-row" onclick="openDim(\''+f.dim+'\')">'+
|
|
|
|
|
+ '<div class="cmp-av" style="background:'+f.color+'">'+f.name.charAt(0)+'</div>'+
|
|
|
|
|
+ '<div class="cmp-info"><div class="cmp-nm"><span class="cn">'+f.name+'</span><span class="cr">'+f.role+'</span></div>'+
|
|
|
|
|
+ '<div class="cmp-bar"><div class="cf" style="width:'+w+';background:'+f.color+'"></div></div></div>'+
|
|
|
|
|
+ '<div class="cmp-sc" style="color:'+f.color+'">'+f.score+'</div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('ov-cmp').innerHTML=cmp;
|
|
|
|
|
+
|
|
|
|
|
+ var adv='';
|
|
|
|
|
+ ADVICE.forEach(function(a){
|
|
|
|
|
+ adv+='<div class="adv-card" onclick="toast(\'打开建议详情\')">'+
|
|
|
|
|
+ '<div class="adv-ic" style="background:'+dimSoft(a.dim)+';color:'+dimColor(a.dim)+'">'+svgUse(a.icon,18)+'</div>'+
|
|
|
|
|
+ '<div class="adv-tx"><div class="adv-t">'+a.t+'</div><div class="adv-s">'+a.s+'</div></div>'+
|
|
|
|
|
+ '<div class="adv-pri" style="background:'+a.priSoft+';color:'+a.priColor+'">'+a.pri+'</div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('ov-adv').innerHTML=adv;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 渲染:维度详情 ===== */
|
|
|
|
|
+ function renderDim(code) {
|
|
|
|
|
+ var d=dimByCode(code);
|
|
|
|
|
+ var hero='<div class="dim-hero" style="background:linear-gradient(135deg,'+d.color+'22,'+d.soft+');color:'+d.color+'">'+
|
|
|
|
|
+ '<div class="dh-top"><div class="dh-ic" style="background:'+d.color+';color:#fff">'+svgUse(code==='body'?'run':(code==='mind'?'smile':'bulb'),22)+'</div>'+
|
|
|
|
|
+ '<div><div class="dh-nm">'+d.name+' · '+d.desc+'</div><div class="dh-ds">小宇 · 10 岁</div></div>'+
|
|
|
|
|
+ '<div class="dh-sc"><div class="n">'+d.score+'</div><div class="l">当前评分</div></div></div>'+
|
|
|
|
|
+ '<div class="sub-score">'+
|
|
|
|
|
+ '<div class="ss"><div class="sl">较上月</div><div class="sv" style="color:'+d.color+'">+4<small>分</small></div></div>'+
|
|
|
|
|
+ '<div class="ss"><div class="sl">同位段</div><div class="sv" style="color:'+d.color+'">前 30%<small></small></div></div>'+
|
|
|
|
|
+ '</div></div>';
|
|
|
|
|
+ document.getElementById('dim-hero-slot').innerHTML=hero;
|
|
|
|
|
+ document.getElementById('dim-nav-title').textContent=d.name+' · '+d.desc;
|
|
|
|
|
+
|
|
|
|
|
+ var m=DIM_METRICS[code]||DIM_METRICS.body;
|
|
|
|
|
+ var mh='';
|
|
|
|
|
+ m.forEach(function(x){
|
|
|
|
|
+ mh+='<div class="metric-row"><div class="mi"><div class="mn">'+x.n+'<span class="tag-ref '+x.ref+'">'+(x.ref==='ok'?'正常':(x.ref==='mid'?'关注':'偏高'))+'</span></div><div class="mr">'+x.r+'</div></div>'+
|
|
|
|
|
+ '<div class="mv" style="color:'+d.color+'">'+x.v+'<span style="font-size:var(--fs-xs);color:var(--ink-3);margin-left:2px">'+x.unit+'</span></div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('dim-metrics').innerHTML=mh;
|
|
|
|
|
+
|
|
|
|
|
+ buildLineChart(document.getElementById('dim-trend'), {
|
|
|
|
|
+ labels: TREND.week.labels,
|
|
|
|
|
+ lines: [{ name:d.name, color:d.color, data:[d.score-6,d.score-4,d.score-5,d.score-2,d.score-1,d.score+1,d.score] }]
|
|
|
|
|
+ }, 320, 140);
|
|
|
|
|
+
|
|
|
|
|
+ var ah='';
|
|
|
|
|
+ (DIM_ACTIONS[code]||DIM_ACTIONS.body).forEach(function(a){
|
|
|
|
|
+ ah+='<div class="adv-card" onclick="completeAdv(this)">'+
|
|
|
|
|
+ '<div class="adv-ic" style="background:'+dimSoft(code)+';color:'+a.c+'">'+svgUse(a.ic,18)+'</div>'+
|
|
|
|
|
+ '<div class="adv-tx"><div class="adv-t">'+a.t+'</div><div class="adv-s">'+a.s+'</div></div>'+
|
|
|
|
|
+ '<div style="align-self:center;width:22px;height:22px;border-radius:50%;border:1.8px solid '+d.color+';flex:none" class="adv-ck"></div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('dim-actions').innerHTML=ah;
|
|
|
|
|
+
|
|
|
|
|
+ var rh='';
|
|
|
|
|
+ (DIM_RECORDS[code]||DIM_RECORDS.body).forEach(function(r){
|
|
|
|
|
+ rh+='<div class="row"><div class="rk" style="background:'+dimSoft(code)+';color:'+r.c+'">'+svgUse(r.ic,18)+'</div>'+
|
|
|
|
|
+ '<div class="ri"><div class="rt">'+r.t+'</div><div class="rm">'+r.m+'</div></div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('dim-records').innerHTML=rh;
|
|
|
|
|
+ }
|
|
|
|
|
+ function completeAdv(card){
|
|
|
|
|
+ var ck=card.querySelector('.adv-ck');
|
|
|
|
|
+ if (!ck || ck.dataset.done) return;
|
|
|
|
|
+ ck.dataset.done='1';
|
|
|
|
|
+ ck.style.background='var(--ok)';
|
|
|
|
|
+ ck.style.borderColor='var(--ok)';
|
|
|
|
|
+ ck.innerHTML='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>';
|
|
|
|
|
+ toast('已完成 · 成长分 +10');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 报告上传流程(状态机) ===== */
|
|
|
|
|
+ var upState={ step:1, dim:'body', pct:0, timer:null };
|
|
|
|
|
+ function openUpload(dim){
|
|
|
|
|
+ upState.dim=dim||'body';
|
|
|
|
|
+ upState.step=1;
|
|
|
|
|
+ renderUpload();
|
|
|
|
|
+ pushScreen('upload');
|
|
|
|
|
+ }
|
|
|
|
|
+ function closeUpload(){ pushScreen(null); }
|
|
|
|
|
+ function renderUpload(){
|
|
|
|
|
+ var labels=['选择','识别','确认','完成'];
|
|
|
|
|
+ var h='';
|
|
|
|
|
+ for (var i=0;i<4;i++){
|
|
|
|
|
+ var cls= upState.step>i+1 ? 'done' : (upState.step===i+1 ? 'on' : '');
|
|
|
|
|
+ h+='<div class="up-step '+cls+'"><div class="us-n">'+(upState.step>i+1?'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>':(i+1))+'</div><div class="us-t">'+labels[i]+'</div></div>';
|
|
|
|
|
+ if(i<3) h+='<div class="up-step-line'+(upState.step>i+1?' done':'')+'"></div>';
|
|
|
|
|
+ }
|
|
|
|
|
+ document.getElementById('up-steps').innerHTML=h;
|
|
|
|
|
+
|
|
|
|
|
+ ['pick','ocr','fix','done'].forEach(function(k,i){
|
|
|
|
|
+ document.getElementById('up-step-'+k).style.display = (upState.step===i+1)?'block':'none';
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ var acts='';
|
|
|
|
|
+ if (upState.step===1){
|
|
|
|
|
+ acts='<button class="btn-primary" onclick="startOCR()">开始识别</button>'+
|
|
|
|
|
+ '<button class="btn-ghost" onclick="closeUpload()">取消</button>';
|
|
|
|
|
+ } else if (upState.step===2){
|
|
|
|
|
+ acts='<button class="btn-primary" disabled>识别中…</button>';
|
|
|
|
|
+ } else if (upState.step===3){
|
|
|
|
|
+ acts='<button class="btn-primary" onclick="finishUpload()">确认并归档</button>'+
|
|
|
|
|
+ '<button class="btn-ghost" onclick="backToPick()">重新选择</button>';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ acts='<button class="btn-primary" onclick="closeUpload()">完成</button>';
|
|
|
|
|
+ }
|
|
|
|
|
+ document.getElementById('up-actions').innerHTML=acts;
|
|
|
|
|
+
|
|
|
|
|
+ if (upState.step===1) renderPending();
|
|
|
|
|
+ if (upState.step===2) renderOcrSteps();
|
|
|
|
|
+ if (upState.step===3) renderFixList();
|
|
|
|
|
+ if (upState.step===4) renderDoneList();
|
|
|
|
|
+ }
|
|
|
|
|
+ function renderPending(){
|
|
|
|
|
+ document.getElementById('up-pending').innerHTML=
|
|
|
|
|
+ '<div class="row"><div class="rk" style="background:var(--dim-action-soft);color:var(--ok)">'+svgUse('check',18)+'</div>'+
|
|
|
|
|
+ '<div class="ri"><div class="rt">血常规_20260920.jpg</div><div class="rm">9-20 已解析 · 4 项指标</div></div>'+
|
|
|
|
|
+ '<button class="pill-btn done" disabled>已归档</button></div>'+
|
|
|
|
|
+ '<div class="row"><div class="rk" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('upload',18)+'</div>'+
|
|
|
|
|
+ '<div class="ri"><div class="rt">体检报告_20260928.jpg</div><div class="rm">刚刚选择 · 待识别</div></div>'+
|
|
|
|
|
+ '<button class="pill-btn" onclick="startOCR()">识别</button></div>';
|
|
|
|
|
+ }
|
|
|
|
|
+ function renderOcrSteps(){
|
|
|
|
|
+ var p=upState.pct, h='';
|
|
|
|
|
+ var reached=Math.floor(p/100*OCR_STEPS.length);
|
|
|
|
|
+ OCR_STEPS.forEach(function(s,i){
|
|
|
|
|
+ var cls= p>=100 ? 'done' : (i===reached ? 'run' : '');
|
|
|
|
|
+ var ic= p>=100
|
|
|
|
|
+ ? '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>'
|
|
|
|
|
+ : (i===reached ? '<svg class="spin" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 3a9 9 0 0 1 9 9" stroke-linecap="round"/></svg>' : '');
|
|
|
|
|
+ h+='<div class="ocr-step '+cls+'"><div class="os-ic">'+ic+'</div><div class="os-t">'+s.t+'</div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('ocr-steps').innerHTML=h;
|
|
|
|
|
+ }
|
|
|
|
|
+ function startOCR(){
|
|
|
|
|
+ upState.step=2; upState.pct=0; renderUpload();
|
|
|
|
|
+ clearInterval(upState.timer);
|
|
|
|
|
+ upState.timer=setInterval(function(){
|
|
|
|
|
+ upState.pct=Math.min(100, upState.pct+4);
|
|
|
|
|
+ document.getElementById('ocr-fill').style.width=upState.pct+'%';
|
|
|
|
|
+ document.getElementById('ocr-pct').textContent=upState.pct+'%';
|
|
|
|
|
+ renderOcrSteps();
|
|
|
|
|
+ if (upState.pct>=100){
|
|
|
|
|
+ clearInterval(upState.timer);
|
|
|
|
|
+ setTimeout(function(){ upState.step=3; renderUpload(); toast('识别完成 · 请核对'); }, 420);
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 90);
|
|
|
|
|
+ }
|
|
|
|
|
+ function backToPick(){
|
|
|
|
|
+ clearInterval(upState.timer);
|
|
|
|
|
+ upState.step=1; renderUpload();
|
|
|
|
|
+ }
|
|
|
|
|
+ function renderFixList(){
|
|
|
|
|
+ var d=dimByCode(upState.dim), h='';
|
|
|
|
|
+ FIX_FIELDS.forEach(function(f){
|
|
|
|
|
+ h+='<div class="fix-row"><div class="fi"><div class="fn">'+f.n+(f.low?' <span class="low-conf">待确认</span>':'')+'</div>'+
|
|
|
|
|
+ '<div class="fv" style="color:'+d.color+'">'+f.v+' <span style="font-size:var(--fs-sm);color:var(--ink-3)">'+f.u+'</span></div>'+
|
|
|
|
|
+ (f.low?'<div class="fw">识别置信度较低,请核对</div>':'')+'</div>'+
|
|
|
|
|
+ '<button class="pill-btn" style="padding:6px 12px" onclick="toast(\'编辑 '+f.n+'\')">修改</button></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('up-fix-list').innerHTML=h;
|
|
|
|
|
+ }
|
|
|
|
|
+ function renderDoneList(){
|
|
|
|
|
+ var d=dimByCode(upState.dim), h='';
|
|
|
|
|
+ h+='<div class="row"><div class="rk" style="background:'+d.soft+';color:'+d.color+'">'+svgUse('upload',18)+'</div>'+
|
|
|
|
|
+ '<div class="ri"><div class="rt">体检报告_20260928.jpg</div><div class="rm">刚刚 · 6 项指标</div></div>'+
|
|
|
|
|
+ '<span class="tag-ref ok">已归档</span></div>';
|
|
|
|
|
+ FIX_FIELDS.forEach(function(f){
|
|
|
|
|
+ h+='<div class="row"><div class="rk" style="background:var(--bg-soft);color:var(--ink-2)">'+svgUse(f.u==='mmHg'||f.u==='bpm'?'heart':'check',16)+'</div>'+
|
|
|
|
|
+ '<div class="ri"><div class="rt" style="font-size:var(--fs-base);font-weight:500">'+f.n+'</div></div>'+
|
|
|
|
|
+ '<div style="font-weight:800;color:'+d.color+'">'+f.v+'<span style="font-size:var(--fs-xs);color:var(--ink-3);margin-left:2px">'+f.u+'</span></div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('up-done-list').innerHTML=h;
|
|
|
|
|
+ }
|
|
|
|
|
+ function finishUpload(){
|
|
|
|
|
+ clearInterval(upState.timer);
|
|
|
|
|
+ upState.step=4; renderUpload();
|
|
|
|
|
+ toast('归档成功 · 身维度 +3 分');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 渲染:成长报告与分享 ===== */
|
|
|
|
|
+ var rptRange='week';
|
|
|
|
|
+ function setRptRange(r, el){
|
|
|
|
|
+ rptRange=r;
|
|
|
|
|
+ if (el){
|
|
|
|
|
+ document.querySelectorAll('#rpt-tabs .rtt').forEach(function(t){ t.classList.remove('on'); });
|
|
|
|
|
+ el.classList.add('on');
|
|
|
|
|
+ }
|
|
|
|
|
+ renderReport();
|
|
|
|
|
+ }
|
|
|
|
|
+ function renderReport(){
|
|
|
|
|
+ var isWeek=rptRange==='week';
|
|
|
|
|
+ var title=isWeek?'本周成长报告':'本月成长报告';
|
|
|
|
|
+ var sub=isWeek?'9-22 至 9-28 · 全家共同成长':'9 月 · 全家共同成长';
|
|
|
|
|
+ var dims='';
|
|
|
|
|
+ DIMS.forEach(function(d){
|
|
|
|
|
+ var s=isWeek?d.score:Math.max(40,d.score-4);
|
|
|
|
|
+ dims+='<div class="sc-dim"><div class="sd-n" style="color:'+d.color+'">'+s+'</div><div class="sd-l">'+d.name+'</div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ var unlockedN=BADGES.filter(function(b){return !b.locked;}).length;
|
|
|
|
|
+ var card='<div class="share-card hero-share">'+
|
|
|
|
|
+ '<div class="sc-brand"><div class="scb-ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>'+
|
|
|
|
|
+ '<div class="scb-tx">浠艾福 · Care Family</div>'+
|
|
|
|
|
+ '<div class="sc-streak" style="margin-left:auto">'+svgUse('flame',13)+' 连续 '+growthState.streak+' 天</div></div>'+
|
|
|
|
|
+ '<div class="sc-title">'+title+'</div>'+
|
|
|
|
|
+ '<div class="sc-sub">'+sub+'</div>'+
|
|
|
|
|
+ '<div class="sc-dims">'+dims+'</div>'+
|
|
|
|
|
+ '<div class="sc-ach">'+
|
|
|
|
|
+ '<div class="sc-ach-item"><div class="n">'+growthState.baseTasks+'</div><div class="l">完成任务</div></div>'+
|
|
|
|
|
+ '<div class="sc-ach-item"><div class="n">'+growthState.pts.toLocaleString()+'</div><div class="l">成长分</div></div>'+
|
|
|
|
|
+ '<div class="sc-ach-item"><div class="n">'+unlockedN+'</div><div class="l">获得徽章</div></div>'+
|
|
|
|
|
+ '</div>'+
|
|
|
|
|
+ '<div class="sc-foot"><div class="sf-l">成果分享 · 邀请朋友们一起看</div><div class="sf-r">综合 '+(isWeek?76:72)+' 分 ↑</div></div>'+
|
|
|
|
|
+ '</div>';
|
|
|
|
|
+ document.getElementById('rpt-card-slot').innerHTML=card;
|
|
|
|
|
+
|
|
|
|
|
+ document.getElementById('rpt-share').innerHTML=
|
|
|
|
|
+ '<div class="sa pri" onclick="toast(\'已保存到相册,可直接分享\')">'+svgUse('upload',18)+'保存图片</div>'+
|
|
|
|
|
+ '<div class="sa sec" onclick="toast(\'发送给朋友一起看成果\')">'+svgUse('people',18)+'发送给朋友</div>';
|
|
|
|
|
+
|
|
|
|
|
+ var bh='';
|
|
|
|
|
+ BADGES.forEach(function(b){
|
|
|
|
|
+ bh+='<div class="bg-item'+(b.locked?' locked':'')+'" onclick="toast(\''+(b.locked?'尚未解锁:'+b.d:b.n+' 已获得')+'\')">'+
|
|
|
|
|
+ (b.locked?'<div class="bg-lock">'+svgUse('target',14)+'</div>':'')+
|
|
|
|
|
+ '<div class="bg-ring" style="background:linear-gradient(135deg,'+b.c+','+b.c+'99)">'+svgUse(b.ic,24)+'</div>'+
|
|
|
|
|
+ '<div class="bg-nm">'+b.n+'</div><div class="bg-dt">'+b.d+'</div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('rpt-badges').innerHTML=bh;
|
|
|
|
|
+ // 首次进入报告页:若已解锁全勤,播放徽章解锁动画
|
|
|
|
|
+ if (growthState.unlocked){
|
|
|
|
|
+ var lastItem=document.querySelector('#rpt-badges .bg-item:not(.locked):last-child');
|
|
|
|
|
+ if (lastItem){ lastItem.classList.add('just-unlocked'); }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ var hl=[
|
|
|
|
|
+ { ic:'check', c:'var(--dim-body)', t:'<b>小宇</b> 运动打卡 4 次达标', m:'本周' },
|
|
|
|
|
+ { ic:'book', c:'var(--dim-wisdom)', t:'<b>小柚</b> 亲子共读累计 14 天', m:'进行中' },
|
|
|
|
|
+ { ic:'heart', c:'var(--dim-mind)', t:'<b>爷爷</b> 连续 7 天完成情绪打卡', m:'连续 7 天' }
|
|
|
|
|
+ ];
|
|
|
|
|
+ var h='';
|
|
|
|
|
+ hl.forEach(function(x){
|
|
|
|
|
+ h+='<div class="feed-item"><div class="feed-dot" style="background:'+x.c+'22;color:'+x.c+'">'+svgUse(x.ic,16)+'</div>'+
|
|
|
|
|
+ '<div style="flex:1;min-width:0"><div class="fi-t">'+x.t+'</div><div class="fi-time">'+x.m+'</div></div></div>';
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('rpt-highlights').innerHTML=h;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 交互 ===== */
|
|
|
|
|
+ var currentTab='home';
|
|
|
|
|
+ function setTab(tab){
|
|
|
|
|
+ currentTab=tab;
|
|
|
|
|
+ if (tab==='login') return;
|
|
|
|
|
+ taskStack=[];
|
|
|
|
|
+ TASK_SCREENS.forEach(function(s){
|
|
|
|
|
+ var el=document.getElementById('screen-'+s);
|
|
|
|
|
+ if (el) el.classList.remove('active');
|
|
|
|
|
+ });
|
|
|
|
|
+ document.querySelectorAll('.screen').forEach(function(s){
|
|
|
|
|
+ if (s.id==='screen-'+tab){ s.classList.add('active'); } else { s.classList.remove('active'); }
|
|
|
|
|
+ });
|
|
|
|
|
+ document.getElementById('tabbar').style.display = (state.loggedIn) ? 'flex' : 'none';
|
|
|
|
|
+ document.querySelectorAll('.tabbar .tab').forEach(function(t){ t.classList.toggle('on', t.dataset.tab===tab); });
|
|
|
|
|
+ if (tab==='home') renderHome();
|
|
|
|
|
+ if (tab==='health') renderHealth();
|
|
|
|
|
+ if (tab==='growth') renderGrowth();
|
|
|
|
|
+ if (tab==='profile') renderProfile();
|
|
|
|
|
+ }
|
|
|
|
|
+ function openDim(){ document.getElementById('dim-mask').classList.add('show'); document.getElementById('dim-sheet').classList.add('show'); }
|
|
|
|
|
+ function closeDim(){ document.getElementById('dim-mask').classList.remove('show'); document.getElementById('dim-sheet').classList.remove('show'); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== 二级页栈(Task 页:五维总览 / 维度详情 / 上传 / 报告) ===== */
|
|
|
|
|
+ var taskStack=[];
|
|
|
|
|
+ var TASK_SCREENS=['overview','dim','upload','report','quiz','risk','prep','report7'];
|
|
|
|
|
+ function pushScreen(name){
|
|
|
|
|
+ TASK_SCREENS.forEach(function(s){
|
|
|
|
|
+ var el=document.getElementById('screen-'+s);
|
|
|
|
|
+ if (el) el.classList.remove('active');
|
|
|
|
|
+ });
|
|
|
|
|
+ if (name) taskStack.push(name);
|
|
|
|
|
+ if (name){
|
|
|
|
|
+ var el=document.getElementById('screen-'+name);
|
|
|
|
|
+ if (el) el.classList.add('active');
|
|
|
|
|
+ }
|
|
|
|
|
+ // 二级页隐藏 TabBar
|
|
|
|
|
+ document.getElementById('tabbar').style.display = name ? 'none' : (state.loggedIn?'flex':'none');
|
|
|
|
|
+ if (!name && state.loggedIn) setTab(currentTab);
|
|
|
|
|
+ }
|
|
|
|
|
+ function backTo(tab){
|
|
|
|
|
+ taskStack=[];
|
|
|
|
|
+ pushScreen(null);
|
|
|
|
|
+ if (tab) setTab(tab);
|
|
|
|
|
+ }
|
|
|
|
|
+ function openDimDetail(code){
|
|
|
|
|
+ renderDim(code);
|
|
|
|
|
+ pushScreen('dim');
|
|
|
|
|
+ }
|
|
|
|
|
+ function openOverview(){
|
|
|
|
|
+ renderOverview();
|
|
|
|
|
+ pushScreen('overview');
|
|
|
|
|
+ }
|
|
|
|
|
+ function openReport(){
|
|
|
|
|
+ setRptRange(rptRange, document.querySelector('#rpt-tabs .rtt.on'));
|
|
|
|
|
+ pushScreen('report');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function switchMember(m){
|
|
|
|
|
+ document.querySelectorAll('.mchip').forEach(function(c){ c.classList.toggle('on', c.dataset.member===m); });
|
|
|
|
|
+ toast(m==='me'?'已切换到:我':'已切换到:小宇');
|
|
|
|
|
+ }
|
|
|
|
|
+ function completeTask(btn){
|
|
|
|
|
+ if (btn.dataset.done) return;
|
|
|
|
|
+ btn.dataset.done='1';
|
|
|
|
|
+ btn.textContent='已得 ✓'; btn.classList.add('done'); btn.disabled=true;
|
|
|
|
|
+ // 成果驱动:累加成长分 + 连续打卡
|
|
|
|
|
+ growthState.pts += 10;
|
|
|
|
|
+ growthState.streak += 1;
|
|
|
|
|
+ growthState.baseTasks += 1;
|
|
|
|
|
+ if (currentTab==='growth') renderAchievementHero();
|
|
|
|
|
+ toast('获得成长分 +10 · 连续打卡 '+growthState.streak+' 天');
|
|
|
|
|
+ }
|
|
|
|
|
+ function setHealthSeg(seg, el){
|
|
|
|
|
+ document.querySelectorAll('.seg .sg').forEach(function(s){ s.classList.remove('on'); });
|
|
|
|
|
+ el.classList.add('on');
|
|
|
|
|
+ renderHealth();
|
|
|
|
|
+ toast('切换到:'+el.textContent);
|
|
|
|
|
+ }
|
|
|
|
|
+ var toastTimer;
|
|
|
|
|
+ function toast(msg){
|
|
|
|
|
+ var t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show');
|
|
|
|
|
+ clearTimeout(toastTimer); toastTimer=setTimeout(function(){ t.classList.remove('show'); }, 1600);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 登录态切换(演示) */
|
|
|
|
|
+ var state={ loggedIn:true };
|
|
|
|
|
+ function applyLogin(){
|
|
|
|
|
+ document.getElementById('db-in').classList.toggle('on', state.loggedIn);
|
|
|
|
|
+ document.getElementById('db-out').classList.toggle('on', !state.loggedIn);
|
|
|
|
|
+ document.getElementById('tabbar').style.display = state.loggedIn ? 'flex' : 'none';
|
|
|
|
|
+ ['home','health','growth','profile'].forEach(function(t){ document.getElementById('screen-'+t).style.display = state.loggedIn? 'block':'none'; });
|
|
|
|
|
+ document.getElementById('screen-login').style.display = state.loggedIn? 'none':'block';
|
|
|
|
|
+ document.getElementById('screen-login').classList.toggle('active', !state.loggedIn);
|
|
|
|
|
+ if (state.loggedIn){ setTab(currentTab); }
|
|
|
|
|
+ }
|
|
|
|
|
+ function demoLogin(){ state.loggedIn=true; applyLogin(); toast('欢迎回来,林晓'); }
|
|
|
|
|
+ document.getElementById('db-in').onclick=function(){ state.loggedIn=true; applyLogin(); };
|
|
|
|
|
+ document.getElementById('db-out').onclick=function(){ state.loggedIn=false; applyLogin(); };
|
|
|
|
|
+
|
|
|
|
|
+ /* ===== SVG 图标精灵(内联,替代 emoji) ===== */
|
|
|
|
|
+ var SPRITE = {
|
|
|
|
|
+ check:'<polyline points="4 12 9 17 20 6"/>',
|
|
|
|
|
+ star:'<polygon points="12 3 14.5 9.5 21 10 16 14.5 17.5 21 12 17.5 6.5 21 8 14.5 3 10 9.5 9.5"/>',
|
|
|
|
|
+ heart:'<path d="M12 20s-7-4.4-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.6 12 20 12 20z"/>',
|
|
|
|
|
+ target:'<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/>',
|
|
|
|
|
+ bulb:'<path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/>',
|
|
|
|
|
+ coin:'<circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/>',
|
|
|
|
|
+ flame:'<path d="M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c0-1 0-1 .5-2 1.5 2 2.5 3.5 2.5 6a5 5 0 0 1-10 0c0-4 3-6 5-11z"/>',
|
|
|
|
|
+ gift:'<rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 12h18M12 8v13"/><path d="M12 8C10 8 8 6 9 4.5 10.5 4 12 6 12 8zM12 8c2 0 4-2 3-3.5C13.5 4 12 6 12 8z"/>',
|
|
|
|
|
+ medal:'<circle cx="12" cy="9" r="6"/><path d="M9 14l-2 7 5-3 5 3-2-7"/>',
|
|
|
|
|
+ book:'<path d="M4 5a2 2 0 0 1 2-2h12v16H6a2 2 0 0 0-2 2z"/><path d="M4 19a2 2 0 0 1 2-2h12"/>',
|
|
|
|
|
+ upload:'<path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/>',
|
|
|
|
|
+ target2:'',
|
|
|
|
|
+ diet:'<path d="M5 3v8a3 3 0 0 0 6 0V3M8 3v18M16 3c-1.5 0-2 2-2 4s.5 4 2 4 2-2 2-4-.5-4-2-4zM16 11v10"/>',
|
|
|
|
|
+ run:'<circle cx="15" cy="5" r="2"/><path d="M13 21l2-5-3-2-2 3M15 14l3 2 1 4M13 11l3 1 2-1"/>',
|
|
|
|
|
+ moon:'<path d="M20 14a8 8 0 1 1-9-11 6 6 0 0 0 9 11z"/>',
|
|
|
|
|
+ smile:'<circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01M15 9h.01"/>',
|
|
|
|
|
+ people:'<circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.5-5 6-5s6 2 6 5"/><path d="M16 6a3 3 0 0 1 0 6M21 20c0-2.5-1.5-4-4-4.5"/>',
|
|
|
|
|
+ share:'<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/>',
|
|
|
|
|
+ cam:'<path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.4"/>',
|
|
|
|
|
+ chart:'<path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/>',
|
|
|
|
|
+ leaf:'<path d="M5 19c0-8 6-13 14-14 0 9-5 14-13 14z"/><path d="M5 19c3-4 6-6 10-7"/>',
|
|
|
|
|
+ clock:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
|
|
|
|
|
+ alert:'<path d="M12 3l9 16H3z"/><path d="M12 10v4M12 17h.01"/>',
|
|
|
|
|
+ shield:'<path d="M12 3l8 3v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5V6z"/><path d="M9 12l2 2 4-4"/>'
|
|
|
|
|
+ };
|
|
|
|
|
+ (function injectSprite(){
|
|
|
|
|
+ var defs='';
|
|
|
|
|
+ for (var k in SPRITE){ defs+='<symbol id="i-'+k+'" viewBox="0 0 24 24">'+SPRITE[k]+'</symbol>'; }
|
|
|
|
|
+ var s=document.createElementNS('http://www.w3.org/2000/svg','svg');
|
|
|
|
|
+ s.setAttribute('style','display:none'); s.innerHTML=defs;
|
|
|
|
|
+ document.body.appendChild(s);
|
|
|
|
|
+ })();
|
|
|
|
|
+
|
|
|
|
|
+ /* 时钟 */
|
|
|
|
|
+ function tick(){ var d=new Date(); document.getElementById('clock').textContent = d.getHours()+':'+String(d.getMinutes()).padStart(2,'0'); }
|
|
|
|
|
+ tick(); setInterval(tick, 30000);
|
|
|
|
|
+
|
|
|
|
|
+ /* 闪屏(还原 flash 页:2s 自动进入,轻触可跳过) */
|
|
|
|
|
+ function hideSplash(){
|
|
|
|
|
+ clearTimeout(splashTimer);
|
|
|
|
|
+ var s=document.getElementById('splash');
|
|
|
|
|
+ if (s) s.classList.add('hide');
|
|
|
|
|
+ }
|
|
|
|
|
+ var splashTimer = setTimeout(hideSplash, 2000);
|
|
|
|
|
+
|
|
|
|
|
+ /* 初始化 */
|
|
|
|
|
+ renderHome(); renderHealth(); renderGrowth(); renderProfile(); renderDimSheet();
|
|
|
|
|
+ renderOverview(); setRptRange('week', document.querySelector('#rpt-tabs .rtt.on'));
|
|
|
|
|
+ renderUpload(); renderPrepPage(); renderD7();
|
|
|
|
|
+ applyLogin();
|
|
|
|
|
+</script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|