| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
- <title>浠艾福 · 核心家庭体验闭环重设计(暖橙系 · 成就驱动)</title>
- <style>
- /* =========================================================
- 核心家庭体验闭环重设计 —— 暖橙 Warm Calm Wellness 体系
- 品牌橙 #F97316 | 桃白底 #FFF7F1 | 深棕橙 #7C2D12
- 五维色严格取 flash 页:身 #FF8C42 / 心 #FF6B9D / 智 #6366F1 / 行 #10B981 / 富 #F59E0B
- 设计原则:成就驱动的家庭成长叙事 —— 看见成果 → 想继续 → 愿分享
- 动效克制:呼吸/脉冲/滑动/闪烁/生长,尊重 prefers-reduced-motion
- ========================================================= */
- :root{
- --brand:#F97316; --brand-2:#EA580C; --brand-soft:#FFF1E6; --peach:#FFF7ED;
- --hero-a:#FFF7ED; --hero-b:#FFEDD5; --hero-c:#FED7AA;
- --dim-wisdom:#6366F1; --dim-mind:#FF6B9D; --dim-body:#FF8C42;
- --dim-action:#10B981; --dim-wealth:#F59E0B;
- --ink:#432918; --ink-2:#9A8473; --line:#F0E4D8; --surface-2:#FFF3E9;
- --r:14px; --r-lg:16px;
- }
- *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
- body{background:#EDE4DA;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
- display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px;}
- .phone{position:relative;width:375px;height:812px;background:var(--peach);border-radius:40px;
- overflow:hidden;box-shadow:0 20px 60px rgba(80,45,15,.22);border:1px solid #F0E4D8;}
- .screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 16px;
- overflow-y:auto;padding-bottom:74px;animation:fadeUp .5s ease-out both;}
- .screen::-webkit-scrollbar{display:none;}
- .hidden{display:none!important;}
- /* 状态栏 */
- .statusbar{height:44px;display:flex;align-items:center;justify-content:space-between;
- padding:0 12px;color:var(--ink);font-size:15px;font-weight:600;flex-shrink:0;}
- .battery{width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px;position:relative;}
- .battery::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--ink);border-radius:1px;}
- .battery::before{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:13px;background:var(--ink);border-radius:1px;}
- .apptitle{font-size:18px;font-weight:700;color:var(--ink);margin-top:16px;}
- .date{text-align:right;color:var(--ink-2);font-size:13px;margin-top:-21px;margin-left:auto;width:120px;}
- /* 能量英雄(桃橙渐变卡 · 保留 flash 页暖色基因) */
- .hero{margin-top:18px;height:108px;border-radius:var(--r-lg);
- background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c));
- padding:18px 20px;position:relative;overflow:hidden;flex-shrink:0;
- border:1px solid #F6D9BE;}
- .hero .label{color:var(--brand-ink);font-size:13px;font-weight:600;}
- .hero .score{color:var(--brand-ink);font-size:40px;font-weight:800;line-height:1;margin-top:6px;
- animation:breathe 3.2s ease-in-out infinite;}
- .hero .unit{color:var(--brand-ink);font-size:14px;margin-left:6px;font-weight:600;}
- .hero .dots{position:absolute;right:20px;top:64px;display:flex;gap:9px;}
- .hero .dots i{width:12px;height:12px;border-radius:50%;display:block;animation:dotBreath 3.2s ease-in-out infinite;}
- .hero .dots i:nth-child(2){animation-delay:.3s}
- .hero .dots i:nth-child(3){animation-delay:.6s}
- .hero .dots i:nth-child(4){animation-delay:.9s}
- .hero .dots i:nth-child(5){animation-delay:1.2s}
- /* 本周成果条(强对比记分牌式,突出"已获得的成果") */
- .achieve{display:flex;gap:10px;margin-top:14px;flex-shrink:0;align-items:stretch;}
- .ach{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 4px;text-align:center;
- display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(67,41,24,.05);animation:popIn .5s ease-out both;}
- .ach:nth-child(2){animation-delay:.08s}
- .ach:nth-child(3){animation-delay:.16s}
- .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;}
- .ach-l{display:block;font-size:11px;color:var(--ink-2);padding-top:7px;font-weight:500;flex-shrink:0;}
- .ach.trophy{background:linear-gradient(180deg,#FFF8E8,#FCEFD2);border:1px solid #F5D98A;}
- .ach.trophy .ach-n{color:#8A5A00;}
- .ach.trophy .tro{width:24px;height:24px;margin:0 auto 3px;display:block;filter:drop-shadow(0 0 2px rgba(245,165,36,.35));
- 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;}
- .sectitle{font-size:15px;font-weight:700;color:var(--ink);margin:26px 0 12px;flex-shrink:0;}
- .sectitle.brand{color:var(--brand);font-size:13px;letter-spacing:.5px;font-weight:700;}
- /* 本周主线卡 */
- .mainline{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;}
- .mainline .row{display:flex;justify-content:space-between;align-items:center;}
- .mainline .topic{font-size:15px;font-weight:700;color:var(--ink);}
- .mainline .prog{font-size:13px;color:var(--ink-2);}
- .mainline .prog b{color:var(--brand);font-weight:800;}
- .mainline .guide{font-size:12px;color:var(--brand);font-weight:600;margin-top:10px;animation:blink 2.4s ease-in-out infinite;}
- .track{height:8px;border-radius:4px;background:var(--surface-2);margin-top:12px;overflow:hidden;}
- .fill{height:100%;border-radius:4px;background:var(--brand);width:0;animation:barGrow 1.1s .25s cubic-bezier(.22,1,.36,1) forwards;}
- /* 今日一站(橙色脉冲 + 箭头滑动,引导下一步) */
- .nba{margin-top:18px;height:92px;border-radius:var(--r);background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));
- padding:16px;position:relative;color:#fff;animation:pulseGlow 2.4s ease-in-out infinite;}
- .nba .kicker{font-size:12px;color:#FFF1E0;font-weight:600;}
- .nba .title{font-size:19px;font-weight:800;margin-top:8px;letter-spacing:.3px;}
- .nba .sub{font-size:12px;color:#FFF1E0;margin-top:6px;}
- .nba .sub .gain{background:rgba(255,255,255,.28);padding:1px 8px;border-radius:7px;font-weight:800;}
- .nba .arrow{position:absolute;right:18px;top:34px;font-size:24px;font-weight:700;animation:slideX 1.6s ease-in-out infinite;}
- /* 家庭动态 */
- .dyn{border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;background:#fff;}
- .dyn .item{display:flex;align-items:center;height:36px;font-size:14px;color:#5A4736;border-bottom:1px solid var(--surface-2);}
- .dyn .item:last-child{border-bottom:none;}
- .dyn .news{width:8px;height:8px;border-radius:50%;background:var(--dim-mind);margin-right:8px;animation:dotBlink 1.6s ease-in-out infinite;}
- /* 成长卡 */
- .growth{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:16px;margin-top:18px;}
- .growth .mini{background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));border-radius:10px;padding:16px 20px;color:#fff;margin-bottom:14px;}
- .growth .mini .t{font-size:15px;font-weight:800;}
- .growth .mini .gain{font-size:18px;}
- .growth .mini .s{font-size:12px;color:#FFF1E0;margin-top:4px;}
- /* 分享 CTA:与今日一站橙色同源渐变 */
- .growth .btn{border:none;color:#fff;background:linear-gradient(135deg,#FFBE7A 0%,var(--brand) 48%,var(--brand-2) 100%);
- border-radius:999px;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;
- font-size:16px;font-weight:800;width:100%;margin:0 auto;cursor:pointer;letter-spacing:.3px;position:relative;
- overflow:hidden;box-shadow:0 8px 22px rgba(249,115,22,.30);border:1px solid rgba(255,255,255,.3);
- animation:sharePulse 2.4s ease-in-out infinite;}
- .growth .btn svg{width:18px;height:18px;flex-shrink:0;position:relative;z-index:1;}
- .growth .btn .txt{position:relative;z-index:1;text-shadow:0 1px 4px rgba(124,45,18,.4);padding-bottom:1px;}
- .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;}
- .growth .btn:active{transform:scale(.97);}
- /* TabBar */
- .tabbar{position:absolute;left:0;right:0;bottom:0;height:54px;background:#fff;border-top:1px solid var(--line);
- display:flex;align-items:center;padding:0 26px;justify-content:space-between;z-index:6;}
- .tab{font-size:12px;color:var(--ink-2);cursor:pointer;}
- .tab.active{color:var(--brand);font-weight:700;}
- .tab-center{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));
- color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
- position:absolute;left:50%;transform:translateX(-50%);bottom:8px;cursor:pointer;box-shadow:0 6px 16px rgba(249,115,22,.4);}
- /* 抽屉 + 遮罩 */
- .overlay{position:absolute;inset:0;background:rgba(67,41,24,.42);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:7;}
- .overlay.show{opacity:1;pointer-events:auto;}
- .sheet{position:absolute;left:0;right:0;bottom:0;height:430px;background:#fff;border-radius:20px 20px 0 0;padding:10px 16px 16px;
- transform:translateY(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);z-index:8;}
- .sheet.show{transform:translateY(0);}
- .handle{width:41px;height:4px;border-radius:2px;background:#E5D6C8;margin:6px auto 14px;}
- .sheet h3{font-size:18px;font-weight:700;color:var(--ink);}
- .drow{display:flex;align-items:center;height:50px;border-bottom:1px solid var(--surface-2);cursor:pointer;}
- .drow .dot{width:12px;height:12px;border-radius:50%;margin-right:14px;flex-shrink:0;}
- .drow .name{font-size:14px;color:#5A4736;flex:1;}
- .drow .val{font-size:15px;font-weight:700;color:var(--ink);}
- .drow .go{color:var(--ink-2);font-size:18px;margin-left:6px;}
- .expand{margin-top:18px;height:46px;border-radius:999px;background:linear-gradient(135deg,#FFAE6B,var(--brand) 70%,var(--brand-2));color:#fff;
- 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);}
- /* 全屏沙盘页 / 维度详情 / 报告分享(横向滑入层) */
- .layer{position:absolute;inset:0;background:var(--peach);padding:0 16px;transform:translateX(100%);
- transition:transform .34s cubic-bezier(.22,1,.36,1);z-index:9;overflow-y:auto;padding-bottom:24px;}
- .layer::-webkit-scrollbar{display:none;}
- .layer.show{transform:translateX(0);}
- .sb-head{height:44px;display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
- .sb-back{font-size:26px;font-weight:700;color:var(--ink);cursor:pointer;}
- .sb-title{font-size:18px;font-weight:700;color:var(--ink);}
- .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;}
- .radarcard svg{animation:radarIn .8s ease-out both;cursor:pointer;}
- .trend{display:flex;gap:12px;margin-top:18px;}
- .tcard{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#fff;cursor:pointer;}
- .tcard .n{font-size:14px;font-weight:700;}
- .tcard .d{font-size:26px;font-weight:800;color:var(--dim-action);margin-top:8px;}
- .sug{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:18px 20px;margin-top:18px;margin-bottom:10px;}
- .sug .si{position:relative;padding-left:12px;margin-bottom:16px;}
- .sug .si:last-child{margin-bottom:0;}
- .sug .si::before{content:"";position:absolute;left:0;top:2px;width:4px;height:42px;border-radius:2px;}
- .sug .si.w::before{background:var(--dim-wealth);}
- .sug .si.b::before{background:var(--dim-body);}
- .sug .si .st{font-size:15px;font-weight:700;color:var(--ink);}
- .sug .si .sd{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5;}
- /* —— 客户名突出 + 图标 —— */
- .name-hl{display:inline-flex;align-items:center;gap:5px;font-weight:700;line-height:1.2;}
- .name-hl svg{width:16px;height:16px;flex-shrink:0;}
- .name-hl .nm{color:var(--brand);}
- .name-hl.gold .nm{color:var(--dim-wealth);}
- /* —— 维度字突出 —— */
- .dim{color:var(--brand);font-weight:700;}
- /* —— 焦点维度「智」增强 —— */
- .dim-w{color:var(--dim-wisdom);font-weight:700;}
- .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;}
- @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)}}
- /* —— + 数字突出 —— */
- .gain{color:var(--dim-action);font-weight:800;font-variant-numeric:tabular-nums;}
- .ach .gain{font-size:25px;animation:gainPulse 2.4s ease-in-out infinite;}
- @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)}}
- .tcard .d{animation:popIn .5s ease-out both;}
- /* —— 连续打卡「21」突出 —— */
- .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;}
- @keyframes streakPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.18)}100%{opacity:1;transform:none}}
- /* —— 全家五维首次全达标 · 庆典 —— */
- .celebrate{margin-top:12px;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;color:#6B4A00;
- background:linear-gradient(115deg,#FFF6DC,#FFE2A0,#FFF6DC);background-size:220% 100%;border:1px solid #F2D07A;
- 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;}
- .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;}
- .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;}
- .celebrate .ct{font-size:14px;font-weight:700;line-height:1.45;position:relative;z-index:1;}
- .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;}
- /* ===== 健康屏 ===== */
- .hg-grid{display:flex;gap:12px;margin-top:14px;}
- .hg-ent{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;background:#fff;cursor:pointer;text-align:center;}
- .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);}
- .hg-ent .ic svg{width:20px;height:20px;}
- .hg-ent .t{font-size:13px;font-weight:700;color:var(--ink);}
- .hg-ent .s{font-size:11px;color:var(--ink-2);margin-top:3px;}
- .checkin{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding-bottom:4px;}
- .checkin::-webkit-scrollbar{display:none;}
- .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;}
- .ck .ic{width:28px;height:28px;margin:0 auto 6px;}
- .ck .t{font-size:12px;color:#5A4736;font-weight:600;}
- .rec{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;}
- .rec .ri{display:flex;align-items:center;height:50px;padding:0 16px;border-bottom:1px solid var(--surface-2);font-size:13px;color:#5A4736;}
- .rec .ri:last-child{border-bottom:none;}
- .rec .ri .dot{width:8px;height:8px;border-radius:50%;margin-right:10px;}
- .rec .ri .tm{margin-left:auto;color:var(--ink-2);font-size:11px;}
- /* ===== 成长屏 · 成就 Hero ===== */
- .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;}
- .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;}
- .ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:linear-gradient(135deg,#FFF7ED,#FFEDD5);}
- .ring .rt{position:relative;z-index:1;text-align:center;}
- .ring .rt b{font-size:22px;font-weight:800;color:var(--brand-ink);}
- .ring .rt span{display:block;font-size:10px;color:var(--brand-ink);}
- .ach-stats{flex:1;display:flex;flex-direction:column;gap:8px;}
- .ach-stats .as{display:flex;justify-content:space-between;font-size:13px;color:var(--brand-ink);}
- .ach-stats .as b{font-weight:800;font-size:16px;}
- .fire{display:flex;gap:5px;margin-top:4px;}
- .fire i{width:20px;height:20px;border-radius:5px;background:#F0D9C2;display:flex;align-items:center;justify-content:center;font-size:11px;}
- .fire i.on{background:linear-gradient(135deg,#FFAE6B,var(--brand));color:#fff;animation:firePop .4s ease-out both;}
- .fire i.today{box-shadow:0 0 0 2px var(--brand);}
- .tasks{margin-top:16px;}
- .tk{display:flex;align-items:center;height:54px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 14px;margin-bottom:10px;}
- .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;}
- .tk.done .cb{background:var(--dim-action);border-color:var(--dim-action);}
- .tk.done .cb svg{width:13px;height:13px;}
- .tk .ti{flex:1;margin-left:12px;font-size:14px;color:#5A4736;font-weight:600;}
- .tk.done .ti{color:var(--ink-2);text-decoration:line-through;}
- .tk .tg{font-size:12px;color:var(--dim-action);font-weight:800;}
- .unlock{margin-top:6px;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:#6B4A00;
- background:linear-gradient(115deg,#FFF6DC,#FFE2A0,#FFF6DC);background-size:220% 100%;border:1px solid #F2D07A;
- 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;}
- .unlock .medal{width:30px;height:30px;flex-shrink:0;}
- .unlock .ut{font-size:13px;font-weight:700;line-height:1.4;}
- .unlock .usub{font-size:11px;color:#8A6A20;margin-top:2px;}
- .unlock .ug{margin-left:auto;font-size:12px;font-weight:800;color:#D9880C;}
- /* ===== 我的屏 ===== */
- .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;}
- .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;}
- .idcard .nm{font-size:18px;font-weight:800;}
- .idcard .rl{font-size:12px;color:#FFF1E0;margin-top:3px;}
- .members{display:flex;gap:0;margin-top:14px;}
- .mb{flex:1;text-align:center;cursor:pointer;}
- .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;}
- .mb .nm{font-size:12px;color:#5A4736;font-weight:600;}
- .mb .sc{font-size:11px;color:var(--ink-2);}
- .menu{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;}
- .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;}
- .menu .mi:last-child{border-bottom:none;}
- .menu .mi .ic{width:22px;height:22px;margin-right:12px;color:var(--brand);}
- .menu .mi .go{margin-left:auto;color:var(--ink-2);font-size:18px;}
- /* ===== 维度详情 ===== */
- .dim-hero{border-radius:var(--r-lg);padding:20px;margin-top:16px;color:#fff;display:flex;align-items:center;gap:16px;}
- .dim-hero .big{font-size:44px;font-weight:800;line-height:1;}
- .dim-hero .lab{font-size:14px;font-weight:600;opacity:.92;}
- .dim-hero .desc{font-size:12px;opacity:.85;margin-top:4px;}
- .kpi{display:flex;gap:12px;margin-top:16px;}
- .kpi .k{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;text-align:center;}
- .kpi .k .v{font-size:18px;font-weight:800;color:var(--ink);}
- .kpi .k .l{font-size:11px;color:var(--ink-2);margin-top:3px;}
- .acts{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px 16px;}
- .act{display:flex;align-items:center;height:48px;border-bottom:1px solid var(--surface-2);font-size:13px;color:#5A4736;}
- .act:last-child{border-bottom:none;}
- .act .cb{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);margin-right:12px;flex-shrink:0;}
- .act.done .cb{background:var(--dim-action);border-color:var(--dim-action);display:flex;align-items:center;justify-content:center;}
- .act.done .cb svg{width:12px;height:12px;}
- .act.done{color:var(--ink-2);text-decoration:line-through;}
- /* ===== 成长报告分享卡 ===== */
- .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;}
- .report.show{opacity:1;pointer-events:auto;}
- .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;}
- .report.show .rcard{transform:scale(1);}
- .rcard .rt{font-size:17px;font-weight:800;color:var(--brand-ink);text-align:center;}
- .rcard .rs{font-size:12px;color:var(--ink-2);text-align:center;margin-top:4px;}
- .rscore{display:flex;justify-content:space-around;margin-top:16px;}
- .rscore .rsi{text-align:center;}
- .rscore .rsi b{font-size:22px;font-weight:800;}
- .rscore .rsi span{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;}
- .rfire{display:flex;justify-content:center;gap:5px;margin-top:14px;}
- .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;}
- .rsum{display:flex;justify-content:space-around;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
- .rsum .rm{text-align:center;}
- .rsum .rm b{font-size:18px;font-weight:800;color:var(--brand-ink);}
- .rsum .rm span{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;}
- .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;}
- .rbtn svg{width:18px;height:18px;}
- .rclose{text-align:center;color:var(--ink-2);font-size:13px;margin-top:12px;cursor:pointer;}
- /* ===== 关键帧 ===== */
- @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
- @keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
- @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)}}
- @keyframes dotBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
- @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)}}
- @frames blink{0%,100%{opacity:1}50%{opacity:.55}}
- @keyframes dotBlink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
- @keyframes slideX{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
- @keyframes barGrow{from{width:0}to{width:60%}}
- @keyframes radarIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
- @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}}
- @keyframes trophyFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
- @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))}}
- @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)}}
- @keyframes shareShine{0%{left:-60%}55%,100%{left:135%}}
- @keyframes celeIn{0%{opacity:0;transform:translateY(12px) scale(.94)}100%{opacity:1;transform:none}}
- @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)}}
- @keyframes shine{0%{left:-60%}55%,100%{left:135%}}
- @keyframes medalFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
- @keyframes firstPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
- @keyframes firePop{0%{transform:scale(.6)}100%{transform:none}}
- @media (prefers-reduced-motion: reduce){
- *{animation:none!important;transition:none!important;}
- .fill{width:60%!important;}
- }
- </style>
- </head>
- <body>
- <div class="phone">
- <!-- ============ 首页 ============ -->
- <div class="screen" id="home">
- <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
- <div class="apptitle">浠艾福</div>
- <div class="date">10月6日 周二</div>
- <div class="hero">
- <div class="label">全家五<span style="color:#C2410C;font-weight:800">维</span>能量</div>
- <div><span class="score">78</span><span class="unit">分</span></div>
- <div class="dots">
- <i style="background:var(--dim-wisdom)"></i><i style="background:var(--dim-mind)"></i>
- <i style="background:var(--dim-body)"></i><i style="background:var(--dim-action)"></i><i style="background:var(--dim-wealth)"></i>
- </div>
- </div>
- <div class="achieve">
- <div class="ach"><span class="ach-n"><span class="gain">+62</span></span><span class="ach-l">本周成长值</span></div>
- <div class="ach"><span class="ach-n">×3</span><span class="ach-l">解锁徽章</span></div>
- <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>
- </div>
- <div class="sectitle brand">本周成长主线</div>
- <div class="mainline">
- <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>
- <div class="guide">还差 2 站 · 解锁本周<span class="dim-w">智</span>维徽章 ›</div>
- <div class="track"><div class="fill"></div></div>
- </div>
- <div class="nba">
- <div class="kicker">下一步 · 今日一站</div>
- <div class="title">完成数学挑战</div>
- <div class="sub">完成后 <span class="gain">+20</span> 成长值</div>
- <div class="arrow">›</div>
- </div>
- <div class="sectitle">家庭动态</div>
- <div class="dyn">
- <div class="item"><span class="news"></span><span style="color:var(--dim-wealth);font-weight:700">小柚</span> 连续打卡 <span class="streak-num">21</span> 天</div>
- </div>
- <div class="celebrate">
- <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>
- <span class="ct">本周 · 全家五维 <span class="first">首次</span> 全达标</span>
- <span class="shine"></span>
- </div>
- <div class="sectitle">本周家庭成长卡</div>
- <div class="growth">
- <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>
- <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>
- </div>
- </div>
- <!-- ============ 健康 ============ -->
- <div class="screen hidden" id="health">
- <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
- <div class="apptitle">健康</div>
- <div class="date">数据中心</div>
- <div class="hg-grid">
- <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>
- <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>
- </div>
- <div class="sectitle brand">五维能量一眼看</div>
- <div class="radarcard" id="miniRadar" style="height:240px;cursor:pointer">
- <svg width="210" height="210" viewBox="0 0 260 260" fill="none">
- <polygon points="130,30 213,99 174,201 86,201 47,99" fill="none" stroke="#F0E4D8"/>
- <polygon points="130,80 176,124 153,170 107,170 84,124" fill="none" stroke="#F6E9DC"/>
- <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"/>
- <polygon points="130,48 201,107 170,185 88,187 55,106" fill="#F97316" fill-opacity="0.18" stroke="#F97316" stroke-width="2"/>
- </svg>
- </div>
- <div class="sectitle">今日打卡</div>
- <div class="checkin">
- <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>
- <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>
- <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>
- <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>
- </div>
- <div class="sectitle">最近记录</div>
- <div class="rec">
- <div class="ri"><span class="dot" style="background:var(--dim-body)"></span>小宇 · 饮食打卡<div class="tm">10分钟前</div></div>
- <div class="ri"><span class="dot" style="background:var(--dim-action)"></span>小柚 · 运动 30 分钟<div class="tm">1小时前</div></div>
- <div class="ri"><span class="dot" style="background:var(--dim-mind)"></span>妈妈 · 情绪记录<div class="tm">今天</div></div>
- </div>
- </div>
- <!-- ============ 成长记录 ============ -->
- <div class="screen hidden" id="growth">
- <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
- <div class="apptitle">成长记录</div>
- <div class="date">本周成就</div>
- <div class="ach-hero">
- <div class="ring"><div class="rt"><b>5/7</b><span>本周完成</span></div></div>
- <div class="ach-stats">
- <div class="as"><span>完成任务</span><b>12</b></div>
- <div class="as"><span>成长分</span><b>340</b></div>
- <div class="as"><span>解锁徽章</span><b>8</b></div>
- <div class="fire">
- <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>
- </div>
- </div>
- </div>
- <div class="sectitle brand">今日成长 · 还差 2 项解锁本周全勤</div>
- <div class="tasks" id="taskList">
- <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>
- <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>
- <div class="tk" data-gain="20"><div class="cb"></div><div class="ti">小柚 · 亲子阅读</div><div class="tg">+20</div></div>
- <div class="tk" data-gain="15"><div class="cb"></div><div class="ti">妈妈 · 冥想 10 分钟</div><div class="tg">+15</div></div>
- </div>
- <div class="unlock">
- <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>
- <div><div class="ut">再完成 2 项 · 解锁「本周全勤」</div><div class="usub">解锁后自动生成成长报告</div></div>
- <div class="ug" id="shareFromGrowth">分享 ›</div>
- </div>
- </div>
- <!-- ============ 我的 ============ -->
- <div class="screen hidden" id="profile">
- <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
- <div class="apptitle">我的</div>
- <div class="date">家庭中心</div>
- <div class="idcard">
- <div class="av">妈</div>
- <div><div class="nm">晓琳</div><div class="rl">家长 · 家庭管理员</div></div>
- </div>
- <div class="sectitle brand">我的家庭</div>
- <div class="members">
- <div class="mb"><div class="av" style="background:var(--dim-wisdom)">宇</div><div class="nm">小宇</div><div class="sc">智 82</div></div>
- <div class="mb"><div class="av" style="background:var(--dim-wealth)">柚</div><div class="nm">小柚</div><div class="sc">富 75</div></div>
- <div class="mb"><div class="av" style="background:var(--dim-body)">爷</div><div class="nm">爷爷</div><div class="sc">身 70</div></div>
- <div class="mb"><div class="av" style="background:var(--brand)">妈</div><div class="nm">妈妈</div><div class="sc">心 79</div></div>
- </div>
- <div class="sectitle">我的</div>
- <div class="menu">
- <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>
- <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>
- <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>
- <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>
- </div>
- </div>
- <!-- ============ TabBar ============ -->
- <div class="tabbar">
- <span class="tab active" data-target="home">首页</span>
- <span class="tab" data-target="health">健康</span>
- <span class="tab" data-target="growth">成长</span>
- <span class="tab" data-target="profile">我的</span>
- </div>
- <div class="tab-center" id="openDrawer">五维</div>
- <!-- ============ 五维抽屉 ============ -->
- <div class="overlay" id="overlay"></div>
- <div class="sheet" id="sheet">
- <div class="handle"></div>
- <h3>全家五维</h3>
- <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>
- <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>
- <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>
- <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>
- <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>
- <div class="expand" id="openSandbox">展开五维总览</div>
- </div>
- <!-- ============ 五维总览 ============ -->
- <div class="layer" id="sandbox">
- <div class="sb-head"><span class="sb-back" id="closeSandbox">‹</span><span class="sb-title">五维总览</span><span></span></div>
- <div class="radarcard" id="fullRadar">
- <svg width="260" height="260" viewBox="0 0 260 260" fill="none">
- <polygon points="130,30 213,99 174,201 86,201 47,99" fill="none" stroke="#F0E4D8"/>
- <polygon points="130,80 176,124 153,170 107,170 84,124" fill="none" stroke="#F6E9DC"/>
- <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"/>
- <polygon points="130,48 201,107 170,185 88,187 55,106" fill="#F97316" fill-opacity="0.18" stroke="#F97316" stroke-width="2"/>
- <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"/>
- <text x="130" y="22" font-size="13" font-weight="700" fill="#6366F1" text-anchor="middle">智 82</text>
- <text x="228" y="100" font-size="13" font-weight="700" fill="#10B981" text-anchor="middle">行 75</text>
- <text x="182" y="224" font-size="13" font-weight="700" fill="#F59E0B" text-anchor="middle">富 68</text>
- <text x="78" y="224" font-size="13" font-weight="700" fill="#FF8C42" text-anchor="middle">身 71</text>
- <text x="30" y="132" font-size="13" font-weight="700" fill="#FF6B9D" text-anchor="middle">心 79</text>
- </svg>
- </div>
- <div class="sectitle">各维趋势(点击查看详情)</div>
- <div class="trend">
- <div class="tcard" data-dim="智" data-color="#6366F1" data-score="82"><div class="n dim-w">智</div><div class="d">+6</div></div>
- <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>
- <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>
- </div>
- <div class="sectitle">改善建议</div>
- <div class="sug">
- <div class="si w"><div class="st">富 · 理财习惯偏弱</div><div class="sd">本周「富」<span class="dim">维</span>仅 68 分,建议安排一次家庭记账小互动。</div></div>
- <div class="si b"><div class="st">身 · 运动待加强</div><div class="sd">「身」<span class="dim">维</span> 71 分,可把晚饭后散步设为本周家庭任务。</div></div>
- </div>
- </div>
- <!-- ============ 维度详情 ============ -->
- <div class="layer" id="dimDetail">
- <div class="sb-head"><span class="sb-back" id="closeDim">‹</span><span class="sb-title" id="dimTitle">智 · 思维</span><span></span></div>
- <div class="dim-hero" id="dimHero">
- <div class="big" id="dimScore">82</div>
- <div><div class="lab" id="dimLab">智 · 思维</div><div class="desc">本周 +6,近 30 天稳步提升</div></div>
- </div>
- <div class="sectitle">关键指标</div>
- <div class="kpi">
- <div class="k"><div class="v">优</div><div class="l">逻辑推理</div></div>
- <div class="k"><div class="v">良</div><div class="l">记忆力</div></div>
- <div class="k"><div class="v">中</div><div class="l">专注力</div></div>
- </div>
- <div class="sectitle">建议动作(完成后成长 +)</div>
- <div class="acts" id="dimActs">
- <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>
- <div class="act"><div class="cb"></div>亲子共读 20 分钟</div>
- <div class="act"><div class="cb"></div>玩一局舒尔特方格</div>
- </div>
- <div class="sectitle">最近记录</div>
- <div class="rec">
- <div class="ri"><span class="dot" style="background:var(--dim-wisdom)"></span>数学挑战 完成<div class="tm">今天</div></div>
- <div class="ri"><span class="dot" style="background:var(--dim-wisdom)"></span>舒尔特方格 完成<div class="tm">昨天</div></div>
- </div>
- </div>
- <!-- ============ 成长报告分享卡 ============ -->
- <div class="report" id="report">
- <div class="rcard">
- <div class="rt">小宇家的本周成长</div>
- <div class="rs">全家五维首次全达标 · 朋友们都在期待这一刻</div>
- <div class="rscore">
- <div class="rsi"><b style="color:var(--dim-wisdom)">82</b><span>智</span></div>
- <div class="rsi"><b style="color:var(--dim-mind)">79</b><span>心</span></div>
- <div class="rsi"><b style="color:var(--dim-body)">71</b><span>身</span></div>
- <div class="rsi"><b style="color:var(--dim-action)">75</b><span>行</span></div>
- <div class="rsi"><b style="color:var(--dim-wealth)">68</b><span>富</span></div>
- </div>
- <div class="rfire"><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i><i>🔥</i></div>
- <div class="rsum">
- <div class="rm"><b>+62</b><span>成长值</span></div>
- <div class="rm"><b>×3</b><span>徽章</span></div>
- <div class="rm"><b>5/5</b><span>全达标</span></div>
- </div>
- <div class="rbtn"><svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z" fill="#fff"/></svg>成果分享 · 邀请朋友们一起看</div>
- <div class="rclose" id="closeReport">关闭</div>
- </div>
- </div>
- </div>
- <script>
- const overlay=document.getElementById('overlay'),sheet=document.getElementById('sheet'),
- sandbox=document.getElementById('sandbox'),dimDetail=document.getElementById('dimDetail'),
- report=document.getElementById('report');
- // Tab 切换
- document.querySelectorAll('.tab').forEach(t=>{
- t.addEventListener('click',()=>{
- document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
- t.classList.add('active');
- const target=t.dataset.target;
- ['home','health','growth','profile'].forEach(id=>{
- document.getElementById(id).classList.toggle('hidden',id!==target);
- });
- });
- });
- // 五维抽屉
- function openDrawer(){overlay.classList.add('show');sheet.classList.add('show');}
- function closeDrawer(){overlay.classList.remove('show');sheet.classList.remove('show');}
- document.getElementById('openDrawer').addEventListener('click',openDrawer);
- overlay.addEventListener('click',closeDrawer);
- document.getElementById('openSandbox').addEventListener('click',()=>{closeDrawer();sandbox.classList.add('show');});
- // 维度详情(从抽屉或趋势卡点开,按维度注入)
- function openDim(dim,color,score){
- document.getElementById('dimTitle').textContent=dim+' · '+(dim==='智'?'思维':dim==='心'?'情绪':dim==='身'?'体魄':dim==='行'?'行动':'财富');
- document.getElementById('dimScore').textContent=score;
- document.getElementById('dimLab').textContent=dim+' · '+(dim==='智'?'思维':dim==='心'?'情绪':dim==='身'?'体魄':dim==='行'?'行动':'财富');
- const hero=document.getElementById('dimHero');
- hero.style.background='linear-gradient(135deg,'+color+'cc,'+color+' 70%,'+color+'dd)';
- sandbox.classList.remove('show');
- dimDetail.classList.add('show');
- }
- document.querySelectorAll('[data-dim]').forEach(el=>{
- el.addEventListener('click',()=>openDim(el.dataset.dim,el.dataset.color,el.dataset.score));
- });
- document.getElementById('closeDim').addEventListener('click',()=>{dimDetail.classList.remove('show');sandbox.classList.add('show');});
- // 五维总览 / 健康 mini 雷达 → 总览
- document.getElementById('miniRadar').addEventListener('click',()=>sandbox.classList.add('show'));
- document.getElementById('closeSandbox').addEventListener('click',()=>sandbox.classList.remove('show'));
- // 成长任务勾选
- document.querySelectorAll('.tk[data-gain]').forEach(tk=>{
- tk.addEventListener('click',()=>{
- if(tk.classList.contains('done'))return;
- tk.classList.add('done');
- 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>';
- });
- });
- // 分享卡
- function openReport(){report.classList.add('show');}
- function closeReport(){report.classList.remove('show');}
- document.getElementById('shareFromHome').addEventListener('click',openReport);
- document.getElementById('shareFromGrowth').addEventListener('click',openReport);
- document.getElementById('closeReport').addEventListener('click',closeReport);
- report.addEventListener('click',e=>{if(e.target===report)closeReport();});
- </script>
- </body>
- </html>
|