| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413 |
- <!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>
- /* =========================================================
- 动效原型 —— 与 Ardot 画布稿「浠艾福首页-家庭成长故事线」1:1 同色板
- 品牌蓝 #2F6BE6 | 暗色英雄 #1C294A | 五维色仅作强调
- 动效策略(Calm Premium Wellness,克制):
- - 本周成果条:popIn 弹入,放大"已获得的成果"
- - 呼吸/光泽:能量英雄分数、五维色点
- - 脉冲高亮 + 箭头滑动引导:今日一站卡(引导"下一步")
- - 闪烁引导:分享按钮、家庭动态新消息点
- - 进度条载入生长、主线解锁引导句、抽屉上滑、雷达淡入
- - 尊重 prefers-reduced-motion,全部降级为静态
- ========================================================= */
- :root{
- --brand:#2F6BE6; --brand-soft:#EAF1FE;
- --hero-bg:#1C294A;
- --dim-wisdom:#6C5CE7; --dim-mind:#F2588E; --dim-body:#FF7A45;
- --dim-action:#12B981; --dim-wealth:#F5A524;
- --ink:#171A1C; --ink-2:#6B7278; --line:#E3E9F0; --surface-2:#F5F7F9;
- --r:14px; --r-lg:16px;
- }
- *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
- body{background:#EEF1F5;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:#fff;border-radius:40px;
- overflow:hidden;box-shadow:0 20px 60px rgba(20,30,60,.20);border:1px solid #E6EAF0;}
- .screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 16px;
- overflow-y:auto;padding-bottom:72px;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:18px;}
- .date{text-align:right;color:var(--ink-2);font-size:13px;margin-top:-22px;margin-left:auto;width:110px;}
- /* 能量英雄(暗色卡片) */
- .hero{margin-top:22px;height:104px;border-radius:var(--r-lg);background:var(--hero-bg);
- padding:18px 20px;position:relative;overflow:hidden;flex-shrink:0;}
- .hero .label{color:#C8D0E0;font-size:13px;}
- .hero .score{color:#fff;font-size:38px;font-weight:700;line-height:1;margin-top:6px;
- animation:breathe 3.2s ease-in-out infinite;}
- .hero .unit{color:#C8D0E0;font-size:14px;margin-left:6px;}
- .hero .dots{position:absolute;right:20px;top:64px;display:flex;gap:10px;}
- .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(23,26,28,.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;}
- @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))}}
- /* 区块标题 */
- .sectitle{font-size:15px;font-weight:700;color:var(--ink);margin:28px 0 12px;flex-shrink:0;}
- .sectitle.blue{color:var(--brand);font-size:13px;letter-spacing:.5px;}
- /* 本周主线卡 */
- .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:var(--brand);
- padding:16px;position:relative;color:#fff;
- animation:pulseGlow 2.4s ease-in-out infinite;}
- .nba .kicker{font-size:12px;color:#CDE0FB;font-weight:600;}
- .nba .title{font-size:19px;font-weight:800;margin-top:8px;letter-spacing:.3px;}
- .nba .sub{font-size:12px;color:#CDE0FB;margin-top:6px;}
- .nba .sub .gain{background:rgba(255,255,255,.22);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:#383D42;
- 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:var(--brand);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:#CDE0FB;margin-top:4px;}
- /* 分享 CTA:与首页 flash(今日一站 pulseGlow)同一品牌蓝色相内做深浅层次 */
- .growth .btn{border:none;color:#fff;background:linear-gradient(135deg,#5E97F8 0%,#2F6BE6 48%,#1B4FC8 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(47,107,230,.30);
- border:1px solid rgba(255,255,255,.28);
- 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(16,42,110,.45);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);}
- @keyframes sharePulse{0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(47,107,230,.30)}
- 50%{transform:scale(1.025);box-shadow:0 8px 34px rgba(47,107,230,.60)}}
- @keyframes shareShine{0%{left:-60%}55%,100%{left:135%}}
- /* 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 30px;
- justify-content:space-between;}
- .tab{font-size:12px;color:var(--ink-2);}
- .tab.active{color:var(--brand);font-weight:700;}
- .tab-center{width:42px;height:42px;border-radius:50%;background:var(--brand);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(47,107,230,.35);}
- /* 抽屉 + 遮罩 */
- .overlay{position:absolute;inset:0;background:rgba(23,26,28,.45);opacity:0;
- transition:opacity .3s ease;pointer-events:none;}
- .overlay.show{opacity:1;pointer-events:auto;}
- .sheet{position:absolute;left:0;right:0;bottom:0;height:420px;background:#fff;border-radius:20px 20px 0 0;
- padding:10px 16px 16px;transform:translateY(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);}
- .sheet.show{transform:translateY(0);}
- .handle{width:41px;height:4px;border-radius:2px;background:#D9DCE0;margin:6px auto 14px;}
- .sheet h3{font-size:18px;font-weight:700;color:var(--ink);}
- .drow{display:flex;align-items:center;height:52px;border-bottom:1px solid var(--surface-2);}
- .drow .dot{width:12px;height:12px;border-radius:50%;margin-right:14px;}
- .drow .name{font-size:14px;color:#383D42;flex:1;}
- .drow .val{font-size:15px;font-weight:700;color:var(--ink);}
- .expand{margin-top:22px;height:44px;border-radius:999px;background:var(--brand);color:#fff;
- display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;cursor:pointer;}
- /* 全屏沙盘页 */
- .sandbox{position:absolute;inset:0;background:#fff;padding:0 16px;
- transform:translateX(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);z-index:5;
- overflow-y:auto;}
- .sandbox.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;}
- .radarcard{border:1px solid var(--line);border-radius:var(--r-lg);height:300px;margin-top:20px;
- display:flex;align-items:center;justify-content:center;}
- .radarcard svg{animation:radarIn .8s ease-out both;}
- .trend{display:flex;gap:12px;margin-top:18px;}
- .tcard{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#fff;}
- .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:24px;}
- .sug .si{position:relative;padding-left:12px;margin-bottom:18px;}
- .sug .si:last-child{margin-bottom:0;}
- .sug .si::before{content:"";position:absolute;left:0;top:2px;width:4px;height:44px;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:#EEE9FB;
- color:var(--dim-wisdom);font-weight:700;vertical-align:baseline;margin:0 1px;
- animation:wisdomGlow 2.6s ease-in-out infinite;}
- @keyframes wisdomGlow{
- 0%,100%{box-shadow:0 0 0 rgba(108,92,231,0)}
- 50%{box-shadow:0 0 12px rgba(108,92,231,.50)}
- }
- /* —— + 数字突出 —— */
- .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(18,185,129,0)}50%{text-shadow:0 0 12px rgba(18,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;}
- @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 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(255,255,255,0)}50%{text-shadow:0 0 16px rgba(255,255,255,.45)}}
- @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(47,107,230,.30)}50%{box-shadow:0 8px 34px rgba(47,107,230,.60)}}
- @keyframes 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}}
- /* 降级:尊重系统"减少动态效果" */
- @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:#9DBDF6;font-weight:700">维</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" 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>
- </div>
- <div class="sectitle blue">本周成长主线</div>
- <div class="mainline">
- <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>
- <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" xmlns="http://www.w3.org/2000/svg">
- <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"><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>
- </div>
- </div>
- <!-- ============ TabBar ============ -->
- <div class="tabbar">
- <span class="tab active">首页</span>
- <span class="tab">健康</span>
- <span class="tab">成长</span>
- <span class="tab">我的</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"><span class="dot" style="background:var(--dim-wisdom)"></span><span class="name"><span class="dim-w">智</span> · 思维</span><span class="val">82</span></div>
- <div class="drow"><span class="dot" style="background:var(--dim-mind)"></span><span class="name">心 · 情绪</span><span class="val">79</span></div>
- <div class="drow"><span class="dot" style="background:var(--dim-body)"></span><span class="name">身 · 体魄</span><span class="val">71</span></div>
- <div class="drow"><span class="dot" style="background:var(--dim-action)"></span><span class="name">行 · 行动</span><span class="val">75</span></div>
- <div class="drow"><span class="dot" style="background:var(--dim-wealth)"></span><span class="name">富 · 财富</span><span class="val">68</span></div>
- <div class="expand" id="openSandbox">展开五维总览</div>
- </div>
- <!-- ============ 全屏沙盘页 ============ -->
- <div class="sandbox" id="sandbox">
- <div class="sb-head"><span class="sb-back" id="closeSandbox">‹</span><span class="sb-title">五维总览</span><span></span></div>
- <div class="radarcard">
- <svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
- <polygon points="130,30 213,99 174,201 86,201 47,99" fill="none" stroke="#E2E6EB"/>
- <polygon points="130,80 176,124 153,170 107,170 84,124" fill="none" stroke="#EDEFF2"/>
- <line x1="130" y1="130" x2="130" y2="30" stroke="#E2E6EB"/>
- <line x1="130" y1="130" x2="213" y2="99" stroke="#E2E6EB"/>
- <line x1="130" y1="130" x2="174" y2="201" stroke="#E2E6EB"/>
- <line x1="130" y1="130" x2="86" y2="201" stroke="#E2E6EB"/>
- <line x1="130" y1="130" x2="47" y2="99" stroke="#E2E6EB"/>
- <polygon points="130,48 201,107 170,185 88,187 55,106" fill="#2F6BE6" fill-opacity="0.18" stroke="#2F6BE6" stroke-width="2"/>
- <circle cx="130" cy="48" r="4" fill="#6C5CE7"/>
- <circle cx="201" cy="107" r="4" fill="#12B981"/>
- <circle cx="170" cy="185" r="4" fill="#F5A524"/>
- <circle cx="88" cy="187" r="4" fill="#FF7A45"/>
- <circle cx="55" cy="106" r="4" fill="#F2588E"/>
- <text x="130" y="22" font-size="13" font-weight="700" fill="#6C5CE7" text-anchor="middle">智 82</text>
- <text x="228" y="100" font-size="13" font-weight="700" fill="#12B981" text-anchor="middle">行 75</text>
- <text x="182" y="224" font-size="13" font-weight="700" fill="#F5A524" text-anchor="middle">富 68</text>
- <text x="78" y="224" font-size="13" font-weight="700" fill="#FF7A45" text-anchor="middle">身 71</text>
- <text x="30" y="132" font-size="13" font-weight="700" fill="#F2588E" text-anchor="middle">心 79</text>
- </svg>
- </div>
- <div class="sectitle">各维趋势</div>
- <div class="trend">
- <div class="tcard"><div class="n dim-w">智</div><div class="d">+6</div></div>
- <div class="tcard"><div class="n" style="color:var(--dim-mind)">心</div><div class="d">+3</div></div>
- <div class="tcard"><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>
- <script>
- const overlay = document.getElementById('overlay');
- const sheet = document.getElementById('sheet');
- const sandbox = document.getElementById('sandbox');
- 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'); });
- document.getElementById('closeSandbox').addEventListener('click', ()=> sandbox.classList.remove('show'));
- </script>
- </body>
- </html>
|