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:
@@ -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 {
|
||||
// ─── 色彩 Token(CSS 变量级联,医生端可覆盖)───
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user