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 — 对比度提升
}