prototype-animated.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  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. 动效原型 —— 与 Ardot 画布稿「浠艾福首页-家庭成长故事线」1:1 同色板
  10. 品牌蓝 #2F6BE6 | 暗色英雄 #1C294A | 五维色仅作强调
  11. 动效策略(Calm Premium Wellness,克制):
  12. - 本周成果条:popIn 弹入,放大"已获得的成果"
  13. - 呼吸/光泽:能量英雄分数、五维色点
  14. - 脉冲高亮 + 箭头滑动引导:今日一站卡(引导"下一步")
  15. - 闪烁引导:分享按钮、家庭动态新消息点
  16. - 进度条载入生长、主线解锁引导句、抽屉上滑、雷达淡入
  17. - 尊重 prefers-reduced-motion,全部降级为静态
  18. ========================================================= */
  19. :root{
  20. --brand:#2F6BE6; --brand-soft:#EAF1FE;
  21. --hero-bg:#1C294A;
  22. --dim-wisdom:#6C5CE7; --dim-mind:#F2588E; --dim-body:#FF7A45;
  23. --dim-action:#12B981; --dim-wealth:#F5A524;
  24. --ink:#171A1C; --ink-2:#6B7278; --line:#E3E9F0; --surface-2:#F5F7F9;
  25. --r:14px; --r-lg:16px;
  26. }
  27. *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  28. body{background:#EEF1F5;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  29. display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px;}
  30. .phone{position:relative;width:375px;height:812px;background:#fff;border-radius:40px;
  31. overflow:hidden;box-shadow:0 20px 60px rgba(20,30,60,.20);border:1px solid #E6EAF0;}
  32. .screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 16px;
  33. overflow-y:auto;padding-bottom:72px;animation:fadeUp .5s ease-out both;}
  34. .screen::-webkit-scrollbar{display:none;}
  35. .hidden{display:none!important;}
  36. /* 状态栏 */
  37. .statusbar{height:44px;display:flex;align-items:center;justify-content:space-between;
  38. padding:0 12px;color:var(--ink);font-size:15px;font-weight:600;flex-shrink:0;}
  39. .battery{width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px;position:relative;}
  40. .battery::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--ink);border-radius:1px;}
  41. .battery::before{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:13px;background:var(--ink);border-radius:1px;}
  42. .apptitle{font-size:18px;font-weight:700;color:var(--ink);margin-top:18px;}
  43. .date{text-align:right;color:var(--ink-2);font-size:13px;margin-top:-22px;margin-left:auto;width:110px;}
  44. /* 能量英雄(暗色卡片) */
  45. .hero{margin-top:22px;height:104px;border-radius:var(--r-lg);background:var(--hero-bg);
  46. padding:18px 20px;position:relative;overflow:hidden;flex-shrink:0;}
  47. .hero .label{color:#C8D0E0;font-size:13px;}
  48. .hero .score{color:#fff;font-size:38px;font-weight:700;line-height:1;margin-top:6px;
  49. animation:breathe 3.2s ease-in-out infinite;}
  50. .hero .unit{color:#C8D0E0;font-size:14px;margin-left:6px;}
  51. .hero .dots{position:absolute;right:20px;top:64px;display:flex;gap:10px;}
  52. .hero .dots i{width:12px;height:12px;border-radius:50%;display:block;animation:dotBreath 3.2s ease-in-out infinite;}
  53. .hero .dots i:nth-child(2){animation-delay:.3s}
  54. .hero .dots i:nth-child(3){animation-delay:.6s}
  55. .hero .dots i:nth-child(4){animation-delay:.9s}
  56. .hero .dots i:nth-child(5){animation-delay:1.2s}
  57. /* 本周成果条(突出"已获得的成果"——记分牌式强对比) */
  58. .achieve{display:flex;gap:10px;margin-top:14px;flex-shrink:0;align-items:stretch;}
  59. .ach{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 4px;text-align:center;
  60. display:flex;flex-direction:column;
  61. box-shadow:0 2px 8px rgba(23,26,28,.05);animation:popIn .5s ease-out both;}
  62. .ach:nth-child(2){animation-delay:.08s}
  63. .ach:nth-child(3){animation-delay:.16s}
  64. .ach-n{display:block;font-size:25px;font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.5px;
  65. margin-top:auto;flex-shrink:0;}
  66. /* 底部标签吸底对齐:三列标签底部严格同线(不受奖杯图标影响) */
  67. .ach-l{display:block;font-size:11px;color:var(--ink-2);padding-top:7px;font-weight:500;flex-shrink:0;}
  68. /* —— 全达标 · 奖杯(动画渲染) —— */
  69. .ach.trophy{background:linear-gradient(180deg,#FFF8E8,#FCEFD2);border:1px solid #F5D98A;}
  70. .ach.trophy .ach-n{color:#8A5A00;}
  71. .ach.trophy .tro{width:24px;height:24px;margin:0 auto 3px;display:block;
  72. filter:drop-shadow(0 0 2px rgba(245,165,36,.35));
  73. animation:trophyIn .7s .5s cubic-bezier(.22,1,.36,1) both,
  74. trophyFloat 3s 1.2s ease-in-out infinite,
  75. trophyGlow 2.4s 1.5s ease-in-out infinite;}
  76. @keyframes trophyIn{0%{opacity:0;transform:translateY(-12px) scale(.4) rotate(-30deg)}
  77. 70%{transform:translateY(2px) scale(1.08) rotate(6deg)}
  78. 100%{opacity:1;transform:none}}
  79. @keyframes trophyFloat{0%,100%{transform:translateY(0) rotate(-3deg)}
  80. 50%{transform:translateY(-3px) rotate(3deg)}}
  81. @keyframes trophyGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(245,165,36,.35))}
  82. 50%{filter:drop-shadow(0 0 8px rgba(245,165,36,.75))}}
  83. /* 区块标题 */
  84. .sectitle{font-size:15px;font-weight:700;color:var(--ink);margin:28px 0 12px;flex-shrink:0;}
  85. .sectitle.blue{color:var(--brand);font-size:13px;letter-spacing:.5px;}
  86. /* 本周主线卡 */
  87. .mainline{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;}
  88. .mainline .row{display:flex;justify-content:space-between;align-items:center;}
  89. .mainline .topic{font-size:15px;font-weight:700;color:var(--ink);}
  90. .mainline .prog{font-size:13px;color:var(--ink-2);}
  91. .mainline .prog b{color:var(--brand);font-weight:800;}
  92. .mainline .guide{font-size:12px;color:var(--brand);font-weight:600;margin-top:10px;
  93. animation:blink 2.4s ease-in-out infinite;}
  94. .track{height:8px;border-radius:4px;background:var(--surface-2);margin-top:12px;overflow:hidden;}
  95. .fill{height:100%;border-radius:4px;background:var(--brand);width:0;
  96. animation:barGrow 1.1s .25s cubic-bezier(.22,1,.36,1) forwards;}
  97. /* 今日一站(脉冲高亮 + 箭头滑动,引导"下一步") */
  98. .nba{margin-top:18px;height:92px;border-radius:var(--r);background:var(--brand);
  99. padding:16px;position:relative;color:#fff;
  100. animation:pulseGlow 2.4s ease-in-out infinite;}
  101. .nba .kicker{font-size:12px;color:#CDE0FB;font-weight:600;}
  102. .nba .title{font-size:19px;font-weight:800;margin-top:8px;letter-spacing:.3px;}
  103. .nba .sub{font-size:12px;color:#CDE0FB;margin-top:6px;}
  104. .nba .sub .gain{background:rgba(255,255,255,.22);padding:1px 8px;border-radius:7px;font-weight:800;}
  105. .nba .arrow{position:absolute;right:18px;top:34px;font-size:24px;font-weight:700;
  106. animation:slideX 1.6s ease-in-out infinite;}
  107. /* 家庭动态 */
  108. .dyn{border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;background:#fff;}
  109. .dyn .item{display:flex;align-items:center;height:36px;font-size:14px;color:#383D42;
  110. border-bottom:1px solid var(--surface-2);}
  111. .dyn .item:last-child{border-bottom:none;}
  112. .dyn .news{width:8px;height:8px;border-radius:50%;background:var(--dim-mind);margin-right:8px;
  113. animation:dotBlink 1.6s ease-in-out infinite;}
  114. /* 成长卡 */
  115. .growth{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
  116. padding:16px;margin-top:18px;}
  117. .growth .mini{background:var(--brand);border-radius:10px;padding:16px 20px;color:#fff;
  118. margin-bottom:14px;}
  119. .growth .mini .t{font-size:15px;font-weight:800;}
  120. .growth .mini .gain{font-size:18px;}
  121. .growth .mini .s{font-size:12px;color:#CDE0FB;margin-top:4px;}
  122. /* 分享 CTA:与首页 flash(今日一站 pulseGlow)同一品牌蓝色相内做深浅层次 */
  123. .growth .btn{border:none;color:#fff;background:linear-gradient(135deg,#5E97F8 0%,#2F6BE6 48%,#1B4FC8 100%);
  124. border-radius:999px;height:48px;display:flex;align-items:center;justify-content:center;
  125. gap:8px;font-size:16px;font-weight:800;width:100%;margin:0 auto;cursor:pointer;letter-spacing:.3px;
  126. position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(47,107,230,.30);
  127. border:1px solid rgba(255,255,255,.28);
  128. animation:sharePulse 2.4s ease-in-out infinite;}
  129. .growth .btn svg{width:18px;height:18px;flex-shrink:0;position:relative;z-index:1;}
  130. .growth .btn .txt{position:relative;z-index:1;text-shadow:0 1px 4px rgba(16,42,110,.45);padding-bottom:1px;}
  131. .growth .btn .shine{position:absolute;top:0;left:-60%;width:50%;height:100%;z-index:0;
  132. background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  133. transform:skewX(-18deg);animation:shareShine 3s ease-in-out infinite;}
  134. .growth .btn:active{transform:scale(.97);}
  135. @keyframes sharePulse{0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(47,107,230,.30)}
  136. 50%{transform:scale(1.025);box-shadow:0 8px 34px rgba(47,107,230,.60)}}
  137. @keyframes shareShine{0%{left:-60%}55%,100%{left:135%}}
  138. /* TabBar */
  139. .tabbar{position:absolute;left:0;right:0;bottom:0;height:54px;background:#fff;
  140. border-top:1px solid var(--line);display:flex;align-items:center;padding:0 30px;
  141. justify-content:space-between;}
  142. .tab{font-size:12px;color:var(--ink-2);}
  143. .tab.active{color:var(--brand);font-weight:700;}
  144. .tab-center{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;
  145. display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  146. position:absolute;left:50%;transform:translateX(-50%);bottom:8px;cursor:pointer;
  147. box-shadow:0 6px 16px rgba(47,107,230,.35);}
  148. /* 抽屉 + 遮罩 */
  149. .overlay{position:absolute;inset:0;background:rgba(23,26,28,.45);opacity:0;
  150. transition:opacity .3s ease;pointer-events:none;}
  151. .overlay.show{opacity:1;pointer-events:auto;}
  152. .sheet{position:absolute;left:0;right:0;bottom:0;height:420px;background:#fff;border-radius:20px 20px 0 0;
  153. padding:10px 16px 16px;transform:translateY(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);}
  154. .sheet.show{transform:translateY(0);}
  155. .handle{width:41px;height:4px;border-radius:2px;background:#D9DCE0;margin:6px auto 14px;}
  156. .sheet h3{font-size:18px;font-weight:700;color:var(--ink);}
  157. .drow{display:flex;align-items:center;height:52px;border-bottom:1px solid var(--surface-2);}
  158. .drow .dot{width:12px;height:12px;border-radius:50%;margin-right:14px;}
  159. .drow .name{font-size:14px;color:#383D42;flex:1;}
  160. .drow .val{font-size:15px;font-weight:700;color:var(--ink);}
  161. .expand{margin-top:22px;height:44px;border-radius:999px;background:var(--brand);color:#fff;
  162. display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;cursor:pointer;}
  163. /* 全屏沙盘页 */
  164. .sandbox{position:absolute;inset:0;background:#fff;padding:0 16px;
  165. transform:translateX(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);z-index:5;
  166. overflow-y:auto;}
  167. .sandbox.show{transform:translateX(0);}
  168. .sb-head{height:44px;display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
  169. .sb-back{font-size:26px;font-weight:700;color:var(--ink);cursor:pointer;}
  170. .sb-title{font-size:18px;font-weight:700;}
  171. .radarcard{border:1px solid var(--line);border-radius:var(--r-lg);height:300px;margin-top:20px;
  172. display:flex;align-items:center;justify-content:center;}
  173. .radarcard svg{animation:radarIn .8s ease-out both;}
  174. .trend{display:flex;gap:12px;margin-top:18px;}
  175. .tcard{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#fff;}
  176. .tcard .n{font-size:14px;font-weight:700;}
  177. .tcard .d{font-size:26px;font-weight:800;color:var(--dim-action);margin-top:8px;}
  178. .sug{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  179. padding:18px 20px;margin-top:18px;margin-bottom:24px;}
  180. .sug .si{position:relative;padding-left:12px;margin-bottom:18px;}
  181. .sug .si:last-child{margin-bottom:0;}
  182. .sug .si::before{content:"";position:absolute;left:0;top:2px;width:4px;height:44px;border-radius:2px;}
  183. .sug .si.w::before{background:var(--dim-wealth);}
  184. .sug .si.b::before{background:var(--dim-body);}
  185. .sug .si .st{font-size:15px;font-weight:700;color:var(--ink);}
  186. .sug .si .sd{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5;}
  187. /* —— 客户名突出 + 图标 —— */
  188. .name-hl{display:inline-flex;align-items:center;gap:5px;font-weight:700;line-height:1.2;}
  189. .name-hl svg{width:16px;height:16px;flex-shrink:0;}
  190. .name-hl .nm{color:var(--brand);}
  191. .name-hl.gold .nm{color:var(--dim-wealth);}
  192. /* —— 维度字突出 —— */
  193. .dim{color:var(--brand);font-weight:700;}
  194. /* —— 焦点维度「智」增强突出(本周主线聚焦维度) —— */
  195. .dim-w{color:var(--dim-wisdom);font-weight:700;}
  196. .dim-pill{display:inline-block;padding:1px 9px;border-radius:8px;background:#EEE9FB;
  197. color:var(--dim-wisdom);font-weight:700;vertical-align:baseline;margin:0 1px;
  198. animation:wisdomGlow 2.6s ease-in-out infinite;}
  199. @keyframes wisdomGlow{
  200. 0%,100%{box-shadow:0 0 0 rgba(108,92,231,0)}
  201. 50%{box-shadow:0 0 12px rgba(108,92,231,.50)}
  202. }
  203. /* —— + 数字突出 —— */
  204. .gain{color:var(--dim-action);font-weight:800;font-variant-numeric:tabular-nums;}
  205. .ach .gain{font-size:25px;animation:gainPulse 2.4s ease-in-out infinite;}
  206. @keyframes gainPulse{0%,100%{text-shadow:0 0 0 rgba(18,185,129,0)}50%{text-shadow:0 0 12px rgba(18,185,129,.45)}}
  207. .tcard .d{animation:popIn .5s ease-out both;}
  208. /* —— 连续打卡天数「21」突出 —— */
  209. .streak-num{font-size:17px;font-weight:800;color:var(--dim-wealth);font-variant-numeric:tabular-nums;
  210. padding:0 1px;animation:streakPop .6s .45s cubic-bezier(.22,1,.36,1) both;}
  211. @keyframes streakPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.18)}100%{opacity:1;transform:none}}
  212. /* —— 全家五维首次全达标 · 炫酷庆典呈现 —— */
  213. .celebrate{margin-top:12px;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;
  214. position:relative;overflow:hidden;color:#6B4A00;
  215. background:linear-gradient(115deg,#FFF6DC,#FFE2A0,#FFF6DC);
  216. background-size:220% 100%;
  217. border:1px solid #F2D07A;
  218. box-shadow:0 6px 18px rgba(245,165,36,.28);
  219. animation:celeIn .7s .3s cubic-bezier(.22,1,.36,1) both,
  220. celeGlow 2.6s 1s ease-in-out infinite;}
  221. .celebrate .shine{position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:0;
  222. background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);
  223. transform:skewX(-18deg);animation:shine 2.8s 1.1s ease-in-out infinite;}
  224. .celebrate .medal{width:32px;height:32px;flex-shrink:0;position:relative;z-index:1;
  225. filter:drop-shadow(0 2px 3px rgba(180,120,0,.35));
  226. animation:medalFloat 3s ease-in-out infinite;}
  227. .celebrate .ct{font-size:14px;font-weight:700;line-height:1.45;position:relative;z-index:1;}
  228. .celebrate .first{display:inline-block;background:#fff;color:#D9880C;font-size:11px;font-weight:800;
  229. padding:1px 7px;border-radius:6px;margin:0 3px;vertical-align:middle;
  230. box-shadow:0 1px 2px rgba(180,120,0,.25);animation:firstPulse 2s ease-in-out infinite;}
  231. @keyframes celeIn{0%{opacity:0;transform:translateY(12px) scale(.94)}100%{opacity:1;transform:none}}
  232. @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)}}
  233. @keyframes shine{0%{left:-60%}55%,100%{left:135%}}
  234. @keyframes medalFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
  235. @keyframes firstPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
  236. /* ===== 动效关键帧 ===== */
  237. @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  238. @keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
  239. @keyframes breathe{0%,100%{text-shadow:0 0 0 rgba(255,255,255,0)}50%{text-shadow:0 0 16px rgba(255,255,255,.45)}}
  240. @keyframes dotBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
  241. @keyframes pulseGlow{0%,100%{box-shadow:0 8px 22px rgba(47,107,230,.30)}50%{box-shadow:0 8px 34px rgba(47,107,230,.60)}}
  242. @keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}
  243. @keyframes dotBlink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
  244. @keyframes slideX{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
  245. @keyframes barGrow{from{width:0}to{width:60%}}
  246. @keyframes radarIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
  247. /* 降级:尊重系统"减少动态效果" */
  248. @media (prefers-reduced-motion: reduce){
  249. *{animation:none!important;transition:none!important;}
  250. .fill{width:60%!important;}
  251. }
  252. </style>
  253. </head>
  254. <body>
  255. <div class="phone">
  256. <!-- ============ 首页 ============ -->
  257. <div class="screen" id="home">
  258. <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
  259. <div class="apptitle">浠艾福</div>
  260. <div class="date">10月6日 周二</div>
  261. <div class="hero">
  262. <div class="label">全家五<span style="color:#9DBDF6;font-weight:700">维</span>能量</div>
  263. <div><span class="score">78</span><span class="unit">分</span></div>
  264. <div class="dots">
  265. <i style="background:var(--dim-wisdom)"></i>
  266. <i style="background:var(--dim-mind)"></i>
  267. <i style="background:var(--dim-body)"></i>
  268. <i style="background:var(--dim-action)"></i>
  269. <i style="background:var(--dim-wealth)"></i>
  270. </div>
  271. </div>
  272. <!-- 本周成果:突出"已获得的成果" -->
  273. <div class="achieve">
  274. <div class="ach"><span class="ach-n"><span class="gain">+62</span></span><span class="ach-l">本周成长值</span></div>
  275. <div class="ach"><span class="ach-n">×3</span><span class="ach-l">解锁徽章</span></div>
  276. <div class="ach trophy"><svg class="tro" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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>
  277. </div>
  278. <div class="sectitle blue">本周成长主线</div>
  279. <div class="mainline">
  280. <div class="row"><span class="topic"><span class="name-hl"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#2F6BE6"/><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>
  281. <div class="guide">还差 2 站 · 解锁本周<span class="dim-w">智</span>维徽章 ›</div>
  282. <div class="track"><div class="fill"></div></div>
  283. </div>
  284. <div class="nba">
  285. <div class="kicker">下一步 · 今日一站</div>
  286. <div class="title">完成数学挑战</div>
  287. <div class="sub">完成后 <span class="gain">+20</span> 成长值</div>
  288. <div class="arrow">›</div>
  289. </div>
  290. <div class="sectitle">家庭动态</div>
  291. <div class="dyn">
  292. <div class="item"><span class="news"></span><span style="color:var(--dim-wealth);font-weight:700">小柚</span> 连续打卡 <span class="streak-num">21</span> 天</div>
  293. </div>
  294. <div class="celebrate">
  295. <svg class="medal" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  296. <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>
  297. <path d="M9.2 4l1.6 3.2M14.8 4l-1.6 3.2" stroke="#E0920F" stroke-width="1.4" stroke-linecap="round"/>
  298. <circle cx="12" cy="13.5" r="7" fill="url(#mg)" stroke="#E0920F" stroke-width="1"/>
  299. <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"/>
  300. </svg>
  301. <span class="ct">本周 · 全家五维 <span class="first">首次</span> 全达标</span>
  302. <span class="shine"></span>
  303. </div>
  304. <div class="sectitle">本周家庭成长卡</div>
  305. <div class="growth">
  306. <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>
  307. <div class="btn"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2 21l21-9L2 3v7l15 2-15 2z" fill="#fff"/></svg><span class="txt">成果分享 · 邀请朋友们一起看 ›</span><span class="shine"></span></div>
  308. </div>
  309. </div>
  310. <!-- ============ TabBar ============ -->
  311. <div class="tabbar">
  312. <span class="tab active">首页</span>
  313. <span class="tab">健康</span>
  314. <span class="tab">成长</span>
  315. <span class="tab">我的</span>
  316. </div>
  317. <div class="tab-center" id="openDrawer">五维</div>
  318. <!-- ============ 五维抽屉 ============ -->
  319. <div class="overlay" id="overlay"></div>
  320. <div class="sheet" id="sheet">
  321. <div class="handle"></div>
  322. <h3>全家五维</h3>
  323. <div class="drow"><span class="dot" style="background:var(--dim-wisdom)"></span><span class="name"><span class="dim-w">智</span> · 思维</span><span class="val">82</span></div>
  324. <div class="drow"><span class="dot" style="background:var(--dim-mind)"></span><span class="name">心 · 情绪</span><span class="val">79</span></div>
  325. <div class="drow"><span class="dot" style="background:var(--dim-body)"></span><span class="name">身 · 体魄</span><span class="val">71</span></div>
  326. <div class="drow"><span class="dot" style="background:var(--dim-action)"></span><span class="name">行 · 行动</span><span class="val">75</span></div>
  327. <div class="drow"><span class="dot" style="background:var(--dim-wealth)"></span><span class="name">富 · 财富</span><span class="val">68</span></div>
  328. <div class="expand" id="openSandbox">展开五维总览</div>
  329. </div>
  330. <!-- ============ 全屏沙盘页 ============ -->
  331. <div class="sandbox" id="sandbox">
  332. <div class="sb-head"><span class="sb-back" id="closeSandbox">‹</span><span class="sb-title">五维总览</span><span></span></div>
  333. <div class="radarcard">
  334. <svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
  335. <polygon points="130,30 213,99 174,201 86,201 47,99" fill="none" stroke="#E2E6EB"/>
  336. <polygon points="130,80 176,124 153,170 107,170 84,124" fill="none" stroke="#EDEFF2"/>
  337. <line x1="130" y1="130" x2="130" y2="30" stroke="#E2E6EB"/>
  338. <line x1="130" y1="130" x2="213" y2="99" stroke="#E2E6EB"/>
  339. <line x1="130" y1="130" x2="174" y2="201" stroke="#E2E6EB"/>
  340. <line x1="130" y1="130" x2="86" y2="201" stroke="#E2E6EB"/>
  341. <line x1="130" y1="130" x2="47" y2="99" stroke="#E2E6EB"/>
  342. <polygon points="130,48 201,107 170,185 88,187 55,106" fill="#2F6BE6" fill-opacity="0.18" stroke="#2F6BE6" stroke-width="2"/>
  343. <circle cx="130" cy="48" r="4" fill="#6C5CE7"/>
  344. <circle cx="201" cy="107" r="4" fill="#12B981"/>
  345. <circle cx="170" cy="185" r="4" fill="#F5A524"/>
  346. <circle cx="88" cy="187" r="4" fill="#FF7A45"/>
  347. <circle cx="55" cy="106" r="4" fill="#F2588E"/>
  348. <text x="130" y="22" font-size="13" font-weight="700" fill="#6C5CE7" text-anchor="middle">智 82</text>
  349. <text x="228" y="100" font-size="13" font-weight="700" fill="#12B981" text-anchor="middle">行 75</text>
  350. <text x="182" y="224" font-size="13" font-weight="700" fill="#F5A524" text-anchor="middle">富 68</text>
  351. <text x="78" y="224" font-size="13" font-weight="700" fill="#FF7A45" text-anchor="middle">身 71</text>
  352. <text x="30" y="132" font-size="13" font-weight="700" fill="#F2588E" text-anchor="middle">心 79</text>
  353. </svg>
  354. </div>
  355. <div class="sectitle">各维趋势</div>
  356. <div class="trend">
  357. <div class="tcard"><div class="n dim-w">智</div><div class="d">+6</div></div>
  358. <div class="tcard"><div class="n" style="color:var(--dim-mind)">心</div><div class="d">+3</div></div>
  359. <div class="tcard"><div class="n" style="color:var(--dim-action)">行</div><div class="d">+4</div></div>
  360. </div>
  361. <div class="sectitle">改善建议</div>
  362. <div class="sug">
  363. <div class="si w"><div class="st">富 · 理财习惯偏弱</div><div class="sd">本周「富」<span class="dim">维</span>仅 68 分,建议安排一次家庭记账小互动。</div></div>
  364. <div class="si b"><div class="st">身 · 运动待加强</div><div class="sd">「身」<span class="dim">维</span> 71 分,可把晚饭后散步设为本周家庭任务。</div></div>
  365. </div>
  366. </div>
  367. </div>
  368. <script>
  369. const overlay = document.getElementById('overlay');
  370. const sheet = document.getElementById('sheet');
  371. const sandbox = document.getElementById('sandbox');
  372. function openDrawer(){ overlay.classList.add('show'); sheet.classList.add('show'); }
  373. function closeDrawer(){ overlay.classList.remove('show'); sheet.classList.remove('show'); }
  374. document.getElementById('openDrawer').addEventListener('click', openDrawer);
  375. overlay.addEventListener('click', closeDrawer);
  376. document.getElementById('openSandbox').addEventListener('click', ()=>{ closeDrawer(); sandbox.classList.add('show'); });
  377. document.getElementById('closeSandbox').addEventListener('click', ()=> sandbox.classList.remove('show'));
  378. </script>
  379. </body>
  380. </html>