fix(mp): 修正 design token 字号对齐原型 + ContentCard margin prop

- 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 引用
This commit is contained in:
iven
2026-05-17 12:48:38 +08:00
parent 6841c45846
commit 551d19d921
6 changed files with 107 additions and 90 deletions

View File

@@ -1,10 +1,11 @@
// Design Token — CSS 自定义属性
// 基准参考docs/design/mp-redesign-home.html 原型设计
// 基准参考docs/design/mp-*.html 原型设计
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
// 关怀模式通过 .elder-mode 覆盖 token 值自动生效
// ═══════════════════════════════════════
// 正常模式 Token对齐原型 mp-redesign-home.html
// 正常模式 Token对齐 docs/design/mp-*.html 原型
// 字号来源18 份原型稿 fontSize 统计
// ═══════════════════════════════════════
page {
// ─── 色彩 TokenCSS 变量级联,医生端可覆盖)───
@@ -14,47 +15,47 @@ page {
--tk-shadow-btn: #{$shadow-btn};
--tk-shadow-tab: #{$shadow-tab};
// ─── 字号11 级)───
--tk-font-display: 72px;
--tk-font-hero: 48px;
--tk-font-h1: 26px; // 页面标题(原型 fontSize:26 serif bold
--tk-font-h2: 24px; // 副标题
--tk-font-body-lg: 28px; // 按钮字、页面默认
--tk-font-body: 22px; // 正文
--tk-font-body-sm: 16px; // 列表项、副文本(原型 15-16px
--tk-font-num: 30px; // 数值(原型 fontSize:30 serif bold
--tk-font-num-lg: 34px; // 大数值
--tk-font-cap: 13px; // 说明文字(原型 fontSize:13
--tk-font-nav: 18px; // 导航栏标题(原型 fontSize:18 serif bold
--tk-font-micro: 11px; // 角标(原型 fontSize:11
// ─── 字号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; // 按钮高度(原型 height:52
--tk-btn-primary-h: 52px;
--tk-text-secondary: #78716C;
// ─── 统一组件库结构化 Token ───
--tk-card-bg: #FFFFFF;
--tk-card-padding: 20px; // 卡片内边距(原型 padding:16-20
--tk-card-padding-sm: 16px; // 紧凑卡片
--tk-card-padding-lg: 28px; // 大卡片
--tk-card-radius: 16px; // 卡片圆角(原型 borderRadius:16
--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; // 网格/列表项间距(原型 gap:10
--tk-gap-md: 16px; // 区块间距(原型 marginBottom:16
--tk-section-gap: 20px; // 大区块间距
--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; // 页面边距(原型 padding:20
--tk-page-padding: 20px;
--tk-input-height: 56px;
--tk-tabbar-space: 100px;
--tk-touch-feedback-opacity: 0.85;
--tk-tag-font-size: 11px; // 标签字号(原型 fontSize:11
--tk-tag-padding-v: 3px; // 标签纵向(原型 padding:3px
--tk-tag-padding-h: 8px; // 标签横向(原型 padding:8px
--tk-tag-font-size: 11px;
--tk-tag-padding-v: 3px;
--tk-tag-padding-h: 8px;
}
// ═══════════════════════════════════════
@@ -64,15 +65,15 @@ page {
.elder-mode {
--tk-font-display: 80px;
--tk-font-hero: 56px;
--tk-font-h1: 30px; // 26×1.15
--tk-font-h2: 28px; // 24×1.15
--tk-font-body-lg: 34px;
--tk-font-body: 30px; // 22×1.35
--tk-font-body-sm: 22px; // 16×1.35
--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.2(标题轻度放大)
--tk-font-nav: 22px; // 18×1.22
--tk-font-micro: 17px; // 11×1.55
--tk-line-height: 1.7;