|
|
@@ -0,0 +1,1846 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="utf-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+<title>浠艾福 · 首页家庭总览重设计(设计稿)</title>
|
|
|
+<style>
|
|
|
+/* ============================================================
|
|
|
+ 浠艾福(CFC)首页家庭总览 · 设计稿
|
|
|
+ 令牌三层:基色层 primitive 到 语义层 semantic 再到 组件层 component
|
|
|
+ 品牌色锚定 uni.scss:brand-primary 系、五维 dim-* 五色
|
|
|
+ 全部色值只在 :root 定义,组件一律 var(--…) 引用
|
|
|
+ ============================================================ */
|
|
|
+:root {
|
|
|
+ /* ---------- 基色层 · 品牌橙(沿用 uni.scss $brand-* 与 $uni-primary*) ---------- */
|
|
|
+ --orange-50: #FFF7ED;
|
|
|
+ --orange-100: #FFEDD5;
|
|
|
+ --orange-200: #FBE3CC;
|
|
|
+ --orange-300: #FDBA74;
|
|
|
+ --orange-500: #F97316; /* 品牌主色(tabBar.selectedColor 真值,仅装饰用) */
|
|
|
+ --orange-600: #EA580C;
|
|
|
+ --orange-700: #C2410C;
|
|
|
+ --orange-800: #9A3412;
|
|
|
+ --orange-900: #7C2D12;
|
|
|
+
|
|
|
+ /* ---------- 基色层 · 五维身份色(沿用 uni.scss §12 $dim-* / $dim-*-tint) ---------- */
|
|
|
+ --dim-body: #C2703D; /* 赭石橙 装饰用途 不承文字 */
|
|
|
+ --dim-body-deep: #9C4A1A; /* 赭石深档 承载 badge 文字 */
|
|
|
+ --dim-body-tint: #FBF3EC; /* 暖灰棕底 deep-on-tint 达标 */
|
|
|
+ --dim-wisdom: #6366F1;
|
|
|
+ --dim-wisdom-deep: #4338CA;
|
|
|
+ --dim-wisdom-tint: #F0F0FF;
|
|
|
+ --dim-wealth: #F59E0B;
|
|
|
+ --dim-wealth-deep: #92400E;
|
|
|
+ --dim-wealth-tint: #FFFBEB;
|
|
|
+ --dim-action: #10B981;
|
|
|
+ --dim-action-deep: #047857;
|
|
|
+ --dim-action-tint: #F0FFF4;
|
|
|
+ --dim-mind: #FF6B9D;
|
|
|
+ --dim-mind-deep: #9D174D;
|
|
|
+ --dim-mind-tint: #FFF0F5;
|
|
|
+
|
|
|
+ /* ---------- 基色层 · 五行元素色(能量沙盘 沿用 uni.scss 三档:主色/承文字/浅底) ---------- */
|
|
|
+ /* 五行到五维映射:全站统一到 $dim-* 五维身份色(主理人裁定 2026-10-27)
|
|
|
+ 火=心 金=智 水=富 木=行 土=身;五行语义由顶点图标形状(火焰/山/闪电/水滴/叶)承载 */
|
|
|
+ --el-fire: var(--dim-mind);
|
|
|
+ --el-fire-ink: var(--dim-mind-deep);
|
|
|
+ --el-fire-tint: var(--dim-mind-tint);
|
|
|
+ --el-earth: var(--dim-body); /* 土 身 */
|
|
|
+ --el-earth-ink: var(--dim-body-deep);
|
|
|
+ --el-earth-tint: var(--dim-body-tint);
|
|
|
+ --el-metal: var(--dim-wisdom);
|
|
|
+ --el-metal-ink: var(--dim-wisdom-deep);
|
|
|
+ --el-metal-tint: var(--dim-wisdom-tint);
|
|
|
+ --el-water: var(--dim-wealth);
|
|
|
+ --el-water-ink: var(--dim-wealth-deep);
|
|
|
+ --el-water-tint: var(--dim-wealth-tint);
|
|
|
+ --el-wood: var(--dim-action);
|
|
|
+ --el-wood-ink: var(--dim-action-deep);
|
|
|
+ --el-wood-tint: var(--dim-action-tint);
|
|
|
+
|
|
|
+ /* ---------- 基色层 · 暖中性阶(替代纯白纯黑;呼应页面底 #F8F8F8 约定) ---------- */
|
|
|
+ --warm-0: #FFFDFB;
|
|
|
+ --warm-50: #FAF7F1;
|
|
|
+ --warm-100: #F4EEE5;
|
|
|
+ --warm-200: #E8E0D4;
|
|
|
+ --warm-300: #D8CDBC;
|
|
|
+ --ink-100: #3A2E24;
|
|
|
+ --ink-80: #5C4F43;
|
|
|
+ --ink-60: #6E5F51;
|
|
|
+ --stage-bg: #E9E2D5;
|
|
|
+
|
|
|
+ /* ---------- 基色层 · 状态色(只承担语义,不当装饰) ---------- */
|
|
|
+ --ok-ink: #166534;
|
|
|
+ --ok-tint: #F0FFF4;
|
|
|
+ --warn-ink: #92400E;
|
|
|
+ --warn-tint: #FFFBEB;
|
|
|
+ --danger-ink: #B91C1C;
|
|
|
+ --danger-tint: #FEF2F2;
|
|
|
+ --info-ink: #1E3A8A;
|
|
|
+ --info-tint: #F0F0FF;
|
|
|
+
|
|
|
+ /* ---------- 语义层 · 表面与文字 ---------- */
|
|
|
+ --bg-page: var(--warm-50);
|
|
|
+ --surface: var(--warm-0);
|
|
|
+ --surface-2: var(--warm-100);
|
|
|
+ --line: var(--warm-200); /* 装饰分隔线 不承担控件识别 */
|
|
|
+ --line-strong: var(--warm-300); /* 装饰分隔线 不承担控件识别 */
|
|
|
+ --line-control: #8E7C60; /* 交互控件边界专用 须 3:1(复选框 按钮 开关) */
|
|
|
+ --text: var(--ink-100);
|
|
|
+ --text-2: var(--ink-80);
|
|
|
+ --text-3: var(--ink-60);
|
|
|
+ --on-accent: #FFFDFB;
|
|
|
+
|
|
|
+ /* 语义层 · 动作(品牌橙的可读用法:承载语义一律用深档) */
|
|
|
+ --accent: var(--orange-700);
|
|
|
+ --accent-strong: var(--orange-800);
|
|
|
+ --accent-soft: var(--orange-50);
|
|
|
+ --accent-soft-2: var(--orange-100);
|
|
|
+ --accent-mid: var(--orange-600);
|
|
|
+ --brand-mark: var(--orange-500);
|
|
|
+ --focus: var(--orange-600);
|
|
|
+
|
|
|
+ /* 语义层 · 主角色带(hero) */
|
|
|
+ --hero-top: #FFF9F2;
|
|
|
+ --hero-bot: #FFEFDF;
|
|
|
+ --hero-line: #F7E1C9;
|
|
|
+
|
|
|
+ /* 语义层 · 能量沙盘星图 */
|
|
|
+ --star-h: 244px;
|
|
|
+ --star-grid: #948264; /* 网格线须同时对暖白底与多边形填充达标 */
|
|
|
+ --star-fill: #FCE7CE;
|
|
|
+ --star-stroke: var(--accent);
|
|
|
+ --star-disc: #FFFDFB; /* 星心隔离盘 把数字从辐条汇聚点抬出来 */
|
|
|
+ --star-disc-w: 56px;
|
|
|
+ --star-glow-in: rgba(154, 52, 18, 0.17);
|
|
|
+ --star-glow-out: rgba(154, 52, 18, 0);
|
|
|
+
|
|
|
+ /* ---------- 间距(兼容 uni.scss --space-xs/sm/md/lg/xl/page 4·8·12·16·24·16) ---------- */
|
|
|
+ --s-1: 4px;
|
|
|
+ --s-2: 8px;
|
|
|
+ --s-3: 12px;
|
|
|
+ --s-4: 16px;
|
|
|
+ --s-5: 20px;
|
|
|
+ --s-6: 24px;
|
|
|
+ --s-7: 28px;
|
|
|
+ --s-8: 32px;
|
|
|
+ --s-9: 40px;
|
|
|
+ --s-10: 48px;
|
|
|
+ --page-pad: 16px;
|
|
|
+
|
|
|
+ /* ---------- 圆角(沿用已收敛 4 档:8/16/24/999rpx ≈ 4/8/12/pill) ---------- */
|
|
|
+ --r-xs: 4px;
|
|
|
+ --r-sm: 8px;
|
|
|
+ --r-md: 12px;
|
|
|
+ --r-pill: 999px;
|
|
|
+
|
|
|
+ /* ---------- 尺寸(触控 44、图标档、画布) ---------- */
|
|
|
+ --hairline: 1px;
|
|
|
+ --focus-w: 2px;
|
|
|
+ --focus-offset: 2px;
|
|
|
+ --icon-sm: 16px;
|
|
|
+ --icon-md: 20px;
|
|
|
+ --icon-lg: 24px;
|
|
|
+ --tile-sm: 26px;
|
|
|
+ --tile-md: 32px;
|
|
|
+ --avatar: 26px;
|
|
|
+ --tap: 44px;
|
|
|
+ --canvas-w: 390px;
|
|
|
+ --screen-h: 812px;
|
|
|
+ --statusbar-h: 30px;
|
|
|
+ --tabbar-h: 52px;
|
|
|
+ --safe-b: 20px;
|
|
|
+
|
|
|
+ /* ---------- 字体 ---------- */
|
|
|
+ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
|
|
+ --fs-10: 10px;
|
|
|
+ --fs-11: 11px;
|
|
|
+ --fs-12: 12px;
|
|
|
+ --fs-13: 13px;
|
|
|
+ --fs-14: 14px;
|
|
|
+ --fs-15: 15px;
|
|
|
+ --fs-16: 16px;
|
|
|
+ --fs-18: 18px;
|
|
|
+ --fs-22: 22px;
|
|
|
+ --fs-34: 34px;
|
|
|
+ --lh-tight: 1.25;
|
|
|
+ --lh-body: 1.55;
|
|
|
+
|
|
|
+ /* ---------- 动效(只用 transform / opacity) ---------- */
|
|
|
+ --dur-1: 120ms;
|
|
|
+ --dur-2: 200ms;
|
|
|
+ --dur-3: 260ms;
|
|
|
+ --ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+
|
|
|
+ /* ---------- 阴影(分层且罕见:只有主角带与设备外框有投影) ---------- */
|
|
|
+ --shadow-hero: 0 10px 28px rgba(154, 52, 18, 0.10);
|
|
|
+ --shadow-device: 0 24px 60px rgba(60, 45, 30, 0.16);
|
|
|
+
|
|
|
+ /* ---------- 状态令牌 ---------- */
|
|
|
+ --opacity-disabled: 0.45;
|
|
|
+ --opacity-press: 0.88;
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 基础 ============================ */
|
|
|
+* { box-sizing: border-box; }
|
|
|
+
|
|
|
+html, body { margin: 0; padding: 0; }
|
|
|
+
|
|
|
+body {
|
|
|
+ background: var(--stage-bg);
|
|
|
+ color: var(--text);
|
|
|
+ font-family: var(--font);
|
|
|
+ font-size: var(--fs-14);
|
|
|
+ line-height: var(--lh-body);
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+}
|
|
|
+
|
|
|
+button { font-family: inherit; color: inherit; }
|
|
|
+
|
|
|
+a { color: var(--accent); text-decoration: none; }
|
|
|
+
|
|
|
+ul, ol { margin: 0; padding: 0; list-style: none; }
|
|
|
+
|
|
|
+h1, h2, h3, p { margin: 0; }
|
|
|
+
|
|
|
+svg { display: block; }
|
|
|
+
|
|
|
+.sr-only {
|
|
|
+ position: absolute;
|
|
|
+ width: var(--hairline);
|
|
|
+ height: var(--hairline);
|
|
|
+ overflow: hidden;
|
|
|
+ clip-path: inset(50%);
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统一的键盘焦点环:2px 实心 + 2px 外距,对暖白底 3.3:1 */
|
|
|
+:focus-visible {
|
|
|
+ outline: var(--focus-w) solid var(--focus);
|
|
|
+ outline-offset: var(--focus-offset);
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 设计说明条(不计入手机画布) ============================ */
|
|
|
+.doc {
|
|
|
+ max-width: 1120px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: var(--s-8) var(--s-4) var(--s-10);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-head {
|
|
|
+ background: var(--surface);
|
|
|
+ border: var(--hairline) solid var(--line);
|
|
|
+ border-radius: var(--r-md);
|
|
|
+ padding: var(--s-6);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-title-row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: var(--s-3);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-title {
|
|
|
+ font-size: var(--fs-22);
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+}
|
|
|
+
|
|
|
+.doc-tag {
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ color: var(--text-3);
|
|
|
+ background: var(--surface-2);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ padding: var(--s-1) var(--s-3);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-desc {
|
|
|
+ margin-top: var(--s-2);
|
|
|
+ font-size: var(--fs-13);
|
|
|
+ color: var(--text-2);
|
|
|
+ max-width: 62ch;
|
|
|
+}
|
|
|
+
|
|
|
+.doc-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: var(--s-3);
|
|
|
+ margin-top: var(--s-5);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-card {
|
|
|
+ flex: 1 1 240px;
|
|
|
+ background: var(--bg-page);
|
|
|
+ border: var(--hairline) solid var(--line);
|
|
|
+ border-radius: var(--r-sm);
|
|
|
+ padding: var(--s-4);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-card h2 {
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.06em;
|
|
|
+ color: var(--accent);
|
|
|
+ margin-bottom: var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-card p,
|
|
|
+.doc-card li {
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ color: var(--text-2);
|
|
|
+ line-height: 1.7;
|
|
|
+}
|
|
|
+
|
|
|
+.doc-card ul { display: flex; flex-direction: column; gap: var(--s-1); }
|
|
|
+
|
|
|
+.sw-line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-2);
|
|
|
+ font-size: var(--fs-11);
|
|
|
+ color: var(--text-2);
|
|
|
+}
|
|
|
+
|
|
|
+.sw {
|
|
|
+ width: var(--s-4);
|
|
|
+ height: var(--s-4);
|
|
|
+ border-radius: var(--r-xs);
|
|
|
+ border: var(--hairline) solid var(--line-strong);
|
|
|
+ flex: none;
|
|
|
+}
|
|
|
+
|
|
|
+.doc-controls {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-3);
|
|
|
+ margin-top: var(--s-5);
|
|
|
+ padding-top: var(--s-4);
|
|
|
+ border-top: var(--hairline) solid var(--line);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-controls-label {
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ color: var(--text-3);
|
|
|
+}
|
|
|
+
|
|
|
+.switch {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+.switch button {
|
|
|
+ min-height: var(--tap);
|
|
|
+ padding: 0 var(--s-3);
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ background: var(--surface);
|
|
|
+ border: var(--hairline) solid var(--line-control);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ color: var(--text-2);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.switch button:hover { background: var(--accent-soft); border-color: var(--accent-soft-2); }
|
|
|
+
|
|
|
+.switch button:active { transform: scale(0.97); }
|
|
|
+
|
|
|
+.switch button.is-on {
|
|
|
+ background: var(--accent);
|
|
|
+ border-color: var(--accent);
|
|
|
+ color: var(--on-accent);
|
|
|
+}
|
|
|
+
|
|
|
+/* 八态陈列 */
|
|
|
+.btn-states {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-2);
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-state-demo {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-1);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-state-demo span {
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ color: var(--text-2);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-foot {
|
|
|
+ margin-top: var(--s-6);
|
|
|
+ padding-top: var(--s-4);
|
|
|
+ border-top: var(--hairline) solid var(--line);
|
|
|
+ font-size: var(--fs-11);
|
|
|
+ color: var(--text-3);
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 手机画布 ============================ */
|
|
|
+.stage {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: var(--s-7);
|
|
|
+}
|
|
|
+
|
|
|
+.phone {
|
|
|
+ width: var(--canvas-w);
|
|
|
+ max-width: 100%;
|
|
|
+ height: var(--screen-h);
|
|
|
+ background: var(--bg-page);
|
|
|
+ border-radius: var(--r-md);
|
|
|
+ box-shadow: var(--shadow-device);
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.statusbar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: var(--statusbar-h);
|
|
|
+ padding: 0 var(--s-5);
|
|
|
+ font-size: var(--fs-10);
|
|
|
+ color: var(--text-2);
|
|
|
+ flex: none;
|
|
|
+}
|
|
|
+
|
|
|
+.statusbar-time { font-weight: 600; letter-spacing: 0.02em; }
|
|
|
+
|
|
|
+.statusbar-icons { display: flex; align-items: center; gap: var(--s-1); }
|
|
|
+
|
|
|
+.statusbar-icons svg { width: var(--fs-12); height: var(--fs-12); color: var(--text-2); }
|
|
|
+
|
|
|
+.screen {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ scrollbar-width: thin;
|
|
|
+}
|
|
|
+
|
|
|
+.page {
|
|
|
+ padding: 0 var(--page-pad) var(--s-10);
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 一 · 问候条 ============================ */
|
|
|
+.greet { padding-top: var(--s-2); }
|
|
|
+
|
|
|
+.greet-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: var(--s-3);
|
|
|
+}
|
|
|
+
|
|
|
+.family { display: flex; align-items: center; gap: var(--s-2); }
|
|
|
+
|
|
|
+.avatars { display: flex; align-items: center; }
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: var(--avatar);
|
|
|
+ height: var(--avatar);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ background: var(--accent-soft-2);
|
|
|
+ border: var(--hairline) solid var(--surface);
|
|
|
+ color: var(--accent-strong);
|
|
|
+ font-size: var(--fs-11);
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: calc(var(--s-2) * -1);
|
|
|
+}
|
|
|
+
|
|
|
+.avatar:first-child { margin-left: 0; }
|
|
|
+
|
|
|
+.avatar--b { background: var(--dim-wisdom-tint); color: var(--dim-wisdom-deep); }
|
|
|
+.avatar--c { background: var(--dim-action-tint); color: var(--dim-action-deep); }
|
|
|
+.avatar--d { background: var(--surface-2); color: var(--text-2); }
|
|
|
+
|
|
|
+.family-meta { display: flex; flex-direction: column; line-height: var(--lh-tight); }
|
|
|
+
|
|
|
+.family-name { font-size: var(--fs-13); font-weight: 600; }
|
|
|
+
|
|
|
+.family-sub { font-size: var(--fs-11); color: var(--text-3); }
|
|
|
+
|
|
|
+.icon-btn {
|
|
|
+ width: var(--tap);
|
|
|
+ height: var(--tap);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: var(--hairline) solid var(--line);
|
|
|
+ background: var(--surface);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ color: var(--text-2);
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ transition: background-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.icon-btn svg { width: var(--icon-md); height: var(--icon-md); }
|
|
|
+
|
|
|
+.icon-btn:hover { background: var(--accent-soft); }
|
|
|
+
|
|
|
+.icon-btn:active { transform: scale(0.94); }
|
|
|
+
|
|
|
+.icon-btn[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
|
|
|
+
|
|
|
+.bell-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: var(--s-2);
|
|
|
+ right: var(--s-2);
|
|
|
+ min-width: var(--icon-sm);
|
|
|
+ height: var(--icon-sm);
|
|
|
+ padding: 0 var(--s-1);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ background: var(--accent);
|
|
|
+ color: var(--on-accent);
|
|
|
+ font-size: var(--fs-10);
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.greet-title {
|
|
|
+ margin-top: var(--s-4);
|
|
|
+ font-size: var(--fs-22);
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+ color: var(--text);
|
|
|
+ max-width: 20ch;
|
|
|
+}
|
|
|
+
|
|
|
+.greet-line {
|
|
|
+ margin-top: var(--s-1);
|
|
|
+ font-size: var(--fs-14);
|
|
|
+ color: var(--text-2);
|
|
|
+ max-width: 30ch;
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 二 · 五维状态主角带 ============================ */
|
|
|
+.hero {
|
|
|
+ margin-top: var(--s-5);
|
|
|
+ background: linear-gradient(170deg, var(--hero-top) 0%, var(--hero-bot) 100%);
|
|
|
+ border: var(--hairline) solid var(--hero-line);
|
|
|
+ border-radius: var(--r-md);
|
|
|
+ box-shadow: var(--shadow-hero);
|
|
|
+ padding: var(--s-4) var(--s-4) var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: var(--s-3);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-kicker {
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+ color: var(--accent);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-note {
|
|
|
+ margin-top: var(--s-1);
|
|
|
+ font-size: var(--fs-11);
|
|
|
+ color: var(--text-3);
|
|
|
+}
|
|
|
+
|
|
|
+.dims { display: flex; flex-direction: column; margin-top: var(--s-3); }
|
|
|
+
|
|
|
+.dim {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-3);
|
|
|
+ padding: var(--s-3) 0;
|
|
|
+ border-top: var(--hairline) solid var(--hero-line);
|
|
|
+}
|
|
|
+
|
|
|
+.dim-badge {
|
|
|
+ width: var(--tile-sm);
|
|
|
+ height: var(--tile-sm);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex: none;
|
|
|
+}
|
|
|
+
|
|
|
+.dim-badge svg { width: var(--icon-sm); height: var(--icon-sm); }
|
|
|
+
|
|
|
+/* 状态行徽章沿用已定稿 $dim-*(评审第 6 条两套类目色方向未拍板 保持基线待定) */
|
|
|
+.dim-badge--body { background: var(--dim-body-tint); color: var(--dim-body-deep); }
|
|
|
+.dim-badge--wisdom { background: var(--dim-wisdom-tint); color: var(--dim-wisdom-deep); }
|
|
|
+.dim-badge--wealth { background: var(--dim-wealth-tint); color: var(--dim-wealth-deep); }
|
|
|
+.dim-badge--action { background: var(--dim-action-tint); color: var(--dim-action-deep); }
|
|
|
+.dim-badge--mind { background: var(--dim-mind-tint); color: var(--dim-mind-deep); }
|
|
|
+
|
|
|
+.dim-main { flex: 1; display: flex; flex-direction: column; gap: calc(var(--s-1) / 2); min-width: 0; }
|
|
|
+
|
|
|
+.dim-name { font-size: var(--fs-14); font-weight: 600; color: var(--text); }
|
|
|
+
|
|
|
+.dim-detail { font-size: var(--fs-11); color: var(--text-3); }
|
|
|
+
|
|
|
+/* 状态词 chip:文字 + 底色,颜色不是唯一指示 */
|
|
|
+.chip {
|
|
|
+ flex: none;
|
|
|
+ font-size: var(--fs-11);
|
|
|
+ font-weight: 600;
|
|
|
+ padding: calc(var(--s-1) / 2) var(--s-2);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.chip--ok { background: var(--ok-tint); color: var(--ok-ink); }
|
|
|
+.chip--warn { background: var(--warn-tint); color: var(--warn-ink); }
|
|
|
+.chip--info { background: var(--info-tint); color: var(--info-ink); }
|
|
|
+.chip--muted { background: var(--surface-2); color: var(--text-2); }
|
|
|
+
|
|
|
+/* ============================ 能量沙盘(星图为主角 · 状态行读数) ============================ */
|
|
|
+/* 品牌头:logo + 标题 + 个人/全家切换(live 模式) */
|
|
|
+.sandbox-brand { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
|
|
|
+
|
|
|
+.sandbox-logo {
|
|
|
+ flex: none;
|
|
|
+ width: var(--tile-sm);
|
|
|
+ height: var(--tile-sm);
|
|
|
+ border-radius: var(--r-xs);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: var(--accent-soft);
|
|
|
+ color: var(--accent);
|
|
|
+}
|
|
|
+
|
|
|
+.sandbox-logo svg { width: var(--icon-sm); height: var(--icon-sm); }
|
|
|
+
|
|
|
+.sandbox-switch {
|
|
|
+ flex: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: calc(var(--s-1) / 2);
|
|
|
+ min-height: var(--tile-md);
|
|
|
+ padding: 0 var(--s-3);
|
|
|
+ font-size: var(--fs-11);
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--accent);
|
|
|
+ background: var(--accent-soft);
|
|
|
+ border: var(--hairline) solid var(--accent-soft-2);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.sandbox-switch:hover { background: var(--accent-soft-2); }
|
|
|
+
|
|
|
+.sandbox-switch:active { transform: scale(0.97); }
|
|
|
+
|
|
|
+.sandbox-switch svg { width: var(--fs-12); height: var(--fs-12); }
|
|
|
+
|
|
|
+/* 星图舞台 */
|
|
|
+.sandbox-star {
|
|
|
+ position: relative;
|
|
|
+ height: var(--star-h);
|
|
|
+ margin-top: var(--s-3);
|
|
|
+ background: var(--surface);
|
|
|
+ border: var(--hairline) solid var(--hero-line);
|
|
|
+ border-radius: var(--r-sm);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.star-glow {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ width: 220px;
|
|
|
+ height: 220px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background: radial-gradient(circle, var(--star-glow-in), var(--star-glow-out) 70%);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.star-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
|
|
|
+
|
|
|
+.star-ring { fill: none; stroke: var(--star-grid); stroke-width: var(--hairline); }
|
|
|
+
|
|
|
+.star-spoke { fill: none; stroke: var(--star-grid); stroke-width: var(--hairline); }
|
|
|
+
|
|
|
+.star-shape {
|
|
|
+ fill: var(--star-fill);
|
|
|
+ stroke: var(--star-stroke);
|
|
|
+ stroke-width: var(--focus-w);
|
|
|
+ stroke-linejoin: round;
|
|
|
+}
|
|
|
+
|
|
|
+.star-node { stroke: var(--surface); stroke-width: var(--focus-w); }
|
|
|
+
|
|
|
+.star-node--fire { fill: var(--el-fire-ink); }
|
|
|
+.star-node--earth { fill: var(--el-earth-ink); }
|
|
|
+.star-node--metal { fill: var(--el-metal-ink); }
|
|
|
+.star-node--water { fill: var(--el-water-ink); }
|
|
|
+.star-node--wood { fill: var(--el-wood-ink); }
|
|
|
+
|
|
|
+/* 星图中心:全家指数(把原 hero-score 收进星心) */
|
|
|
+.star-center {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: var(--star-disc-w);
|
|
|
+ height: var(--star-disc-w);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: calc(var(--s-1) / 2);
|
|
|
+ background: var(--star-disc);
|
|
|
+ border: var(--hairline) solid var(--hero-line);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.star-center-num {
|
|
|
+ font-size: var(--fs-22);
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ color: var(--accent-strong);
|
|
|
+}
|
|
|
+
|
|
|
+.star-center-label { font-size: var(--fs-10); color: var(--text-2); }
|
|
|
+
|
|
|
+/* 顶点:环形顺时针 心 身 智 富 行(五行相生序) */
|
|
|
+.star-point {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-1);
|
|
|
+ padding: 0;
|
|
|
+ background: none;
|
|
|
+ border: 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.star-point--top { left: 50%; top: calc(16.4% + 13px); transform: translate(-50%, -100%); flex-direction: column-reverse; }
|
|
|
+.star-point--right { left: 74.5%; top: 40.2%; transform: translate(-13px, -50%); flex-direction: row; }
|
|
|
+.star-point--lr { left: 65.2%; top: 78.7%; transform: translate(-13px, -50%); flex-direction: row; }
|
|
|
+.star-point--ll { left: calc(34.8% + 13px); top: 78.7%; transform: translate(-100%, -50%); flex-direction: row-reverse; }
|
|
|
+.star-point--left { left: calc(25.5% + 13px); top: 40.2%; transform: translate(-100%, -50%); flex-direction: row-reverse; }
|
|
|
+
|
|
|
+.star-dot {
|
|
|
+ flex: none;
|
|
|
+ width: var(--tile-sm);
|
|
|
+ height: var(--tile-sm);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: var(--focus-w) solid var(--el-fire-ink);
|
|
|
+ background: var(--el-fire-tint);
|
|
|
+ color: var(--el-fire-ink);
|
|
|
+ transition: transform var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.star-dot svg { width: var(--icon-sm); height: var(--icon-sm); }
|
|
|
+
|
|
|
+.star-dot--fire { border-color: var(--el-fire-ink); background: var(--el-fire-tint); color: var(--el-fire-ink); }
|
|
|
+.star-dot--earth { border-color: var(--el-earth-ink); background: var(--el-earth-tint); color: var(--el-earth-ink); }
|
|
|
+.star-dot--metal { border-color: var(--el-metal-ink); background: var(--el-metal-tint); color: var(--el-metal-ink); }
|
|
|
+.star-dot--water { border-color: var(--el-water-ink); background: var(--el-water-tint); color: var(--el-water-ink); }
|
|
|
+.star-dot--wood { border-color: var(--el-wood-ink); background: var(--el-wood-tint); color: var(--el-wood-ink); }
|
|
|
+
|
|
|
+.star-text { display: flex; align-items: baseline; gap: calc(var(--s-1) / 2); white-space: nowrap; }
|
|
|
+
|
|
|
+.star-name { font-size: var(--fs-12); font-weight: 600; color: var(--text); }
|
|
|
+
|
|
|
+.star-val { font-size: var(--fs-11); color: var(--text-2); }
|
|
|
+
|
|
|
+.star-point:hover .star-dot { transform: scale(1.08); }
|
|
|
+
|
|
|
+.star-point:active .star-dot { transform: scale(0.94); }
|
|
|
+
|
|
|
+.star-point:focus-visible {
|
|
|
+ outline: var(--focus-w) solid var(--focus);
|
|
|
+ outline-offset: var(--focus-offset);
|
|
|
+ border-radius: var(--r-sm);
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态行读数:维度名 + 能量值 */
|
|
|
+/* 星图脚注:常显 不折叠 不 tooltip 向用户交代 82 不等于五维均值 */
|
|
|
+.star-note {
|
|
|
+ margin-top: var(--s-2);
|
|
|
+ font-size: var(--fs-12);
|
|
|
+ color: var(--text-2);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dim-line { display: flex; align-items: baseline; gap: var(--s-1); }
|
|
|
+
|
|
|
+.dim-energy { font-size: var(--fs-11); font-weight: 600; color: var(--text-2); }
|
|
|
+
|
|
|
+/* ============================ 三 · 今日待办带 ============================ */
|
|
|
+.band { margin-top: var(--s-7); }
|
|
|
+
|
|
|
+.band-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: var(--s-2);
|
|
|
+ margin-bottom: var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+.band-title { font-size: var(--fs-16); font-weight: 600; letter-spacing: 0.01em; }
|
|
|
+
|
|
|
+.band-sub { font-size: var(--fs-11); color: var(--text-3); }
|
|
|
+
|
|
|
+.panel {
|
|
|
+ background: var(--surface);
|
|
|
+ border: var(--hairline) solid var(--line);
|
|
|
+ border-radius: var(--r-md);
|
|
|
+ padding: var(--s-2) var(--s-4);
|
|
|
+}
|
|
|
+
|
|
|
+.panel-state { display: none; }
|
|
|
+
|
|
|
+.panel[data-state="list"] .panel-state[data-variant="list"],
|
|
|
+.panel[data-state="data"] .panel-state[data-variant="data"],
|
|
|
+.panel[data-state="loading"] .panel-state[data-variant="loading"],
|
|
|
+.panel[data-state="error"] .panel-state[data-variant="error"],
|
|
|
+.panel[data-state="empty"] .panel-state[data-variant="empty"] { display: flex; }
|
|
|
+
|
|
|
+.panel[data-state="loading"] .panel-state[data-variant="loading"],
|
|
|
+.panel[data-state="error"] .panel-state[data-variant="error"],
|
|
|
+.panel[data-state="empty"] .panel-state[data-variant="empty"] {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: var(--s-2);
|
|
|
+ padding: var(--s-5) 0;
|
|
|
+}
|
|
|
+
|
|
|
+.task-list { display: flex; flex-direction: column; }
|
|
|
+
|
|
|
+.task {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-3);
|
|
|
+ padding: var(--s-3) 0;
|
|
|
+ border-top: var(--hairline) solid var(--line);
|
|
|
+}
|
|
|
+
|
|
|
+.task:first-child { border-top: 0; }
|
|
|
+
|
|
|
+.task-check {
|
|
|
+ width: var(--tap);
|
|
|
+ height: var(--tap);
|
|
|
+ margin-left: calc(var(--s-2) * -1);
|
|
|
+ border: 0;
|
|
|
+ background: transparent;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ flex: none;
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.task-check:hover { transform: scale(1.06); }
|
|
|
+
|
|
|
+.task-check:active { transform: scale(0.94); }
|
|
|
+
|
|
|
+.task-check[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
|
|
|
+
|
|
|
+.check-ring {
|
|
|
+ width: var(--icon-lg);
|
|
|
+ height: var(--icon-lg);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ border: var(--hairline) solid var(--line-control);
|
|
|
+ background: var(--surface);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: transparent;
|
|
|
+ transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.check-ring svg { width: var(--icon-sm); height: var(--icon-sm); }
|
|
|
+
|
|
|
+.task-check.is-checked .check-ring {
|
|
|
+ background: var(--accent);
|
|
|
+ border-color: var(--accent);
|
|
|
+ color: var(--on-accent);
|
|
|
+}
|
|
|
+
|
|
|
+.task-main { flex: 1; min-width: 0; }
|
|
|
+
|
|
|
+.task-text { font-size: var(--fs-14); color: var(--text); }
|
|
|
+
|
|
|
+.task.is-done .task-text { color: var(--text-3); text-decoration: line-through; }
|
|
|
+
|
|
|
+.task-flag {
|
|
|
+ flex: none;
|
|
|
+ font-size: var(--fs-10);
|
|
|
+ color: var(--text-3);
|
|
|
+ border: var(--hairline) solid var(--line);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ padding: calc(var(--s-1) / 2) var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 四 · 近期健康数据带 ============================ */
|
|
|
+.stat-lead {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: var(--s-2);
|
|
|
+ padding: var(--s-4) 0 var(--s-3);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-name { font-size: var(--fs-13); color: var(--text-2); width: var(--s-8); flex: none; }
|
|
|
+
|
|
|
+.stat-value { font-size: var(--fs-22); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
|
|
|
+
|
|
|
+.stat-unit { font-size: var(--fs-11); color: var(--text-3); margin-left: var(--s-1); font-weight: 400; }
|
|
|
+
|
|
|
+.stat-lead .chip { margin-left: auto; }
|
|
|
+
|
|
|
+.stats { display: flex; flex-direction: column; }
|
|
|
+
|
|
|
+.stat-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-2);
|
|
|
+ padding: var(--s-3) 0;
|
|
|
+ border-top: var(--hairline) solid var(--line);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-row .stat-name { width: auto; flex: 1; font-size: var(--fs-12); }
|
|
|
+
|
|
|
+.stat-row b { font-size: var(--fs-14); font-weight: 600; }
|
|
|
+
|
|
|
+.state-line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-2);
|
|
|
+ font-size: var(--fs-13);
|
|
|
+ color: var(--text-2);
|
|
|
+ max-width: 30ch;
|
|
|
+}
|
|
|
+
|
|
|
+.state-line svg { width: var(--icon-md); height: var(--icon-md); flex: none; color: var(--text-3); }
|
|
|
+
|
|
|
+.state-line--error svg { color: var(--danger-ink); }
|
|
|
+
|
|
|
+/* 加载中:旋转只用 transform */
|
|
|
+.spinner {
|
|
|
+ width: var(--icon-md);
|
|
|
+ height: var(--icon-md);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ border: var(--focus-w) solid var(--line-control);
|
|
|
+ border-top-color: var(--accent);
|
|
|
+ animation: spin var(--dur-3) linear infinite;
|
|
|
+ flex: none;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes spin {
|
|
|
+ from { transform: rotate(0deg); }
|
|
|
+ to { transform: rotate(360deg); }
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 五 · 服务入口 ============================ */
|
|
|
+.services {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: var(--s-2);
|
|
|
+ margin-top: var(--s-1);
|
|
|
+}
|
|
|
+
|
|
|
+.svc {
|
|
|
+ width: calc((100% - 4 * var(--s-2)) / 5);
|
|
|
+ min-height: var(--tap);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-1);
|
|
|
+ padding: var(--s-2) var(--s-1);
|
|
|
+ background: var(--surface);
|
|
|
+ border: var(--hairline) solid var(--line-control);
|
|
|
+ border-radius: var(--r-sm);
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.svc:hover { background: var(--accent-soft); border-color: var(--accent-soft-2); }
|
|
|
+
|
|
|
+.svc:active { transform: scale(0.97); }
|
|
|
+
|
|
|
+.svc[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
|
|
|
+
|
|
|
+.svc-icon {
|
|
|
+ width: var(--tile-md);
|
|
|
+ height: var(--tile-md);
|
|
|
+ border-radius: var(--r-sm);
|
|
|
+ background: var(--surface-2);
|
|
|
+ color: var(--text-2);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.svc:hover .svc-icon { background: var(--surface); color: var(--accent); }
|
|
|
+
|
|
|
+.svc-icon svg { width: var(--icon-md); height: var(--icon-md); }
|
|
|
+
|
|
|
+.svc-name { font-size: var(--fs-11); font-weight: 600; color: var(--text); line-height: var(--lh-tight); }
|
|
|
+
|
|
|
+.svc-desc {
|
|
|
+ font-size: var(--fs-11);
|
|
|
+ color: var(--text-3);
|
|
|
+ line-height: 1.3;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 六 · 推荐阅读 ============================ */
|
|
|
+.article {
|
|
|
+ margin-top: var(--s-2);
|
|
|
+ background: var(--surface);
|
|
|
+ border: var(--hairline) solid var(--line);
|
|
|
+ border-radius: var(--r-md);
|
|
|
+ padding: var(--s-4);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+.article-chip {
|
|
|
+ align-self: flex-start;
|
|
|
+ font-size: var(--fs-10);
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--accent);
|
|
|
+ background: var(--accent-soft);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ padding: calc(var(--s-1) / 2) var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+.article-title {
|
|
|
+ font-size: var(--fs-16);
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.45;
|
|
|
+ color: var(--text);
|
|
|
+ max-width: 22ch;
|
|
|
+}
|
|
|
+
|
|
|
+.article-foot {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: var(--s-2);
|
|
|
+ margin-top: var(--s-1);
|
|
|
+}
|
|
|
+
|
|
|
+.article-meta { font-size: var(--fs-11); color: var(--text-3); }
|
|
|
+
|
|
|
+/* ============================ 未登录引导条 ============================
|
|
|
+ 来源:源码底部 <wuxing-sandbox mode="preview" badgeText="登录查看完整报告">
|
|
|
+ 定位:轻量示意,刻意低于沙盘主角带一个量级——不加阴影,底色取 surface-2,
|
|
|
+ 描边仅发丝级,并弱化五边形轮廓(不画完整星图,避免同页出现两张等权五维卡)。
|
|
|
+ 登录态隐藏,仅在未登录时展示。 */
|
|
|
+.hint-band {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: var(--s-3);
|
|
|
+ background: var(--surface-2);
|
|
|
+ border: var(--hairline) solid var(--line);
|
|
|
+ border-radius: var(--r-md);
|
|
|
+ padding: var(--s-3) var(--s-4);
|
|
|
+}
|
|
|
+
|
|
|
+.hint-star {
|
|
|
+ flex: none;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ color: var(--accent);
|
|
|
+ opacity: .55;
|
|
|
+}
|
|
|
+
|
|
|
+.hint-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 2px;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.hint-title { font-size: var(--fs-13); font-weight: 600; color: var(--text); }
|
|
|
+
|
|
|
+.hint-sub { font-size: var(--fs-11); color: var(--text-2); }
|
|
|
+
|
|
|
+.hint-badge {
|
|
|
+ flex: none;
|
|
|
+ font-size: var(--fs-10);
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--accent);
|
|
|
+ background: var(--accent-soft);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ padding: calc(var(--s-1) / 2) var(--s-2);
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 按钮与八态 ============================ */
|
|
|
+.btn {
|
|
|
+ min-height: var(--tap);
|
|
|
+ min-width: var(--tap);
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: var(--s-1);
|
|
|
+ padding: 0 var(--s-4);
|
|
|
+ font-size: var(--fs-13);
|
|
|
+ font-weight: 600;
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ border: var(--hairline) solid transparent;
|
|
|
+ background: transparent;
|
|
|
+ color: var(--text-2);
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.btn svg { width: var(--icon-sm); height: var(--icon-sm); }
|
|
|
+
|
|
|
+/* 默认 */
|
|
|
+.btn-primary { background: var(--accent); color: var(--on-accent); }
|
|
|
+/* 悬停 */
|
|
|
+.btn-primary:hover { background: var(--accent-strong); }
|
|
|
+/* 按下 */
|
|
|
+.btn-primary:active { transform: scale(0.97); }
|
|
|
+/* 禁用(主理人契约:禁用态清晰、不淡出,中性底 + 深字;移除全局 0.45 淡出对白字合成对比度的破坏;
|
|
|
+ pointer-events:none 切断 hover/active/transform 重漆,防止 .btn-primary:hover 等更高特异性规则覆盖中性底) */
|
|
|
+.btn[disabled],
|
|
|
+.btn.is-disabled {
|
|
|
+ background: var(--warm-200);
|
|
|
+ color: var(--text-2);
|
|
|
+ border-color: var(--line-control);
|
|
|
+ opacity: 1;
|
|
|
+ cursor: not-allowed;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+/* 加载中 */
|
|
|
+.btn.is-loading { cursor: progress; }
|
|
|
+.btn.is-loading .btn-label { opacity: 1; }
|
|
|
+.btn.is-loading::after {
|
|
|
+ content: "";
|
|
|
+ width: var(--icon-sm);
|
|
|
+ height: var(--icon-sm);
|
|
|
+ margin-left: var(--s-1);
|
|
|
+ border-radius: var(--r-pill);
|
|
|
+ border: var(--focus-w) solid var(--on-accent);
|
|
|
+ border-top-color: transparent;
|
|
|
+ animation: spin var(--dur-3) linear infinite;
|
|
|
+}
|
|
|
+/* 出错 */
|
|
|
+.btn.is-error { background: var(--danger-ink); color: var(--on-accent); }
|
|
|
+/* 成功 */
|
|
|
+.btn.is-success { background: var(--ok-ink); color: var(--on-accent); }
|
|
|
+
|
|
|
+/* 轻量按钮(待办行内动作) */
|
|
|
+.btn-quiet {
|
|
|
+ color: var(--accent);
|
|
|
+ border-color: var(--accent-soft-2);
|
|
|
+ background: transparent;
|
|
|
+ padding: 0 var(--s-3);
|
|
|
+ font-size: var(--fs-12);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-quiet:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
|
|
|
+
|
|
|
+.btn-quiet:active { transform: scale(0.97); }
|
|
|
+
|
|
|
+/* 胶囊跳转按钮(文章 CTA) */
|
|
|
+.btn-go {
|
|
|
+ background: var(--accent-soft);
|
|
|
+ color: var(--accent);
|
|
|
+ padding: 0 var(--s-3);
|
|
|
+ font-size: var(--fs-12);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-go:hover { background: var(--accent-soft-2); }
|
|
|
+
|
|
|
+.btn-go:active { transform: scale(0.97); }
|
|
|
+
|
|
|
+.btn-go svg { width: var(--fs-12); height: var(--fs-12); }
|
|
|
+
|
|
|
+/* 演示用的小尺寸变体(仅设计说明条) */
|
|
|
+.btn-demo {
|
|
|
+ min-height: var(--tap);
|
|
|
+ min-width: var(--tap);
|
|
|
+ padding: 0 var(--s-3);
|
|
|
+ font-size: var(--fs-11);
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================ 底部 tabBar(≈50px + 安全区) ============================ */
|
|
|
+.tabbar {
|
|
|
+ flex: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: stretch;
|
|
|
+ background: var(--surface);
|
|
|
+ border-top: var(--hairline) solid var(--line);
|
|
|
+ padding-bottom: var(--safe-b);
|
|
|
+}
|
|
|
+
|
|
|
+.tab {
|
|
|
+ flex: 1;
|
|
|
+ min-height: var(--tabbar-h);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: calc(var(--s-1) / 2);
|
|
|
+ border: 0;
|
|
|
+ background: transparent;
|
|
|
+ color: var(--text-3);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
|
|
|
+}
|
|
|
+
|
|
|
+.tab svg { width: var(--icon-lg); height: var(--icon-lg); }
|
|
|
+
|
|
|
+.tab span { font-size: var(--fs-10); font-weight: 500; }
|
|
|
+
|
|
|
+.tab:hover { color: var(--text-2); }
|
|
|
+
|
|
|
+.tab:active { transform: scale(0.94); }
|
|
|
+
|
|
|
+.tab[aria-current="page"] { color: var(--accent); }
|
|
|
+
|
|
|
+.tab[aria-current="page"] span { font-weight: 600; }
|
|
|
+
|
|
|
+.tab[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
|
|
|
+
|
|
|
+/* ============================ 响应式与动效降级 ============================ */
|
|
|
+@media (max-width: 430px) {
|
|
|
+ .doc { padding: var(--s-4) var(--s-2) var(--s-7); }
|
|
|
+ .doc-head { padding: var(--s-4); }
|
|
|
+ .phone { height: auto; min-height: var(--screen-h); }
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-reduced-motion: reduce) {
|
|
|
+ *,
|
|
|
+ *::before,
|
|
|
+ *::after {
|
|
|
+ animation-duration: 0.01ms !important;
|
|
|
+ animation-iteration-count: 1 !important;
|
|
|
+ transition-duration: 0.01ms !important;
|
|
|
+ scroll-behavior: auto !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<!-- ===================== 设计说明条(不计入手机画布) ===================== -->
|
|
|
+<header class="doc">
|
|
|
+ <div class="doc-head">
|
|
|
+ <div class="doc-title-row">
|
|
|
+ <h2 class="doc-title">浠艾福 · 首页家庭总览重设计</h2>
|
|
|
+ <span class="doc-tag">390px 画布 · 浅色主题 · 单文件 · 无外部依赖</span>
|
|
|
+ </div>
|
|
|
+ <p class="doc-desc">基于现有首页的结构重做:问候条起笔,五维状态独占主角带,今日待办与近期数据以两条不同形状的安静带承接,服务与阅读收束。所有图标为内联 SVG,布局全部 flexbox。</p>
|
|
|
+
|
|
|
+ <div class="doc-grid">
|
|
|
+ <div class="doc-card">
|
|
|
+ <h2>令牌层</h2>
|
|
|
+ <ul>
|
|
|
+ <li>基色层:品牌橙 9 档 · 五维身份色 5 组 · 五行元素色 5 组 · 暖中性 6 档 · 状态色 4 组</li>
|
|
|
+ <li>语义层:表面 3 档 · 文字 3 档 · 描边 2 档 · 动作 6 档 · 主角带 3 档</li>
|
|
|
+ <li>组件层:间距 11 档 · 圆角 4 档 · 字阶 10 档 · 动效 3 档 · 阴影 2 档</li>
|
|
|
+ <li>间距与圆角量级对齐 uni.scss 已有档位(4/8/12/16/24 与 4/8/12/pill)</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-card">
|
|
|
+ <h2>五维配色来源</h2>
|
|
|
+ <ul>
|
|
|
+ <li class="sw-line"><span class="sw" style="background:var(--dim-body)"></span>身 body · 取自 $dim-body 与 $dim-body-tint</li>
|
|
|
+ <li class="sw-line"><span class="sw" style="background:var(--dim-wisdom)"></span>智 wisdom · 取自 $dim-wisdom 与 $dim-wisdom-tint</li>
|
|
|
+ <li class="sw-line"><span class="sw" style="background:var(--dim-wealth)"></span>富 wealth · 取自 $dim-wealth 与 $dim-wealth-tint</li>
|
|
|
+ <li class="sw-line"><span class="sw" style="background:var(--dim-action)"></span>行 action · 取自 $dim-action 与 $dim-action-tint</li>
|
|
|
+ <li class="sw-line"><span class="sw" style="background:var(--dim-mind)"></span>心 mind · 取自 $dim-mind 与 $dim-mind-tint</li>
|
|
|
+ <li>顺序固定为 身 智 富 行 心;五维色只出现在主角带内,其余区域由品牌橙与暖中性承担</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-card">
|
|
|
+ <h2>能量沙盘</h2>
|
|
|
+ <ul>
|
|
|
+ <li>星图为视觉焦点 · 五维状态行为其下方紧凑读数 · 二者不再等权</li>
|
|
|
+ <li>环形顺序固定 心 身 智 富 行(五行相生序 · 心恒在顶)· 状态行仍走线性 身 智 富 行 心</li>
|
|
|
+ <li>不重复的理由:星图回答整体形状与各维能量 · 状态行回答谁缺什么与要做什么 · 一图一言</li>
|
|
|
+ <li>顶点图标由 emoji 改内联 SVG 极简几何:火焰·火 山·土 闪电·金 水滴·水 叶·木</li>
|
|
|
+ <li>身 由沙盘土棕改为与新稿统一的赭石 · 全稿只有一个身色</li>
|
|
|
+ <li>原组件为深蓝底星图 · 本稿按温暖清爽重铺暖白底 · 几何与环形顺序不变</li>
|
|
|
+ <li>星心 82 是加权合成健康指数 不是五维算术均值(五维均值 80)· 实现时不要改成均值 · 界面已常显脚注向用户交代</li>
|
|
|
+ <li>星图 aria 摘要的维序须与顶点 DOM 序一致 · 环形序与官方序是同一循环的旋转 · 两者皆可 · 不得只改其一</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-card">
|
|
|
+ <h2>问候语候选(三组 · 当前启用 A 组清晨)</h2>
|
|
|
+ <ul>
|
|
|
+ <li>A 组 信息型 · 清晨 待办较多:早上好。今天家里有 3 件事要办,第一件是解读妈妈的体检报告。</li>
|
|
|
+ <li>A 组 信息型 · 上午 有报告待看:上午好。妈妈的体检报告刚出,2 分钟能看完摘要。</li>
|
|
|
+ <li>B 组 行动型 · 午后 待办清空:下午好。今天的事都办完了,还剩一份本周食材清单可以看。</li>
|
|
|
+ <li>B 组 行动型 · 晚间 有缺录:晚上好。今天还差 1 项没记:爸爸的运动时长。</li>
|
|
|
+ <li>C 组 温暖型 · 清晨 数据平稳:早上好。今天家人的数据都平稳,只有妈妈的睡眠略偏少,午后可以看看建议。</li>
|
|
|
+ <li>C 组 温暖型 · 晚间 收束一天:晚上好。今天 3 项待办全部完成,可以安心休息了。</li>
|
|
|
+ <li>三组为候选文案 · 仅 A 组清晨进入产品 UI · B 组与 C 组按文档核对 不要同时生效</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-card">
|
|
|
+ <h2>交互状态契约</h2>
|
|
|
+ <ul>
|
|
|
+ <li>八态完整实现:主按钮 .btn(默认 悬停 键盘焦点 按下 禁用 加载中 出错 成功)</li>
|
|
|
+ <li>豁免声明(不夸大):服务格 .svc · 图标按钮 .icon-btn · 待办勾选 .task-check · 沙盘顶点 .star-point 只实现 默认 悬停 键盘焦点 按下 禁用;这几类无异步请求也无提交结果 加载中 出错 成功 语义不适用</li>
|
|
|
+ <li>语义变化态:底部导航当前页 · 待办勾选完成;本页无折叠面板,故不涉及展开与收起</li>
|
|
|
+ <li>焦点环:2px 实心 + 2px 外距,对暖白底实测 3.3:1</li>
|
|
|
+ <li>待办行点击不改变布局边界,只用底色与缩放反馈</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-card">
|
|
|
+ <h2>关键设计决策</h2>
|
|
|
+ <ul>
|
|
|
+ <li>能量沙盘是唯一主角:暖橙淡底卡片内星图为焦点 · 星心收 22px 健康指数 · 五维状态行为其下紧凑读数 · 服务与阅读刻意安静</li>
|
|
|
+ <li>品牌主色在承载语义处一律换深档,主色只做装饰层次,保证文字达标</li>
|
|
|
+ <li>近期数据把唯一异常项提到首位,其余三项压缩成行,避免等权卡片墙</li>
|
|
|
+ <li>阴影只给主角带与设备外框,其余面板靠发丝描边分层</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-controls">
|
|
|
+ <span class="doc-controls-label">状态演示(作用在画布内的两条带)</span>
|
|
|
+ <div class="switch" id="state-switch">
|
|
|
+ <button type="button" data-target="report" data-state="data" class="is-on">数据有值</button>
|
|
|
+ <button type="button" data-target="report" data-state="loading">加载中</button>
|
|
|
+ <button type="button" data-target="report" data-state="error">加载出错</button>
|
|
|
+ <button type="button" data-target="report" data-state="empty">数据为空</button>
|
|
|
+ <button type="button" data-target="todo" data-state="empty">待办为空</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-controls">
|
|
|
+ <span class="doc-controls-label">按钮八态</span>
|
|
|
+ <div class="btn-states">
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">默认</span></button><span>默认</span></div>
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">悬停</span></button><span>悬停</span></div>
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">焦点</span></button><span>键盘焦点</span></div>
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">按下</span></button><span>按下</span></div>
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo" disabled><span class="btn-label">禁用</span></button><span>禁用</span></div>
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo is-loading"><span class="btn-label">加载中</span></button><span>加载中</span></div>
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-demo is-error"><span class="btn-label">出错</span></button><span>出错</span></div>
|
|
|
+ <div class="btn-state-demo"><button type="button" class="btn btn-demo is-success"><span class="btn-label">成功</span></button><span>成功</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <footer class="doc-foot" id="gate-foot">
|
|
|
+ 门禁实测结果(共享技能 tools/ 执行,2026-11):lint_hardcodes 0 违例;check_no_emoji 0 处;slop_tells --strict 0 命中;contrast.py 显式解析的令牌对全部达标(正文 4.5:1),唯一例外是焦点环色(accent-mid 档)对暖白底 3.33:1,属非文本 UI 阈值 3:1 达标。
|
|
|
+ </footer>
|
|
|
+</header>
|
|
|
+
|
|
|
+<!-- ===================== 手机画布 ===================== -->
|
|
|
+<div class="stage">
|
|
|
+ <div class="phone">
|
|
|
+ <!-- 状态栏(示意,非交互) -->
|
|
|
+ <div class="statusbar" aria-hidden="true">
|
|
|
+ <span class="statusbar-time">9:41</span>
|
|
|
+ <span class="statusbar-icons">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="13" width="3" height="7" rx="1" fill="currentColor" stroke="none"/><rect x="8" y="10" width="3" height="10" rx="1" fill="currentColor" stroke="none"/><rect x="13" y="7" width="3" height="13" rx="1" fill="currentColor" stroke="none"/><rect x="18" y="4" width="3" height="16" rx="1" fill="currentColor" stroke="none"/></svg>
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5a12 12 0 0 1 16 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M7.2 13a7.5 7.5 0 0 1 9.6 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="17.4" r="1.6" fill="currentColor" stroke="none"/></svg>
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="7" width="16" height="10" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="5" y="9" width="10" height="6" rx="1.5" fill="currentColor" stroke="none"/><path d="M21 11v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="screen">
|
|
|
+ <main class="page">
|
|
|
+
|
|
|
+ <!-- 一 · 问候条 -->
|
|
|
+ <header class="greet">
|
|
|
+ <div class="greet-top">
|
|
|
+ <div class="family">
|
|
|
+ <div class="avatars" aria-hidden="true">
|
|
|
+ <span class="avatar">我</span>
|
|
|
+ <span class="avatar avatar--b">妈</span>
|
|
|
+ <span class="avatar avatar--c">爷</span>
|
|
|
+ <span class="avatar avatar--d">奶</span>
|
|
|
+ </div>
|
|
|
+ <div class="family-meta">
|
|
|
+ <span class="family-name">林一家</span>
|
|
|
+ <span class="family-sub">4 位成员</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button type="button" class="icon-btn" aria-label="通知,2 条未读">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4a5 5 0 0 0-5 5v3.2L5.4 15h13.2L17 12.2V9a5 5 0 0 0-5-5z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M10 18a2 2 0 0 0 4 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
|
|
+ <span class="bell-badge">2</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <h1 class="greet-title">早上好</h1>
|
|
|
+ <p class="greet-line">今天家里有 3 件事要办,第一件是解读妈妈的体检报告。</p>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- 二 · 能量沙盘主角带(星图为视觉焦点 · 五维状态行为其下紧凑读数) -->
|
|
|
+ <section class="hero" aria-labelledby="hero-title">
|
|
|
+ <div class="hero-head">
|
|
|
+ <div class="sandbox-brand">
|
|
|
+ <span class="sandbox-logo" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24"><path d="M12 3.4 14.4 9.1h6l-4.8 3.7 1.8 5.9-5.4-3.8-5.4 3.8 1.8-5.9-4.8-3.7h6z" fill="currentColor"/></svg>
|
|
|
+ </span>
|
|
|
+ <div>
|
|
|
+ <h2 class="hero-kicker" id="hero-title">浠艾福能量沙盘</h2>
|
|
|
+ <p class="hero-note">更新于今天 07:20</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button type="button" class="sandbox-switch" aria-label="切换视角,当前全家">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M2.8 19c0-3.1 2.8-5.2 6.2-5.2s6.2 2.1 6.2 5.2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M16.2 8.6a3 3 0 0 1 0 5.6M18.8 19c0-2.5-1.4-4.3-3.4-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
|
|
+ <span>全家</span>
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 9.5h10l-3-3M17 14.5H7l3 3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sandbox-star">
|
|
|
+ <div class="star-glow" aria-hidden="true"></div>
|
|
|
+ <svg class="star-svg" viewBox="0 0 326 244" role="img" aria-label="全家五维能量星图:心 92,身 78,智 74,富 80,行 76,健康指数 82" aria-describedby="star-note">
|
|
|
+ <polygon class="star-ring" points="163,54 229.6,102.4 204.1,180.6 121.9,180.6 96.4,102.4"/>
|
|
|
+ <polygon class="star-ring" points="163,77.3 207.4,109.6 190.5,161.8 135.6,161.8 118.6,109.6"/>
|
|
|
+ <line class="star-spoke" x1="163" y1="124" x2="163" y2="40"/>
|
|
|
+ <line class="star-spoke" x1="163" y1="124" x2="242.9" y2="98"/>
|
|
|
+ <line class="star-spoke" x1="163" y1="124" x2="212.4" y2="192"/>
|
|
|
+ <line class="star-spoke" x1="163" y1="124" x2="113.6" y2="192"/>
|
|
|
+ <line class="star-spoke" x1="163" y1="124" x2="83.1" y2="98"/>
|
|
|
+ <polygon class="star-shape" points="163,59.6 214.9,107.1 193.5,165.9 130.1,169.3 112.4,107.6"/>
|
|
|
+ <circle class="star-node star-node--fire" cx="163" cy="59.6" r="3.5"/>
|
|
|
+ <circle class="star-node star-node--earth" cx="214.9" cy="107.1" r="3.5"/>
|
|
|
+ <circle class="star-node star-node--metal" cx="193.5" cy="165.9" r="3.5"/>
|
|
|
+ <circle class="star-node star-node--water" cx="130.1" cy="169.3" r="3.5"/>
|
|
|
+ <circle class="star-node star-node--wood" cx="112.4" cy="107.6" r="3.5"/>
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ <div class="star-center">
|
|
|
+ <span class="star-center-num">82</span>
|
|
|
+ <span class="star-center-label">健康指数</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button type="button" class="star-point star-point--top" aria-label="心 能量 92">
|
|
|
+ <span class="star-dot star-dot--fire">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.6c3.6 0 6-2.4 6-5.7 0-3.6-3.2-6-6-10.5-2.8 4.5-6 6.9-6 10.5 0 3.3 2.4 5.7 6 5.7z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M12 18.1c1.5 0 2.5-1 2.5-2.4 0-1.6-1.2-2.7-2.5-4.3-1.3 1.6-2.5 2.7-2.5 4.3 0 1.4 1 2.4 2.5 2.4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="star-text"><span class="star-name">心</span><span class="star-val">92</span></span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button type="button" class="star-point star-point--right" aria-label="身 能量 78">
|
|
|
+ <span class="star-dot star-dot--earth">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.6 19.4h18.8L14.4 8.2l-3.2 5.2-1.7-2.2-6.9 8.2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="star-text"><span class="star-name">身</span><span class="star-val">78</span></span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button type="button" class="star-point star-point--lr" aria-label="智 能量 74">
|
|
|
+ <span class="star-dot star-dot--metal">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3 6.5 13H11l-1 8 6.5-10H12z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="star-text"><span class="star-name">智</span><span class="star-val">74</span></span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button type="button" class="star-point star-point--ll" aria-label="富 能量 80">
|
|
|
+ <span class="star-dot star-dot--water">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.5c3.2 3.6 5.5 6.4 5.5 9.3a5.5 5.5 0 0 1-11 0c0-2.9 2.3-5.7 5.5-9.3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="star-text"><span class="star-name">富</span><span class="star-val">80</span></span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button type="button" class="star-point star-point--left" aria-label="行 能量 76">
|
|
|
+ <span class="star-dot star-dot--wood">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19C5 11 11 5 19 5c0 8-6 14-14 14z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M8.4 15.6 19 5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="star-text"><span class="star-name">行</span><span class="star-val">76</span></span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p class="star-note" id="star-note">五维占比不同,合成后不等于平均</p>
|
|
|
+
|
|
|
+ <ul class="dims">
|
|
|
+ <li class="dim">
|
|
|
+ <span class="dim-badge dim-badge--body" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M5.5 19c0-3.3 2.9-5.5 6.5-5.5s6.5 2.2 6.5 5.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="dim-main">
|
|
|
+ <span class="dim-line">
|
|
|
+ <span class="dim-name">身</span>
|
|
|
+ <span class="dim-energy">78</span>
|
|
|
+ </span>
|
|
|
+ <span class="dim-detail">妈妈 · 睡眠 6.2 小时 · 偏少</span>
|
|
|
+ </span>
|
|
|
+ <span class="chip chip--warn">略偏</span>
|
|
|
+ </li>
|
|
|
+ <li class="dim">
|
|
|
+ <span class="dim-badge dim-badge--wisdom" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24"><path d="M13 3 6.5 13H11l-1 8 6.5-10H12z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="dim-main">
|
|
|
+ <span class="dim-line">
|
|
|
+ <span class="dim-name">智</span>
|
|
|
+ <span class="dim-energy">74</span>
|
|
|
+ </span>
|
|
|
+ <span class="dim-detail">奶奶 · 上周测评 74,本周还没做</span>
|
|
|
+ </span>
|
|
|
+ <span class="chip chip--info">本周待测</span>
|
|
|
+ </li>
|
|
|
+ <li class="dim">
|
|
|
+ <span class="dim-badge dim-badge--wealth" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24"><path d="M12 3.5c3.2 3.6 5.5 6.4 5.5 9.3a5.5 5.5 0 0 1-11 0c0-2.9 2.3-5.7 5.5-9.3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="dim-main">
|
|
|
+ <span class="dim-line">
|
|
|
+ <span class="dim-name">富</span>
|
|
|
+ <span class="dim-energy">80</span>
|
|
|
+ </span>
|
|
|
+ <span class="dim-detail">上周读数 80,本周还没更新</span>
|
|
|
+ </span>
|
|
|
+ <span class="chip chip--muted">周更待填</span>
|
|
|
+ </li>
|
|
|
+ <li class="dim">
|
|
|
+ <span class="dim-badge dim-badge--action" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 19 5c0 8-6 14-14 14z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M8.4 15.6 19 5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="dim-main">
|
|
|
+ <span class="dim-line">
|
|
|
+ <span class="dim-name">行</span>
|
|
|
+ <span class="dim-energy">76</span>
|
|
|
+ </span>
|
|
|
+ <span class="dim-detail">运动记录还差 2 次</span>
|
|
|
+ </span>
|
|
|
+ <span class="chip chip--warn">略偏</span>
|
|
|
+ </li>
|
|
|
+ <li class="dim">
|
|
|
+ <span class="dim-badge dim-badge--mind" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9.2A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7 2.8C19 15.7 12 20 12 20z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ <span class="dim-main">
|
|
|
+ <span class="dim-line">
|
|
|
+ <span class="dim-name">心</span>
|
|
|
+ <span class="dim-energy">92</span>
|
|
|
+ </span>
|
|
|
+ <span class="dim-detail">情绪打卡连续 5 天正常</span>
|
|
|
+ </span>
|
|
|
+ <span class="chip chip--ok">平稳</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 三 · 今日待办带 -->
|
|
|
+ <section class="band" aria-labelledby="todo-title">
|
|
|
+ <div class="band-head">
|
|
|
+ <h2 class="band-title" id="todo-title">今日待办</h2>
|
|
|
+ <span class="band-sub">3 项待办 · 1 项完成</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel" id="todo-panel" data-state="list">
|
|
|
+ <div class="panel-state" data-variant="list">
|
|
|
+ <ul class="task-list">
|
|
|
+ <li class="task">
|
|
|
+ <button type="button" class="task-check" aria-pressed="false" aria-label="标记完成:妈妈的年度体检报告待解读">
|
|
|
+ <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
|
|
+ </button>
|
|
|
+ <span class="task-main"><span class="task-text">妈妈的年度体检报告待解读</span></span>
|
|
|
+ <button type="button" class="btn btn-quiet"><span class="btn-label">去解读</span></button>
|
|
|
+ </li>
|
|
|
+ <li class="task">
|
|
|
+ <button type="button" class="task-check" aria-pressed="false" aria-label="标记完成:补记昨天的晚餐">
|
|
|
+ <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
|
|
+ </button>
|
|
|
+ <span class="task-main"><span class="task-text">补记昨天的晚餐</span></span>
|
|
|
+ <button type="button" class="btn btn-quiet"><span class="btn-label">去补记</span></button>
|
|
|
+ </li>
|
|
|
+ <li class="task">
|
|
|
+ <button type="button" class="task-check" aria-pressed="false" aria-label="标记完成:本周行维度还差 2 次运动记录">
|
|
|
+ <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
|
|
+ </button>
|
|
|
+ <span class="task-main"><span class="task-text">本周「行」维度还差 2 次运动记录</span></span>
|
|
|
+ <button type="button" class="btn btn-quiet"><span class="btn-label">去记录</span></button>
|
|
|
+ </li>
|
|
|
+ <li class="task is-done">
|
|
|
+ <button type="button" class="task-check is-checked" aria-pressed="true" aria-label="已完成的待办:爷爷的血压已记录">
|
|
|
+ <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
|
|
+ </button>
|
|
|
+ <span class="task-main"><span class="task-text">爷爷的血压已记录</span></span>
|
|
|
+ <span class="task-flag">已完成</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel-state" data-variant="empty">
|
|
|
+ <p class="state-line">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 13.5 7 6.5h10l3 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M4 13.5V19h16v-5.5h-4.5a3.5 3.5 0 0 1-7 0z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ 今天还没有安排。去「健康」页补录一条数据,就能开始。
|
|
|
+ </p>
|
|
|
+ <button type="button" class="btn btn-quiet"><span class="btn-label">去补录</span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 四 · 近期健康数据带 -->
|
|
|
+ <section class="band" aria-labelledby="report-title">
|
|
|
+ <div class="band-head">
|
|
|
+ <h2 class="band-title" id="report-title">近期健康数据</h2>
|
|
|
+ <span class="band-sub">来自家人的报告</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel" id="report-panel" data-state="data">
|
|
|
+ <div class="panel-state" data-variant="data">
|
|
|
+ <div class="stat-lead">
|
|
|
+ <span class="stat-name">睡眠</span>
|
|
|
+ <span class="stat-value">6.2<span class="stat-unit">小时</span></span>
|
|
|
+ <span class="chip chip--warn">偏少</span>
|
|
|
+ </div>
|
|
|
+ <ul class="stats">
|
|
|
+ <li class="stat-row">
|
|
|
+ <span class="stat-name">BMI</span>
|
|
|
+ <b>23.4</b>
|
|
|
+ <span class="chip chip--ok">正常</span>
|
|
|
+ </li>
|
|
|
+ <li class="stat-row">
|
|
|
+ <span class="stat-name">血压</span>
|
|
|
+ <b>128/82<span class="stat-unit">mmHg</span></b>
|
|
|
+ <span class="chip chip--ok">平稳</span>
|
|
|
+ </li>
|
|
|
+ <li class="stat-row">
|
|
|
+ <span class="stat-name">步数</span>
|
|
|
+ <b>6842<span class="stat-unit">步</span></b>
|
|
|
+ <span class="chip chip--ok">达标</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel-state" data-variant="loading" aria-live="polite">
|
|
|
+ <p class="state-line"><span class="spinner" aria-hidden="true"></span>正在整理家人的健康数据…</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel-state" data-variant="error" role="alert">
|
|
|
+ <p class="state-line state-line--error">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4 21 19.5H3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M12 9.5v4.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="17" r="0.9" fill="currentColor" stroke="none"/></svg>
|
|
|
+ 健康报告加载失败,可能是网络不稳。点「重试」再试一次。
|
|
|
+ </p>
|
|
|
+ <button type="button" class="btn btn-primary" id="retry-btn"><span class="btn-label">重试</span></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel-state" data-variant="empty">
|
|
|
+ <p class="state-line">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.5c3.2 3.6 5.5 6.4 5.5 9.3a5.5 5.5 0 0 1-11 0c0-2.9 2.3-5.7 5.5-9.3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ 这周还没有健康数据。先补记一顿晚餐,就能看到第一条营养分析。
|
|
|
+ </p>
|
|
|
+ <button type="button" class="btn btn-quiet"><span class="btn-label">去补记</span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 五 · 服务入口 -->
|
|
|
+ <section class="band" aria-labelledby="svc-title">
|
|
|
+ <div class="band-head">
|
|
|
+ <h2 class="band-title" id="svc-title">服务</h2>
|
|
|
+ </div>
|
|
|
+ <div class="services">
|
|
|
+ <button type="button" class="svc" aria-label="健康报告:解读家人的体检结果">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 3.5h7l4 4V20.5H7z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 3.5V8h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9.5 12h6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M9.5 15.5h6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
|
|
+ <span class="svc-name">健康报告</span>
|
|
|
+ <span class="svc-desc">解读家人的体检结果</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="食材推荐:按本周状态配一周三餐">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 11.5h16a8 8 0 0 1-16 0z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 8.5c0-1.5 1-2 1-3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M13.5 8.5c0-1.5 1-2 1-3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
|
|
+ <span class="svc-name">食材推荐</span>
|
|
|
+ <span class="svc-desc">按本周状态配一周三餐</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="五维详情:看全家五维变化趋势">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3.2 20.4 9.4 17.2 19.2H6.8L3.6 9.4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><circle cx="12" cy="12" r="1.6" fill="none" stroke="currentColor" stroke-width="1.8"/></svg></span>
|
|
|
+ <span class="svc-name">五维详情</span>
|
|
|
+ <span class="svc-desc">看全家五维变化趋势</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="成长记录:记下家人的每个变化">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="4" y="5.5" width="16" height="14.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 10.5h16" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8 3.5v4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M16 3.5v4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M9.5 15l2 2 3.5-3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
|
|
+ <span class="svc-name">成长记录</span>
|
|
|
+ <span class="svc-desc">记下家人的每个变化</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="活动:报名家庭健康活动">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 3.5V21" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M6 4.5h11l-2.2 4 2.2 4H6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></span>
|
|
|
+ <span class="svc-name">活动</span>
|
|
|
+ <span class="svc-desc">报名家庭健康活动</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="认知测评:半小时自查脑力状态">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/></svg></span>
|
|
|
+ <span class="svc-name">认知测评</span>
|
|
|
+ <span class="svc-desc">半小时自查脑力状态</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="文章:每天读懂一条健康知识">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5.5c2.5-1 5-1 7.5.8v13c-2.5-1.8-5-1.8-7.5-.8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M20 5.5c-2.5-1-5-1-7.5.8v13c2.5-1.8 5-1.8 7.5-.8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></span>
|
|
|
+ <span class="svc-name">文章</span>
|
|
|
+ <span class="svc-desc">每天读懂一条健康知识</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="商城:为家人挑选健康好物">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5.5 8h13l-1 12h-11z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
|
|
+ <span class="svc-name">商城</span>
|
|
|
+ <span class="svc-desc">为家人挑选健康好物</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="会员:查看会员专属权益">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 17.5 5 7l4.5 3.5L12 6l2.5 4.5L19 7l1 10.5z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M4 20h16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
|
|
+ <span class="svc-name">会员</span>
|
|
|
+ <span class="svc-desc">查看会员专属权益</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="svc" aria-label="客服:人工客服在线解答">
|
|
|
+ <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 14v-2a7.5 7.5 0 0 1 15 0v2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><rect x="3" y="13" width="3.5" height="6" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="17.5" y="13" width="3.5" height="6" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M19.5 19v.5a2.5 2.5 0 0 1-2.5 2.5h-2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
|
|
+ <span class="svc-name">客服</span>
|
|
|
+ <span class="svc-desc">人工客服在线解答</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 六 · 推荐阅读 -->
|
|
|
+ <section class="band" aria-labelledby="read-title">
|
|
|
+ <div class="band-head">
|
|
|
+ <h2 class="band-title" id="read-title">推荐阅读</h2>
|
|
|
+ </div>
|
|
|
+ <article class="article">
|
|
|
+ <span class="article-chip">健康知识</span>
|
|
|
+ <h3 class="article-title">睡够 7 小时还是累?先看深度睡眠占多少</h3>
|
|
|
+ <div class="article-foot">
|
|
|
+ <span class="article-meta">11 月 20 日 · 3 分钟读完</span>
|
|
|
+ <button type="button" class="btn btn-go">
|
|
|
+ <span class="btn-label">去看看</span>
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5.5 15.5 12 9 18.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 七 · 未登录引导条(轻量示意)
|
|
|
+ 来源:源码底部 <wuxing-sandbox mode="preview" badgeText="登录查看完整报告">
|
|
|
+ 登录态隐藏;弱化五边形轮廓,不做完整星图,避免与主角带等权 -->
|
|
|
+ <section class="band" aria-labelledby="hint-title">
|
|
|
+ <div class="hint-band">
|
|
|
+ <svg class="hint-star" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.6 20.4 9.9 17.2 19.5H6.8L3.6 9.9z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
|
|
|
+ <div class="hint-body">
|
|
|
+ <span class="hint-title" id="hint-title">能量沙盘</span>
|
|
|
+ <span class="hint-sub">看全家五维能量的完整形状</span>
|
|
|
+ </div>
|
|
|
+ <span class="hint-badge">登录查看完整报告</span>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- tabBar:≈52px + 20px 安全区 -->
|
|
|
+ <nav class="tabbar" aria-label="主导航">
|
|
|
+ <button type="button" class="tab" aria-current="page">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5V20H4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9.5 20v-5.5h5V20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ <span>首页</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="tab">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h4l2-4 3 8 2-4h7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
|
+ <span>健康</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="tab">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20v-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 14c0-3.3-2.7-6-6-6 0 3.3 2.7 6 6 6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M12 14c0-3.3 2.7-6 6-6 0 3.3-2.7 6-6 6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
|
+ <span>成长</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="tab">
|
|
|
+ <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M5 20c0-3.9 3.1-6.5 7-6.5s7 2.6 7 6.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
|
|
+ <span>我的</span>
|
|
|
+ </button>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+(function () {
|
|
|
+ var switchBox = document.getElementById('state-switch');
|
|
|
+ var reportPanel = document.getElementById('report-panel');
|
|
|
+ var todoPanel = document.getElementById('todo-panel');
|
|
|
+
|
|
|
+ function setState(panel, state) {
|
|
|
+ if (!panel || !state) { return; }
|
|
|
+ panel.setAttribute('data-state', state);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (switchBox) {
|
|
|
+ switchBox.addEventListener('click', function (ev) {
|
|
|
+ var btn = ev.target.closest('button');
|
|
|
+ if (!btn) { return; }
|
|
|
+ var target = btn.getAttribute('data-target');
|
|
|
+ if (!target) { return; }
|
|
|
+ var on = switchBox.querySelector('button.is-on');
|
|
|
+ if (on) { on.classList.remove('is-on'); }
|
|
|
+ btn.classList.add('is-on');
|
|
|
+ var next = btn.getAttribute('data-state');
|
|
|
+ if (target === 'report') {
|
|
|
+ setState(reportPanel, next);
|
|
|
+ setState(todoPanel, 'list');
|
|
|
+ } else {
|
|
|
+ setState(todoPanel, next);
|
|
|
+ setState(reportPanel, 'data');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var retryBtn = document.getElementById('retry-btn');
|
|
|
+ if (retryBtn) {
|
|
|
+ retryBtn.addEventListener('click', function () {
|
|
|
+ retryBtn.classList.add('is-loading');
|
|
|
+ retryBtn.setAttribute('aria-busy', 'true');
|
|
|
+ setTimeout(function () {
|
|
|
+ retryBtn.classList.remove('is-loading');
|
|
|
+ retryBtn.removeAttribute('aria-busy');
|
|
|
+ setState(reportPanel, 'data');
|
|
|
+ }, 900);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ var checks = document.querySelectorAll('.task-check');
|
|
|
+ for (var i = 0; i < checks.length; i += 1) {
|
|
|
+ (function (check) {
|
|
|
+ check.addEventListener('click', function () {
|
|
|
+ var pressed = check.getAttribute('aria-pressed') === 'true';
|
|
|
+ check.setAttribute('aria-pressed', pressed ? 'false' : 'true');
|
|
|
+ if (pressed) {
|
|
|
+ check.classList.remove('is-checked');
|
|
|
+ } else {
|
|
|
+ check.classList.add('is-checked');
|
|
|
+ }
|
|
|
+ var row = check.parentNode;
|
|
|
+ if (!row) { return; }
|
|
|
+ if (pressed) {
|
|
|
+ row.classList.remove('is-done');
|
|
|
+ } else {
|
|
|
+ row.classList.add('is-done');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })(checks[i]);
|
|
|
+ }
|
|
|
+})();
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|