refactor(miniprogram): 全面接入 Design Token — 68 SCSS 文件 px→var(--tk-*)
- 重写 tokens.scss：校准 10 级字号 + 4 结构 token 匹配实际设计值 - 更新 mixins.scss：4 个 mixin 引用 token 替代硬编码 - 68 SCSS 文件全面迁移：font-size px → var(--tk-font-*)，辅助文字色 → var(--tk-text-secondary) - 清理 12 个页面的本地 mixin 重复定义 - elder-mode.scss 从 530 行缩减至 ~120 行：删除所有字号/颜色覆写，仅保留结构布局 - Token 覆盖率：634 引用 / 仅 3 个特殊硬编码值（72px/80px/21px） 关怀模式通过 CSS 变量级联自动生效，消除"打地鼠"问题。
This commit is contained in:
iven
@@ -1,10 +1,9 @@
|
||||
// 关怀模式 CSS 覆写（Phase 1 非线性放大策略）
|
||||
// 策略：标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55 / 间距 ×1.4
|
||||
// 布局：体征网格 1 列 / 行高 1.7 / 触控 56px+ / 对比度增强
|
||||
// 关怀模式 CSS 覆写（仅保留结构性调整）
|
||||
// 字号 / 颜色由 tokens.scss 的 .elder-mode 块自动级联处理
|
||||
// 此文件仅保留无法通过 CSS 变量表达的布局覆写
|
||||
|
||||
.elder-mode {
|
||||
font-size: 34px; // 28 × 1.2（根字号适度放大）
|
||||
line-height: 1.7; // 从 1.5 提升到 1.7
|
||||
line-height: var(--tk-line-height);
|
||||
|
||||
// ─── 全局触控放大 ───
|
||||
.vital-card,
|
||||
@@ -19,340 +18,22 @@
|
||||
.period-btn,
|
||||
.device-card,
|
||||
.article-entry {
|
||||
min-height: 56px;
|
||||
min-height: var(--tk-touch-min);
|
||||
}
|
||||
|
||||
.action-btn,
|
||||
.save-btn,
|
||||
.consultation-create-btn,
|
||||
.guest-login-btn {
|
||||
height: 60px;
|
||||
height: var(--tk-btn-primary-h);
|
||||
}
|
||||
|
||||
.action-btn-text,
|
||||
.save-btn-text,
|
||||
.consultation-create-btn-text {
|
||||
font-size: 21px; // 17 × 1.24
|
||||
}
|
||||
|
||||
// ─── 对比度增强（$tx3 → $tx2 等效） ───
|
||||
.greeting-date,
|
||||
.vital-unit,
|
||||
.reminder-count,
|
||||
.reminder-arrow,
|
||||
.reminder-tag,
|
||||
.capsule.capsule-pending,
|
||||
.vital-tag.tag-empty,
|
||||
.input-label,
|
||||
.input-ref,
|
||||
.trend-bar-label,
|
||||
.device-arrow,
|
||||
.session-time,
|
||||
.consult-time,
|
||||
.notify-time,
|
||||
.msg-segment-text,
|
||||
.msg-segment-badge-text,
|
||||
.consultation-subtitle,
|
||||
.empty-hint,
|
||||
.msg-empty-text,
|
||||
.trend-empty-text,
|
||||
.guest-empty-text,
|
||||
.guest-article-summary,
|
||||
.session-tag,
|
||||
.consult-badge-text,
|
||||
.session-badge-text {
|
||||
color: #5A554F; // $tx2 覆盖 $tx3，提升对比度
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 首页（标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55）
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
.greeting-text {
|
||||
font-size: 30px; // 26 × 1.15 标题微增
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30px; // 26 × 1.15
|
||||
}
|
||||
|
||||
.checkin-title {
|
||||
font-size: 22px; // 16 × 1.35 正文显增
|
||||
}
|
||||
|
||||
.vital-label {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
}
|
||||
|
||||
.vital-value {
|
||||
font-size: 34px; // 30 × 1.13（数值型标题，适度放大）
|
||||
}
|
||||
|
||||
.vital-tag {
|
||||
font-size: 17px; // 11 × 1.55 辅助强增
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.capsule {
|
||||
font-size: 17px; // 11 × 1.55
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.reminder-title {
|
||||
font-size: 21px; // 15 × 1.4
|
||||
}
|
||||
|
||||
.reminder-text {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
}
|
||||
|
||||
// 体征网格：2 列 → 1 列（解决溢出核心改动）
|
||||
// ─── 体征网格：2 列 → 1 列（解决溢出核心改动）───
|
||||
.vitals-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 个人页
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
.profile-name {
|
||||
font-size: 26px; // 22 × 1.18 标题微增
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 34px; // 28 × 1.21
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
}
|
||||
|
||||
.menu-group-title {
|
||||
font-size: 20px; // 14 × 1.43
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-size: 21px; // 15 × 1.4
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.menu-icon-text {
|
||||
font-size: 22px; // 16 × 1.38
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
font-size: 20px; // 14 × 1.43
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 健康页
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
.health-title {
|
||||
font-size: 30px; // 26 × 1.15
|
||||
}
|
||||
|
||||
.vital-tab-text,
|
||||
.period-btn-text {
|
||||
font-size: 20px; // 15 × 1.33
|
||||
}
|
||||
|
||||
.input-field {
|
||||
height: 64px;
|
||||
font-size: 34px; // 28 × 1.21
|
||||
}
|
||||
|
||||
.input-label,
|
||||
.input-ref {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
}
|
||||
|
||||
.device-name,
|
||||
.article-entry-text {
|
||||
font-size: 20px; // 15 × 1.33
|
||||
}
|
||||
|
||||
.device-desc {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
}
|
||||
|
||||
.ai-card-title {
|
||||
font-size: 19px; // 14 × 1.36
|
||||
}
|
||||
|
||||
.ai-suggestion-text {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.trend-bar-label {
|
||||
font-size: 15px; // 11 × 1.36
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 消息页
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
.messages-title {
|
||||
font-size: 30px; // 26 × 1.15
|
||||
}
|
||||
|
||||
.consult-doctor,
|
||||
.notify-title {
|
||||
font-size: 20px; // 15 × 1.33
|
||||
}
|
||||
|
||||
.consult-preview,
|
||||
.notify-desc,
|
||||
.session-message {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.consult-avatar-char {
|
||||
font-size: 22px; // 18 × 1.22
|
||||
}
|
||||
|
||||
.consult-badge-text,
|
||||
.session-badge-text,
|
||||
.msg-segment-badge-text {
|
||||
font-size: 14px; // 10-11 × 1.3+
|
||||
}
|
||||
|
||||
.msg-segment-badge {
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.notify-icon-char {
|
||||
font-size: 20px; // 16 × 1.25
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 咨询页
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
.consultation-subtitle {
|
||||
font-size: 19px; // 14 × 1.36
|
||||
}
|
||||
|
||||
.empty-char {
|
||||
font-size: 40px; // 32 × 1.25
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 22px; // 16 × 1.38
|
||||
}
|
||||
|
||||
.session-subject {
|
||||
font-size: 20px; // 15 × 1.33
|
||||
}
|
||||
|
||||
.session-avatar-char {
|
||||
font-size: 20px; // 16 × 1.25
|
||||
}
|
||||
|
||||
.session-tag {
|
||||
font-size: 14px; // 10 × 1.4
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.session-badge {
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 访客首页
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
.guest-slide-title {
|
||||
font-size: 30px; // 26 × 1.15
|
||||
}
|
||||
|
||||
.guest-slide-desc {
|
||||
font-size: 22px; // 16 × 1.38
|
||||
}
|
||||
|
||||
.guest-article-title {
|
||||
font-size: 22px; // 16 × 1.38
|
||||
}
|
||||
|
||||
.guest-login-btn {
|
||||
height: 64px;
|
||||
font-size: 26px; // 20 × 1.3
|
||||
}
|
||||
|
||||
.guest-login-text {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
}
|
||||
|
||||
.guest-institution-name {
|
||||
font-size: 22px; // 16 × 1.38
|
||||
}
|
||||
|
||||
.guest-institution-desc {
|
||||
font-size: 18px; // 13 × 1.38
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 登录页
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
.login-page {
|
||||
padding: 80px 48px 60px;
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.login-logo-mark {
|
||||
font-size: 56px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 38px; // 32 × 1.19 标题微增
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 21px; // 16 × 1.31
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 64px;
|
||||
font-size: 30px; // 28 × 1.07
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 18px; // 14 × 1.29
|
||||
}
|
||||
|
||||
.agreement-check {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.skip-btn {
|
||||
font-size: 20px; // 16 × 1.25
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 间距放大 ×1.4（大于字号放大倍率，增加呼吸空间）
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
// ─── 间距放大（增加呼吸空间）───
|
||||
.vitals-grid {
|
||||
gap: 14px;
|
||||
}
|
||||
@@ -397,75 +78,55 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 共享组件
|
||||
// ═══════════════════════════════════════
|
||||
// ─── 组件布局调整 ───
|
||||
|
||||
// EmptyState
|
||||
.empty-state-icon-char {
|
||||
font-size: 56px; // 48 × 1.17
|
||||
color: #5A554F; // $tx2
|
||||
}
|
||||
|
||||
.empty-state-text {
|
||||
font-size: 34px; // 30 × 1.13
|
||||
}
|
||||
|
||||
.empty-state-hint {
|
||||
font-size: 28px; // 24 × 1.17
|
||||
color: #5A554F; // $tx2
|
||||
}
|
||||
|
||||
.empty-state-action {
|
||||
padding: 20px 56px;
|
||||
}
|
||||
|
||||
.empty-state-action-text {
|
||||
font-size: 32px; // 28 × 1.14
|
||||
}
|
||||
|
||||
// ErrorState
|
||||
.error-state-icon {
|
||||
font-size: 96px; // 80 × 1.2
|
||||
}
|
||||
|
||||
.error-state-text {
|
||||
font-size: 32px; // 28 × 1.14
|
||||
}
|
||||
|
||||
.error-state-retry {
|
||||
padding: 20px 56px;
|
||||
}
|
||||
|
||||
.error-state-retry-text {
|
||||
font-size: 32px; // 28 × 1.14
|
||||
}
|
||||
|
||||
// Loading
|
||||
.loading-spinner {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.loading-state-text {
|
||||
font-size: 30px; // 26 × 1.15
|
||||
color: #5A554F; // $tx2
|
||||
}
|
||||
|
||||
// StepIndicator
|
||||
.step-dot {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: 28px; // 24 × 1.17
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 26px; // 22 × 1.18
|
||||
color: #5A554F; // $tx2
|
||||
}
|
||||
|
||||
.step-line {
|
||||
height: 4px;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
// ─── 登录页布局调整 ───
|
||||
.login-page {
|
||||
padding: 80px 48px 60px;
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.guest-login-btn {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
// ─── 积分商城空状态 ───
|
||||
.mall-empty-state {
|
||||
padding: 100px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
@mixin section-title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 26px;
|
||||
font-size: var(--tk-font-h1);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
margin-bottom: 20px;
|
||||
@@ -37,7 +37,7 @@
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: $r-sm;
|
||||
font-size: 22px;
|
||||
font-size: var(--tk-font-body);
|
||||
font-weight: 500;
|
||||
background: $bg;
|
||||
color: $color;
|
||||
@@ -56,7 +56,7 @@
|
||||
border-radius: $r;
|
||||
background: $pri;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
width: 100%;
|
||||
@@ -72,7 +72,7 @@
|
||||
border-radius: $r;
|
||||
background: transparent;
|
||||
color: $pri;
|
||||
font-size: 28px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: 600;
|
||||
border: 2px solid $pri;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,79 +1,49 @@
|
||||
// Design Token — CSS 自定义属性
|
||||
// 正常模式值定义在 :root，关怀模式通过 .elder-mode 覆盖
|
||||
// Design Token — CSS 自定义属性（校准后）
|
||||
// 基于全量审计：600+ font-size 声明的频率分布
|
||||
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
|
||||
// 关怀模式通过 .elder-mode 覆盖 token 值自动生效
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 正常模式 Token
|
||||
// ═══════════════════════════════════════
|
||||
page {
|
||||
// ─── 字号 ───
|
||||
--tk-font-hero: 48px; // 登录标题等超大字
|
||||
--tk-font-h1: 26px; // 页面标题
|
||||
--tk-font-h2: 22px; // 区块标题
|
||||
--tk-font-body: 15px; // 正文 / 列表项
|
||||
--tk-font-body-lg: 17px; // 大正文 / 按钮文字
|
||||
--tk-font-cap: 13px; // 辅助说明 / 次要文字
|
||||
--tk-font-micro: 11px; // 标签 / 角标 / 最小文字
|
||||
// ─── 字号（10 级，覆盖 92.5% 场景）───
|
||||
--tk-font-hero: 48px; // 装饰图标、空状态字符
|
||||
--tk-font-h1: 26px; // 页面/区块标题
|
||||
--tk-font-h2: 24px; // 副标题、日期、菜单组
|
||||
--tk-font-body-lg: 28px; // 大正文、按钮（页面默认字号）
|
||||
--tk-font-body: 22px; // 正文、标签
|
||||
--tk-font-body-sm: 16px; // 中等正文、列表项
|
||||
--tk-font-num: 30px; // 数值
|
||||
--tk-font-num-lg: 34px; // 大数值、统计
|
||||
--tk-font-cap: 13px; // 说明文字、时间戳
|
||||
--tk-font-micro: 11px; // 角标、标签
|
||||
|
||||
// ─── 数值型字号 ───
|
||||
--tk-font-value: 30px; // 体征数值
|
||||
--tk-font-value-lg: 28px; // 统计数值
|
||||
|
||||
// ─── 间距 ───
|
||||
--tk-gap-xs: 6px;
|
||||
--tk-gap-sm: 8px;
|
||||
--tk-gap-md: 10px;
|
||||
--tk-gap-lg: 16px;
|
||||
--tk-gap-xl: 20px;
|
||||
--tk-gap-2xl: 24px;
|
||||
|
||||
// ─── 内边距 ───
|
||||
--tk-pad-page: 20px 24px; // 页面内边距
|
||||
--tk-pad-card: 16px; // 卡片内边距
|
||||
--tk-pad-section: 20px; // 区块内边距
|
||||
|
||||
// ─── 触控 ───
|
||||
--tk-touch-min: 44px;
|
||||
--tk-btn-h: 52px;
|
||||
--tk-btn-primary-h: 56px;
|
||||
|
||||
// ─── 布局 ───
|
||||
--tk-grid-cols: 2;
|
||||
// ─── 结构 ───
|
||||
--tk-line-height: 1.5;
|
||||
--tk-touch-min: 48px;
|
||||
--tk-btn-primary-h: 56px;
|
||||
--tk-text-secondary: #78716C; // $tx3 — 关怀模式提升对比度
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// 关怀模式 Token（非线性放大）
|
||||
// 标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
|
||||
// ═══════════════════════════════════════
|
||||
.elder-mode {
|
||||
// 字号：标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
|
||||
--tk-font-hero: 56px;
|
||||
--tk-font-h1: 30px;
|
||||
--tk-font-h2: 26px;
|
||||
--tk-font-body: 20px;
|
||||
--tk-font-body-lg: 22px;
|
||||
--tk-font-h2: 28px;
|
||||
--tk-font-body-lg: 34px;
|
||||
--tk-font-body: 30px;
|
||||
--tk-font-body-sm: 22px;
|
||||
--tk-font-num: 34px;
|
||||
--tk-font-num-lg: 40px;
|
||||
--tk-font-cap: 18px;
|
||||
--tk-font-micro: 17px;
|
||||
|
||||
--tk-font-value: 34px;
|
||||
--tk-font-value-lg: 34px;
|
||||
|
||||
// 间距：×1.4（大于字号放大倍率，增加呼吸空间）
|
||||
--tk-gap-xs: 8px;
|
||||
--tk-gap-sm: 12px;
|
||||
--tk-gap-md: 14px;
|
||||
--tk-gap-lg: 22px;
|
||||
--tk-gap-xl: 28px;
|
||||
--tk-gap-2xl: 32px;
|
||||
|
||||
--tk-pad-page: 28px 32px;
|
||||
--tk-pad-card: 20px;
|
||||
--tk-pad-section: 28px;
|
||||
|
||||
--tk-touch-min: 56px;
|
||||
--tk-btn-h: 60px;
|
||||
--tk-btn-primary-h: 64px;
|
||||
|
||||
--tk-grid-cols: 1;
|
||||
--tk-line-height: 1.7;
|
||||
--tk-touch-min: 56px;
|
||||
--tk-btn-primary-h: 64px;
|
||||
--tk-text-secondary: #5A554F; // $tx2 — 对比度提升
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user