From 890c132890ffd4938a935f6f368464b55a1e576d Mon Sep 17 00:00:00 2001 From: iven Date: Sat, 9 May 2026 23:53:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor(miniprogram):=20=E5=85=A8=E9=9D=A2?= =?UTF-8?q?=E6=8E=A5=E5=85=A5=20Design=20Token=20=E2=80=94=2068=20SCSS=20?= =?UTF-8?q?=E6=96=87=E4=BB=B6=20px=E2=86=92var(--tk-*)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重写 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 变量级联自动生效，消除"打地鼠"问题。 --- .../src/components/DeviceCard/index.scss | 10 +- .../src/components/EmptyState/index.scss | 10 +- .../src/components/ErrorState/index.scss | 6 +- .../src/components/GuestGuard/index.scss | 10 +- .../src/components/GuestGuard/index.tsx | 4 +- .../src/components/Loading/index.scss | 4 +- .../src/components/ProgressRing.scss | 4 +- .../src/components/StepIndicator/index.scss | 6 +- .../src/components/TrendChart/index.scss | 4 +- .../src/components/WeekCalendar/index.scss | 10 +- .../src/pages/ai-report/detail/index.scss | 16 +- .../src/pages/ai-report/list/index.scss | 35 +- .../src/pages/appointment/create/index.scss | 38 +- .../src/pages/appointment/detail/index.scss | 26 +- .../src/pages/appointment/index.scss | 20 +- .../src/pages/article/detail/index.scss | 18 +- apps/miniprogram/src/pages/article/index.scss | 18 +- .../src/pages/consultation/detail/index.scss | 156 ++++--- .../src/pages/consultation/index.scss | 170 +++++--- .../src/pages/device-sync/index.scss | 80 +--- .../src/pages/doctor/action-inbox/index.scss | 22 +- .../src/pages/doctor/alerts/detail/index.scss | 16 +- .../src/pages/doctor/alerts/index.scss | 18 +- .../doctor/consultation/detail/index.scss | 16 +- .../src/pages/doctor/consultation/index.scss | 16 +- .../pages/doctor/dialysis/create/index.scss | 13 +- .../pages/doctor/dialysis/detail/index.scss | 19 +- .../src/pages/doctor/dialysis/index.scss | 21 +- .../pages/doctor/followup/detail/index.scss | 28 +- .../src/pages/doctor/followup/index.scss | 12 +- apps/miniprogram/src/pages/doctor/index.scss | 27 +- .../pages/doctor/patients/detail/index.scss | 30 +- .../src/pages/doctor/patients/index.scss | 16 +- .../doctor/prescription/create/index.scss | 13 +- .../doctor/prescription/detail/index.scss | 19 +- .../src/pages/doctor/prescription/index.scss | 21 +- .../src/pages/doctor/report/detail/index.scss | 20 +- .../src/pages/doctor/report/index.scss | 12 +- apps/miniprogram/src/pages/events/index.scss | 55 +-- .../src/pages/followup/detail/index.scss | 18 +- apps/miniprogram/src/pages/health/index.scss | 92 ++-- apps/miniprogram/src/pages/index/index.scss | 52 +-- apps/miniprogram/src/pages/index/index.tsx | 58 +-- apps/miniprogram/src/pages/legal/index.scss | 12 +- apps/miniprogram/src/pages/login/index.scss | 16 +- apps/miniprogram/src/pages/mall/index.scss | 32 +- .../miniprogram/src/pages/messages/index.scss | 258 +++++++---- .../src/pages/pkg-health/alerts/index.scss | 22 +- .../pkg-health/daily-monitoring/index.scss | 48 +-- .../src/pages/pkg-health/input/index.scss | 40 +- .../src/pages/pkg-health/trend/index.scss | 16 +- .../src/pages/pkg-mall/detail/index.scss | 51 +-- .../src/pages/pkg-mall/exchange/index.scss | 53 +-- .../src/pages/pkg-mall/orders/index.scss | 47 +- .../src/pages/pkg-profile/consents/index.scss | 26 +- .../pages/pkg-profile/diagnoses/index.scss | 23 +- .../dialysis-prescriptions/detail/index.scss | 22 +- .../dialysis-prescriptions/index.scss | 33 +- .../dialysis-records/detail/index.scss | 24 +- .../pkg-profile/dialysis-records/index.scss | 33 +- .../pages/pkg-profile/elder-mode/index.scss | 20 +- .../pages/pkg-profile/family-add/index.scss | 26 +- .../src/pages/pkg-profile/family/index.scss | 45 +- .../pages/pkg-profile/followups/index.scss | 26 +- .../pkg-profile/health-records/index.scss | 15 +- .../pages/pkg-profile/medication/index.scss | 45 +- .../src/pages/pkg-profile/reports/index.scss | 37 +- .../src/pages/pkg-profile/settings/index.scss | 22 +- apps/miniprogram/src/pages/profile/index.scss | 34 +- apps/miniprogram/src/pages/profile/index.tsx | 5 +- .../src/pages/report/detail/index.scss | 28 +- apps/miniprogram/src/styles/elder-mode.scss | 403 ++---------------- apps/miniprogram/src/styles/mixins.scss | 8 +- apps/miniprogram/src/styles/tokens.scss | 86 ++-- 74 files changed, 1127 insertions(+), 1688 deletions(-) diff --git a/apps/miniprogram/src/components/DeviceCard/index.scss b/apps/miniprogram/src/components/DeviceCard/index.scss index 1708aa7..cb6b08e 100644 --- a/apps/miniprogram/src/components/DeviceCard/index.scss +++ b/apps/miniprogram/src/components/DeviceCard/index.scss @@ -10,7 +10,7 @@ box-shadow: $shadow-sm; .device-icon { - font-size: 48rpx; + font-size: var(--tk-font-h2); margin-right: 20rpx; } @@ -18,14 +18,14 @@ flex: 1; .device-name { - font-size: 28rpx; + font-size: var(--tk-font-cap); font-weight: 600; color: $tx; display: block; } .device-status { - font-size: 24rpx; + font-size: var(--tk-font-micro); margin-top: 4rpx; display: block; @@ -34,7 +34,7 @@ } .last-sync { - font-size: 22rpx; + font-size: var(--tk-font-micro); color: $tx3; margin-top: 4rpx; display: block; @@ -46,6 +46,6 @@ background: $pri; color: #fff; border-radius: $r-pill; - font-size: 24rpx; + font-size: var(--tk-font-micro); } } diff --git a/apps/miniprogram/src/components/EmptyState/index.scss b/apps/miniprogram/src/components/EmptyState/index.scss index efa59ba..8bddf5b 100644 --- a/apps/miniprogram/src/components/EmptyState/index.scss +++ b/apps/miniprogram/src/components/EmptyState/index.scss @@ -21,20 +21,20 @@ .empty-state-icon-char { font-family: Georgia, 'Times New Roman', serif; - font-size: 48px; + font-size: var(--tk-font-hero); font-weight: 600; color: $tx3; } .empty-state-text { - font-size: 30px; + font-size: var(--tk-font-num); color: $tx2; margin-bottom: 8px; } .empty-state-hint { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); margin-bottom: 32px; } @@ -45,6 +45,6 @@ } .empty-state-action-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: #fff; } diff --git a/apps/miniprogram/src/components/ErrorState/index.scss b/apps/miniprogram/src/components/ErrorState/index.scss index 4d6a4af..05f037d 100644 --- a/apps/miniprogram/src/components/ErrorState/index.scss +++ b/apps/miniprogram/src/components/ErrorState/index.scss @@ -9,12 +9,12 @@ } .error-state-icon { - font-size: 80px; + font-size: 80px; /* hero icon — kept as-is */ margin-bottom: 24px; } .error-state-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx2; margin-bottom: 32px; text-align: center; @@ -27,6 +27,6 @@ } .error-state-retry-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: #fff; } diff --git a/apps/miniprogram/src/components/GuestGuard/index.scss b/apps/miniprogram/src/components/GuestGuard/index.scss index bc68b96..5ea8d9c 100644 --- a/apps/miniprogram/src/components/GuestGuard/index.scss +++ b/apps/miniprogram/src/components/GuestGuard/index.scss @@ -25,12 +25,12 @@ } .guard-icon { - font-size: 32px; + font-size: var(--tk-font-num); color: $tx3; } .guard-title { - font-size: 18px; + font-size: var(--tk-font-body-sm); font-weight: 600; color: $tx; display: block; @@ -38,8 +38,8 @@ } .guard-desc { - font-size: 13px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); display: block; margin-bottom: 24px; } @@ -58,7 +58,7 @@ } .guard-btn-text { - font-size: 16px; + font-size: var(--tk-font-body-sm); font-weight: 600; color: #fff; } diff --git a/apps/miniprogram/src/components/GuestGuard/index.tsx b/apps/miniprogram/src/components/GuestGuard/index.tsx index a64df58..a72831e 100644 --- a/apps/miniprogram/src/components/GuestGuard/index.tsx +++ b/apps/miniprogram/src/components/GuestGuard/index.tsx @@ -1,5 +1,5 @@ import { View, Text } from '@tarojs/components'; -import Taro from '@tarojs/taro'; +import { navigateToLogin } from '../../utils/navigate'; import './index.scss'; interface GuestGuardProps { @@ -18,7 +18,7 @@ export default function GuestGuard({ title, desc }: GuestGuardProps) { {desc && {desc}} Taro.navigateTo({ url: '/pages/login/index' })} + onClick={navigateToLogin} > 立即登录 diff --git a/apps/miniprogram/src/components/Loading/index.scss b/apps/miniprogram/src/components/Loading/index.scss index 98b450c..c4f4a8a 100644 --- a/apps/miniprogram/src/components/Loading/index.scss +++ b/apps/miniprogram/src/components/Loading/index.scss @@ -25,6 +25,6 @@ } .loading-state-text { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-h1); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/components/ProgressRing.scss b/apps/miniprogram/src/components/ProgressRing.scss index ec702fb..917f9c2 100644 --- a/apps/miniprogram/src/components/ProgressRing.scss +++ b/apps/miniprogram/src/components/ProgressRing.scss @@ -17,13 +17,13 @@ .progress-ring-percent { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: bold; line-height: 1; } .progress-ring-unit { - font-size: 12px; + font-size: var(--tk-font-micro); font-weight: 600; line-height: 1; } diff --git a/apps/miniprogram/src/components/StepIndicator/index.scss b/apps/miniprogram/src/components/StepIndicator/index.scss index acd9c70..41c4379 100644 --- a/apps/miniprogram/src/components/StepIndicator/index.scss +++ b/apps/miniprogram/src/components/StepIndicator/index.scss @@ -39,7 +39,7 @@ justify-content: center; background: $bd-l; color: $tx3; - font-size: 24px; + font-size: var(--tk-font-h2); transition: all 0.3s ease; z-index: 1; @@ -55,8 +55,8 @@ } .step-label { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); margin-top: 8px; text-align: center; diff --git a/apps/miniprogram/src/components/TrendChart/index.scss b/apps/miniprogram/src/components/TrendChart/index.scss index bd44ba9..020a284 100644 --- a/apps/miniprogram/src/components/TrendChart/index.scss +++ b/apps/miniprogram/src/components/TrendChart/index.scss @@ -13,8 +13,8 @@ } .trend-chart-empty-text { - font-size: 28px; - color: $tx3; + font-size: var(--tk-font-body-lg); + color: var(--tk-text-secondary); } .trend-chart-skeleton { diff --git a/apps/miniprogram/src/components/WeekCalendar/index.scss b/apps/miniprogram/src/components/WeekCalendar/index.scss index 80f2b95..25a3a9a 100644 --- a/apps/miniprogram/src/components/WeekCalendar/index.scss +++ b/apps/miniprogram/src/components/WeekCalendar/index.scss @@ -14,13 +14,13 @@ } .week-arrow { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $pri; padding: 0 16px; } .week-label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx; font-weight: bold; } @@ -39,13 +39,13 @@ } .cell-weekday { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); display: block; } .cell-date { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; display: block; margin-top: 4px; diff --git a/apps/miniprogram/src/pages/ai-report/detail/index.scss b/apps/miniprogram/src/pages/ai-report/detail/index.scss index 982fc6e..687c7dc 100644 --- a/apps/miniprogram/src/pages/ai-report/detail/index.scss +++ b/apps/miniprogram/src/pages/ai-report/detail/index.scss @@ -27,7 +27,7 @@ } .meta-item { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } @@ -45,7 +45,7 @@ } p { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; line-height: 1.8; margin-bottom: 16px; @@ -57,7 +57,7 @@ } li { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; line-height: 1.8; margin-bottom: 8px; @@ -69,7 +69,7 @@ } .report-content { - font-size: 28px; + font-size: var(--tk-font-body-lg); line-height: 1.8; color: $tx; } @@ -78,8 +78,8 @@ display: block; text-align: center; padding: 120px 0; - color: $tx3; - font-size: 28px; + color: var(--tk-text-secondary); + font-size: var(--tk-font-body-lg); } .auto-badge { @@ -91,7 +91,7 @@ display: inline-block; padding: 4px 16px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; background: #f0e6ff; color: #7c3aed; @@ -106,7 +106,7 @@ } .trend-tip-text { - font-size: 22px; + font-size: var(--tk-font-body); color: #92400e; line-height: 1.6; } diff --git a/apps/miniprogram/src/pages/ai-report/list/index.scss b/apps/miniprogram/src/pages/ai-report/list/index.scss index a87aad0..fb3864f 100644 --- a/apps/miniprogram/src/pages/ai-report/list/index.scss +++ b/apps/miniprogram/src/pages/ai-report/list/index.scss @@ -1,28 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} +@import '../../../styles/mixins.scss'; .ai-report-page { min-height: 100vh; @@ -55,7 +32,7 @@ } .card-type { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 500; color: $tx; } @@ -87,19 +64,19 @@ } .card-time { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } .card-model { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } .no-more { text-align: center; - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); padding: 24px 0; display: block; } diff --git a/apps/miniprogram/src/pages/appointment/create/index.scss b/apps/miniprogram/src/pages/appointment/create/index.scss index 508647d..ce0cc4a 100644 --- a/apps/miniprogram/src/pages/appointment/create/index.scss +++ b/apps/miniprogram/src/pages/appointment/create/index.scss @@ -55,7 +55,7 @@ .dept-initial-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $pri; @@ -65,7 +65,7 @@ } .dept-label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx; font-weight: 500; } @@ -77,7 +77,7 @@ .slot-section-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; margin-bottom: 16px; @@ -114,14 +114,14 @@ .slot-time { @include serif-number; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; display: block; } .slot-count { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; display: block; margin-top: 6px; @@ -156,7 +156,7 @@ .confirm-icon-serif { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 24px; + font-size: var(--tk-font-h2); font-weight: bold; color: $pri; } @@ -169,12 +169,12 @@ } .confirm-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } .confirm-value { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; } @@ -185,7 +185,7 @@ } .confirm-dept-text { - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; color: $pri; } @@ -225,7 +225,7 @@ .doctor-avatar-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); color: $pri; font-weight: bold; } @@ -238,18 +238,18 @@ } .doctor-name { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; } .doctor-title { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } .doctor-specialty { - font-size: 22px; + font-size: var(--tk-font-body); color: $pri; } @@ -263,7 +263,7 @@ } .doctor-check-text { - font-size: 24px; + font-size: var(--tk-font-h2); color: white; font-weight: bold; } @@ -274,7 +274,7 @@ } .form-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; margin-bottom: 12px; display: block; @@ -284,7 +284,7 @@ background: $card; border-radius: $r-sm; padding: 24px 28px; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; width: 100%; box-sizing: border-box; @@ -298,8 +298,8 @@ } .empty-text { - font-size: 28px; - color: $tx3; + font-size: var(--tk-font-body-lg); + color: var(--tk-text-secondary); } /* 底部操作栏 */ @@ -339,7 +339,7 @@ } .btn-text { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx2; } diff --git a/apps/miniprogram/src/pages/appointment/detail/index.scss b/apps/miniprogram/src/pages/appointment/detail/index.scss index fe34099..e4dd1f6 100644 --- a/apps/miniprogram/src/pages/appointment/detail/index.scss +++ b/apps/miniprogram/src/pages/appointment/detail/index.scss @@ -23,14 +23,14 @@ } .back-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $pri; font-weight: 500; } .header-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 34px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; } @@ -80,19 +80,19 @@ } .status-tag-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; } .status-doctor { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 36px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; } .status-dept { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } @@ -130,7 +130,7 @@ .info-icon-serif { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; + font-size: var(--tk-font-body); color: $pri; background: $pri-l; width: 36px; @@ -143,12 +143,12 @@ } .info-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } .info-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; font-weight: 500; } @@ -163,8 +163,8 @@ .info-id { @include serif-number; - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); word-break: break-all; max-width: 400px; text-align: right; @@ -180,7 +180,7 @@ .tips-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $wrn; margin-bottom: 12px; @@ -188,7 +188,7 @@ } .tips-text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; line-height: 1.6; } @@ -219,7 +219,7 @@ } .cancel-text { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $dan; } diff --git a/apps/miniprogram/src/pages/appointment/index.scss b/apps/miniprogram/src/pages/appointment/index.scss index 95469b9..95fd628 100644 --- a/apps/miniprogram/src/pages/appointment/index.scss +++ b/apps/miniprogram/src/pages/appointment/index.scss @@ -17,13 +17,13 @@ .page-title { @include section-title; margin-bottom: 4px; - font-size: 36px; + font-size: var(--tk-font-num-lg); } .page-subtitle { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); letter-spacing: 1px; } @@ -67,7 +67,7 @@ .dept-initial-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); font-weight: bold; color: $pri; } @@ -80,7 +80,7 @@ } .doctor-name { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; overflow: hidden; @@ -93,7 +93,7 @@ } .dept-tag-text { - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; color: $pri; } @@ -124,7 +124,7 @@ } .status-tag-text { - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; } @@ -157,12 +157,12 @@ .info-icon-serif { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; } .info-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } @@ -186,7 +186,7 @@ } .fab-text { - font-size: 30px; + font-size: var(--tk-font-num); color: white; font-weight: bold; letter-spacing: 2px; diff --git a/apps/miniprogram/src/pages/article/detail/index.scss b/apps/miniprogram/src/pages/article/detail/index.scss index 134d575..c4c0969 100644 --- a/apps/miniprogram/src/pages/article/detail/index.scss +++ b/apps/miniprogram/src/pages/article/detail/index.scss @@ -13,7 +13,7 @@ } .article-title { - font-size: 38px; + font-size: var(--tk-font-hero); font-weight: bold; color: $tx; display: block; @@ -29,7 +29,7 @@ } .article-category { - font-size: 22px; + font-size: var(--tk-font-body); color: $pri; background: $pri-l; padding: 4px 12px; @@ -37,13 +37,13 @@ } .article-author { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } .article-date { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); } .article-summary { @@ -53,7 +53,7 @@ } .summary-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; line-height: 1.6; } @@ -70,7 +70,7 @@ } p { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; line-height: 1.8; margin-bottom: 16px; @@ -93,6 +93,6 @@ .loading-text, .empty-text { - font-size: 28px; - color: $tx3; + font-size: var(--tk-font-body-lg); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/pages/article/index.scss b/apps/miniprogram/src/pages/article/index.scss index be06958..b7afd58 100644 --- a/apps/miniprogram/src/pages/article/index.scss +++ b/apps/miniprogram/src/pages/article/index.scss @@ -16,7 +16,7 @@ display: inline-block; padding: 12px 28px; margin-right: 12px; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; background: $card; border-radius: 32px; @@ -52,7 +52,7 @@ } .article-card-title { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; line-height: 1.4; @@ -66,7 +66,7 @@ } .article-card-summary { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; line-height: 1.4; display: block; @@ -83,7 +83,7 @@ } .article-card-tag { - font-size: 22px; + font-size: var(--tk-font-body); color: $pri; background: $pri-l; padding: 2px 12px; @@ -91,7 +91,7 @@ } .article-card-date { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } @@ -116,8 +116,8 @@ } .empty-text { - font-size: 28px; - color: $tx3; + font-size: var(--tk-font-body-lg); + color: var(--tk-text-secondary); } .loading-hint { @@ -126,6 +126,6 @@ } .loading-text { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/pages/consultation/detail/index.scss b/apps/miniprogram/src/pages/consultation/detail/index.scss index 2372321..7e9f168 100644 --- a/apps/miniprogram/src/pages/consultation/detail/index.scss +++ b/apps/miniprogram/src/pages/consultation/detail/index.scss @@ -8,61 +8,108 @@ background: $bg; } +/* ─── 导航栏 ─── */ .chat-header { display: flex; - justify-content: space-between; align-items: center; - padding: 24px 32px; + padding: 12px 16px; background: $card; - border-bottom: 1px solid $bd; + border-bottom: 1px solid $bd-l; + flex-shrink: 0; + position: relative; +} - &__title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: 600; - color: $tx; +.chat-header__back { + position: absolute; + left: 16px; + z-index: 1; + + &:active { + opacity: 0.7; } +} - &__status { - font-size: 24px; +.chat-header__back-text { + font-size: var(--tk-font-body-sm); + color: $pri; +} + +.chat-header__center { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +.chat-header__title { + font-size: var(--tk-font-body-sm); + font-weight: 600; + color: $tx; +} + +.chat-header__status { + font-size: var(--tk-font-micro); + color: $acc; + margin-top: 2px; + + &--closed { color: $tx3; } } +/* ─── 消息区 ─── */ .chat-messages { flex: 1; - padding: 24px; + padding: 16px 16px 0; overflow-y: auto; } .msg-row { display: flex; - margin-bottom: 20px; + margin-bottom: 16px; + gap: 8px; &--self { justify-content: flex-end; } } +/* ─── 医生头像 ─── */ +.msg-avatar { + width: 32px; + height: 32px; + border-radius: 16px; + background: $pri-l; + @include flex-center; + flex-shrink: 0; +} + +.msg-avatar-char { + @include serif-number; + font-size: var(--tk-font-cap); + font-weight: 700; + color: $pri; +} + +/* ─── 消息气泡 ─── */ .msg-bubble { max-width: 70%; - padding: 20px 24px; - border-radius: $r-lg; - position: relative; + padding: 12px 16px; + box-shadow: $shadow-sm; &--other { background: $card; - border-top-left-radius: $r-sm; + border-radius: $r $r $r $r-xs; } &--self { background: $pri; - border-top-right-radius: $r-sm; + border-radius: $r $r $r-xs $r; } } .msg-text { - font-size: 28px; + font-size: var(--tk-font-cap); color: $tx; display: block; line-height: 1.6; @@ -76,88 +123,95 @@ .msg-date-divider { display: flex; justify-content: center; - padding: 16px 0 12px; + padding: 12px 0; &__text { - font-size: 22px; - color: #94A3B8; - background: #F1F5F9; - padding: 4px 16px; - border-radius: 8px; + font-size: var(--tk-font-micro); + color: var(--tk-text-secondary); + background: $surface-alt; + padding: 2px 12px; + border-radius: $r-pill; } } .msg-image { - width: 320px; - border-radius: 12px; + width: 200px; + border-radius: $r-sm; margin-top: 4px; } .msg-time { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-micro); + color: var(--tk-text-secondary); display: block; - margin-top: 8px; - text-align: right; + margin-top: 4px; .msg-bubble--self & { color: rgba(255, 255, 255, 0.7); + text-align: right; } } .chat-empty { text-align: center; - padding: 120px 32px; + padding: 80px 24px; &__text { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } } +/* ─── 输入栏 ─── */ .chat-input-bar { display: flex; align-items: center; - padding: 16px 24px; + gap: 10px; + padding: 10px 16px 38px; background: $card; - border-top: 1px solid $bd; - padding-bottom: calc(16px + env(safe-area-inset-bottom)); + border-top: 1px solid $bd-l; + flex-shrink: 0; } .chat-input { flex: 1; + height: 40px; background: $bg; - border-radius: $r; - padding: 16px 20px; - font-size: 28px; - margin-right: 16px; + border: 1.5px solid $bd; + border-radius: 20px; + padding: 0 14px; + font-size: var(--tk-font-cap); + color: $tx; } .chat-send-btn { + width: 40px; + height: 40px; + border-radius: 20px; background: $pri; - border-radius: $r; - padding: 16px 28px; + @include flex-center; flex-shrink: 0; + box-shadow: 0 2px 6px rgba(196, 98, 58, 0.3); &--disabled { opacity: 0.5; } +} - &__text { - font-size: 28px; - color: #fff; - font-weight: 500; - } +.chat-send-btn__icon { + font-size: var(--tk-font-cap); + color: #fff; + font-weight: 600; } .chat-closed-bar { - padding: 24px; + padding: 16px; text-align: center; background: $card; - border-top: 1px solid $bd; + border-top: 1px solid $bd-l; &__text { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } } diff --git a/apps/miniprogram/src/pages/consultation/index.scss b/apps/miniprogram/src/pages/consultation/index.scss index f9bf7ad..30af7ef 100644 --- a/apps/miniprogram/src/pages/consultation/index.scss +++ b/apps/miniprogram/src/pages/consultation/index.scss @@ -6,26 +6,36 @@ background: $bg; } -/* ─── 页头 ─── */ -.consultation-header { - background: linear-gradient(135deg, $pri 0%, $pri-d 100%); - padding: 48px 32px 36px; - color: #fff; -} - -.consultation-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 40px; - font-weight: bold; - color: #fff; - display: block; - margin-bottom: 8px; +.consultation-body { + padding: 12px 24px 24px; } +/* ─── 副标题 ─── */ .consultation-subtitle { - font-size: 24px; - color: rgba(255, 255, 255, 0.75); + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); display: block; + margin-bottom: 20px; +} + +/* ─── 发起咨询按钮 — 实心主色 ─── */ +.consultation-create-btn { + height: 48px; + border-radius: $r; + background: $pri; + @include flex-center; + box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25); + margin-bottom: 20px; + + &:active { + opacity: 0.85; + } +} + +.consultation-create-btn-text { + font-size: var(--tk-font-body-sm); + font-weight: 600; + color: #fff; } /* ─── 居中容器 ─── */ @@ -37,7 +47,7 @@ } .consultation-error { - font-size: 26px; + font-size: var(--tk-font-cap); color: $dan; } @@ -47,51 +57,52 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 160px 40px; + padding: 120px 40px; } .empty-icon { - width: 120px; - height: 120px; + width: 80px; + height: 80px; border-radius: 50%; background: $pri-l; @include flex-center; - margin-bottom: 32px; + margin-bottom: 20px; } .empty-char { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 52px; - font-weight: bold; + @include serif-number; + font-size: var(--tk-font-num); + font-weight: 700; color: $pri; - line-height: 1; } .empty-title { - font-size: 32px; + font-size: var(--tk-font-body-sm); font-weight: 600; color: $tx; - margin-bottom: 12px; + margin-bottom: 8px; } .empty-hint { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); text-align: center; } /* ─── 会话列表 ─── */ .session-list { - padding: 20px 24px; + display: flex; + flex-direction: column; + gap: 8px; } .session-card { display: flex; align-items: center; + gap: 12px; background: $card; border-radius: $r; - padding: 24px; - margin-bottom: 12px; + padding: 16px; box-shadow: $shadow-sm; &:active { @@ -99,7 +110,27 @@ } } -.session-main { +.session-card-closed { + opacity: 0.6; +} + +.session-avatar { + width: 36px; + height: 36px; + border-radius: 18px; + background: $pri-l; + @include flex-center; + flex-shrink: 0; +} + +.session-avatar-char { + @include serif-number; + font-size: var(--tk-font-body-sm); + font-weight: 700; + color: $pri; +} + +.session-body { flex: 1; min-width: 0; } @@ -108,56 +139,73 @@ display: flex; align-items: center; justify-content: space-between; - margin-bottom: 8px; + margin-bottom: 6px; } .session-subject { - font-size: 28px; - color: $tx; + font-size: var(--tk-font-cap); font-weight: 600; + color: $tx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; - margin-right: 12px; -} - -.session-tag { - &.tag-ok { @include tag($acc-l, $acc); } - &.tag-warn { @include tag($wrn-l, $wrn); } - &.tag-default { @include tag($bd-l, $tx2); } -} - -.session-message { - font-size: 26px; - color: $tx2; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-bottom: 8px; + margin-right: 8px; } .session-time { - font-size: 22px; - color: $tx3; - display: block; + font-size: var(--tk-font-micro); + color: var(--tk-text-secondary); + flex-shrink: 0; +} + +.session-tag { + font-size: var(--tk-font-micro); + padding: 2px 6px; + border-radius: 4px; + font-weight: 500; + display: inline-block; + + &.tag-ok { background: $acc-l; color: $acc; } + &.tag-warn { background: $wrn-l; color: $wrn; } + &.tag-default { background: $surface-alt; color: $tx3; } +} + +.session-meta { + display: flex; + align-items: center; + margin-bottom: 4px; +} + +.session-message-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.session-message { + font-size: var(--tk-font-cap); + color: $tx2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + margin-right: 8px; } /* ─── 未读角标 ─── */ .session-badge { background: $dan; border-radius: $r-pill; - min-width: 36px; - height: 36px; + min-width: 18px; + height: 18px; @include flex-center; - padding: 0 10px; - margin-left: 12px; + padding: 0 5px; flex-shrink: 0; } .session-badge-text { - font-size: 22px; + font-size: var(--tk-font-micro); color: #fff; font-weight: 600; } diff --git a/apps/miniprogram/src/pages/device-sync/index.scss b/apps/miniprogram/src/pages/device-sync/index.scss index b6130cb..5e70a22 100644 --- a/apps/miniprogram/src/pages/device-sync/index.scss +++ b/apps/miniprogram/src/pages/device-sync/index.scss @@ -1,34 +1,5 @@ @import '../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../styles/mixins.scss'; .device-sync-page { min-height: 100vh; @@ -43,9 +14,8 @@ } .sync-header-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 40px; - font-weight: bold; + @include section-title; + color: $card; } .sync-section { @@ -72,20 +42,17 @@ margin-bottom: 20px; color: $pri; font-family: 'Georgia', 'Times New Roman', serif; - font-size: 36px; + font-size: var(--tk-font-num-lg); font-weight: bold; } .sync-hero-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 34px; - font-weight: bold; - color: $tx; + @include section-title; margin-bottom: 8px; } .sync-hero-desc { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } @@ -110,7 +77,7 @@ .sync-action-text { color: $card; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 500; } @@ -120,7 +87,7 @@ .sync-section-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; margin-bottom: 12px; @@ -144,19 +111,19 @@ } .sync-device-name { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 500; color: $tx; } .sync-device-adapter { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); margin-top: 4px; } .sync-device-rssi { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; } @@ -183,7 +150,7 @@ } .sync-status-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; } @@ -208,12 +175,12 @@ } .sync-reading-type { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } .sync-reading-value { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $pri; @include serif-number; @@ -222,8 +189,8 @@ .sync-readings-count { display: block; margin-top: 12px; - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); text-align: center; } @@ -240,7 +207,7 @@ } .sync-error-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $dan; } @@ -250,7 +217,7 @@ } .sync-loading-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx2; } @@ -273,20 +240,17 @@ @include flex-center; color: $acc; font-family: 'Georgia', 'Times New Roman', serif; - font-size: 36px; + font-size: var(--tk-font-num-lg); font-weight: bold; margin-bottom: 16px; } .sync-result-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 34px; - font-weight: bold; - color: $tx; + @include section-title; margin-bottom: 8px; } .sync-result-count { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } diff --git a/apps/miniprogram/src/pages/doctor/action-inbox/index.scss b/apps/miniprogram/src/pages/doctor/action-inbox/index.scss index bc8abfd..4912d38 100644 --- a/apps/miniprogram/src/pages/doctor/action-inbox/index.scss +++ b/apps/miniprogram/src/pages/doctor/action-inbox/index.scss @@ -38,7 +38,7 @@ } .inbox-tab-text { - font-size: 14px; + font-size: var(--tk-font-cap); color: $tx2; } } @@ -64,20 +64,20 @@ .inbox-type-tag { color: $card; - font-size: 10px; + font-size: var(--tk-font-micro); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; } .inbox-card-title { - font-size: 14px; + font-size: var(--tk-font-cap); font-weight: 500; color: $tx; } .inbox-card-desc { - font-size: 12px; + font-size: var(--tk-font-micro); color: $tx3; } } @@ -87,7 +87,7 @@ padding: 80px 0; .inbox-empty-text { - font-size: 14px; + font-size: var(--tk-font-cap); color: $tx3; } } @@ -112,13 +112,13 @@ border-bottom: 1px solid $bd-l; .dialog-title { - font-size: 16px; + font-size: var(--tk-font-body-sm); font-weight: 600; color: $tx; } .dialog-close { - font-size: 13px; + font-size: var(--tk-font-cap); color: $tx3; } } @@ -128,7 +128,7 @@ } .dialog-patient { - font-size: 13px; + font-size: var(--tk-font-cap); color: $tx2; display: block; margin-bottom: 12px; @@ -156,13 +156,13 @@ .thread-content { .thread-label { - font-size: 13px; + font-size: var(--tk-font-cap); color: $tx; display: block; } .thread-time { - font-size: 11px; + font-size: var(--tk-font-micro); color: $tx3; } } @@ -178,7 +178,7 @@ text-align: center; padding: 10px; border-radius: $r-sm; - font-size: 14px; + font-size: var(--tk-font-cap); font-weight: 500; &.primary { background: $pri; color: $card; } diff --git a/apps/miniprogram/src/pages/doctor/alerts/detail/index.scss b/apps/miniprogram/src/pages/doctor/alerts/detail/index.scss index 18e7202..72cc200 100644 --- a/apps/miniprogram/src/pages/doctor/alerts/detail/index.scss +++ b/apps/miniprogram/src/pages/doctor/alerts/detail/index.scss @@ -18,13 +18,13 @@ } &__time { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } } .detail-severity { - font-size: 24px; + font-size: var(--tk-font-h2); font-weight: 600; padding: 6px 16px; border-radius: $r-sm; @@ -51,7 +51,7 @@ } .detail-status { - font-size: 24px; + font-size: var(--tk-font-h2); padding: 6px 16px; border-radius: $r-sm; @@ -84,24 +84,24 @@ box-shadow: $shadow-sm; &__label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; margin-bottom: 8px; } &__value { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; word-break: break-all; &--id { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; font-family: monospace; } &--detail { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; font-family: monospace; line-height: 1.6; @@ -125,7 +125,7 @@ flex: 1; height: 88px; line-height: 88px; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; border-radius: $r-lg; text-align: center; diff --git a/apps/miniprogram/src/pages/doctor/alerts/index.scss b/apps/miniprogram/src/pages/doctor/alerts/index.scss index 13ffa62..751b543 100644 --- a/apps/miniprogram/src/pages/doctor/alerts/index.scss +++ b/apps/miniprogram/src/pages/doctor/alerts/index.scss @@ -16,13 +16,13 @@ } .alert-list-title { - font-size: 36px; + font-size: var(--tk-font-num-lg); font-weight: 600; color: $tx; } .alert-list-count { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -36,7 +36,7 @@ padding: 10px 24px; border-radius: $r-pill; background: $bd-l; - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; transition: all 0.2s; @@ -79,7 +79,7 @@ } &__title { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 500; color: $tx; margin-bottom: 8px; @@ -92,13 +92,13 @@ } &__time { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } } .alert-severity { - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 600; padding: 4px 12px; border-radius: $r-sm; @@ -125,7 +125,7 @@ } .alert-status { - font-size: 22px; + font-size: var(--tk-font-body); padding: 4px 12px; border-radius: $r-sm; @@ -158,7 +158,7 @@ margin-top: 32px; &__btn { - font-size: 26px; + font-size: var(--tk-font-h1); color: $pri; padding: 12px 24px; @@ -168,7 +168,7 @@ } &__info { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } } diff --git a/apps/miniprogram/src/pages/doctor/consultation/detail/index.scss b/apps/miniprogram/src/pages/doctor/consultation/detail/index.scss index 73d1d5e..551ea34 100644 --- a/apps/miniprogram/src/pages/doctor/consultation/detail/index.scss +++ b/apps/miniprogram/src/pages/doctor/consultation/detail/index.scss @@ -18,13 +18,13 @@ &__title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: 600; color: $tx; } &__close { - font-size: 26px; + font-size: var(--tk-font-h1); color: $dan; padding: 8px 16px; } @@ -63,7 +63,7 @@ } .msg-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; display: block; line-height: 1.6; @@ -76,7 +76,7 @@ .msg-time { @include serif-number; - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; display: block; margin-top: 8px; @@ -92,7 +92,7 @@ padding: 120px 32px; &__text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx3; } } @@ -111,7 +111,7 @@ background: $bd-l; border-radius: $r; padding: 16px 20px; - font-size: 28px; + font-size: var(--tk-font-body-lg); margin-right: 16px; } @@ -126,7 +126,7 @@ } &__text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $card; font-weight: 500; } @@ -139,7 +139,7 @@ border-top: 1px solid $bd; &__text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx3; } } diff --git a/apps/miniprogram/src/pages/doctor/consultation/index.scss b/apps/miniprogram/src/pages/doctor/consultation/index.scss index 9bf9edf..facc62d 100644 --- a/apps/miniprogram/src/pages/doctor/consultation/index.scss +++ b/apps/miniprogram/src/pages/doctor/consultation/index.scss @@ -17,7 +17,7 @@ flex: 1; text-align: center; padding: 24px 0; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx2; position: relative; @@ -64,7 +64,7 @@ } &__subject { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $tx; flex: 1; @@ -80,7 +80,7 @@ } &__status-text { - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; } @@ -96,12 +96,12 @@ } &__time { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } &__preview { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; overflow: hidden; text-overflow: ellipsis; @@ -123,7 +123,7 @@ &__badge-text { @include serif-number; - font-size: 22px; + font-size: var(--tk-font-body); color: $card; font-weight: 600; } @@ -137,7 +137,7 @@ padding: 24px; &__btn { - font-size: 26px; + font-size: var(--tk-font-h1); color: $pri; padding: 12px 24px; @@ -147,7 +147,7 @@ } &__info { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } } diff --git a/apps/miniprogram/src/pages/doctor/dialysis/create/index.scss b/apps/miniprogram/src/pages/doctor/dialysis/create/index.scss index d80a720..83c7736 100644 --- a/apps/miniprogram/src/pages/doctor/dialysis/create/index.scss +++ b/apps/miniprogram/src/pages/doctor/dialysis/create/index.scss @@ -1,4 +1,5 @@ @import '../../../../styles/variables.scss'; +@import '../../../../styles/mixins.scss'; .create-page { min-height: 100vh; @@ -16,7 +17,7 @@ } .section-title { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; display: block; @@ -41,7 +42,7 @@ } .form-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; flex-shrink: 0; min-width: 140px; @@ -50,12 +51,12 @@ .form-input { flex: 1; text-align: right; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; } .form-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; &.placeholder { @@ -66,7 +67,7 @@ .form-textarea { width: 100%; margin-top: 12px; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; min-height: 120px; background: $bg; @@ -91,7 +92,7 @@ } .submit-btn__text { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: #fff; } diff --git a/apps/miniprogram/src/pages/doctor/dialysis/detail/index.scss b/apps/miniprogram/src/pages/doctor/dialysis/detail/index.scss index 09425d3..78ff0a5 100644 --- a/apps/miniprogram/src/pages/doctor/dialysis/detail/index.scss +++ b/apps/miniprogram/src/pages/doctor/dialysis/detail/index.scss @@ -1,4 +1,5 @@ @import '../../../../styles/variables.scss'; +@import '../../../../styles/mixins.scss'; .dialysis-detail { min-height: 100vh; @@ -16,7 +17,7 @@ } .section-title { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; display: block; @@ -31,7 +32,7 @@ } .record-header__title { - font-size: 34px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; font-variant-numeric: tabular-nums; @@ -41,7 +42,7 @@ display: inline-block; padding: 4px 12px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); background: $bd-l; color: $tx3; @@ -57,13 +58,13 @@ } .record-sub { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; } .review-info { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; display: block; margin-top: 8px; @@ -82,12 +83,12 @@ } .detail-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } .detail-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; text-align: right; flex: 1; @@ -98,7 +99,7 @@ .error-text { text-align: center; padding: 120px 0; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx3; } @@ -150,6 +151,6 @@ } .action-btn__text { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 500; } diff --git a/apps/miniprogram/src/pages/doctor/dialysis/index.scss b/apps/miniprogram/src/pages/doctor/dialysis/index.scss index 39bf38c..6b91105 100644 --- a/apps/miniprogram/src/pages/doctor/dialysis/index.scss +++ b/apps/miniprogram/src/pages/doctor/dialysis/index.scss @@ -1,4 +1,5 @@ @import '../../../styles/variables.scss'; +@import '../../../styles/mixins.scss'; .dialysis-page { min-height: 100vh; @@ -15,7 +16,7 @@ background: $bg; border-radius: $r-sm; padding: 16px 20px; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; } @@ -52,7 +53,7 @@ } .tab-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } @@ -61,7 +62,7 @@ } .record-count { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; padding: 8px 0 16px; } @@ -89,7 +90,7 @@ display: inline-block; padding: 4px 12px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 600; background: $pri-l; color: $pri-d; @@ -109,7 +110,7 @@ display: inline-block; padding: 4px 12px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); background: $bd-l; color: $tx3; @@ -131,13 +132,13 @@ } .record-card__date { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; font-variant-numeric: tabular-nums; } .record-card__meta { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; font-variant-numeric: tabular-nums; } @@ -154,7 +155,7 @@ padding: 12px 24px; background: $card; border-radius: $r-sm; - font-size: 26px; + font-size: var(--tk-font-h1); color: $pri; &--disabled { @@ -163,7 +164,7 @@ } .page-info { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -187,7 +188,7 @@ } .fab-text { - font-size: 40px; + font-size: var(--tk-font-hero); color: #fff; font-weight: bold; } diff --git a/apps/miniprogram/src/pages/doctor/followup/detail/index.scss b/apps/miniprogram/src/pages/doctor/followup/detail/index.scss index 64e83be..4508267 100644 --- a/apps/miniprogram/src/pages/doctor/followup/detail/index.scss +++ b/apps/miniprogram/src/pages/doctor/followup/detail/index.scss @@ -28,13 +28,13 @@ &__title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: 700; color: $tx; } &__status { - font-size: 24px; + font-size: var(--tk-font-h2); padding: 6px 16px; border-radius: $r; font-weight: 500; @@ -60,12 +60,12 @@ } .info-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } .info-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; font-weight: 500; } @@ -77,14 +77,14 @@ border-radius: $r; &__label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; display: block; margin-bottom: 8px; } &__text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; line-height: 1.6; } @@ -99,14 +99,14 @@ } &__date { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; display: block; margin-bottom: 8px; } &__text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; display: block; margin-bottom: 4px; @@ -121,7 +121,7 @@ border-radius: $r; margin-bottom: 24px; color: $card; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 500; } @@ -130,7 +130,7 @@ } .form-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; font-weight: 500; display: block; @@ -143,7 +143,7 @@ background: $bd-l; border-radius: $r; padding: 16px 20px; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; box-sizing: border-box; line-height: 1.6; @@ -154,7 +154,7 @@ padding: 16px 20px; background: $bd-l; border-radius: $r; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; box-sizing: border-box; } @@ -171,7 +171,7 @@ } &__text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $card; font-weight: 600; } @@ -181,5 +181,5 @@ text-align: center; padding: 80px 32px; color: $tx3; - font-size: 28px; + font-size: var(--tk-font-body-lg); } diff --git a/apps/miniprogram/src/pages/doctor/followup/index.scss b/apps/miniprogram/src/pages/doctor/followup/index.scss index 304bc4e..d421157 100644 --- a/apps/miniprogram/src/pages/doctor/followup/index.scss +++ b/apps/miniprogram/src/pages/doctor/followup/index.scss @@ -18,7 +18,7 @@ .tab { display: inline-block; padding: 24px 16px; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; position: relative; flex-shrink: 0; @@ -44,7 +44,7 @@ padding: 20px 28px; text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } } @@ -75,19 +75,19 @@ &__type { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $tx; } &__status { @include tag(transparent, $tx2); - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; } &__patient { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; margin-bottom: 8px; @@ -99,7 +99,7 @@ } &__date { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } } diff --git a/apps/miniprogram/src/pages/doctor/index.scss b/apps/miniprogram/src/pages/doctor/index.scss index 6d6268d..a9026f1 100644 --- a/apps/miniprogram/src/pages/doctor/index.scss +++ b/apps/miniprogram/src/pages/doctor/index.scss @@ -13,19 +13,18 @@ &__title { @include section-title; - font-size: 40px; margin-bottom: 12px; } &__greeting { - font-size: 28px; + font-size: var(--tk-font-h2); color: $tx2; display: block; margin-bottom: 8px; } &__date { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } @@ -48,19 +47,19 @@ text-align: center; line-height: 36px; font-weight: bold; - font-size: 22px; + font-size: var(--tk-font-body); margin-right: 12px; flex-shrink: 0; } &__alert-text { flex: 1; - font-size: 26px; + font-size: var(--tk-font-h1); color: $dan; } &__alert-link { - font-size: 24px; + font-size: var(--tk-font-h2); color: $dan; flex-shrink: 0; } @@ -73,7 +72,7 @@ background: $surface-alt; border-radius: $r; padding: 16px 20px; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx3; } @@ -113,14 +112,14 @@ background: $pri-l; color: $pri; font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 700; margin-bottom: 8px; } &__card-num { @include serif-number; - font-size: 48px; + font-size: var(--tk-font-hero); font-weight: 700; color: $tx; display: block; @@ -128,7 +127,7 @@ } &__card-label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -145,7 +144,7 @@ &__logout { color: $dan; - font-size: 28px; + font-size: var(--tk-font-h2); padding: 16px 48px; display: inline-block; } @@ -172,7 +171,7 @@ background: $acc-l; color: $acc; font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 700; } @@ -192,14 +191,14 @@ text-align: center; background: $dan; color: #fff; - font-size: 18px; + font-size: var(--tk-font-body-sm); font-weight: 700; border-radius: $r-pill; padding: 0 6px; } &__label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; display: block; } diff --git a/apps/miniprogram/src/pages/doctor/patients/detail/index.scss b/apps/miniprogram/src/pages/doctor/patients/detail/index.scss index 0ec8801..ec77d6d 100644 --- a/apps/miniprogram/src/pages/doctor/patients/detail/index.scss +++ b/apps/miniprogram/src/pages/doctor/patients/detail/index.scss @@ -33,12 +33,12 @@ } .info-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } .info-value { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; font-weight: 500; } @@ -51,7 +51,7 @@ } .warning-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $wrn; font-weight: 600; display: block; @@ -59,7 +59,7 @@ } .warning-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $pri-d; } @@ -68,14 +68,14 @@ } .info-block-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; display: block; margin-bottom: 8px; } .info-block-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; line-height: 1.6; } @@ -96,7 +96,7 @@ .vital-value { @include serif-number; - font-size: 36px; + font-size: var(--tk-font-num-lg); font-weight: 700; color: $pri; display: block; @@ -104,7 +104,7 @@ } .vital-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; } @@ -116,13 +116,13 @@ } .stat-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } .stat-value { @include serif-number; - font-size: 26px; + font-size: var(--tk-font-h1); font-weight: 600; color: $tx; @@ -151,18 +151,18 @@ } &__type { - font-size: 26px; + font-size: var(--tk-font-h1); font-weight: 500; color: $tx; } &__date { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } &__abnormal { - font-size: 24px; + font-size: var(--tk-font-h2); color: $dan; font-weight: 500; } @@ -180,7 +180,7 @@ border-radius: $r; background: $pri; color: $card; - font-size: 26px; + font-size: var(--tk-font-h1); font-weight: 500; &:active { @@ -196,5 +196,5 @@ text-align: center; padding: 80px 32px; color: $tx3; - font-size: 28px; + font-size: var(--tk-font-body-lg); } diff --git a/apps/miniprogram/src/pages/doctor/patients/index.scss b/apps/miniprogram/src/pages/doctor/patients/index.scss index 06dda6f..8c0e8ea 100644 --- a/apps/miniprogram/src/pages/doctor/patients/index.scss +++ b/apps/miniprogram/src/pages/doctor/patients/index.scss @@ -15,7 +15,7 @@ background: $card; border-radius: $r; padding: 20px 24px; - font-size: 28px; + font-size: var(--tk-font-body-lg); width: 100%; box-sizing: border-box; box-shadow: $shadow-sm; @@ -33,7 +33,7 @@ padding: 10px 24px; border-radius: $r-pill; background: $bd-l; - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; margin-right: 16px; @@ -47,7 +47,7 @@ margin-bottom: 16px; text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } } @@ -75,14 +75,14 @@ } &__name { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: 600; color: $tx; margin-right: 16px; } &__meta { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -112,7 +112,7 @@ background: $pri-l; &__text { - font-size: 22px; + font-size: var(--tk-font-body); } } @@ -124,7 +124,7 @@ margin-top: 32px; &__btn { - font-size: 26px; + font-size: var(--tk-font-h1); color: $pri; padding: 12px 24px; @@ -134,7 +134,7 @@ } &__info { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } } diff --git a/apps/miniprogram/src/pages/doctor/prescription/create/index.scss b/apps/miniprogram/src/pages/doctor/prescription/create/index.scss index 0bb960b..40b3a26 100644 --- a/apps/miniprogram/src/pages/doctor/prescription/create/index.scss +++ b/apps/miniprogram/src/pages/doctor/prescription/create/index.scss @@ -1,4 +1,5 @@ @import '../../../../styles/variables.scss'; +@import '../../../../styles/mixins.scss'; .create-page { min-height: 100vh; @@ -16,7 +17,7 @@ } .section-title { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; display: block; @@ -36,7 +37,7 @@ } .form-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; flex-shrink: 0; min-width: 140px; @@ -45,12 +46,12 @@ .form-input { flex: 1; text-align: right; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; } .form-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; &.placeholder { @@ -61,7 +62,7 @@ .form-textarea { width: 100%; margin-top: 12px; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; min-height: 120px; background: $bg; @@ -86,7 +87,7 @@ } .submit-btn__text { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: #fff; } diff --git a/apps/miniprogram/src/pages/doctor/prescription/detail/index.scss b/apps/miniprogram/src/pages/doctor/prescription/detail/index.scss index 4d304e2..216702e 100644 --- a/apps/miniprogram/src/pages/doctor/prescription/detail/index.scss +++ b/apps/miniprogram/src/pages/doctor/prescription/detail/index.scss @@ -1,4 +1,5 @@ @import '../../../../styles/variables.scss'; +@import '../../../../styles/mixins.scss'; .prescription-detail { min-height: 100vh; @@ -16,7 +17,7 @@ } .section-title { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; display: block; @@ -31,7 +32,7 @@ } .rx-header__title { - font-size: 34px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; } @@ -40,7 +41,7 @@ display: inline-block; padding: 4px 12px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); background: $bd-l; color: $tx3; @@ -51,7 +52,7 @@ } .rx-sub { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; font-variant-numeric: tabular-nums; @@ -69,12 +70,12 @@ } .detail-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } .detail-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; text-align: right; flex: 1; @@ -83,7 +84,7 @@ } .notes-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; line-height: 1.6; } @@ -91,7 +92,7 @@ .error-text { text-align: center; padding: 120px 0; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx3; } @@ -131,6 +132,6 @@ } .action-btn__text { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 500; } diff --git a/apps/miniprogram/src/pages/doctor/prescription/index.scss b/apps/miniprogram/src/pages/doctor/prescription/index.scss index e07d808..329ef8d 100644 --- a/apps/miniprogram/src/pages/doctor/prescription/index.scss +++ b/apps/miniprogram/src/pages/doctor/prescription/index.scss @@ -1,4 +1,5 @@ @import '../../../styles/variables.scss'; +@import '../../../styles/mixins.scss'; .prescription-page { min-height: 100vh; @@ -15,7 +16,7 @@ background: $bg; border-radius: $r-sm; padding: 16px 20px; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; } @@ -52,7 +53,7 @@ } .tab-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } @@ -61,7 +62,7 @@ } .prescription-count { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; padding: 8px 0 16px; } @@ -86,7 +87,7 @@ } .prescription-card__model { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; } @@ -95,7 +96,7 @@ display: inline-block; padding: 4px 12px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); background: $bd-l; color: $tx3; @@ -112,13 +113,13 @@ } .prescription-card__meta { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; font-variant-numeric: tabular-nums; } .prescription-card__date { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; display: block; font-variant-numeric: tabular-nums; @@ -136,7 +137,7 @@ padding: 12px 24px; background: $card; border-radius: $r-sm; - font-size: 26px; + font-size: var(--tk-font-h1); color: $pri; &--disabled { @@ -145,7 +146,7 @@ } .page-info { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -169,7 +170,7 @@ } .fab-text { - font-size: 40px; + font-size: var(--tk-font-hero); color: #fff; font-weight: bold; } diff --git a/apps/miniprogram/src/pages/doctor/report/detail/index.scss b/apps/miniprogram/src/pages/doctor/report/detail/index.scss index 58f2e09..10d06b1 100644 --- a/apps/miniprogram/src/pages/doctor/report/detail/index.scss +++ b/apps/miniprogram/src/pages/doctor/report/detail/index.scss @@ -28,13 +28,13 @@ &__type { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); font-weight: 700; color: $tx; } &__status { - font-size: 24px; + font-size: var(--tk-font-h2); padding: 6px 16px; border-radius: $r; font-weight: 500; @@ -45,13 +45,13 @@ } .report-date { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; } .review-info { - font-size: 24px; + font-size: var(--tk-font-h2); color: $acc; display: block; margin-top: 8px; @@ -81,7 +81,7 @@ } .indicator-cell { - font-size: 24px; + font-size: var(--tk-font-h2); &--name { flex: 2; @@ -116,7 +116,7 @@ } .indicator-row--header & { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; font-weight: 400; } @@ -129,7 +129,7 @@ } .notes-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; line-height: 1.6; } @@ -140,7 +140,7 @@ background: $bd-l; border-radius: $r; padding: 20px; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; box-sizing: border-box; line-height: 1.6; @@ -158,7 +158,7 @@ } &__text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $card; font-weight: 600; } @@ -168,5 +168,5 @@ text-align: center; padding: 80px 32px; color: $tx3; - font-size: 28px; + font-size: var(--tk-font-body-lg); } diff --git a/apps/miniprogram/src/pages/doctor/report/index.scss b/apps/miniprogram/src/pages/doctor/report/index.scss index 7b94f71..49f005e 100644 --- a/apps/miniprogram/src/pages/doctor/report/index.scss +++ b/apps/miniprogram/src/pages/doctor/report/index.scss @@ -15,7 +15,7 @@ background: $card; border-radius: $r; padding: 20px 24px; - font-size: 28px; + font-size: var(--tk-font-body-lg); width: 100%; box-sizing: border-box; box-shadow: $shadow-sm; @@ -26,7 +26,7 @@ margin-bottom: 16px; text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } } @@ -56,13 +56,13 @@ &__type { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $tx; } &__date { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; } @@ -73,13 +73,13 @@ } &__abnormal { - font-size: 26px; + font-size: var(--tk-font-h1); color: $dan; font-weight: 600; } &__normal { - font-size: 26px; + font-size: var(--tk-font-h1); color: $acc; } diff --git a/apps/miniprogram/src/pages/events/index.scss b/apps/miniprogram/src/pages/events/index.scss index a0a244f..e5b0859 100644 --- a/apps/miniprogram/src/pages/events/index.scss +++ b/apps/miniprogram/src/pages/events/index.scss @@ -1,34 +1,5 @@ @import '../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../styles/mixins.scss'; .events-page { min-height: 100vh; @@ -43,14 +14,14 @@ &__title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 40px; + font-size: var(--tk-font-h1); font-weight: bold; display: block; margin-bottom: 8px; } &__subtitle { - font-size: 26px; + font-size: var(--tk-font-h1); opacity: 0.85; } } @@ -77,7 +48,7 @@ &__status { @include tag($bd-l, $tx2); - font-size: 22px; + font-size: var(--tk-font-body); } &__status--published { @@ -97,7 +68,7 @@ } &__points { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $wrn; @include serif-number; @@ -105,7 +76,7 @@ &__title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-h1); font-weight: bold; color: $tx; display: block; @@ -113,7 +84,7 @@ } &__desc { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; margin-bottom: 16px; @@ -128,13 +99,13 @@ } &__date { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } &__location { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); } &__footer { @@ -146,8 +117,8 @@ } &__participants { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); @include serif-number; } @@ -161,7 +132,7 @@ } &-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $card; font-weight: 500; } diff --git a/apps/miniprogram/src/pages/followup/detail/index.scss b/apps/miniprogram/src/pages/followup/detail/index.scss index 22c4de5..b021f1e 100644 --- a/apps/miniprogram/src/pages/followup/detail/index.scss +++ b/apps/miniprogram/src/pages/followup/detail/index.scss @@ -18,7 +18,7 @@ .detail-title { @include section-title; - font-size: 34px; + font-size: var(--tk-font-num-lg); margin-bottom: 20px; } @@ -34,12 +34,12 @@ } .detail-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } .detail-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; &.status-completed { color: $acc; } @@ -59,7 +59,7 @@ } .countdown-text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $wrn; font-weight: bold; @@ -74,7 +74,7 @@ } .detail-desc-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; line-height: 1.6; } @@ -94,7 +94,7 @@ .submit-textarea { width: 100%; min-height: 200px; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; background: $bg; border-radius: $r-sm; @@ -121,7 +121,7 @@ } .submit-btn-text { - font-size: 30px; + font-size: var(--tk-font-num); color: #fff; font-weight: 600; } @@ -134,6 +134,6 @@ .loading-text, .empty-text { - font-size: 28px; - color: $tx3; + font-size: var(--tk-font-body-lg); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/pages/health/index.scss b/apps/miniprogram/src/pages/health/index.scss index 46fdc32..1d7aeff 100644 --- a/apps/miniprogram/src/pages/health/index.scss +++ b/apps/miniprogram/src/pages/health/index.scss @@ -10,11 +10,12 @@ /* ─── 页头 ─── */ .health-header { - margin-bottom: 16px; + margin-bottom: 20px; } .health-title { - font-size: 22px; + @include serif-number; + font-size: var(--tk-font-h1); font-weight: 700; color: $tx; } @@ -40,6 +41,7 @@ &.vital-tab-active { background: $pri; + box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25); .vital-tab-text { color: #fff; @@ -48,7 +50,7 @@ } .vital-tab-text { - font-size: 15px; + font-size: var(--tk-font-cap); font-weight: 600; color: $tx2; } @@ -65,11 +67,11 @@ /* ─── 录入区 ─── */ .input-section { - margin-bottom: 12px; + margin-bottom: 20px; background: $card; border-radius: $r; - padding: 16px; - box-shadow: $shadow-sm; + padding: 20px; + box-shadow: $shadow-md; } .input-group { @@ -77,8 +79,8 @@ } .input-label { - font-size: 13px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); display: block; margin-bottom: 4px; } @@ -90,7 +92,7 @@ border-radius: 12px; padding: 0 16px; font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $tx; width: 100%; @@ -98,13 +100,17 @@ } .input-ref { - font-size: 13px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); display: block; margin-top: 8px; margin-bottom: 4px; } +.input-label--secondary { + margin-top: 20px; +} + /* ─── 血糖时段选择 ─── */ .period-group { display: flex; @@ -133,7 +139,7 @@ } .period-btn-text { - font-size: 15px; + font-size: var(--tk-font-cap); font-weight: 600; color: $tx2; } @@ -145,7 +151,8 @@ border-radius: 14px; background: $pri; @include flex-center; - margin-top: 12px; + margin-top: 20px; + box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25); &:active { opacity: 0.85; @@ -153,7 +160,7 @@ } .save-btn-text { - font-size: 17px; + font-size: var(--tk-font-body-sm); font-weight: 600; color: #fff; } @@ -176,7 +183,7 @@ } .trend-empty-text { - font-size: 14px; + font-size: var(--tk-font-cap); color: $tx2; } @@ -195,6 +202,25 @@ border-radius: 12px; padding: 12px 8px; gap: 0; + position: relative; +} + +.trend-threshold-line { + position: absolute; + left: 8px; + right: 8px; + border-top: 1.5px dashed $wrn; + opacity: 0.6; + pointer-events: none; +} + +.trend-threshold-label { + position: absolute; + right: 0; + top: -16px; + font-size: var(--tk-font-micro); + color: $wrn; + opacity: 0.8; } .trend-bar-col { @@ -222,8 +248,8 @@ } .trend-bar-label { - font-size: 11px; - color: $tx3; + font-size: var(--tk-font-micro); + color: var(--tk-text-secondary); margin-top: 6px; } @@ -256,7 +282,7 @@ } .device-icon-text { - font-size: 22px; + font-size: var(--tk-font-body); } .device-info { @@ -265,21 +291,21 @@ } .device-name { - font-size: 15px; + font-size: var(--tk-font-cap); font-weight: 500; color: $tx; display: block; } .device-desc { - font-size: 13px; + font-size: var(--tk-font-cap); color: $acc; display: block; } .device-arrow { - font-size: 14px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); flex-shrink: 0; } @@ -296,37 +322,38 @@ } .article-entry-text { - font-size: 15px; + font-size: var(--tk-font-cap); color: $tx; font-weight: 500; } /* ─── AI 建议卡片 ─── */ .ai-suggestion-card { - background: $card; + background: $acc-l; border-radius: $r; padding: 16px; - margin-bottom: 16px; - box-shadow: $shadow-sm; - border-left: 4px solid $pri; + margin-bottom: 20px; + box-shadow: none; + border-left: 4px solid $acc; } .ai-card-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 10px; + margin-bottom: 8px; } .ai-card-title { - font-size: 15px; + font-size: var(--tk-font-cap); font-weight: 600; - color: $tx; + color: $acc; } .ai-card-count { - font-size: 12px; + font-size: var(--tk-font-micro); color: $acc; + opacity: 0.7; } .ai-suggestion-item { @@ -344,6 +371,7 @@ } .ai-suggestion-text { - font-size: 13px; + font-size: var(--tk-font-cap); color: $tx2; + line-height: 1.6; } diff --git a/apps/miniprogram/src/pages/index/index.scss b/apps/miniprogram/src/pages/index/index.scss index 56b9f95..24d5060 100644 --- a/apps/miniprogram/src/pages/index/index.scss +++ b/apps/miniprogram/src/pages/index/index.scss @@ -26,7 +26,7 @@ .greeting-text { @include serif-number; - font-size: 26px; + font-size: var(--tk-font-h1); font-weight: 700; color: $tx; display: block; @@ -34,8 +34,8 @@ } .greeting-date { - font-size: 14px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } .greeting-bell { @@ -53,7 +53,7 @@ } .greeting-bell-icon { - font-size: 18px; + font-size: var(--tk-font-body-sm); color: $pri-d; } @@ -94,7 +94,7 @@ } .checkin-title { - font-size: 16px; + font-size: var(--tk-font-body-sm); font-weight: 600; color: $tx; display: block; @@ -108,7 +108,7 @@ } .capsule { - font-size: 11px; + font-size: var(--tk-font-micro); padding: 3px 8px; border-radius: $r-pill; font-weight: 500; @@ -151,7 +151,7 @@ } .vital-label { - font-size: 13px; + font-size: var(--tk-font-cap); color: $tx2; display: block; margin-bottom: 6px; @@ -165,15 +165,15 @@ .vital-value { @include serif-number; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: 700; color: $tx; line-height: 1; } .vital-unit { - font-size: 12px; - color: $tx3; + font-size: var(--tk-font-micro); + color: var(--tk-text-secondary); margin-left: 3px; } @@ -183,7 +183,7 @@ } .vital-tag { - font-size: 11px; + font-size: var(--tk-font-micro); font-weight: 500; padding: 2px 8px; border-radius: $r-pill; @@ -223,13 +223,13 @@ } .reminder-title { - font-size: 15px; + font-size: var(--tk-font-cap); font-weight: 600; color: #fff; } .reminder-count { - font-size: 12px; + font-size: var(--tk-font-micro); opacity: 0.7; color: #fff; } @@ -250,7 +250,7 @@ } .reminder-tag { - font-size: 10px; + font-size: var(--tk-font-micro); padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); @@ -260,7 +260,7 @@ } .reminder-text { - font-size: 13px; + font-size: var(--tk-font-cap); flex: 1; color: #fff; overflow: hidden; @@ -305,7 +305,7 @@ } .action-btn-text { - font-size: 17px; + font-size: var(--tk-font-body-sm); font-weight: 600; } @@ -361,7 +361,7 @@ .guest-slide-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 26px; + font-size: var(--tk-font-h1); font-weight: 700; color: #FFFFFF; display: block; @@ -369,7 +369,7 @@ } .guest-slide-desc { - font-size: 16px; + font-size: var(--tk-font-body-sm); color: rgba(255, 255, 255, 0.85); display: block; } @@ -381,7 +381,7 @@ .guest-section-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: bold; color: $tx; display: block; @@ -406,7 +406,7 @@ } .guest-article-title { - font-size: 16px; + font-size: var(--tk-font-body-sm); font-weight: 600; color: $tx; display: block; @@ -417,8 +417,8 @@ } .guest-article-summary { - font-size: 13px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); display: block; overflow: hidden; text-overflow: ellipsis; @@ -431,8 +431,8 @@ } .guest-empty-text { - font-size: 14px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } /* ─── 底部登录引导 ─── */ @@ -449,7 +449,7 @@ .guest-login-text { flex: 1; - font-size: 13px; + font-size: var(--tk-font-cap); color: $tx2; } @@ -467,7 +467,7 @@ } .guest-login-btn-text { - font-size: 20px; + font-size: var(--tk-font-h2); font-weight: 600; color: #fff; } diff --git a/apps/miniprogram/src/pages/index/index.tsx b/apps/miniprogram/src/pages/index/index.tsx index fc6a179..34799ff 100644 --- a/apps/miniprogram/src/pages/index/index.tsx +++ b/apps/miniprogram/src/pages/index/index.tsx @@ -3,6 +3,7 @@ import { useState, useCallback } from 'react'; import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'; import { useAuthStore } from '../../stores/auth'; import { useUIStore } from '../../stores/ui'; +import { navigateToLogin } from '../../utils/navigate'; import { useHealthStore } from '../../stores/health'; import ProgressRing from '../../components/ProgressRing'; import Loading from '../../components/Loading'; @@ -11,7 +12,6 @@ import * as appointmentApi from '@/services/appointment'; import * as followupApi from '@/services/followup'; import { listPendingSuggestions, type AiSuggestionItem } from '@/services/ai-analysis'; import { notificationService } from '@/services/notification'; -import * as articleApi from '@/services/article'; import './index.scss'; interface ReminderItem { @@ -30,26 +30,6 @@ const CAROUSEL_SLIDES = [ ]; function GuestHome({ modeClass }: { modeClass: string }) { - const [articles, setArticles] = useState([]); - const [loading, setLoading] = useState(false); - - useDidShow(() => { - loadArticles(); - trackPageView('guest-home'); - }); - - const loadArticles = async () => { - setLoading(true); - try { - const res = await articleApi.listArticles({ page: 1, page_size: 4 }); - setArticles(res.data || []); - } catch { - // 文章加载失败不阻塞 - } finally { - setLoading(false); - } - }; - return ( {/* 轮播图 */} @@ -76,29 +56,23 @@ function GuestHome({ modeClass }: { modeClass: string }) { ))} - {/* 健康资讯 */} + {/* 功能亮点 */} - 健康资讯 - {loading ? ( - - ) : articles.length > 0 ? ( - - {articles.map((a) => ( - Taro.navigateTo({ url: `/pages/article/detail/index?id=${a.id}` })} - > - {a.title} - {a.summary && {a.summary}} - - ))} + 核心功能 + + + 健康数据管理 + 记录并追踪您的体征数据 - ) : ( - - 暂无文章 + + 智能预约排班 + 在线预约透析和治疗 - )} + + AI 健康分析 + 个性化健康趋势解读 + + {/* 底部登录引导 */} @@ -106,7 +80,7 @@ function GuestHome({ modeClass }: { modeClass: string }) { 登录后即可使用完整健康管理服务 Taro.navigateTo({ url: '/pages/login/index' })} + onClick={navigateToLogin} > 立即登录 diff --git a/apps/miniprogram/src/pages/legal/index.scss b/apps/miniprogram/src/pages/legal/index.scss index fc77055..306743d 100644 --- a/apps/miniprogram/src/pages/legal/index.scss +++ b/apps/miniprogram/src/pages/legal/index.scss @@ -8,19 +8,19 @@ } .legal-content { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; line-height: 1.8; h3 { - font-size: 34px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; margin-bottom: 12px; } h4 { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; margin-top: 24px; @@ -28,7 +28,7 @@ } p { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; margin-bottom: 8px; line-height: 1.8; @@ -41,6 +41,6 @@ } .legal-footer-text { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/pages/login/index.scss b/apps/miniprogram/src/pages/login/index.scss index 5938790..0d9d4b0 100644 --- a/apps/miniprogram/src/pages/login/index.scss +++ b/apps/miniprogram/src/pages/login/index.scss @@ -34,7 +34,7 @@ .login-logo-mark { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 48px; + font-size: var(--tk-font-hero); color: #fff; font-weight: bold; line-height: 1; @@ -42,14 +42,14 @@ .login-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); color: $tx; font-weight: bold; margin-bottom: 8px; } .login-subtitle { - font-size: 16px; + font-size: var(--tk-font-body-sm); color: $tx2; letter-spacing: 0.05em; } @@ -77,7 +77,7 @@ height: $btn-primary-h; background: $pri; color: #fff; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; border-radius: $r; border: none; @@ -122,14 +122,14 @@ } .agreement-check-mark { - font-size: 18px; + font-size: var(--tk-font-body-sm); color: #fff; font-weight: bold; line-height: 1; } .agreement-text { - font-size: 14px; + font-size: var(--tk-font-cap); color: $tx2; line-height: 1.7; } @@ -147,7 +147,7 @@ } .skip-btn { - font-size: 16px; - color: $tx3; + font-size: var(--tk-font-body-sm); + color: var(--tk-text-secondary); padding: 8px 16px; } diff --git a/apps/miniprogram/src/pages/mall/index.scss b/apps/miniprogram/src/pages/mall/index.scss index a56da8c..633d9a7 100644 --- a/apps/miniprogram/src/pages/mall/index.scss +++ b/apps/miniprogram/src/pages/mall/index.scss @@ -28,7 +28,7 @@ } .points-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: rgba(255, 255, 255, 0.85); } @@ -50,7 +50,7 @@ } .checkin-btn-text { - font-size: 24px; + font-size: var(--tk-font-h2); color: #fff; font-weight: 600; } @@ -61,7 +61,7 @@ .points-balance { @include serif-number; - font-size: 72px; + font-size: 72px; /* kept as-is: special display value */ font-weight: bold; color: #fff; display: block; @@ -71,7 +71,7 @@ } .points-streak { - font-size: 22px; + font-size: var(--tk-font-body); color: rgba(255, 255, 255, 0.7); display: block; } @@ -102,7 +102,7 @@ } .type-tab-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx2; &.active { @@ -142,7 +142,7 @@ .product-image-char { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 56px; + font-size: var(--tk-font-hero); font-weight: bold; color: $pri; line-height: 1; @@ -156,7 +156,7 @@ } .product-name { - font-size: 26px; + font-size: var(--tk-font-h1); font-weight: 600; color: $tx; display: block; @@ -180,20 +180,20 @@ .product-points-char { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: bold; color: $wrn; } .product-points-value { @include serif-number; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $wrn; } .product-stock { - font-size: 22px; + font-size: var(--tk-font-body); padding: 2px 10px; border-radius: $r-sm; @@ -212,7 +212,7 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 160px 40px; + padding: 100px 40px; } .empty-icon { @@ -226,22 +226,22 @@ .empty-char { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 52px; + font-size: var(--tk-font-hero); font-weight: bold; color: $pri; line-height: 1; } .empty-title { - font-size: 32px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $tx; margin-bottom: 12px; } .empty-hint { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-h1); + color: var(--tk-text-secondary); text-align: center; margin-bottom: 24px; } @@ -257,7 +257,7 @@ } .empty-action-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: #fff; font-weight: 600; } diff --git a/apps/miniprogram/src/pages/messages/index.scss b/apps/miniprogram/src/pages/messages/index.scss index d093977..524accf 100644 --- a/apps/miniprogram/src/pages/messages/index.scss +++ b/apps/miniprogram/src/pages/messages/index.scss @@ -4,70 +4,86 @@ .messages-page { min-height: 100vh; background: $bg; - padding-bottom: calc(120px + env(safe-area-inset-bottom)); + padding: 20px 24px 100px; + padding-bottom: calc(100px + env(safe-area-inset-bottom)); } /* ─── 页头 ─── */ .messages-header { - padding: 24px 32px 8px; + margin-bottom: 20px; } .messages-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 36px; - font-weight: bold; + @include serif-number; + font-size: var(--tk-font-h1); + font-weight: 700; color: $tx; } -/* ─── Tab 切换 ─── */ -.msg-tabs { +/* ─── 分段控件 Tab ─── */ +.msg-segment { display: flex; - padding: 16px 24px 0; gap: 0; + background: $surface-alt; + border-radius: $r-sm; + padding: 3px; + margin-bottom: 12px; } -.msg-tab { +.msg-segment-tab { flex: 1; - height: $tab-h; + height: 40px; + border-radius: $r-xs; @include flex-center; + position: relative; &:active { opacity: 0.85; } } -.msg-tab-text { - font-size: 28px; - font-weight: 600; - color: $tx2; -} +.msg-segment-active { + background: $card; + box-shadow: $shadow-sm; -.msg-tab-active .msg-tab-text { - color: $pri; -} - -.msg-tab-indicator { - padding: 0 24px; - height: 3px; - background: $bd-l; - margin-bottom: 16px; -} - -.msg-tab-bar { - width: 50%; - height: 3px; - background: $pri; - border-radius: 2px; - transition: transform 0.2s; - - &.msg-tab-bar-right { - transform: translateX(100%); + .msg-segment-text { + color: $tx; } } +.msg-segment-text { + font-size: var(--tk-font-cap); + font-weight: 600; + color: $tx3; +} + +.msg-segment-badge { + position: absolute; + top: 4px; + right: 12px; + min-width: 16px; + height: 16px; + border-radius: 8px; + background: $dan; + @include flex-center; + padding: 0 4px; +} + +.msg-segment-badge-text { + font-size: var(--tk-font-micro); + color: #fff; + font-weight: 600; +} + /* ─── 内容区 ─── */ .msg-content { - padding: 0 24px; + // wrapper +} + +.msg-list { + display: flex; + flex-direction: column; + gap: 8px; } .msg-empty { @@ -79,18 +95,18 @@ } .msg-empty-text { - font-size: 26px; + font-size: var(--tk-font-cap); color: $tx2; } /* ─── 咨询卡片 ─── */ .consult-card { display: flex; + gap: 12px; align-items: center; background: $card; border-radius: $r; - padding: 24px; - margin-bottom: 12px; + padding: 16px; box-shadow: $shadow-sm; &:active { @@ -98,53 +114,84 @@ } } -.consult-info { +.consult-card-muted { + opacity: 0.65; +} + +.consult-avatar { + width: 44px; + height: 44px; + border-radius: 22px; + background: $surface-alt; + @include flex-center; + flex-shrink: 0; +} + +.consult-avatar-active { + background: $pri-l; +} + +.consult-avatar-char { + @include serif-number; + font-size: var(--tk-font-body-sm); + font-weight: 700; + color: $tx3; +} + +.consult-avatar-active .consult-avatar-char { + color: $pri; +} + +.consult-body { flex: 1; min-width: 0; } +.consult-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 4px; + + &:last-child { + margin-bottom: 0; + } +} + .consult-doctor { - font-size: 28px; + font-size: var(--tk-font-cap); font-weight: 600; color: $tx; - display: block; - margin-bottom: 6px; -} - -.consult-preview { - font-size: 24px; - color: $tx2; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.consult-meta { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 8px; - flex-shrink: 0; - margin-left: 16px; } .consult-time { - font-size: 22px; + font-size: var(--tk-font-micro); + color: var(--tk-text-secondary); + flex-shrink: 0; +} + +.consult-preview { + font-size: var(--tk-font-cap); color: $tx2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + margin-right: 8px; } .consult-badge { - min-width: 24px; - height: 24px; - border-radius: 12px; + min-width: 18px; + height: 18px; + border-radius: 9px; background: $dan; @include flex-center; - padding: 0 6px; + padding: 0 4px; + flex-shrink: 0; } .consult-badge-text { - font-size: 18px; + font-size: var(--tk-font-micro); color: #fff; font-weight: 600; } @@ -152,43 +199,72 @@ /* ─── 通知卡片 ─── */ .notify-card { display: flex; - align-items: center; + gap: 12px; + align-items: flex-start; background: $card; border-radius: $r; - padding: 24px; - margin-bottom: 12px; + padding: 16px; box-shadow: $shadow-sm; - - &:active { - opacity: 0.85; - } } -.notify-info { +.notify-card-muted { + opacity: 0.65; +} + +.notify-icon { + width: 36px; + height: 36px; + border-radius: $r-sm; + @include flex-center; + flex-shrink: 0; +} + +.notify-icon-char { + @include serif-number; + font-size: var(--tk-font-body-sm); + font-weight: 700; +} + +.notify-body { flex: 1; min-width: 0; } -.notify-title { - font-size: 28px; - font-weight: 600; - color: $tx; - display: block; - margin-bottom: 6px; +.notify-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 4px; } -.notify-desc { - font-size: 24px; - color: $tx2; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.notify-title { + font-size: var(--tk-font-cap); + font-weight: 400; + color: $tx; +} + +.notify-title-bold { + font-weight: 600; } .notify-time { - font-size: 22px; - color: $tx2; + font-size: var(--tk-font-micro); + color: var(--tk-text-secondary); flex-shrink: 0; - margin-left: 16px; + margin-left: 8px; +} + +.notify-desc { + font-size: var(--tk-font-cap); + color: $tx2; + line-height: 1.5; +} + +.notify-dot { + width: 8px; + height: 8px; + border-radius: 4px; + background: $pri; + flex-shrink: 0; + margin-top: 6px; } diff --git a/apps/miniprogram/src/pages/pkg-health/alerts/index.scss b/apps/miniprogram/src/pages/pkg-health/alerts/index.scss index 8d42eba..e1f930b 100644 --- a/apps/miniprogram/src/pages/pkg-health/alerts/index.scss +++ b/apps/miniprogram/src/pages/pkg-health/alerts/index.scss @@ -26,7 +26,7 @@ } .alerts-tab-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } @@ -75,12 +75,12 @@ } .alert-badge-text { - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 600; } .alert-badge.sev-info .alert-badge-text { - color: $tx3; + color: var(--tk-text-secondary); } .alert-badge.sev-warning .alert-badge-text { @@ -96,12 +96,12 @@ } .alert-time { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); } .alert-title { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; line-height: 1.5; } @@ -115,14 +115,14 @@ } .alerts-empty-text { - font-size: 30px; - color: $tx3; + font-size: var(--tk-font-num); + color: var(--tk-text-secondary); margin-bottom: 16px; } .alerts-empty-hint { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-h1); + color: var(--tk-text-secondary); } .alerts-empty-action { @@ -134,5 +134,5 @@ .alerts-empty-action-text { color: $card; - font-size: 28px; + font-size: var(--tk-font-body-lg); } diff --git a/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss b/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss index df3ea09..ec8bdf2 100644 --- a/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss +++ b/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss @@ -26,20 +26,20 @@ .dm-hero-icon-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 40px; + font-size: var(--tk-font-hero); font-weight: bold; color: $pri; } .dm-hero-title { @include section-title; - font-size: 36px; + font-size: var(--tk-font-num-lg); margin-bottom: 8px; } .dm-hero-sub { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); } /* ── card (standalone, used for date picker) ── */ @@ -60,14 +60,14 @@ .dm-card-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; } .dm-card-badge { @include tag($acc-l, $acc); - font-size: 22px; + font-size: var(--tk-font-body); margin-left: auto; } @@ -82,7 +82,7 @@ } .dm-date-value { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $pri; @include serif-number; font-weight: bold; @@ -90,8 +90,8 @@ .dm-date-arrow { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); transform: rotate(180deg); display: inline-block; } @@ -118,14 +118,14 @@ .dm-group-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $tx; } .dm-group-arrow { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); transition: transform 0.2s ease; display: inline-block; } @@ -163,7 +163,7 @@ } .dm-field-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; display: block; margin-bottom: 8px; @@ -185,14 +185,14 @@ .dm-bp-slash { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 36px; - color: $tx3; + font-size: var(--tk-font-num-lg); + color: var(--tk-text-secondary); font-weight: 300; } .dm-field-unit { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); display: block; margin-top: 10px; font-style: italic; @@ -210,8 +210,8 @@ } .dm-unit-inline { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-h1); + color: var(--tk-text-secondary); white-space: nowrap; flex-shrink: 0; } @@ -221,7 +221,7 @@ background: $bg; border-radius: $r-sm; padding: 20px 24px; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; @include serif-number; box-sizing: border-box; @@ -238,7 +238,7 @@ } .dm-field-warning { - font-size: 22px; + font-size: var(--tk-font-body); color: $wrn; margin-top: 8px; display: block; @@ -269,7 +269,7 @@ } .dm-submit-text { - font-size: 32px; + font-size: var(--tk-font-num); color: white; font-weight: bold; letter-spacing: 2px; @@ -283,6 +283,6 @@ } .dm-reset-text { - font-size: 26px; - color: $tx3; + font-size: var(--tk-font-h1); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/pages/pkg-health/input/index.scss b/apps/miniprogram/src/pages/pkg-health/input/index.scss index f457d0c..260aab1 100644 --- a/apps/miniprogram/src/pages/pkg-health/input/index.scss +++ b/apps/miniprogram/src/pages/pkg-health/input/index.scss @@ -26,20 +26,20 @@ .input-hero-icon-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 40px; + font-size: var(--tk-font-hero); font-weight: bold; color: $pri; } .input-hero-title { @include section-title; - font-size: 36px; + font-size: var(--tk-font-num-lg); margin-bottom: 8px; } .input-hero-sub { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); } /* ── sync entry ── */ @@ -60,14 +60,14 @@ } .input-sync-entry-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $pri; } .input-sync-entry-hint { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); } /* ── card ── */ @@ -96,14 +96,14 @@ .input-card-indicator-char { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 24px; + font-size: var(--tk-font-h2); font-weight: bold; color: $acc; } .input-card-label { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; } @@ -119,15 +119,15 @@ } .input-picker-value { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; @include serif-number; } .input-picker-arrow { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); transform: rotate(180deg); display: inline-block; } @@ -135,7 +135,7 @@ /* ── section title ── */ .input-section-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; margin-bottom: 16px; @@ -154,7 +154,7 @@ } .input-field-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; display: block; margin-bottom: 8px; @@ -176,8 +176,8 @@ .input-bp-slash { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 36px; - color: $tx3; + font-size: var(--tk-font-num-lg); + color: var(--tk-text-secondary); font-weight: 300; } @@ -186,7 +186,7 @@ background: $bg; border-radius: $r-sm; padding: 20px 24px; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; @include serif-number; box-sizing: border-box; @@ -197,8 +197,8 @@ } .input-field-unit { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); display: block; margin-top: 10px; font-style: italic; @@ -225,7 +225,7 @@ } .input-submit-text { - font-size: 32px; + font-size: var(--tk-font-num); color: white; font-weight: bold; letter-spacing: 2px; diff --git a/apps/miniprogram/src/pages/pkg-health/trend/index.scss b/apps/miniprogram/src/pages/pkg-health/trend/index.scss index dc30984..11890ea 100644 --- a/apps/miniprogram/src/pages/pkg-health/trend/index.scss +++ b/apps/miniprogram/src/pages/pkg-health/trend/index.scss @@ -26,14 +26,14 @@ .trend-hero-icon-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 40px; + font-size: var(--tk-font-hero); font-weight: bold; color: $pri; } .trend-hero-title { @include section-title; - font-size: 36px; + font-size: var(--tk-font-num-lg); margin-bottom: 0; } @@ -59,7 +59,7 @@ } .trange-tab-text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; font-weight: 500; } @@ -91,13 +91,13 @@ } .trend-ref-label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $acc; font-weight: bold; } .trend-ref-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $acc; @include serif-number; font-weight: 500; @@ -110,7 +110,7 @@ .trend-list-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; display: block; @@ -146,7 +146,7 @@ } .trend-item-date { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; } @@ -159,7 +159,7 @@ } .trend-item-value { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $pri; @include serif-number; font-weight: bold; diff --git a/apps/miniprogram/src/pages/pkg-mall/detail/index.scss b/apps/miniprogram/src/pages/pkg-mall/detail/index.scss index 8e9be0a..81a986e 100644 --- a/apps/miniprogram/src/pages/pkg-mall/detail/index.scss +++ b/apps/miniprogram/src/pages/pkg-mall/detail/index.scss @@ -1,34 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .detail-page { min-height: 100vh; @@ -46,7 +17,7 @@ } .balance-label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; display: block; margin-bottom: 8px; @@ -54,7 +25,7 @@ .balance-value { @include serif-number; - font-size: 60px; + font-size: var(--tk-font-hero); font-weight: bold; color: $pri; display: block; @@ -79,7 +50,7 @@ .stat-value { @include serif-number; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; margin-bottom: 4px; @@ -97,7 +68,7 @@ } .stat-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } @@ -135,7 +106,7 @@ } .type-tab-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx3; .type-tab.active & { @@ -182,7 +153,7 @@ .tx-badge-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; .tx-badge-earn & { @@ -204,7 +175,7 @@ } .tx-desc { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; display: block; margin-bottom: 4px; @@ -214,7 +185,7 @@ } .tx-date { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; display: block; } @@ -229,7 +200,7 @@ .tx-amount { @include serif-number; - font-size: 32px; + font-size: var(--tk-font-num); font-weight: bold; margin-bottom: 4px; @@ -244,6 +215,6 @@ .tx-remaining { @include serif-number; - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } diff --git a/apps/miniprogram/src/pages/pkg-mall/exchange/index.scss b/apps/miniprogram/src/pages/pkg-mall/exchange/index.scss index 1d588da..266b04c 100644 --- a/apps/miniprogram/src/pages/pkg-mall/exchange/index.scss +++ b/apps/miniprogram/src/pages/pkg-mall/exchange/index.scss @@ -1,34 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .exchange-page { min-height: 100vh; @@ -58,7 +29,7 @@ .product-icon-char { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 52px; + font-size: var(--tk-font-hero); font-weight: bold; color: #FFFFFF; } @@ -69,7 +40,7 @@ } .product-name { - font-size: 32px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; display: block; @@ -113,19 +84,19 @@ } .detail-label { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx2; } .detail-value { @include serif-number; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; font-weight: bold; &.detail-cost { color: $pri; - font-size: 34px; + font-size: var(--tk-font-num-lg); } &.detail-sufficient { @@ -148,12 +119,12 @@ .notice-title { @include section-title; - font-size: 28px; + font-size: var(--tk-font-body-lg); margin-bottom: 12px; } .notice-text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; display: block; line-height: 1.7; @@ -182,19 +153,19 @@ } .footer-cost-label { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx3; } .footer-cost-num { @include serif-number; - font-size: 38px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $pri; } .footer-cost-unit { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; margin-left: 4px; } @@ -212,7 +183,7 @@ } .confirm-btn-text { - font-size: 30px; + font-size: var(--tk-font-num); color: white; font-weight: bold; } diff --git a/apps/miniprogram/src/pages/pkg-mall/orders/index.scss b/apps/miniprogram/src/pages/pkg-mall/orders/index.scss index 3dd79fe..47d5380 100644 --- a/apps/miniprogram/src/pages/pkg-mall/orders/index.scss +++ b/apps/miniprogram/src/pages/pkg-mall/orders/index.scss @@ -1,34 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .orders-page { min-height: 100vh; @@ -66,7 +37,7 @@ } .status-tab-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx3; .status-tab.active & { @@ -98,7 +69,7 @@ .order-product { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; flex: 1; @@ -116,7 +87,7 @@ } .order-status-text { - font-size: 22px; + font-size: var(--tk-font-body); font-weight: bold; } @@ -132,13 +103,13 @@ } .order-row-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx3; } .order-row-value { @include serif-number; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; &.order-cost { @@ -158,14 +129,14 @@ } .qrcode-label { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; margin-right: 8px; } .qrcode-value { @include serif-number; - font-size: 24px; + font-size: var(--tk-font-h2); color: $pri-d; font-weight: bold; flex: 1; @@ -175,7 +146,7 @@ } .qrcode-tap { - font-size: 22px; + font-size: var(--tk-font-body); color: $pri; margin-left: 8px; flex-shrink: 0; diff --git a/apps/miniprogram/src/pages/pkg-profile/consents/index.scss b/apps/miniprogram/src/pages/pkg-profile/consents/index.scss index d44ef59..7c1e2a6 100644 --- a/apps/miniprogram/src/pages/pkg-profile/consents/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/consents/index.scss @@ -1,23 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} +@import '../../../styles/mixins.scss'; .consents-page { min-height: 100vh; @@ -52,7 +34,7 @@ } .consent-card__type { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; } @@ -72,7 +54,7 @@ .consent-card__scope, .consent-card__date, .consent-card__expiry { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; display: block; margin-bottom: 4px; @@ -96,7 +78,7 @@ } .revoke-btn__text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $dan; font-weight: 500; } diff --git a/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss b/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss index b3b925c..c948da3 100644 --- a/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss @@ -1,14 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} +@import '../../../styles/mixins.scss'; .diagnoses-page { min-height: 100vh; @@ -19,7 +10,7 @@ .page-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; margin-bottom: 20px; @@ -48,7 +39,7 @@ } .diagnosis-card__name { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; flex: 1; @@ -91,19 +82,19 @@ } .diagnosis-card__code { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); font-variant-numeric: tabular-nums; } .diagnosis-card__date { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; display: block; } .diagnosis-card__notes { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; display: block; margin-top: 8px; diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss index 63bc23d..7471068 100644 --- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss @@ -1,9 +1,5 @@ @import '../../../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} +@import '../../../../styles/mixins.scss'; .detail-page { min-height: 100vh; @@ -31,7 +27,7 @@ .detail-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 34px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; } @@ -40,7 +36,7 @@ display: inline-block; padding: 4px 12px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; background: $bd-l; color: $tx3; @@ -57,7 +53,7 @@ } .header-sub { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; @include serif-number; @@ -65,7 +61,7 @@ .section-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; display: block; @@ -85,13 +81,13 @@ } .detail-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; flex-shrink: 0; } .detail-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; text-align: right; flex: 1; @@ -100,7 +96,7 @@ } .notes-text { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; line-height: 1.6; } @@ -113,6 +109,6 @@ } .empty-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx3; } diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss index d5fb96a..39a9a52 100644 --- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss @@ -1,28 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} +@import '../../../styles/mixins.scss'; .dialysis-prescriptions-page { min-height: 100vh; @@ -61,7 +38,7 @@ } .prescription-model { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; } @@ -85,14 +62,14 @@ } .meta-item { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; @include serif-number; } .prescription-date { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); display: block; @include serif-number; } diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.scss b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.scss index 6c057dd..4c73b98 100644 --- a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.scss @@ -1,9 +1,5 @@ @import '../../../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} +@import '../../../../styles/mixins.scss'; .detail-page { min-height: 100vh; @@ -31,7 +27,7 @@ .detail-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 34px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; } @@ -40,7 +36,7 @@ display: inline-block; padding: 4px 12px; border-radius: 8px; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 500; background: $bd-l; color: $tx3; @@ -57,14 +53,14 @@ } .header-sub { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; } .review-info { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); display: block; margin-top: 8px; @include serif-number; @@ -72,7 +68,7 @@ .section-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; display: block; @@ -92,13 +88,13 @@ } .detail-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; flex-shrink: 0; } .detail-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; text-align: right; flex: 1; @@ -114,6 +110,6 @@ } .empty-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx3; } diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss index 8c8609a..8e7f9e4 100644 --- a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss @@ -1,28 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} +@import '../../../styles/mixins.scss'; .dialysis-records-page { min-height: 100vh; @@ -86,7 +63,7 @@ .record-date { @include serif-number; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; margin-bottom: 8px; @@ -99,13 +76,13 @@ } .weight-item { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; @include serif-number; } .record-meta { - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); @include serif-number; } diff --git a/apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss b/apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss index 469ccd4..c0b74df 100644 --- a/apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss @@ -28,7 +28,7 @@ border-radius: $r-sm; background: $acc-l; @include flex-center; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 700; color: $acc; flex-shrink: 0; @@ -39,7 +39,7 @@ } .elder-mode-title { - font-size: 18px; + font-size: var(--tk-font-body-sm); font-weight: 700; color: $tx; display: block; @@ -47,8 +47,8 @@ } .elder-mode-desc { - font-size: 13px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } .elder-mode-status { @@ -60,7 +60,7 @@ } .elder-mode-status-text { - font-size: 15px; + font-size: var(--tk-font-cap); color: $tx2; } @@ -93,13 +93,13 @@ } } -/* ─── 效果预览 ─── */ +/* --- 效果预览 --- */ .elder-mode-preview { margin-top: 4px; } .elder-mode-preview-title { - font-size: 14px; + font-size: var(--tk-font-cap); font-weight: 600; color: $tx2; display: block; @@ -115,7 +115,7 @@ } .elder-mode-preview-sample { - font-size: 16px; + font-size: var(--tk-font-body-sm); color: $tx; display: block; margin-bottom: 8px; @@ -127,6 +127,6 @@ } .elder-mode-preview-note { - font-size: 13px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/pages/pkg-profile/family-add/index.scss b/apps/miniprogram/src/pages/pkg-profile/family-add/index.scss index c095296..f1759f7 100644 --- a/apps/miniprogram/src/pages/pkg-profile/family-add/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/family-add/index.scss @@ -1,19 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .family-add-page { min-height: 100vh; @@ -48,7 +34,7 @@ .form-label { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; flex-shrink: 0; width: 140px; @@ -57,7 +43,7 @@ .form-input { flex: 1; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; text-align: right; border: none; @@ -77,7 +63,7 @@ } .form-picker-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; margin-right: 10px; @@ -87,7 +73,7 @@ } .form-picker-arrow { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; font-family: 'Georgia', 'Times New Roman', serif; } @@ -109,7 +95,7 @@ .submit-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); color: #fff; font-weight: bold; letter-spacing: 2px; diff --git a/apps/miniprogram/src/pages/pkg-profile/family/index.scss b/apps/miniprogram/src/pages/pkg-profile/family/index.scss index a0017be..75947b4 100644 --- a/apps/miniprogram/src/pages/pkg-profile/family/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/family/index.scss @@ -1,34 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .family-page { min-height: 100vh; @@ -78,7 +49,7 @@ .family-avatar-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 36px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $pri-d; } @@ -98,14 +69,14 @@ } .family-name { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; } .family-current-tag { @include tag($pri, #fff); - font-size: 18px; + font-size: var(--tk-font-body-sm); padding: 2px 10px; } @@ -117,12 +88,12 @@ .family-relation-tag { @include tag($pri-l, $pri-d); - font-size: 22px; + font-size: var(--tk-font-body); padding: 2px 12px; } .family-gender { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -135,7 +106,7 @@ } .family-edit-text { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -152,7 +123,7 @@ .family-add-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); color: #fff; font-weight: bold; letter-spacing: 2px; diff --git a/apps/miniprogram/src/pages/pkg-profile/followups/index.scss b/apps/miniprogram/src/pages/pkg-profile/followups/index.scss index c5d469e..e663328 100644 --- a/apps/miniprogram/src/pages/pkg-profile/followups/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/followups/index.scss @@ -1,19 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} +@import '../../../styles/mixins.scss'; .my-followups-page { min-height: 100vh; @@ -38,7 +24,7 @@ } .tab-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx2; margin-bottom: 8px; @@ -82,7 +68,7 @@ .task-name { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; } @@ -104,7 +90,7 @@ } .task-desc { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; margin-bottom: 8px; @@ -115,7 +101,7 @@ .task-due { @include serif-number; - font-size: 24px; - color: $tx3; + font-size: var(--tk-font-h2); + color: var(--tk-text-secondary); display: block; } diff --git a/apps/miniprogram/src/pages/pkg-profile/health-records/index.scss b/apps/miniprogram/src/pages/pkg-profile/health-records/index.scss index 74b0023..f95610a 100644 --- a/apps/miniprogram/src/pages/pkg-profile/health-records/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/health-records/index.scss @@ -1,4 +1,5 @@ @import '../../../styles/variables.scss'; +@import '../../../styles/mixins.scss'; .health-records-page { min-height: 100vh; @@ -9,7 +10,7 @@ .page-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; margin-bottom: 20px; @@ -38,33 +39,33 @@ } .record-card__type { - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; } .record-card__date { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; font-variant-numeric: tabular-nums; } .record-card__assessment { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx; display: block; margin-bottom: 4px; } .record-card__source { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); display: block; margin-bottom: 4px; } .record-card__notes { - font-size: 22px; + font-size: var(--tk-font-body); color: $tx2; display: block; margin-top: 8px; diff --git a/apps/miniprogram/src/pages/pkg-profile/medication/index.scss b/apps/miniprogram/src/pages/pkg-profile/medication/index.scss index 05dbad1..bceeca8 100644 --- a/apps/miniprogram/src/pages/pkg-profile/medication/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/medication/index.scss @@ -1,24 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .medication-page { min-height: 100vh; @@ -63,7 +44,7 @@ .reminder-avatar-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); font-weight: bold; color: $acc; } @@ -77,7 +58,7 @@ .reminder-name { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; margin-bottom: 4px; @@ -85,7 +66,7 @@ .reminder-dosage { @include serif-number; - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx2; } @@ -133,7 +114,7 @@ } .delete-btn { - font-size: 24px; + font-size: var(--tk-font-h2); color: $dan; padding: 4px 12px; } @@ -148,7 +129,7 @@ .form-card-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $tx; margin-bottom: 20px; @@ -168,7 +149,7 @@ } .form-label { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; flex-shrink: 0; width: 160px; @@ -176,7 +157,7 @@ .form-input { flex: 1; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; text-align: right; border: none; @@ -198,12 +179,12 @@ .time-value { @include serif-number; - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx; } .time-modify { - font-size: 24px; + font-size: var(--tk-font-h2); color: $pri; } @@ -222,7 +203,7 @@ } .form-cancel-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: $tx2; } @@ -235,7 +216,7 @@ } .form-confirm-text { - font-size: 28px; + font-size: var(--tk-font-body-lg); color: #fff; font-weight: bold; } @@ -253,7 +234,7 @@ .add-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 32px; + font-size: var(--tk-font-num); color: #fff; font-weight: bold; letter-spacing: 2px; diff --git a/apps/miniprogram/src/pages/pkg-profile/reports/index.scss b/apps/miniprogram/src/pages/pkg-profile/reports/index.scss index de6880d..f5bdd88 100644 --- a/apps/miniprogram/src/pages/pkg-profile/reports/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/reports/index.scss @@ -1,34 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - -@mixin tag($bg, $color) { - display: inline-block; - padding: 4px 12px; - border-radius: 8px; - font-size: 22px; - font-weight: 500; - background: $bg; - color: $color; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .my-reports-page { min-height: 100vh; @@ -83,14 +54,14 @@ .report-avatar-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: bold; color: $pri-d; } .report-type { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; } @@ -109,7 +80,7 @@ .report-date { @include serif-number; - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; display: block; padding-left: 72px; diff --git a/apps/miniprogram/src/pages/pkg-profile/settings/index.scss b/apps/miniprogram/src/pages/pkg-profile/settings/index.scss index 8c19b3b..e082de5 100644 --- a/apps/miniprogram/src/pages/pkg-profile/settings/index.scss +++ b/apps/miniprogram/src/pages/pkg-profile/settings/index.scss @@ -1,19 +1,5 @@ @import '../../../styles/variables.scss'; - -@mixin section-title { - font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; - font-weight: bold; - color: $tx; - margin-bottom: 20px; - display: block; -} - -@mixin flex-center { - display: flex; - align-items: center; - justify-content: center; -} +@import '../../../styles/mixins.scss'; .settings-page { min-height: 100vh; @@ -61,14 +47,14 @@ .settings-icon-text { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 24px; + font-size: var(--tk-font-h2); font-weight: bold; color: $pri-d; } .settings-label { flex: 1; - font-size: 30px; + font-size: var(--tk-font-num); color: $tx; } @@ -78,7 +64,7 @@ } .settings-arrow { - font-size: 24px; + font-size: var(--tk-font-h2); color: $tx3; font-family: 'Georgia', 'Times New Roman', serif; flex-shrink: 0; diff --git a/apps/miniprogram/src/pages/profile/index.scss b/apps/miniprogram/src/pages/profile/index.scss index 4947b80..6e21606 100644 --- a/apps/miniprogram/src/pages/profile/index.scss +++ b/apps/miniprogram/src/pages/profile/index.scss @@ -31,7 +31,7 @@ .profile-avatar-char { font-family: Georgia, 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 700; color: #fff; } @@ -43,7 +43,7 @@ .profile-name { @include serif-number; - font-size: 22px; + font-size: var(--tk-font-body); font-weight: 700; color: $tx; display: block; @@ -51,13 +51,13 @@ } .profile-phone { - font-size: 14px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } .profile-arrow { - font-size: 16px; - color: $tx3; + font-size: var(--tk-font-body-sm); + color: var(--tk-text-secondary); flex-shrink: 0; } @@ -79,7 +79,7 @@ .stat-value { @include serif-number; - font-size: 28px; + font-size: var(--tk-font-body-lg); font-weight: 700; display: block; margin-bottom: 2px; @@ -94,13 +94,13 @@ } .stat-unit { - font-size: 16px; + font-size: var(--tk-font-body-sm); font-weight: 400; } .stat-label { - font-size: 13px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } /* ─── 分组菜单 ─── */ @@ -109,7 +109,7 @@ } .menu-group-title { - font-size: 14px; + font-size: var(--tk-font-cap); font-weight: 600; color: $tx2; display: block; @@ -167,7 +167,7 @@ .menu-icon-text { @include serif-number; - font-size: 16px; + font-size: var(--tk-font-body-sm); font-weight: 700; &.menu-icon-text--pri { @@ -185,13 +185,13 @@ .menu-label { flex: 1; - font-size: 15px; + font-size: var(--tk-font-cap); color: $tx; } .menu-arrow { - font-size: 14px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); flex-shrink: 0; } @@ -203,6 +203,6 @@ } .logout-text { - font-size: 14px; - color: $tx3; + font-size: var(--tk-font-cap); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/pages/profile/index.tsx b/apps/miniprogram/src/pages/profile/index.tsx index b9c17e7..78c46f1 100644 --- a/apps/miniprogram/src/pages/profile/index.tsx +++ b/apps/miniprogram/src/pages/profile/index.tsx @@ -3,6 +3,7 @@ import Taro, { useDidShow } from '@tarojs/taro'; import { useAuthStore } from '../../stores/auth'; import { usePointsStore } from '../../stores/points'; import { useUIStore } from '../../stores/ui'; +import { navigateToLogin } from '../../utils/navigate'; import './index.scss'; interface MenuItem { @@ -110,7 +111,7 @@ export default function Profile() { {/* 用户信息卡片 */} {isGuest ? ( - Taro.navigateTo({ url: '/pages/login/index' })}> + ? @@ -174,7 +175,7 @@ export default function Profile() { {/* 退出登录 / 登录 */} {isGuest ? ( - Taro.navigateTo({ url: '/pages/login/index' })}> + 登录账号 ) : ( diff --git a/apps/miniprogram/src/pages/report/detail/index.scss b/apps/miniprogram/src/pages/report/detail/index.scss index 56a60eb..e9f1bd7 100644 --- a/apps/miniprogram/src/pages/report/detail/index.scss +++ b/apps/miniprogram/src/pages/report/detail/index.scss @@ -1,4 +1,5 @@ @import '../../../styles/variables.scss'; +@import '../../../styles/mixins.scss'; .detail-page { min-height: 100vh; @@ -15,14 +16,9 @@ box-shadow: $shadow-sm; } -@mixin serif-number { - font-family: 'Georgia', 'Times New Roman', serif; - font-variant-numeric: tabular-nums; -} - .detail-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 34px; + font-size: var(--tk-font-num-lg); font-weight: bold; color: $tx; display: block; @@ -42,13 +38,13 @@ } .detail-label { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; flex-shrink: 0; } .detail-value { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx; text-align: right; flex: 1; @@ -64,7 +60,7 @@ .section-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; display: block; @@ -89,13 +85,13 @@ } .indicator-name { - font-size: 26px; + font-size: var(--tk-font-h1); color: $tx2; margin-bottom: 4px; } .indicator-value { - font-size: 30px; + font-size: var(--tk-font-num); font-weight: bold; color: $tx; @include serif-number; @@ -108,14 +104,14 @@ } .indicator-ref { - font-size: 22px; - color: $tx3; + font-size: var(--tk-font-body); + color: var(--tk-text-secondary); margin-bottom: 4px; @include serif-number; } .indicator-status { - font-size: 24px; + font-size: var(--tk-font-h2); font-weight: bold; padding: 4px 12px; border-radius: 16px; @@ -146,6 +142,6 @@ .loading-text, .empty-text { - font-size: 28px; - color: $tx3; + font-size: var(--tk-font-body-lg); + color: var(--tk-text-secondary); } diff --git a/apps/miniprogram/src/styles/elder-mode.scss b/apps/miniprogram/src/styles/elder-mode.scss index b81e6d6..260fc00 100644 --- a/apps/miniprogram/src/styles/elder-mode.scss +++ b/apps/miniprogram/src/styles/elder-mode.scss @@ -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; + } } diff --git a/apps/miniprogram/src/styles/mixins.scss b/apps/miniprogram/src/styles/mixins.scss index dfdd2f2..a2327ca 100644 --- a/apps/miniprogram/src/styles/mixins.scss +++ b/apps/miniprogram/src/styles/mixins.scss @@ -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%; diff --git a/apps/miniprogram/src/styles/tokens.scss b/apps/miniprogram/src/styles/tokens.scss index 2b42211..2dd5d41 100644 --- a/apps/miniprogram/src/styles/tokens.scss +++ b/apps/miniprogram/src/styles/tokens.scss @@ -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 — 对比度提升 }