|
|
@@ -0,0 +1,643 @@
|
|
|
+<!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>
|