prototype-redesign.html 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  6. <title>浠艾福 · 核心家庭体验闭环重设计(暖橙系 · 成就驱动)</title>
  7. <style>
  8. /* =========================================================
  9. 核心家庭体验闭环重设计 —— 暖橙 Warm Calm Wellness 体系
  10. 品牌橙 #F97316 | 桃白底 #FFF7F1 | 深棕橙 #7C2D12
  11. 五维色严格取 flash 页:身 #FF8C42 / 心 #FF6B9D / 智 #6366F1 / 行 #10B981 / 富 #F59E0B
  12. 设计原则:成就驱动的家庭成长叙事 —— 看见成果 → 想继续 → 愿分享
  13. 动效克制:呼吸/脉冲/滑动/闪烁/生长,尊重 prefers-reduced-motion
  14. ========================================================= */
  15. :root{
  16. --brand:#F97316; --brand-2:#EA580C; --brand-soft:#FFF1E6; --peach:#FFF7ED;
  17. --hero-a:#FFF7ED; --hero-b:#FFEDD5; --hero-c:#FED7AA;
  18. --dim-wisdom:#6366F1; --dim-mind:#FF6B9D; --dim-body:#FF8C42;
  19. --dim-action:#10B981; --dim-wealth:#F59E0B;
  20. --ink:#432918; --ink-2:#9A8473; --line:#F0E4D8; --surface-2:#FFF3E9;
  21. --r:14px; --r-lg:16px;
  22. }
  23. *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  24. body{background:#EDE4DA;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  25. display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px;}
  26. .phone{position:relative;width:375px;height:812px;background:var(--peach);border-radius:40px;
  27. overflow:hidden;box-shadow:0 20px 60px rgba(80,45,15,.22);border:1px solid #F0E4D8;}
  28. .screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 16px;
  29. overflow-y:auto;padding-bottom:74px;animation:fadeUp .5s ease-out both;}
  30. .screen::-webkit-scrollbar{display:none;}
  31. .hidden{display:none!important;}
  32. /* 状态栏 */
  33. .statusbar{height:44px;display:flex;align-items:center;justify-content:space-between;
  34. padding:0 12px;color:var(--ink);font-size:15px;font-weight:600;flex-shrink:0;}
  35. .battery{width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px;position:relative;}
  36. .battery::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--ink);border-radius:1px;}
  37. .battery::before{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:13px;background:var(--ink);border-radius:1px;}
  38. .apptitle{font-size:18px;font-weight:700;color:var(--ink);margin-top:16px;}
  39. .date{text-align:right;color:var(--ink-2);font-size:13px;margin-top:-21px;margin-left:auto;width:120px;}
  40. /* 能量英雄(桃橙渐变卡 · 保留 flash 页暖色基因) */
  41. .hero{margin-top:18px;height:108px;border-radius:var(--r-lg);
  42. background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c));
  43. padding:18px 20px;position:relative;overflow:hidden;flex-shrink:0;
  44. border:1px solid #F6D9BE;}
  45. .hero .label{color:var(--brand-ink);font-size:13px;font-weight:600;}
  46. .hero .score{color:var(--brand-ink);font-size:40px;font-weight:800;line-height:1;margin-top:6px;
  47. animation:breathe 3.2s ease-in-out infinite;}
  48. .hero .unit{color:var(--brand-ink);font-size:14px;margin-left:6px;font-weight:600;}
  49. .hero .dots{position:absolute;right:20px;top:64px;display:flex;gap:9px;}
  50. .hero .dots i{width:12px;height:12px;border-radius:50%;display:block;animation:dotBreath 3.2s ease-in-out infinite;}
  51. .hero .dots i:nth-child(2){animation-delay:.3s}
  52. .hero .dots i:nth-child(3){animation-delay:.6s}
  53. .hero .dots i:nth-child(4){animation-delay:.9s}
  54. .hero .dots i:nth-child(5){animation-delay:1.2s}
  55. /* 本周成果条(强对比记分牌式,突出"已获得的成果") */
  56. .achieve{display:flex;gap:10px;margin-top:14px;flex-shrink:0;align-items:stretch;}
  57. .ach{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 4px;text-align:center;
  58. display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(67,41,24,.05);animation:popIn .5s ease-out both;}
  59. .ach:nth-child(2){animation-delay:.08s}
  60. .ach:nth-child(3){animation-delay:.16s}
  61. .ach-n{display:block;font-size:25px;font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.5px;margin-top:auto;flex-shrink:0;}
  62. .ach-l{display:block;font-size:11px;color:var(--ink-2);padding-top:7px;font-weight:500;flex-shrink:0;}
  63. .ach.trophy{background:linear-gradient(180deg,#FFF8E8,#FCEFD2);border:1px solid #F5D98A;}
  64. .ach.trophy .ach-n{color:#8A5A00;}
  65. .ach.trophy .tro{width:24px;height:24px;margin:0 auto 3px;display:block;filter:drop-shadow(0 0 2px rgba(245,165,36,.35));
  66. animation:trophyIn .7s .5s cubic-bezier(.22,1,.36,1) both,trophyFloat 3s 1.2s ease-in-out infinite,trophyGlow 2.4s 1.5s ease-in-out infinite;}
  67. .sectitle{font-size:15px;font-weight:700;color:var(--ink);margin:26px 0 12px;flex-shrink:0;}
  68. .sectitle.brand{color:var(--brand);font-size:13px;letter-spacing:.5px;font-weight:700;}
  69. /* 本周主线卡 */
  70. .mainline{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;}
  71. .mainline .row{display:flex;justify-content:space-between;align-items:center;}
  72. .mainline .topic{font-size:15px;font-weight:700;color:var(--ink);}
  73. .mainline .prog{font-size:13px;color:var(--ink-2);}
  74. .mainline .prog b{color:var(--brand);font-weight:800;}
  75. .mainline .guide{font-size:12px;color:var(--brand);font-weight:600;margin-top:10px;animation:blink 2.4s ease-in-out infinite;}
  76. .track{height:8px;border-radius:4px;background:var(--surface-2);margin-top:12px;overflow:hidden;}
  77. .fill{height:100%;border-radius:4px;background:var(--brand);width:0;animation:barGrow 1.1s .25s cubic-bezier(.22,1,.36,1) forwards;}
  78. /* 今日一站(橙色脉冲 + 箭头滑动,引导下一步) */
  79. .nba{margin-top:18px;height:92px;border-radius:var(--r);background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));
  80. padding:16px;position:relative;color:#fff;animation:pulseGlow 2.4s ease-in-out infinite;}
  81. .nba .kicker{font-size:12px;color:#FFF1E0;font-weight:600;}
  82. .nba .title{font-size:19px;font-weight:800;margin-top:8px;letter-spacing:.3px;}
  83. .nba .sub{font-size:12px;color:#FFF1E0;margin-top:6px;}
  84. .nba .sub .gain{background:rgba(255,255,255,.28);padding:1px 8px;border-radius:7px;font-weight:800;}
  85. .nba .arrow{position:absolute;right:18px;top:34px;font-size:24px;font-weight:700;animation:slideX 1.6s ease-in-out infinite;}
  86. /* 家庭动态 */
  87. .dyn{border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;background:#fff;}
  88. .dyn .item{display:flex;align-items:center;height:36px;font-size:14px;color:#5A4736;border-bottom:1px solid var(--surface-2);}
  89. .dyn .item:last-child{border-bottom:none;}
  90. .dyn .news{width:8px;height:8px;border-radius:50%;background:var(--dim-mind);margin-right:8px;animation:dotBlink 1.6s ease-in-out infinite;}
  91. /* 成长卡 */
  92. .growth{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:16px;margin-top:18px;}
  93. .growth .mini{background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));border-radius:10px;padding:16px 20px;color:#fff;margin-bottom:14px;}
  94. .growth .mini .t{font-size:15px;font-weight:800;}
  95. .growth .mini .gain{font-size:18px;}
  96. .growth .mini .s{font-size:12px;color:#FFF1E0;margin-top:4px;}
  97. /* 分享 CTA:与今日一站橙色同源渐变 */
  98. .growth .btn{border:none;color:#fff;background:linear-gradient(135deg,#FFBE7A 0%,var(--brand) 48%,var(--brand-2) 100%);
  99. border-radius:999px;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;
  100. font-size:16px;font-weight:800;width:100%;margin:0 auto;cursor:pointer;letter-spacing:.3px;position:relative;
  101. overflow:hidden;box-shadow:0 8px 22px rgba(249,115,22,.30);border:1px solid rgba(255,255,255,.3);
  102. animation:sharePulse 2.4s ease-in-out infinite;}
  103. .growth .btn svg{width:18px;height:18px;flex-shrink:0;position:relative;z-index:1;}
  104. .growth .btn .txt{position:relative;z-index:1;text-shadow:0 1px 4px rgba(124,45,18,.4);padding-bottom:1px;}
  105. .growth .btn .shine{position:absolute;top:0;left:-60%;width:50%;height:100%;z-index:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:shareShine 3s ease-in-out infinite;}
  106. .growth .btn:active{transform:scale(.97);}
  107. /* TabBar */
  108. .tabbar{position:absolute;left:0;right:0;bottom:0;height:54px;background:#fff;border-top:1px solid var(--line);
  109. display:flex;align-items:center;padding:0 26px;justify-content:space-between;z-index:6;}
  110. .tab{font-size:12px;color:var(--ink-2);cursor:pointer;}
  111. .tab.active{color:var(--brand);font-weight:700;}
  112. .tab-center{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));
  113. color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  114. position:absolute;left:50%;transform:translateX(-50%);bottom:8px;cursor:pointer;box-shadow:0 6px 16px rgba(249,115,22,.4);}
  115. /* 抽屉 + 遮罩 */
  116. .overlay{position:absolute;inset:0;background:rgba(67,41,24,.42);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:7;}
  117. .overlay.show{opacity:1;pointer-events:auto;}
  118. .sheet{position:absolute;left:0;right:0;bottom:0;height:430px;background:#fff;border-radius:20px 20px 0 0;padding:10px 16px 16px;
  119. transform:translateY(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);z-index:8;}
  120. .sheet.show{transform:translateY(0);}
  121. .handle{width:41px;height:4px;border-radius:2px;background:#E5D6C8;margin:6px auto 14px;}
  122. .sheet h3{font-size:18px;font-weight:700;color:var(--ink);}
  123. .drow{display:flex;align-items:center;height:50px;border-bottom:1px solid var(--surface-2);cursor:pointer;}
  124. .drow .dot{width:12px;height:12px;border-radius:50%;margin-right:14px;flex-shrink:0;}
  125. .drow .name{font-size:14px;color:#5A4736;flex:1;}
  126. .drow .val{font-size:15px;font-weight:700;color:var(--ink);}
  127. .drow .go{color:var(--ink-2);font-size:18px;margin-left:6px;}
  128. .expand{margin-top:18px;height:46px;border-radius:999px;background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));color:#fff;
  129. display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(249,115,22,.3);}
  130. /* 全屏沙盘页 / 维度详情 / 报告分享(横向滑入层) */
  131. .layer{position:absolute;inset:0;background:var(--peach);padding:0 16px;transform:translateX(100%);
  132. transition:transform .34s cubic-bezier(.22,1,.36,1);z-index:9;overflow-y:auto;padding-bottom:24px;}
  133. .layer::-webkit-scrollbar{display:none;}
  134. .layer.show{transform:translateX(0);}
  135. .sb-head{height:44px;display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
  136. .sb-back{font-size:26px;font-weight:700;color:var(--ink);cursor:pointer;}
  137. .sb-title{font-size:18px;font-weight:700;color:var(--ink);}
  138. .radarcard{border:1px solid var(--line);border-radius:var(--r-lg);height:300px;margin-top:18px;display:flex;align-items:center;justify-content:center;background:#fff;}
  139. .radarcard svg{animation:radarIn .8s ease-out both;cursor:pointer;}
  140. .trend{display:flex;gap:12px;margin-top:18px;}
  141. .tcard{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#fff;cursor:pointer;}
  142. .tcard .n{font-size:14px;font-weight:700;}
  143. .tcard .d{font-size:26px;font-weight:800;color:var(--dim-action);margin-top:8px;}
  144. .sug{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:18px 20px;margin-top:18px;margin-bottom:10px;}
  145. .sug .si{position:relative;padding-left:12px;margin-bottom:16px;}
  146. .sug .si:last-child{margin-bottom:0;}
  147. .sug .si::before{content:"";position:absolute;left:0;top:2px;width:4px;height:42px;border-radius:2px;}
  148. .sug .si.w::before{background:var(--dim-wealth);}
  149. .sug .si.b::before{background:var(--dim-body);}
  150. .sug .si .st{font-size:15px;font-weight:700;color:var(--ink);}
  151. .sug .si .sd{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5;}
  152. /* —— 客户名突出 + 图标 —— */
  153. .name-hl{display:inline-flex;align-items:center;gap:5px;font-weight:700;line-height:1.2;}
  154. .name-hl svg{width:16px;height:16px;flex-shrink:0;}
  155. .name-hl .nm{color:var(--brand);}
  156. .name-hl.gold .nm{color:var(--dim-wealth);}
  157. /* —— 维度字突出 —— */
  158. .dim{color:var(--brand);font-weight:700;}
  159. /* —— 焦点维度「智」增强 —— */
  160. .dim-w{color:var(--dim-wisdom);font-weight:700;}
  161. .dim-pill{display:inline-block;padding:1px 9px;border-radius:8px;background:#ECEBFD;color:var(--dim-wisdom);font-weight:700;margin:0 1px;animation:wisdomGlow 2.6s ease-in-out infinite;}
  162. @keyframes wisdomGlow{0%,100%{box-shadow:0 0 0 rgba(99,102,241,0)}50%{box-shadow:0 0 12px rgba(99,102,241,.5)}}
  163. /* —— + 数字突出 —— */
  164. .gain{color:var(--dim-action);font-weight:800;font-variant-numeric:tabular-nums;}
  165. .ach .gain{font-size:25px;animation:gainPulse 2.4s ease-in-out infinite;}
  166. @keyframes gainPulse{0%,100%{text-shadow:0 0 0 rgba(16,185,129,0)}50%{text-shadow:0 0 12px rgba(16,185,129,.45)}}
  167. .tcard .d{animation:popIn .5s ease-out both;}
  168. /* —— 连续打卡「21」突出 —— */
  169. .streak-num{font-size:17px;font-weight:800;color:var(--dim-wealth);font-variant-numeric:tabular-nums;padding:0 1px;animation:streakPop .6s .45s cubic-bezier(.22,1,.36,1) both;}
  170. @keyframes streakPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.18)}100%{opacity:1;transform:none}}
  171. /* —— 全家五维首次全达标 · 庆典 —— */
  172. .celebrate{margin-top:12px;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;color:#6B4A00;
  173. background:linear-gradient(115deg,#FFF6DC,#FFE2A0,#FFF6DC);background-size:220% 100%;border:1px solid #F2D07A;
  174. box-shadow:0 6px 18px rgba(245,165,36,.28);animation:celeIn .7s .3s cubic-bezier(.22,1,.36,1) both,celeGlow 2.6s 1s ease-in-out infinite;}
  175. .celebrate .shine{position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);animation:shine 2.8s 1.1s ease-in-out infinite;}
  176. .celebrate .medal{width:32px;height:32px;flex-shrink:0;position:relative;z-index:1;filter:drop-shadow(0 2px 3px rgba(180,120,0,.35));animation:medalFloat 3s ease-in-out infinite;}
  177. .celebrate .ct{font-size:14px;font-weight:700;line-height:1.45;position:relative;z-index:1;}
  178. .celebrate .first{display:inline-block;background:#fff;color:#D9880C;font-size:11px;font-weight:800;padding:1px 7px;border-radius:6px;margin:0 3px;vertical-align:middle;box-shadow:0 1px 2px rgba(180,120,0,.25);animation:firstPulse 2s ease-in-out infinite;}
  179. /* ===== 健康屏 ===== */
  180. .hg-grid{display:flex;gap:12px;margin-top:14px;}
  181. .hg-ent{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;background:#fff;cursor:pointer;text-align:center;}
  182. .hg-ent .ic{width:34px;height:34px;margin:0 auto 8px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);}
  183. .hg-ent .ic svg{width:20px;height:20px;}
  184. .hg-ent .t{font-size:13px;font-weight:700;color:var(--ink);}
  185. .hg-ent .s{font-size:11px;color:var(--ink-2);margin-top:3px;}
  186. .checkin{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding-bottom:4px;}
  187. .checkin::-webkit-scrollbar{display:none;}
  188. .ck{flex:0 0 auto;width:84px;border:1px solid var(--line);border-radius:12px;padding:12px 0;background:#fff;text-align:center;cursor:pointer;}
  189. .ck .ic{width:28px;height:28px;margin:0 auto 6px;}
  190. .ck .t{font-size:12px;color:#5A4736;font-weight:600;}
  191. .rec{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;}
  192. .rec .ri{display:flex;align-items:center;height:50px;padding:0 16px;border-bottom:1px solid var(--surface-2);font-size:13px;color:#5A4736;}
  193. .rec .ri:last-child{border-bottom:none;}
  194. .rec .ri .dot{width:8px;height:8px;border-radius:50%;margin-right:10px;}
  195. .rec .ri .tm{margin-left:auto;color:var(--ink-2);font-size:11px;}
  196. /* ===== 成长屏 · 成就 Hero ===== */
  197. .ach-hero{margin-top:16px;border-radius:var(--r-lg);padding:18px;background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c));border:1px solid #F6D9BE;display:flex;align-items:center;gap:16px;}
  198. .ring{width:84px;height:84px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--brand) 0% 71%,#F0D9C2 71% 100%);position:relative;}
  199. .ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:linear-gradient(135deg,#FFF7ED,#FFEDD5);}
  200. .ring .rt{position:relative;z-index:1;text-align:center;}
  201. .ring .rt b{font-size:22px;font-weight:800;color:var(--brand-ink);}
  202. .ring .rt span{display:block;font-size:10px;color:var(--brand-ink);}
  203. .ach-stats{flex:1;display:flex;flex-direction:column;gap:8px;}
  204. .ach-stats .as{display:flex;justify-content:space-between;font-size:13px;color:var(--brand-ink);}
  205. .ach-stats .as b{font-weight:800;font-size:16px;}
  206. .fire{display:flex;gap:5px;margin-top:4px;}
  207. .fire i{width:20px;height:20px;border-radius:5px;background:#F0D9C2;display:flex;align-items:center;justify-content:center;font-size:11px;}
  208. .fire i.on{background:linear-gradient(135deg,#FFAE6B,var(--brand));color:#fff;animation:firePop .4s ease-out both;}
  209. .fire i.today{box-shadow:0 0 0 2px var(--brand);}
  210. .tasks{margin-top:16px;}
  211. .tk{display:flex;align-items:center;height:54px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 14px;margin-bottom:10px;}
  212. .tk .cb{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  213. .tk.done .cb{background:var(--dim-action);border-color:var(--dim-action);}
  214. .tk.done .cb svg{width:13px;height:13px;}
  215. .tk .ti{flex:1;margin-left:12px;font-size:14px;color:#5A4736;font-weight:600;}
  216. .tk.done .ti{color:var(--ink-2);text-decoration:line-through;}
  217. .tk .tg{font-size:12px;color:var(--dim-action);font-weight:800;}
  218. .unlock{margin-top:6px;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:#6B4A00;
  219. background:linear-gradient(115deg,#FFF6DC,#FFE2A0,#FFF6DC);background-size:220% 100%;border:1px solid #F2D07A;
  220. box-shadow:0 6px 18px rgba(245,165,36,.28);animation:celeIn .7s cubic-bezier(.22,1,.36,1) both,celeGlow 2.6s 1s ease-in-out infinite;}
  221. .unlock .medal{width:30px;height:30px;flex-shrink:0;}
  222. .unlock .ut{font-size:13px;font-weight:700;line-height:1.4;}
  223. .unlock .usub{font-size:11px;color:#8A6A20;margin-top:2px;}
  224. .unlock .ug{margin-left:auto;font-size:12px;font-weight:800;color:#D9880C;}
  225. /* ===== 我的屏 ===== */
  226. .idcard{margin-top:16px;border-radius:var(--r-lg);padding:16px;background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));color:#fff;display:flex;align-items:center;gap:14px;}
  227. .idcard .av{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;}
  228. .idcard .nm{font-size:18px;font-weight:800;}
  229. .idcard .rl{font-size:12px;color:#FFF1E0;margin-top:3px;}
  230. .members{display:flex;gap:0;margin-top:14px;}
  231. .mb{flex:1;text-align:center;cursor:pointer;}
  232. .mb .av{width:46px;height:46px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;}
  233. .mb .nm{font-size:12px;color:#5A4736;font-weight:600;}
  234. .mb .sc{font-size:11px;color:var(--ink-2);}
  235. .menu{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;}
  236. .menu .mi{display:flex;align-items:center;height:50px;padding:0 16px;border-bottom:1px solid var(--surface-2);font-size:14px;color:#5A4736;cursor:pointer;}
  237. .menu .mi:last-child{border-bottom:none;}
  238. .menu .mi .ic{width:22px;height:22px;margin-right:12px;color:var(--brand);}
  239. .menu .mi .go{margin-left:auto;color:var(--ink-2);font-size:18px;}
  240. /* ===== 维度详情 ===== */
  241. .dim-hero{border-radius:var(--r-lg);padding:20px;margin-top:16px;color:#fff;display:flex;align-items:center;gap:16px;}
  242. .dim-hero .big{font-size:44px;font-weight:800;line-height:1;}
  243. .dim-hero .lab{font-size:14px;font-weight:600;opacity:.92;}
  244. .dim-hero .desc{font-size:12px;opacity:.85;margin-top:4px;}
  245. .kpi{display:flex;gap:12px;margin-top:16px;}
  246. .kpi .k{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;text-align:center;}
  247. .kpi .k .v{font-size:18px;font-weight:800;color:var(--ink);}
  248. .kpi .k .l{font-size:11px;color:var(--ink-2);margin-top:3px;}
  249. .acts{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px 16px;}
  250. .act{display:flex;align-items:center;height:48px;border-bottom:1px solid var(--surface-2);font-size:13px;color:#5A4736;}
  251. .act:last-child{border-bottom:none;}
  252. .act .cb{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);margin-right:12px;flex-shrink:0;}
  253. .act.done .cb{background:var(--dim-action);border-color:var(--dim-action);display:flex;align-items:center;justify-content:center;}
  254. .act.done .cb svg{width:12px;height:12px;}
  255. .act.done{color:var(--ink-2);text-decoration:line-through;}
  256. /* ===== 成长报告分享卡 ===== */
  257. .report{position:absolute;inset:0;background:rgba(67,41,24,.55);z-index:11;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;}
  258. .report.show{opacity:1;pointer-events:auto;}
  259. .rcard{width:300px;border-radius:20px;background:linear-gradient(160deg,#FFFBF5,#FFF1E0);padding:22px 20px;box-shadow:0 20px 50px rgba(80,45,15,.4);transform:scale(.9);transition:transform .3s cubic-bezier(.22,1,.36,1);overflow:hidden;}
  260. .report.show .rcard{transform:scale(1);}
  261. .rcard .rt{font-size:17px;font-weight:800;color:var(--brand-ink);text-align:center;}
  262. .rcard .rs{font-size:12px;color:var(--ink-2);text-align:center;margin-top:4px;}
  263. .rscore{display:flex;justify-content:space-around;margin-top:16px;}
  264. .rscore .rsi{text-align:center;}
  265. .rscore .rsi b{font-size:22px;font-weight:800;}
  266. .rscore .rsi span{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;}
  267. .rfire{display:flex;justify-content:center;gap:5px;margin-top:14px;}
  268. .rfire i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#FFAE6B,var(--brand));color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;}
  269. .rsum{display:flex;justify-content:space-around;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
  270. .rsum .rm{text-align:center;}
  271. .rsum .rm b{font-size:18px;font-weight:800;color:var(--brand-ink);}
  272. .rsum .rm span{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;}
  273. .rbtn{margin-top:18px;height:46px;border-radius:999px;background:linear-gradient(135deg,#FFBE7A,var(--brand) 48%,var(--brand-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;gap:8px;box-shadow:0 8px 22px rgba(249,115,22,.35);position:relative;overflow:hidden;}
  274. .rbtn svg{width:18px;height:18px;}
  275. .rclose{text-align:center;color:var(--ink-2);font-size:13px;margin-top:12px;cursor:pointer;}
  276. /* ===== 关键帧 ===== */
  277. @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  278. @keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
  279. @keyframes breathe{0%,100%{text-shadow:0 0 0 rgba(124,45,18,0)}50%{text-shadow:0 0 14px rgba(124,45,18,.35)}}
  280. @keyframes dotBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
  281. @keyframes pulseGlow{0%,100%{box-shadow:0 8px 22px rgba(249,115,22,.3)}50%{box-shadow:0 8px 34px rgba(249,115,22,.6)}}
  282. @frames blink{0%,100%{opacity:1}50%{opacity:.55}}
  283. @keyframes dotBlink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
  284. @keyframes slideX{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
  285. @keyframes barGrow{from{width:0}to{width:60%}}
  286. @keyframes radarIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
  287. @keyframes trophyIn{0%{opacity:0;transform:translateY(-12px) scale(.4) rotate(-30deg)}70%{transform:translateY(2px) scale(1.08) rotate(6deg)}100%{opacity:1;transform:none}}
  288. @keyframes trophyFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
  289. @keyframes trophyGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(245,165,36,.35))}50%{filter:drop-shadow(0 0 8px rgba(245,165,36,.75))}}
  290. @keyframes sharePulse{0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(249,115,22,.3)}50%{transform:scale(1.025);box-shadow:0 8px 34px rgba(249,115,22,.6)}}
  291. @keyframes shareShine{0%{left:-60%}55%,100%{left:135%}}
  292. @keyframes celeIn{0%{opacity:0;transform:translateY(12px) scale(.94)}100%{opacity:1;transform:none}}
  293. @keyframes celeGlow{0%,100%{box-shadow:0 6px 18px rgba(245,165,36,.28)}50%{box-shadow:0 8px 30px rgba(245,165,36,.6)}}
  294. @keyframes shine{0%{left:-60%}55%,100%{left:135%}}
  295. @keyframes medalFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
  296. @keyframes firstPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
  297. @keyframes firePop{0%{transform:scale(.6)}100%{transform:none}}
  298. @media (prefers-reduced-motion: reduce){
  299. *{animation:none!important;transition:none!important;}
  300. .fill{width:60%!important;}
  301. }
  302. </style>
  303. </head>
  304. <body>
  305. <div class="phone">
  306. <!-- ============ 首页 ============ -->
  307. <div class="screen" id="home">
  308. <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
  309. <div class="apptitle">浠艾福</div>
  310. <div class="date">10月6日 周二</div>
  311. <div class="hero">
  312. <div class="label">全家五<span style="color:#C2410C;font-weight:800">维</span>能量</div>
  313. <div><span class="score">78</span><span class="unit">分</span></div>
  314. <div class="dots">
  315. <i style="background:var(--dim-wisdom)"></i><i style="background:var(--dim-mind)"></i>
  316. <i style="background:var(--dim-body)"></i><i style="background:var(--dim-action)"></i><i style="background:var(--dim-wealth)"></i>
  317. </div>
  318. </div>
  319. <div class="achieve">
  320. <div class="ach"><span class="ach-n"><span class="gain">+62</span></span><span class="ach-l">本周成长值</span></div>
  321. <div class="ach"><span class="ach-n">×3</span><span class="ach-l">解锁徽章</span></div>
  322. <div class="ach trophy"><svg class="tro" viewBox="0 0 24 24"><defs><linearGradient id="tg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCE08A"/><stop offset="1" stop-color="#F5A524"/></linearGradient></defs><path d="M7 4h10v4a5 5 0 0 1-10 0V4z" fill="url(#tg)"/><path d="M7 5H4v2a3 3 0 0 0 3 3" fill="none" stroke="#E0920F" stroke-width="1.3"/><path d="M17 5h3v2a3 3 0 0 1-3 3" fill="none" stroke="#E0920F" stroke-width="1.3"/><path d="M12 13v3" stroke="#E0920F" stroke-width="1.3"/><rect x="10" y="15" width="4" height="2.4" rx=".5" fill="url(#tg)"/><path d="M8.6 17.4h6.8l.8 3.2H7.8z" fill="url(#tg)"/></svg><span class="ach-n">5/5</span><span class="ach-l">全达标</span></div>
  323. </div>
  324. <div class="sectitle brand">本周成长主线</div>
  325. <div class="mainline">
  326. <div class="row"><span class="topic"><span class="name-hl"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#F97316"/><circle cx="9" cy="10" r="1.4" fill="#fff"/><circle cx="15" cy="10" r="1.4" fill="#fff"/><path d="M8 14.5c1.2 1.6 6.8 1.6 8 0" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg><span class="nm">小宇</span></span> 的<span class="dim-pill">智</span>维突破</span><span class="prog"><b>3</b>/5</span></div>
  327. <div class="guide">还差 2 站 · 解锁本周<span class="dim-w">智</span>维徽章 ›</div>
  328. <div class="track"><div class="fill"></div></div>
  329. </div>
  330. <div class="nba">
  331. <div class="kicker">下一步 · 今日一站</div>
  332. <div class="title">完成数学挑战</div>
  333. <div class="sub">完成后 <span class="gain">+20</span> 成长值</div>
  334. <div class="arrow">›</div>
  335. </div>
  336. <div class="sectitle">家庭动态</div>
  337. <div class="dyn">
  338. <div class="item"><span class="news"></span><span style="color:var(--dim-wealth);font-weight:700">小柚</span> 连续打卡 <span class="streak-num">21</span> 天</div>
  339. </div>
  340. <div class="celebrate">
  341. <svg class="medal" viewBox="0 0 24 24"><defs><linearGradient id="mg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCE08A"/><stop offset="1" stop-color="#F5A524"/></linearGradient></defs><path d="M9.2 4l1.6 3.2M14.8 4l-1.6 3.2" stroke="#E0920F" stroke-width="1.4" stroke-linecap="round"/><circle cx="12" cy="13.5" r="7" fill="url(#mg)" stroke="#E0920F" stroke-width="1"/><path d="M12 9.8l1.35 2.8 3.05.45-2.2 2.15.52 3.05L12 18.9l-2.72 1.45.52-3.05-2.2-2.15 3.05-.45z" fill="#fff"/></svg>
  342. <span class="ct">本周 · 全家五维 <span class="first">首次</span> 全达标</span>
  343. <span class="shine"></span>
  344. </div>
  345. <div class="sectitle">本周家庭成长卡</div>
  346. <div class="growth">
  347. <div class="mini"><div class="t">五维全达标 · <span style="color:#fff;font-weight:800">智</span> <span class="gain">+12</span></div><div class="s">本周家庭成长报告 · 朋友们都在期待这一刻</div></div>
  348. <div class="btn" id="shareFromHome"><svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z" fill="#fff"/></svg><span class="txt">成果分享 · 邀请朋友们一起看 ›</span><span class="shine"></span></div>
  349. </div>
  350. </div>
  351. <!-- ============ 健康 ============ -->
  352. <div class="screen hidden" id="health">
  353. <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
  354. <div class="apptitle">健康</div>
  355. <div class="date">数据中心</div>
  356. <div class="hg-grid">
  357. <div class="hg-ent" id="toReport"><div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#F97316" stroke-width="1.8"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 17v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2"/></svg></div><div class="t">上传报告</div><div class="s">拍照/相册</div></div>
  358. <div class="hg-ent" id="toAssess"><div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#F97316" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div><div class="t">在线测评</div><div class="s">认知/身心</div></div>
  359. </div>
  360. <div class="sectitle brand">五维能量一眼看</div>
  361. <div class="radarcard" id="miniRadar" style="height:240px;cursor:pointer">
  362. <svg width="210" height="210" viewBox="0 0 260 260" fill="none">
  363. <polygon points="130,30 213,99 174,201 86,201 47,99" fill="none" stroke="#F0E4D8"/>
  364. <polygon points="130,80 176,124 153,170 107,170 84,124" fill="none" stroke="#F6E9DC"/>
  365. <line x1="130" y1="130" x2="130" y2="30" stroke="#F0E4D8"/><line x1="130" y1="130" x2="213" y2="99" stroke="#F0E4D8"/><line x1="130" y1="130" x2="174" y2="201" stroke="#F0E4D8"/><line x1="130" y1="130" x2="86" y2="201" stroke="#F0E4D8"/><line x1="130" y1="130" x2="47" y2="99" stroke="#F0E4D8"/>
  366. <polygon points="130,48 201,107 170,185 88,187 55,106" fill="#F97316" fill-opacity="0.18" stroke="#F97316" stroke-width="2"/>
  367. </svg>
  368. </div>
  369. <div class="sectitle">今日打卡</div>
  370. <div class="checkin">
  371. <div class="ck"><div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#FF8C42" stroke-width="1.8"><path d="M5 12h14M12 5v14"/></svg></div><div class="t">饮食</div></div>
  372. <div class="ck"><div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="1.8"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg></div><div class="t">运动</div></div>
  373. <div class="ck"><div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-9-9"/></svg></div><div class="t">睡眠</div></div>
  374. <div class="ck"><div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#FF6B9D" stroke-width="1.8"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg></div><div class="t">情绪</div></div>
  375. </div>
  376. <div class="sectitle">最近记录</div>
  377. <div class="rec">
  378. <div class="ri"><span class="dot" style="background:var(--dim-body)"></span>小宇 · 饮食打卡<div class="tm">10分钟前</div></div>
  379. <div class="ri"><span class="dot" style="background:var(--dim-action)"></span>小柚 · 运动 30 分钟<div class="tm">1小时前</div></div>
  380. <div class="ri"><span class="dot" style="background:var(--dim-mind)"></span>妈妈 · 情绪记录<div class="tm">今天</div></div>
  381. </div>
  382. </div>
  383. <!-- ============ 成长记录 ============ -->
  384. <div class="screen hidden" id="growth">
  385. <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
  386. <div class="apptitle">成长记录</div>
  387. <div class="date">本周成就</div>
  388. <div class="ach-hero">
  389. <div class="ring"><div class="rt"><b>5/7</b><span>本周完成</span></div></div>
  390. <div class="ach-stats">
  391. <div class="as"><span>完成任务</span><b>12</b></div>
  392. <div class="as"><span>成长分</span><b>340</b></div>
  393. <div class="as"><span>解锁徽章</span><b>8</b></div>
  394. <div class="fire">
  395. <i class="on">🔥</i><i class="on">🔥</i><i class="on">🔥</i><i class="on">🔥</i><i class="on">🔥</i><i class="on">🔥</i><i class="today on">🔥</i>
  396. </div>
  397. </div>
  398. </div>
  399. <div class="sectitle brand">今日成长 · 还差 2 项解锁本周全勤</div>
  400. <div class="tasks" id="taskList">
  401. <div class="tk done"><div class="cb"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg></div><div class="ti">小宇 · 数学挑战</div><div class="tg">+20</div></div>
  402. <div class="tk done"><div class="cb"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg></div><div class="ti">全家 · 晚餐共餐</div><div class="tg">+15</div></div>
  403. <div class="tk" data-gain="20"><div class="cb"></div><div class="ti">小柚 · 亲子阅读</div><div class="tg">+20</div></div>
  404. <div class="tk" data-gain="15"><div class="cb"></div><div class="ti">妈妈 · 冥想 10 分钟</div><div class="tg">+15</div></div>
  405. </div>
  406. <div class="unlock">
  407. <svg class="medal" viewBox="0 0 24 24"><defs><linearGradient id="mg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCE08A"/><stop offset="1" stop-color="#F5A524"/></linearGradient></defs><path d="M9.2 4l1.6 3.2M14.8 4l-1.6 3.2" stroke="#E0920F" stroke-width="1.4" stroke-linecap="round"/><circle cx="12" cy="13.5" r="7" fill="url(#mg2)" stroke="#E0920F" stroke-width="1"/><path d="M12 9.8l1.35 2.8 3.05.45-2.2 2.15.52 3.05L12 18.9l-2.72 1.45.52-3.05-2.2-2.15 3.05-.45z" fill="#fff"/></svg>
  408. <div><div class="ut">再完成 2 项 · 解锁「本周全勤」</div><div class="usub">解锁后自动生成成长报告</div></div>
  409. <div class="ug" id="shareFromGrowth">分享 ›</div>
  410. </div>
  411. </div>
  412. <!-- ============ 我的 ============ -->
  413. <div class="screen hidden" id="profile">
  414. <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
  415. <div class="apptitle">我的</div>
  416. <div class="date">家庭中心</div>
  417. <div class="idcard">
  418. <div class="av">妈</div>
  419. <div><div class="nm">晓琳</div><div class="rl">家长 · 家庭管理员</div></div>
  420. </div>
  421. <div class="sectitle brand">我的家庭</div>
  422. <div class="members">
  423. <div class="mb"><div class="av" style="background:var(--dim-wisdom)">宇</div><div class="nm">小宇</div><div class="sc">智 82</div></div>
  424. <div class="mb"><div class="av" style="background:var(--dim-wealth)">柚</div><div class="nm">小柚</div><div class="sc">富 75</div></div>
  425. <div class="mb"><div class="av" style="background:var(--dim-body)">爷</div><div class="nm">爷爷</div><div class="sc">身 70</div></div>
  426. <div class="mb"><div class="av" style="background:var(--brand)">妈</div><div class="nm">妈妈</div><div class="sc">心 79</div></div>
  427. </div>
  428. <div class="sectitle">我的</div>
  429. <div class="menu">
  430. <div class="mi"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>我的成就<div class="go">›</div></div>
  431. <div class="mi"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 2h9l5 5v15H6z"/><path d="M14 2v6h6"/></svg>我的订单<div class="go">›</div></div>
  432. <div class="mi"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 15a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v5a4 4 0 0 0 4 4z"/><path d="M8 19h8"/></svg>健康档案<div class="go">›</div></div>
  433. <div class="mi"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg>设置<div class="go">›</div></div>
  434. </div>
  435. </div>
  436. <!-- ============ TabBar ============ -->
  437. <div class="tabbar">
  438. <span class="tab active" data-target="home">首页</span>
  439. <span class="tab" data-target="health">健康</span>
  440. <span class="tab" data-target="growth">成长</span>
  441. <span class="tab" data-target="profile">我的</span>
  442. </div>
  443. <div class="tab-center" id="openDrawer">五维</div>
  444. <!-- ============ 五维抽屉 ============ -->
  445. <div class="overlay" id="overlay"></div>
  446. <div class="sheet" id="sheet">
  447. <div class="handle"></div>
  448. <h3>全家五维</h3>
  449. <div class="drow" data-dim="智" data-color="#6366F1" data-score="82"><span class="dot" style="background:var(--dim-wisdom)"></span><span class="name"><span class="dim-w">智</span> · 思维</span><span class="val">82</span><span class="go">›</span></div>
  450. <div class="drow" data-dim="心" data-color="#FF6B9D" data-score="79"><span class="dot" style="background:var(--dim-mind)"></span><span class="name">心 · 情绪</span><span class="val">79</span><span class="go">›</span></div>
  451. <div class="drow" data-dim="身" data-color="#FF8C42" data-score="71"><span class="dot" style="background:var(--dim-body)"></span><span class="name">身 · 体魄</span><span class="val">71</span><span class="go">›</span></div>
  452. <div class="drow" data-dim="行" data-color="#10B981" data-score="75"><span class="dot" style="background:var(--dim-action)"></span><span class="name">行 · 行动</span><span class="val">75</span><span class="go">›</span></div>
  453. <div class="drow" data-dim="富" data-color="#F59E0B" data-score="68"><span class="dot" style="background:var(--dim-wealth)"></span><span class="name">富 · 财富</span><span class="val">68</span><span class="go">›</span></div>
  454. <div class="expand" id="openSandbox">展开五维总览</div>
  455. </div>
  456. <!-- ============ 五维总览 ============ -->
  457. <div class="layer" id="sandbox">
  458. <div class="sb-head"><span class="sb-back" id="closeSandbox">‹</span><span class="sb-title">五维总览</span><span></span></div>
  459. <div class="radarcard" id="fullRadar">
  460. <svg width="260" height="260" viewBox="0 0 260 260" fill="none">
  461. <polygon points="130,30 213,99 174,201 86,201 47,99" fill="none" stroke="#F0E4D8"/>
  462. <polygon points="130,80 176,124 153,170 107,170 84,124" fill="none" stroke="#F6E9DC"/>
  463. <line x1="130" y1="130" x2="130" y2="30" stroke="#F0E4D8"/><line x1="130" y1="130" x2="213" y2="99" stroke="#F0E4D8"/><line x1="130" y1="130" x2="174" y2="201" stroke="#F0E4D8"/><line x1="130" y1="130" x2="86" y2="201" stroke="#F0E4D8"/><line x1="130" y1="130" x2="47" y2="99" stroke="#F0E4D8"/>
  464. <polygon points="130,48 201,107 170,185 88,187 55,106" fill="#F97316" fill-opacity="0.18" stroke="#F97316" stroke-width="2"/>
  465. <circle cx="130" cy="48" r="4" fill="#6366F1"/><circle cx="201" cy="107" r="4" fill="#10B981"/><circle cx="170" cy="185" r="4" fill="#F59E0B"/><circle cx="88" cy="187" r="4" fill="#FF8C42"/><circle cx="55" cy="106" r="4" fill="#FF6B9D"/>
  466. <text x="130" y="22" font-size="13" font-weight="700" fill="#6366F1" text-anchor="middle">智 82</text>
  467. <text x="228" y="100" font-size="13" font-weight="700" fill="#10B981" text-anchor="middle">行 75</text>
  468. <text x="182" y="224" font-size="13" font-weight="700" fill="#F59E0B" text-anchor="middle">富 68</text>
  469. <text x="78" y="224" font-size="13" font-weight="700" fill="#FF8C42" text-anchor="middle">身 71</text>
  470. <text x="30" y="132" font-size="13" font-weight="700" fill="#FF6B9D" text-anchor="middle">心 79</text>
  471. </svg>
  472. </div>
  473. <div class="sectitle">各维趋势(点击查看详情)</div>
  474. <div class="trend">
  475. <div class="tcard" data-dim="智" data-color="#6366F1" data-score="82"><div class="n dim-w">智</div><div class="d">+6</div></div>
  476. <div class="tcard" data-dim="心" data-color="#FF6B9D" data-score="79"><div class="n" style="color:var(--dim-mind)">心</div><div class="d">+3</div></div>
  477. <div class="tcard" data-dim="行" data-color="#10B981" data-score="75"><div class="n" style="color:var(--dim-action)">行</div><div class="d">+4</div></div>
  478. </div>
  479. <div class="sectitle">改善建议</div>
  480. <div class="sug">
  481. <div class="si w"><div class="st">富 · 理财习惯偏弱</div><div class="sd">本周「富」<span class="dim">维</span>仅 68 分,建议安排一次家庭记账小互动。</div></div>
  482. <div class="si b"><div class="st">身 · 运动待加强</div><div class="sd">「身」<span class="dim">维</span> 71 分,可把晚饭后散步设为本周家庭任务。</div></div>
  483. </div>
  484. </div>
  485. <!-- ============ 维度详情 ============ -->
  486. <div class="layer" id="dimDetail">
  487. <div class="sb-head"><span class="sb-back" id="closeDim">‹</span><span class="sb-title" id="dimTitle">智 · 思维</span><span></span></div>
  488. <div class="dim-hero" id="dimHero">
  489. <div class="big" id="dimScore">82</div>
  490. <div><div class="lab" id="dimLab">智 · 思维</div><div class="desc">本周 +6,近 30 天稳步提升</div></div>
  491. </div>
  492. <div class="sectitle">关键指标</div>
  493. <div class="kpi">
  494. <div class="k"><div class="v">优</div><div class="l">逻辑推理</div></div>
  495. <div class="k"><div class="v">良</div><div class="l">记忆力</div></div>
  496. <div class="k"><div class="v">中</div><div class="l">专注力</div></div>
  497. </div>
  498. <div class="sectitle">建议动作(完成后成长 +)</div>
  499. <div class="acts" id="dimActs">
  500. <div class="act done"><div class="cb"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg></div>完成数学挑战</div>
  501. <div class="act"><div class="cb"></div>亲子共读 20 分钟</div>
  502. <div class="act"><div class="cb"></div>玩一局舒尔特方格</div>
  503. </div>
  504. <div class="sectitle">最近记录</div>
  505. <div class="rec">
  506. <div class="ri"><span class="dot" style="background:var(--dim-wisdom)"></span>数学挑战 完成<div class="tm">今天</div></div>
  507. <div class="ri"><span class="dot" style="background:var(--dim-wisdom)"></span>舒尔特方格 完成<div class="tm">昨天</div></div>
  508. </div>
  509. </div>
  510. <!-- ============ 成长报告分享卡 ============ -->
  511. <div class="report" id="report">
  512. <div class="rcard">
  513. <div class="rt">小宇家的本周成长</div>
  514. <div class="rs">全家五维首次全达标 · 朋友们都在期待这一刻</div>
  515. <div class="rscore">
  516. <div class="rsi"><b style="color:var(--dim-wisdom)">82</b><span>智</span></div>
  517. <div class="rsi"><b style="color:var(--dim-mind)">79</b><span>心</span></div>
  518. <div class="rsi"><b style="color:var(--dim-body)">71</b><span>身</span></div>
  519. <div class="rsi"><b style="color:var(--dim-action)">75</b><span>行</span></div>
  520. <div class="rsi"><b style="color:var(--dim-wealth)">68</b><span>富</span></div>
  521. </div>
  522. <div class="rfire"><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i></div>
  523. <div class="rsum">
  524. <div class="rm"><b>+62</b><span>成长值</span></div>
  525. <div class="rm"><b>×3</b><span>徽章</span></div>
  526. <div class="rm"><b>5/5</b><span>全达标</span></div>
  527. </div>
  528. <div class="rbtn"><svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z" fill="#fff"/></svg>成果分享 · 邀请朋友们一起看</div>
  529. <div class="rclose" id="closeReport">关闭</div>
  530. </div>
  531. </div>
  532. </div>
  533. <script>
  534. const overlay=document.getElementById('overlay'),sheet=document.getElementById('sheet'),
  535. sandbox=document.getElementById('sandbox'),dimDetail=document.getElementById('dimDetail'),
  536. report=document.getElementById('report');
  537. // Tab 切换
  538. document.querySelectorAll('.tab').forEach(t=>{
  539. t.addEventListener('click',()=>{
  540. document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
  541. t.classList.add('active');
  542. const target=t.dataset.target;
  543. ['home','health','growth','profile'].forEach(id=>{
  544. document.getElementById(id).classList.toggle('hidden',id!==target);
  545. });
  546. });
  547. });
  548. // 五维抽屉
  549. function openDrawer(){overlay.classList.add('show');sheet.classList.add('show');}
  550. function closeDrawer(){overlay.classList.remove('show');sheet.classList.remove('show');}
  551. document.getElementById('openDrawer').addEventListener('click',openDrawer);
  552. overlay.addEventListener('click',closeDrawer);
  553. document.getElementById('openSandbox').addEventListener('click',()=>{closeDrawer();sandbox.classList.add('show');});
  554. // 维度详情(从抽屉或趋势卡点开,按维度注入)
  555. function openDim(dim,color,score){
  556. document.getElementById('dimTitle').textContent=dim+' · '+(dim==='智'?'思维':dim==='心'?'情绪':dim==='身'?'体魄':dim==='行'?'行动':'财富');
  557. document.getElementById('dimScore').textContent=score;
  558. document.getElementById('dimLab').textContent=dim+' · '+(dim==='智'?'思维':dim==='心'?'情绪':dim==='身'?'体魄':dim==='行'?'行动':'财富');
  559. const hero=document.getElementById('dimHero');
  560. hero.style.background='linear-gradient(135deg,'+color+'cc,'+color+' 70%,'+color+'dd)';
  561. sandbox.classList.remove('show');
  562. dimDetail.classList.add('show');
  563. }
  564. document.querySelectorAll('[data-dim]').forEach(el=>{
  565. el.addEventListener('click',()=>openDim(el.dataset.dim,el.dataset.color,el.dataset.score));
  566. });
  567. document.getElementById('closeDim').addEventListener('click',()=>{dimDetail.classList.remove('show');sandbox.classList.add('show');});
  568. // 五维总览 / 健康 mini 雷达 → 总览
  569. document.getElementById('miniRadar').addEventListener('click',()=>sandbox.classList.add('show'));
  570. document.getElementById('closeSandbox').addEventListener('click',()=>sandbox.classList.remove('show'));
  571. // 成长任务勾选
  572. document.querySelectorAll('.tk[data-gain]').forEach(tk=>{
  573. tk.addEventListener('click',()=>{
  574. if(tk.classList.contains('done'))return;
  575. tk.classList.add('done');
  576. tk.querySelector('.cb').innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg>';
  577. });
  578. });
  579. // 分享卡
  580. function openReport(){report.classList.add('show');}
  581. function closeReport(){report.classList.remove('show');}
  582. document.getElementById('shareFromHome').addEventListener('click',openReport);
  583. document.getElementById('shareFromGrowth').addEventListener('click',openReport);
  584. document.getElementById('closeReport').addEventListener('click',closeReport);
  585. report.addEventListener('click',e=>{if(e.target===report)closeReport();});
  586. </script>
  587. </body>
  588. </html>