551d19d921
- tokens.scss: 修正字号 token 对齐 18 份原型稿 fontSize 统计
--tk-font-h1: 26→28px, --tk-font-h2: 24→22px
--tk-font-body-lg: 28→18px, --tk-font-body: 22→16px
--tk-font-body-sm: 16→14px
elder-mode 同步重新计算比例系数
- ContentCard: 新增 margin prop ('none'|'md')，margin-bottom
从 CSS 类移至 inline style，支持列表容器内无间距模式
- Profile 页: 用户卡片添加 profile-user-card flex 布局
菜单组/积分卡片使用 margin="none"，修复布局对齐
- Login 页: SCSS 全部改为 design token 引用
117 lines
4.4 KiB
SCSS
117 lines
4.4 KiB
SCSS
// Design Token — CSS 自定义属性
|
||
// 基准参考：docs/design/mp-*.html 原型设计
|
||
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
|
||
// 关怀模式通过 .elder-mode 覆盖 token 值自动生效
|
||
|
||
// ═══════════════════════════════════════
|
||
// 正常模式 Token（对齐 docs/design/mp-*.html 原型）
|
||
// 字号来源：18 份原型稿 fontSize 统计
|
||
// ═══════════════════════════════════════
|
||
page {
|
||
// ─── 色彩 Token（CSS 变量级联，医生端可覆盖）───
|
||
--tk-pri: #{$pri};
|
||
--tk-pri-l: #{$pri-l};
|
||
--tk-pri-d: #{$pri-d};
|
||
--tk-shadow-btn: #{$shadow-btn};
|
||
--tk-shadow-tab: #{$shadow-tab};
|
||
|
||
// ─── 字号（11 级，对齐原型 fontSize 统计）───
|
||
--tk-font-display: 72px; // 大屏展示
|
||
--tk-font-hero: 48px; // 启动页标题
|
||
--tk-font-h1: 28px; // 页面标题（原型 28px serif bold）
|
||
--tk-font-h2: 22px; // 副标题、用户名（原型 22px serif bold）
|
||
--tk-font-body-lg: 18px; // 按钮文字、section 标题（原型 17-18px fontWeight:600）
|
||
--tk-font-body: 16px; // 正文、输入框、icon 文字（原型 16px，最常用 UI 字号）
|
||
--tk-font-body-sm: 14px; // 副文本、描述（原型 14px，第二大用量）
|
||
--tk-font-num: 30px; // 数值（原型 30px serif bold）
|
||
--tk-font-num-lg: 34px; // 大数值
|
||
--tk-font-cap: 13px; // 说明文字（原型 13px，第一高频字号）
|
||
--tk-font-nav: 18px; // 导航栏标题（原型 18px serif bold）
|
||
--tk-font-micro: 11px; // 角标、tag（原型 11px）
|
||
|
||
// ─── 结构 ───
|
||
--tk-line-height: 1.5;
|
||
--tk-touch-min: 48px;
|
||
--tk-btn-primary-h: 52px;
|
||
--tk-text-secondary: #78716C;
|
||
|
||
// ─── 统一组件库结构化 Token ───
|
||
--tk-card-bg: #FFFFFF;
|
||
--tk-card-padding: 20px;
|
||
--tk-card-padding-sm: 16px;
|
||
--tk-card-padding-lg: 28px;
|
||
--tk-card-radius: 16px;
|
||
--tk-gap-2xs: 4px;
|
||
--tk-gap-xs: 8px;
|
||
--tk-gap-sm: 12px;
|
||
--tk-gap-md: 16px;
|
||
--tk-section-gap: 20px;
|
||
--tk-gap-lg: 24px;
|
||
--tk-gap-xl: 32px;
|
||
--tk-gap-2xl: 48px;
|
||
--tk-page-padding: 20px;
|
||
--tk-input-height: 56px;
|
||
--tk-tabbar-space: 100px;
|
||
--tk-touch-feedback-opacity: 0.85;
|
||
--tk-tag-font-size: 11px;
|
||
--tk-tag-padding-v: 3px;
|
||
--tk-tag-padding-h: 8px;
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// 关怀模式 Token（非线性放大）
|
||
// 标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
|
||
// ═══════════════════════════════════════
|
||
.elder-mode {
|
||
--tk-font-display: 80px;
|
||
--tk-font-hero: 56px;
|
||
--tk-font-h1: 32px; // 28×1.15
|
||
--tk-font-h2: 25px; // 22×1.15
|
||
--tk-font-body-lg: 22px; // 18×1.22（交互元素适度放大）
|
||
--tk-font-body: 22px; // 16×1.35
|
||
--tk-font-body-sm: 19px; // 14×1.35
|
||
--tk-font-num: 34px;
|
||
--tk-font-num-lg: 40px;
|
||
--tk-font-cap: 18px; // 13×1.4
|
||
--tk-font-nav: 22px; // 18×1.22
|
||
--tk-font-micro: 17px; // 11×1.55
|
||
|
||
--tk-line-height: 1.7;
|
||
--tk-touch-min: 56px;
|
||
--tk-btn-primary-h: 60px;
|
||
--tk-text-secondary: #5A554F;
|
||
|
||
--tk-card-padding: 28px;
|
||
--tk-card-padding-sm: 20px;
|
||
--tk-card-padding-lg: 36px;
|
||
--tk-card-radius: 20px;
|
||
--tk-gap-2xs: 6px;
|
||
--tk-gap-xs: 12px;
|
||
--tk-gap-sm: 16px;
|
||
--tk-gap-md: 20px;
|
||
--tk-section-gap: 28px;
|
||
--tk-gap-lg: 32px;
|
||
--tk-gap-xl: 40px;
|
||
--tk-gap-2xl: 56px;
|
||
--tk-page-padding: 28px;
|
||
--tk-input-height: 64px;
|
||
--tk-tabbar-space: 120px;
|
||
--tk-touch-feedback-opacity: 0.8;
|
||
--tk-tag-font-size: 13px;
|
||
--tk-tag-padding-v: 5px;
|
||
--tk-tag-padding-h: 12px;
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// 医生端 Token 覆盖（靛蓝色系）
|
||
// 在医生端页面根容器添加 class="doctor-mode"
|
||
// 所有引用 var(--tk-pri) 的组件自动变色
|
||
// ═══════════════════════════════════════
|
||
.doctor-mode {
|
||
--tk-pri: #{$doc-pri};
|
||
--tk-pri-l: #{$doc-pri-l};
|
||
--tk-pri-d: #{$doc-pri-d};
|
||
--tk-shadow-btn: #{$shadow-btn-doc};
|
||
--tk-shadow-tab: #{$shadow-tab-doc};
|
||
}
|