refactor(miniprogram): 全面接入 Design Token — 68 SCSS 文件 px→var(--tk-*)
- 重写 tokens.scss：校准 10 级字号 + 4 结构 token 匹配实际设计值 - 更新 mixins.scss：4 个 mixin 引用 token 替代硬编码 - 68 SCSS 文件全面迁移：font-size px → var(--tk-font-*)，辅助文字色 → var(--tk-text-secondary) - 清理 12 个页面的本地 mixin 重复定义 - elder-mode.scss 从 530 行缩减至 ~120 行：删除所有字号/颜色覆写，仅保留结构布局 - Token 覆盖率：634 引用 / 仅 3 个特殊硬编码值（72px/80px/21px） 关怀模式通过 CSS 变量级联自动生效，消除"打地鼠"问题。
This commit is contained in:
iven
@@ -10,7 +10,7 @@
|
|||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-sm;
|
||||||
|
|
||||||
.device-icon {
|
.device-icon {
|
||||||
font-size: 48rpx;
|
font-size: var(--tk-font-h2);
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -18,14 +18,14 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.device-name {
|
.device-name {
|
||||||
font-size: 28rpx;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-status {
|
.device-status {
|
||||||
font-size: 24rpx;
|
font-size: var(--tk-font-micro);
|
||||||
margin-top: 4rpx;
|
margin-top: 4rpx;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.last-sync {
|
.last-sync {
|
||||||
font-size: 22rpx;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
margin-top: 4rpx;
|
margin-top: 4rpx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -46,6 +46,6 @@
|
|||||||
background: $pri;
|
background: $pri;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
font-size: 24rpx;
|
font-size: var(--tk-font-micro);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,20 +21,20 @@
|
|||||||
|
|
||||||
.empty-state-icon-char {
|
.empty-state-icon-char {
|
||||||
font-family: Georgia, 'Times New Roman', serif;
|
font-family: Georgia, 'Times New Roman', serif;
|
||||||
font-size: 48px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state-text {
|
.empty-state-text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state-hint {
|
.empty-state-hint {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -45,6 +45,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-state-action-text {
|
.empty-state-action-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,12 +9,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.error-state-icon {
|
.error-state-icon {
|
||||||
font-size: 80px;
|
font-size: 80px; /* hero icon — kept as-is */
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-state-text {
|
.error-state-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -27,6 +27,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.error-state-retry-text {
|
.error-state-retry-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,12 +25,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guard-icon {
|
.guard-icon {
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guard-title {
|
.guard-title {
|
||||||
font-size: 18px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -38,8 +38,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guard-desc {
|
.guard-desc {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guard-btn-text {
|
.guard-btn-text {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { View, Text } from '@tarojs/components';
|
import { View, Text } from '@tarojs/components';
|
||||||
import Taro from '@tarojs/taro';
|
import { navigateToLogin } from '../../utils/navigate';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
interface GuestGuardProps {
|
interface GuestGuardProps {
|
||||||
@@ -18,7 +18,7 @@ export default function GuestGuard({ title, desc }: GuestGuardProps) {
|
|||||||
{desc && <Text className='guard-desc'>{desc}</Text>}
|
{desc && <Text className='guard-desc'>{desc}</Text>}
|
||||||
<View
|
<View
|
||||||
className='guard-btn'
|
className='guard-btn'
|
||||||
onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}
|
onClick={navigateToLogin}
|
||||||
>
|
>
|
||||||
<Text className='guard-btn-text'>立即登录</Text>
|
<Text className='guard-btn-text'>立即登录</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -25,6 +25,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.loading-state-text {
|
.loading-state-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,13 +17,13 @@
|
|||||||
|
|
||||||
.progress-ring-percent {
|
.progress-ring-percent {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-ring-unit {
|
.progress-ring-unit {
|
||||||
font-size: 12px;
|
font-size: var(--tk-font-micro);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -39,7 +39,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
@@ -55,8 +55,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.step-label {
|
.step-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|||||||
@@ -13,8 +13,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trend-chart-empty-text {
|
.trend-chart-empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.trend-chart-skeleton {
|
.trend-chart-skeleton {
|
||||||
|
|||||||
@@ -14,13 +14,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.week-arrow {
|
.week-arrow {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.week-label {
|
.week-label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@@ -39,13 +39,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell-weekday {
|
.cell-weekday {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-date {
|
.cell-date {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.meta-item {
|
.meta-item {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -45,7 +45,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
@@ -57,7 +57,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -69,7 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.report-content {
|
.report-content {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -78,8 +78,8 @@
|
|||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 120px 0;
|
padding: 120px 0;
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.auto-badge {
|
.auto-badge {
|
||||||
@@ -91,7 +91,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 16px;
|
padding: 4px 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: #f0e6ff;
|
background: #f0e6ff;
|
||||||
color: #7c3aed;
|
color: #7c3aed;
|
||||||
@@ -106,7 +106,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trend-tip-text {
|
.trend-tip-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: #92400e;
|
color: #92400e;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-report-page {
|
.ai-report-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -55,7 +32,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-type {
|
.card-type {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -87,19 +64,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-time {
|
.card-time {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-model {
|
.card-model {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-more {
|
.no-more {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
padding: 24px 0;
|
padding: 24px 0;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -55,7 +55,7 @@
|
|||||||
|
|
||||||
.dept-initial-text {
|
.dept-initial-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
|
|
||||||
@@ -65,7 +65,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dept-label {
|
.dept-label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
|
|
||||||
.slot-section-title {
|
.slot-section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
@@ -114,14 +114,14 @@
|
|||||||
|
|
||||||
.slot-time {
|
.slot-time {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slot-count {
|
.slot-count {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
@@ -156,7 +156,7 @@
|
|||||||
|
|
||||||
.confirm-icon-serif {
|
.confirm-icon-serif {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
@@ -169,12 +169,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.confirm-label {
|
.confirm-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-value {
|
.confirm-value {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -185,7 +185,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.confirm-dept-text {
|
.confirm-dept-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
@@ -225,7 +225,7 @@
|
|||||||
|
|
||||||
.doctor-avatar-text {
|
.doctor-avatar-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@@ -238,18 +238,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.doctor-name {
|
.doctor-name {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-title {
|
.doctor-title {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doctor-specialty {
|
.doctor-specialty {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -263,7 +263,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.doctor-check-text {
|
.doctor-check-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@@ -274,7 +274,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -284,7 +284,7 @@
|
|||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
padding: 24px 28px;
|
padding: 24px 28px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -298,8 +298,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-text {
|
.empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 底部操作栏 */
|
/* 底部操作栏 */
|
||||||
@@ -339,7 +339,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-text {
|
.btn-text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,14 +23,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.back-text {
|
.back-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-title {
|
.header-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -80,19 +80,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-tag-text {
|
.status-tag-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-doctor {
|
.status-doctor {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dept {
|
.status-dept {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -130,7 +130,7 @@
|
|||||||
|
|
||||||
.info-icon-serif {
|
.info-icon-serif {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
background: $pri-l;
|
background: $pri-l;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
@@ -143,12 +143,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value {
|
.info-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -163,8 +163,8 @@
|
|||||||
|
|
||||||
.info-id {
|
.info-id {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@@ -180,7 +180,7 @@
|
|||||||
|
|
||||||
.tips-title {
|
.tips-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $wrn;
|
color: $wrn;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
@@ -188,7 +188,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tips-text {
|
.tips-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -219,7 +219,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cancel-text {
|
.cancel-text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $dan;
|
color: $dan;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,13 +17,13 @@
|
|||||||
.page-title {
|
.page-title {
|
||||||
@include section-title;
|
@include section-title;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-subtitle {
|
.page-subtitle {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
|
|
||||||
.dept-initial-text {
|
.dept-initial-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.doctor-name {
|
.doctor-name {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -93,7 +93,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dept-tag-text {
|
.dept-tag-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
@@ -124,7 +124,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-tag-text {
|
.status-tag-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -157,12 +157,12 @@
|
|||||||
|
|
||||||
.info-icon-serif {
|
.info-icon-serif {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-text {
|
.info-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -186,7 +186,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fab-text {
|
.fab-text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-title {
|
.article-title {
|
||||||
font-size: 38px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-category {
|
.article-category {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
background: $pri-l;
|
background: $pri-l;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
@@ -37,13 +37,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-author {
|
.article-author {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-date {
|
.article-date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-summary {
|
.article-summary {
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.summary-text {
|
.summary-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
@@ -93,6 +93,6 @@
|
|||||||
|
|
||||||
.loading-text,
|
.loading-text,
|
||||||
.empty-text {
|
.empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 12px 28px;
|
padding: 12px 28px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
@@ -52,7 +52,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-card-title {
|
.article-card-title {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-card-summary {
|
.article-card-summary {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -83,7 +83,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-card-tag {
|
.article-card-tag {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
background: $pri-l;
|
background: $pri-l;
|
||||||
padding: 2px 12px;
|
padding: 2px 12px;
|
||||||
@@ -91,7 +91,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-card-date {
|
.article-card-date {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -116,8 +116,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-text {
|
.empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-hint {
|
.loading-hint {
|
||||||
@@ -126,6 +126,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.loading-text {
|
.loading-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,61 +8,108 @@
|
|||||||
background: $bg;
|
background: $bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── 导航栏 ─── */
|
||||||
.chat-header {
|
.chat-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 24px 32px;
|
padding: 12px 16px;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-bottom: 1px solid $bd;
|
border-bottom: 1px solid $bd-l;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
&__title {
|
.chat-header__back {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
position: absolute;
|
||||||
font-size: 30px;
|
left: 16px;
|
||||||
font-weight: 600;
|
z-index: 1;
|
||||||
color: $tx;
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__status {
|
.chat-header__back-text {
|
||||||
font-size: 24px;
|
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;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── 消息区 ─── */
|
||||||
.chat-messages {
|
.chat-messages {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 24px;
|
padding: 16px 16px 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-row {
|
.msg-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 16px;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
&--self {
|
&--self {
|
||||||
justify-content: flex-end;
|
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 {
|
.msg-bubble {
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
padding: 20px 24px;
|
padding: 12px 16px;
|
||||||
border-radius: $r-lg;
|
box-shadow: $shadow-sm;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&--other {
|
&--other {
|
||||||
background: $card;
|
background: $card;
|
||||||
border-top-left-radius: $r-sm;
|
border-radius: $r $r $r $r-xs;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--self {
|
&--self {
|
||||||
background: $pri;
|
background: $pri;
|
||||||
border-top-right-radius: $r-sm;
|
border-radius: $r $r $r-xs $r;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-text {
|
.msg-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -76,88 +123,95 @@
|
|||||||
.msg-date-divider {
|
.msg-date-divider {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 16px 0 12px;
|
padding: 12px 0;
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-micro);
|
||||||
color: #94A3B8;
|
color: var(--tk-text-secondary);
|
||||||
background: #F1F5F9;
|
background: $surface-alt;
|
||||||
padding: 4px 16px;
|
padding: 2px 12px;
|
||||||
border-radius: 8px;
|
border-radius: $r-pill;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-image {
|
.msg-image {
|
||||||
width: 320px;
|
width: 200px;
|
||||||
border-radius: 12px;
|
border-radius: $r-sm;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-time {
|
.msg-time {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 4px;
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
.msg-bubble--self & {
|
.msg-bubble--self & {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-empty {
|
.chat-empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 120px 32px;
|
padding: 80px 24px;
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── 输入栏 ─── */
|
||||||
.chat-input-bar {
|
.chat-input-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16px 24px;
|
gap: 10px;
|
||||||
|
padding: 10px 16px 38px;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-top: 1px solid $bd;
|
border-top: 1px solid $bd-l;
|
||||||
padding-bottom: calc(16px + env(safe-area-inset-bottom));
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input {
|
.chat-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
height: 40px;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
border-radius: $r;
|
border: 1.5px solid $bd;
|
||||||
padding: 16px 20px;
|
border-radius: 20px;
|
||||||
font-size: 28px;
|
padding: 0 14px;
|
||||||
margin-right: 16px;
|
font-size: var(--tk-font-cap);
|
||||||
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-send-btn {
|
.chat-send-btn {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
background: $pri;
|
background: $pri;
|
||||||
border-radius: $r;
|
@include flex-center;
|
||||||
padding: 16px 28px;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 2px 6px rgba(196, 98, 58, 0.3);
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__text {
|
.chat-send-btn__icon {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-cap);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-closed-bar {
|
.chat-closed-bar {
|
||||||
padding: 24px;
|
padding: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-top: 1px solid $bd;
|
border-top: 1px solid $bd-l;
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,26 +6,36 @@
|
|||||||
background: $bg;
|
background: $bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 页头 ─── */
|
.consultation-body {
|
||||||
.consultation-header {
|
padding: 12px 24px 24px;
|
||||||
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-subtitle {
|
.consultation-subtitle {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-cap);
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
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 {
|
.consultation-error {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -47,51 +57,52 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 160px 40px;
|
padding: 120px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-icon {
|
.empty-icon {
|
||||||
width: 120px;
|
width: 80px;
|
||||||
height: 120px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: $pri-l;
|
background: $pri-l;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-char {
|
.empty-char {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
@include serif-number;
|
||||||
font-size: 52px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: 700;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-title {
|
.empty-title {
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-hint {
|
.empty-hint {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 会话列表 ─── */
|
/* ─── 会话列表 ─── */
|
||||||
.session-list {
|
.session-list {
|
||||||
padding: 20px 24px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-card {
|
.session-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 24px;
|
padding: 16px;
|
||||||
margin-bottom: 12px;
|
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-sm;
|
||||||
|
|
||||||
&:active {
|
&: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;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
@@ -108,56 +139,73 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-subject {
|
.session-subject {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: $tx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-right: 12px;
|
margin-right: 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-time {
|
.session-time {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
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 {
|
.session-badge {
|
||||||
background: $dan;
|
background: $dan;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
min-width: 36px;
|
min-width: 18px;
|
||||||
height: 36px;
|
height: 18px;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
padding: 0 10px;
|
padding: 0 5px;
|
||||||
margin-left: 12px;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-badge-text {
|
.session-badge-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-micro);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,5 @@
|
|||||||
@import '../../styles/variables.scss';
|
@import '../../styles/variables.scss';
|
||||||
|
@import '../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.device-sync-page {
|
.device-sync-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -43,9 +14,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sync-header-title {
|
.sync-header-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
@include section-title;
|
||||||
font-size: 40px;
|
color: $card;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-section {
|
.sync-section {
|
||||||
@@ -72,20 +42,17 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-hero-title {
|
.sync-hero-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
@include section-title;
|
||||||
font-size: 34px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $tx;
|
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-hero-desc {
|
.sync-hero-desc {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -110,7 +77,7 @@
|
|||||||
|
|
||||||
.sync-action-text {
|
.sync-action-text {
|
||||||
color: $card;
|
color: $card;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -120,7 +87,7 @@
|
|||||||
|
|
||||||
.sync-section-title {
|
.sync-section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
@@ -144,19 +111,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sync-device-name {
|
.sync-device-name {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-device-adapter {
|
.sync-device-adapter {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-device-rssi {
|
.sync-device-rssi {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -183,7 +150,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sync-status-text {
|
.sync-status-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -208,12 +175,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sync-reading-type {
|
.sync-reading-type {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-reading-value {
|
.sync-reading-value {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
@@ -222,8 +189,8 @@
|
|||||||
.sync-readings-count {
|
.sync-readings-count {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -240,7 +207,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sync-error-text {
|
.sync-error-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -250,7 +217,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sync-loading-text {
|
.sync-loading-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -273,20 +240,17 @@
|
|||||||
@include flex-center;
|
@include flex-center;
|
||||||
color: $acc;
|
color: $acc;
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-result-title {
|
.sync-result-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
@include section-title;
|
||||||
font-size: 34px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $tx;
|
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sync-result-count {
|
.sync-result-count {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.inbox-tab-text {
|
.inbox-tab-text {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -64,20 +64,20 @@
|
|||||||
|
|
||||||
.inbox-type-tag {
|
.inbox-type-tag {
|
||||||
color: $card;
|
color: $card;
|
||||||
font-size: 10px;
|
font-size: var(--tk-font-micro);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inbox-card-title {
|
.inbox-card-title {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inbox-card-desc {
|
.inbox-card-desc {
|
||||||
font-size: 12px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -87,7 +87,7 @@
|
|||||||
padding: 80px 0;
|
padding: 80px 0;
|
||||||
|
|
||||||
.inbox-empty-text {
|
.inbox-empty-text {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -112,13 +112,13 @@
|
|||||||
border-bottom: 1px solid $bd-l;
|
border-bottom: 1px solid $bd-l;
|
||||||
|
|
||||||
.dialog-title {
|
.dialog-title {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog-close {
|
.dialog-close {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dialog-patient {
|
.dialog-patient {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
@@ -156,13 +156,13 @@
|
|||||||
|
|
||||||
.thread-content {
|
.thread-content {
|
||||||
.thread-label {
|
.thread-label {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-time {
|
.thread-time {
|
||||||
font-size: 11px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -178,7 +178,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
&.primary { background: $pri; color: $card; }
|
&.primary { background: $pri; color: $card; }
|
||||||
|
|||||||
@@ -18,13 +18,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__time {
|
&__time {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-severity {
|
.detail-severity {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
@@ -51,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-status {
|
.detail-status {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
|
|
||||||
@@ -84,24 +84,24 @@
|
|||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-sm;
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__value {
|
&__value {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
|
||||||
&--id {
|
&--id {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--detail {
|
&--detail {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -125,7 +125,7 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
line-height: 88px;
|
line-height: 88px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: $r-lg;
|
border-radius: $r-lg;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -16,13 +16,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-list-title {
|
.alert-list-title {
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-list-count {
|
.alert-list-count {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
padding: 10px 24px;
|
padding: 10px 24px;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -92,13 +92,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__time {
|
&__time {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-severity {
|
.alert-severity {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
@@ -125,7 +125,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-status {
|
.alert-status {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
|
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
|
||||||
&__btn {
|
&__btn {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
|
|
||||||
@@ -168,7 +168,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,13 +18,13 @@
|
|||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__close {
|
&__close {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
}
|
}
|
||||||
@@ -63,7 +63,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg-text {
|
.msg-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -76,7 +76,7 @@
|
|||||||
|
|
||||||
.msg-time {
|
.msg-time {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
@@ -92,7 +92,7 @@
|
|||||||
padding: 120px 32px;
|
padding: 120px 32px;
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -126,7 +126,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $card;
|
color: $card;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -139,7 +139,7 @@
|
|||||||
border-top: 1px solid $bd;
|
border-top: 1px solid $bd;
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 24px 0;
|
padding: 24px 0;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__subject {
|
&__subject {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__status-text {
|
&__status-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -96,12 +96,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__time {
|
&__time {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__preview {
|
&__preview {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -123,7 +123,7 @@
|
|||||||
|
|
||||||
&__badge-text {
|
&__badge-text {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $card;
|
color: $card;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -137,7 +137,7 @@
|
|||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
|
||||||
&__btn {
|
&__btn {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
|
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../../styles/variables.scss';
|
@import '../../../../styles/variables.scss';
|
||||||
|
@import '../../../../styles/mixins.scss';
|
||||||
|
|
||||||
.create-page {
|
.create-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -16,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -41,7 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
@@ -50,12 +51,12 @@
|
|||||||
.form-input {
|
.form-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-value {
|
.form-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
|
|
||||||
&.placeholder {
|
&.placeholder {
|
||||||
@@ -66,7 +67,7 @@
|
|||||||
.form-textarea {
|
.form-textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
@@ -91,7 +92,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submit-btn__text {
|
.submit-btn__text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../../styles/variables.scss';
|
@import '../../../../styles/variables.scss';
|
||||||
|
@import '../../../../styles/mixins.scss';
|
||||||
|
|
||||||
.dialysis-detail {
|
.dialysis-detail {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -16,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -31,7 +32,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.record-header__title {
|
.record-header__title {
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
@@ -41,7 +42,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
|
|
||||||
@@ -57,13 +58,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.record-sub {
|
.record-sub {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-info {
|
.review-info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
@@ -82,12 +83,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -98,7 +99,7 @@
|
|||||||
.error-text {
|
.error-text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 120px 0;
|
padding: 120px 0;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -150,6 +151,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.action-btn__text {
|
.action-btn__text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.scss';
|
||||||
|
|
||||||
.dialysis-page {
|
.dialysis-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -15,7 +16,7 @@
|
|||||||
background: $bg;
|
background: $bg;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -52,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab-text {
|
.tab-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -61,7 +62,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.record-count {
|
.record-count {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
padding: 8px 0 16px;
|
padding: 8px 0 16px;
|
||||||
}
|
}
|
||||||
@@ -89,7 +90,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background: $pri-l;
|
background: $pri-l;
|
||||||
color: $pri-d;
|
color: $pri-d;
|
||||||
@@ -109,7 +110,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
|
|
||||||
@@ -131,13 +132,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.record-card__date {
|
.record-card__date {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-card__meta {
|
.record-card__meta {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
@@ -154,7 +155,7 @@
|
|||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
@@ -163,7 +164,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.page-info {
|
.page-info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -187,7 +188,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fab-text {
|
.fab-text {
|
||||||
font-size: 40px;
|
font-size: var(--tk-font-hero);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,13 +28,13 @@
|
|||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__status {
|
&__status {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -60,12 +60,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value {
|
.info-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -77,14 +77,14 @@
|
|||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -99,14 +99,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__date {
|
&__date {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@@ -121,7 +121,7 @@
|
|||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
color: $card;
|
color: $card;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -130,7 +130,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -143,7 +143,7 @@
|
|||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -154,7 +154,7 @@
|
|||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@@ -171,7 +171,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $card;
|
color: $card;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -181,5 +181,5 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 80px 32px;
|
padding: 80px 32px;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
.tab {
|
.tab {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 24px 16px;
|
padding: 24px 16px;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
padding: 20px 28px;
|
padding: 20px 28px;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -75,19 +75,19 @@
|
|||||||
|
|
||||||
&__type {
|
&__type {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__status {
|
&__status {
|
||||||
@include tag(transparent, $tx2);
|
@include tag(transparent, $tx2);
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__patient {
|
&__patient {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -99,7 +99,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__date {
|
&__date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,19 +13,18 @@
|
|||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
@include section-title;
|
@include section-title;
|
||||||
font-size: 40px;
|
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__greeting {
|
&__greeting {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__date {
|
&__date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -48,19 +47,19 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__alert-text {
|
&__alert-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__alert-link {
|
&__alert-link {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@@ -73,7 +72,7 @@
|
|||||||
background: $surface-alt;
|
background: $surface-alt;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -113,14 +112,14 @@
|
|||||||
background: $pri-l;
|
background: $pri-l;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__card-num {
|
&__card-num {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 48px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -128,7 +127,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__card-label {
|
&__card-label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -145,7 +144,7 @@
|
|||||||
|
|
||||||
&__logout {
|
&__logout {
|
||||||
color: $dan;
|
color: $dan;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-h2);
|
||||||
padding: 16px 48px;
|
padding: 16px 48px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@@ -172,7 +171,7 @@
|
|||||||
background: $acc-l;
|
background: $acc-l;
|
||||||
color: $acc;
|
color: $acc;
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -192,14 +191,14 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
background: $dan;
|
background: $dan;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 18px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,12 +33,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value {
|
.info-value {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -51,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.warning-label {
|
.warning-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $wrn;
|
color: $wrn;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.warning-text {
|
.warning-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $pri-d;
|
color: $pri-d;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -68,14 +68,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.info-block-label {
|
.info-block-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-block-text {
|
.info-block-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -96,7 +96,7 @@
|
|||||||
|
|
||||||
.vital-value {
|
.vital-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -104,7 +104,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vital-label {
|
.vital-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -116,13 +116,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
|
|
||||||
@@ -151,18 +151,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__type {
|
&__type {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__date {
|
&__date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__abnormal {
|
&__abnormal {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -180,7 +180,7 @@
|
|||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
background: $pri;
|
background: $pri;
|
||||||
color: $card;
|
color: $card;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@@ -196,5 +196,5 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 80px 32px;
|
padding: 80px 32px;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-sm;
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
padding: 10px 24px;
|
padding: 10px 24px;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
|
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -75,14 +75,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__meta {
|
&__meta {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -112,7 +112,7 @@
|
|||||||
background: $pri-l;
|
background: $pri-l;
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,7 +124,7 @@
|
|||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
|
||||||
&__btn {
|
&__btn {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
|
|
||||||
@@ -134,7 +134,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../../styles/variables.scss';
|
@import '../../../../styles/variables.scss';
|
||||||
|
@import '../../../../styles/mixins.scss';
|
||||||
|
|
||||||
.create-page {
|
.create-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -16,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -36,7 +37,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
@@ -45,12 +46,12 @@
|
|||||||
.form-input {
|
.form-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-value {
|
.form-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
|
|
||||||
&.placeholder {
|
&.placeholder {
|
||||||
@@ -61,7 +62,7 @@
|
|||||||
.form-textarea {
|
.form-textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
@@ -86,7 +87,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submit-btn__text {
|
.submit-btn__text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../../styles/variables.scss';
|
@import '../../../../styles/variables.scss';
|
||||||
|
@import '../../../../styles/mixins.scss';
|
||||||
|
|
||||||
.prescription-detail {
|
.prescription-detail {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -16,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -31,7 +32,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rx-header__title {
|
.rx-header__title {
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -40,7 +41,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
|
|
||||||
@@ -51,7 +52,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rx-sub {
|
.rx-sub {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
@@ -69,12 +70,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -83,7 +84,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notes-text {
|
.notes-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -91,7 +92,7 @@
|
|||||||
.error-text {
|
.error-text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 120px 0;
|
padding: 120px 0;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -131,6 +132,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.action-btn__text {
|
.action-btn__text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.scss';
|
||||||
|
|
||||||
.prescription-page {
|
.prescription-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -15,7 +16,7 @@
|
|||||||
background: $bg;
|
background: $bg;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -52,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab-text {
|
.tab-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -61,7 +62,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.prescription-count {
|
.prescription-count {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
padding: 8px 0 16px;
|
padding: 8px 0 16px;
|
||||||
}
|
}
|
||||||
@@ -86,7 +87,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.prescription-card__model {
|
.prescription-card__model {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -95,7 +96,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
|
|
||||||
@@ -112,13 +113,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.prescription-card__meta {
|
.prescription-card__meta {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prescription-card__date {
|
.prescription-card__date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
@@ -136,7 +137,7 @@
|
|||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
@@ -145,7 +146,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.page-info {
|
.page-info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -169,7 +170,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fab-text {
|
.fab-text {
|
||||||
font-size: 40px;
|
font-size: var(--tk-font-hero);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,13 +28,13 @@
|
|||||||
|
|
||||||
&__type {
|
&__type {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__status {
|
&__status {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -45,13 +45,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.report-date {
|
.report-date {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-info {
|
.review-info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $acc;
|
color: $acc;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.indicator-cell {
|
.indicator-cell {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
|
|
||||||
&--name {
|
&--name {
|
||||||
flex: 2;
|
flex: 2;
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.indicator-row--header & {
|
.indicator-row--header & {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notes-text {
|
.notes-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -140,7 +140,7 @@
|
|||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $card;
|
color: $card;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -168,5 +168,5 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 80px 32px;
|
padding: 80px 32px;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-sm;
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -56,13 +56,13 @@
|
|||||||
|
|
||||||
&__type {
|
&__type {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__date {
|
&__date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -73,13 +73,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__abnormal {
|
&__abnormal {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__normal {
|
&__normal {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $acc;
|
color: $acc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,34 +1,5 @@
|
|||||||
@import '../../styles/variables.scss';
|
@import '../../styles/variables.scss';
|
||||||
|
@import '../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-page {
|
.events-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -43,14 +14,14 @@
|
|||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 40px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -77,7 +48,7 @@
|
|||||||
|
|
||||||
&__status {
|
&__status {
|
||||||
@include tag($bd-l, $tx2);
|
@include tag($bd-l, $tx2);
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__status--published {
|
&__status--published {
|
||||||
@@ -97,7 +68,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__points {
|
&__points {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $wrn;
|
color: $wrn;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
@@ -105,7 +76,7 @@
|
|||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -113,7 +84,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__desc {
|
&__desc {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
@@ -128,13 +99,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__date {
|
&__date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__location {
|
&__location {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
@@ -146,8 +117,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__participants {
|
&__participants {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -161,7 +132,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-text {
|
&-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $card;
|
color: $card;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
.detail-title {
|
.detail-title {
|
||||||
@include section-title;
|
@include section-title;
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,12 +34,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
|
|
||||||
&.status-completed { color: $acc; }
|
&.status-completed { color: $acc; }
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.countdown-text {
|
.countdown-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $wrn;
|
color: $wrn;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
@@ -74,7 +74,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-desc-text {
|
.detail-desc-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -94,7 +94,7 @@
|
|||||||
.submit-textarea {
|
.submit-textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
@@ -121,7 +121,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submit-btn-text {
|
.submit-btn-text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -134,6 +134,6 @@
|
|||||||
|
|
||||||
.loading-text,
|
.loading-text,
|
||||||
.empty-text {
|
.empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,11 +10,12 @@
|
|||||||
|
|
||||||
/* ─── 页头 ─── */
|
/* ─── 页头 ─── */
|
||||||
.health-header {
|
.health-header {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.health-title {
|
.health-title {
|
||||||
font-size: 22px;
|
@include serif-number;
|
||||||
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -40,6 +41,7 @@
|
|||||||
|
|
||||||
&.vital-tab-active {
|
&.vital-tab-active {
|
||||||
background: $pri;
|
background: $pri;
|
||||||
|
box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25);
|
||||||
|
|
||||||
.vital-tab-text {
|
.vital-tab-text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -48,7 +50,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vital-tab-text {
|
.vital-tab-text {
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
@@ -65,11 +67,11 @@
|
|||||||
|
|
||||||
/* ─── 录入区 ─── */
|
/* ─── 录入区 ─── */
|
||||||
.input-section {
|
.input-section {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 20px;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 16px;
|
padding: 20px;
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
@@ -77,8 +79,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-label {
|
.input-label {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
@@ -90,7 +92,7 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -98,13 +100,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-ref {
|
.input-ref {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-label--secondary {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
/* ─── 血糖时段选择 ─── */
|
/* ─── 血糖时段选择 ─── */
|
||||||
.period-group {
|
.period-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -133,7 +139,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.period-btn-text {
|
.period-btn-text {
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
@@ -145,7 +151,8 @@
|
|||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
background: $pri;
|
background: $pri;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
margin-top: 12px;
|
margin-top: 20px;
|
||||||
|
box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
@@ -153,7 +160,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.save-btn-text {
|
.save-btn-text {
|
||||||
font-size: 17px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@@ -176,7 +183,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trend-empty-text {
|
.trend-empty-text {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -195,6 +202,25 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 12px 8px;
|
padding: 12px 8px;
|
||||||
gap: 0;
|
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 {
|
.trend-bar-col {
|
||||||
@@ -222,8 +248,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trend-bar-label {
|
.trend-bar-label {
|
||||||
font-size: 11px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -256,7 +282,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.device-icon-text {
|
.device-icon-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-info {
|
.device-info {
|
||||||
@@ -265,21 +291,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.device-name {
|
.device-name {
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-desc {
|
.device-desc {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $acc;
|
color: $acc;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-arrow {
|
.device-arrow {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -296,37 +322,38 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.article-entry-text {
|
.article-entry-text {
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── AI 建议卡片 ─── */
|
/* ─── AI 建议卡片 ─── */
|
||||||
.ai-suggestion-card {
|
.ai-suggestion-card {
|
||||||
background: $card;
|
background: $acc-l;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 20px;
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: none;
|
||||||
border-left: 4px solid $pri;
|
border-left: 4px solid $acc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ai-card-header {
|
.ai-card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ai-card-title {
|
.ai-card-title {
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $acc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ai-card-count {
|
.ai-card-count {
|
||||||
font-size: 12px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $acc;
|
color: $acc;
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ai-suggestion-item {
|
.ai-suggestion-item {
|
||||||
@@ -344,6 +371,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ai-suggestion-text {
|
.ai-suggestion-text {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
.greeting-text {
|
.greeting-text {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -34,8 +34,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.greeting-date {
|
.greeting-date {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.greeting-bell {
|
.greeting-bell {
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.greeting-bell-icon {
|
.greeting-bell-icon {
|
||||||
font-size: 18px;
|
font-size: var(--tk-font-body-sm);
|
||||||
color: $pri-d;
|
color: $pri-d;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,7 +94,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.checkin-title {
|
.checkin-title {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -108,7 +108,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.capsule {
|
.capsule {
|
||||||
font-size: 11px;
|
font-size: var(--tk-font-micro);
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -151,7 +151,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vital-label {
|
.vital-label {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
@@ -165,15 +165,15 @@
|
|||||||
|
|
||||||
.vital-value {
|
.vital-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vital-unit {
|
.vital-unit {
|
||||||
font-size: 12px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -183,7 +183,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vital-tag {
|
.vital-tag {
|
||||||
font-size: 11px;
|
font-size: var(--tk-font-micro);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
@@ -223,13 +223,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reminder-title {
|
.reminder-title {
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reminder-count {
|
.reminder-count {
|
||||||
font-size: 12px;
|
font-size: var(--tk-font-micro);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@@ -250,7 +250,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reminder-tag {
|
.reminder-tag {
|
||||||
font-size: 10px;
|
font-size: var(--tk-font-micro);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
@@ -260,7 +260,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reminder-text {
|
.reminder-text {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -305,7 +305,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.action-btn-text {
|
.action-btn-text {
|
||||||
font-size: 17px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -361,7 +361,7 @@
|
|||||||
|
|
||||||
.guest-slide-title {
|
.guest-slide-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -369,7 +369,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guest-slide-desc {
|
.guest-slide-desc {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
color: rgba(255, 255, 255, 0.85);
|
color: rgba(255, 255, 255, 0.85);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -381,7 +381,7 @@
|
|||||||
|
|
||||||
.guest-section-title {
|
.guest-section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -406,7 +406,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guest-article-title {
|
.guest-article-title {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -417,8 +417,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guest-article-summary {
|
.guest-article-summary {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -431,8 +431,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guest-empty-text {
|
.guest-empty-text {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 底部登录引导 ─── */
|
/* ─── 底部登录引导 ─── */
|
||||||
@@ -449,7 +449,7 @@
|
|||||||
|
|
||||||
.guest-login-text {
|
.guest-login-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -467,7 +467,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guest-login-btn-text {
|
.guest-login-btn-text {
|
||||||
font-size: 20px;
|
font-size: var(--tk-font-h2);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { useState, useCallback } from 'react';
|
|||||||
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
|
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
|
||||||
import { useAuthStore } from '../../stores/auth';
|
import { useAuthStore } from '../../stores/auth';
|
||||||
import { useUIStore } from '../../stores/ui';
|
import { useUIStore } from '../../stores/ui';
|
||||||
|
import { navigateToLogin } from '../../utils/navigate';
|
||||||
import { useHealthStore } from '../../stores/health';
|
import { useHealthStore } from '../../stores/health';
|
||||||
import ProgressRing from '../../components/ProgressRing';
|
import ProgressRing from '../../components/ProgressRing';
|
||||||
import Loading from '../../components/Loading';
|
import Loading from '../../components/Loading';
|
||||||
@@ -11,7 +12,6 @@ import * as appointmentApi from '@/services/appointment';
|
|||||||
import * as followupApi from '@/services/followup';
|
import * as followupApi from '@/services/followup';
|
||||||
import { listPendingSuggestions, type AiSuggestionItem } from '@/services/ai-analysis';
|
import { listPendingSuggestions, type AiSuggestionItem } from '@/services/ai-analysis';
|
||||||
import { notificationService } from '@/services/notification';
|
import { notificationService } from '@/services/notification';
|
||||||
import * as articleApi from '@/services/article';
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
interface ReminderItem {
|
interface ReminderItem {
|
||||||
@@ -30,26 +30,6 @@ const CAROUSEL_SLIDES = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
function GuestHome({ modeClass }: { modeClass: string }) {
|
function GuestHome({ modeClass }: { modeClass: string }) {
|
||||||
const [articles, setArticles] = useState<articleApi.Article[]>([]);
|
|
||||||
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 (
|
return (
|
||||||
<View className={`guest-page ${modeClass}`}>
|
<View className={`guest-page ${modeClass}`}>
|
||||||
{/* 轮播图 */}
|
{/* 轮播图 */}
|
||||||
@@ -76,29 +56,23 @@ function GuestHome({ modeClass }: { modeClass: string }) {
|
|||||||
))}
|
))}
|
||||||
</Swiper>
|
</Swiper>
|
||||||
|
|
||||||
{/* 健康资讯 */}
|
{/* 功能亮点 */}
|
||||||
<View className='guest-section'>
|
<View className='guest-section'>
|
||||||
<Text className='guest-section-title'>健康资讯</Text>
|
<Text className='guest-section-title'>核心功能</Text>
|
||||||
{loading ? (
|
<View className='guest-articles'>
|
||||||
<Loading />
|
<View className='guest-article-card'>
|
||||||
) : articles.length > 0 ? (
|
<Text className='guest-article-title'>健康数据管理</Text>
|
||||||
<View className='guest-articles'>
|
<Text className='guest-article-summary'>记录并追踪您的体征数据</Text>
|
||||||
{articles.map((a) => (
|
|
||||||
<View
|
|
||||||
key={a.id}
|
|
||||||
className='guest-article-card'
|
|
||||||
onClick={() => Taro.navigateTo({ url: `/pages/article/detail/index?id=${a.id}` })}
|
|
||||||
>
|
|
||||||
<Text className='guest-article-title'>{a.title}</Text>
|
|
||||||
{a.summary && <Text className='guest-article-summary'>{a.summary}</Text>}
|
|
||||||
</View>
|
|
||||||
))}
|
|
||||||
</View>
|
</View>
|
||||||
) : (
|
<View className='guest-article-card'>
|
||||||
<View className='guest-empty'>
|
<Text className='guest-article-title'>智能预约排班</Text>
|
||||||
<Text className='guest-empty-text'>暂无文章</Text>
|
<Text className='guest-article-summary'>在线预约透析和治疗</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
<View className='guest-article-card'>
|
||||||
|
<Text className='guest-article-title'>AI 健康分析</Text>
|
||||||
|
<Text className='guest-article-summary'>个性化健康趋势解读</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 底部登录引导 */}
|
{/* 底部登录引导 */}
|
||||||
@@ -106,7 +80,7 @@ function GuestHome({ modeClass }: { modeClass: string }) {
|
|||||||
<Text className='guest-login-text'>登录后即可使用完整健康管理服务</Text>
|
<Text className='guest-login-text'>登录后即可使用完整健康管理服务</Text>
|
||||||
<View
|
<View
|
||||||
className='guest-login-btn'
|
className='guest-login-btn'
|
||||||
onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}
|
onClick={navigateToLogin}
|
||||||
>
|
>
|
||||||
<Text className='guest-login-btn-text'>立即登录</Text>
|
<Text className='guest-login-btn-text'>立即登录</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -8,19 +8,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.legal-content {
|
.legal-content {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
@@ -41,6 +41,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.legal-footer-text {
|
.legal-footer-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
|
|
||||||
.login-logo-mark {
|
.login-logo-mark {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 48px;
|
font-size: var(--tk-font-hero);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -42,14 +42,14 @@
|
|||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-subtitle {
|
.login-subtitle {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
height: $btn-primary-h;
|
height: $btn-primary-h;
|
||||||
background: $pri;
|
background: $pri;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -122,14 +122,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.agreement-check-mark {
|
.agreement-check-mark {
|
||||||
font-size: 18px;
|
font-size: var(--tk-font-body-sm);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agreement-text {
|
.agreement-text {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.skip-btn {
|
.skip-btn {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.points-label {
|
.points-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: rgba(255, 255, 255, 0.85);
|
color: rgba(255, 255, 255, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.checkin-btn-text {
|
.checkin-btn-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
|
|
||||||
.points-balance {
|
.points-balance {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 72px;
|
font-size: 72px; /* kept as-is: special display value */
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -71,7 +71,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.points-streak {
|
.points-streak {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -102,7 +102,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.type-tab-text {
|
.type-tab-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@@ -142,7 +142,7 @@
|
|||||||
|
|
||||||
.product-image-char {
|
.product-image-char {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 56px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -156,7 +156,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.product-name {
|
.product-name {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -180,20 +180,20 @@
|
|||||||
|
|
||||||
.product-points-char {
|
.product-points-char {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $wrn;
|
color: $wrn;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-points-value {
|
.product-points-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $wrn;
|
color: $wrn;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-stock {
|
.product-stock {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
|
|
||||||
@@ -212,7 +212,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 160px 40px;
|
padding: 100px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-icon {
|
.empty-icon {
|
||||||
@@ -226,22 +226,22 @@
|
|||||||
|
|
||||||
.empty-char {
|
.empty-char {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 52px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-title {
|
.empty-title {
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-hint {
|
.empty-hint {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
@@ -257,7 +257,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-action-text {
|
.empty-action-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,70 +4,86 @@
|
|||||||
.messages-page {
|
.messages-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $bg;
|
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 {
|
.messages-header {
|
||||||
padding: 24px 32px 8px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages-title {
|
.messages-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
@include serif-number;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: bold;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Tab 切换 ─── */
|
/* ─── 分段控件 Tab ─── */
|
||||||
.msg-tabs {
|
.msg-segment {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 16px 24px 0;
|
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
background: $surface-alt;
|
||||||
|
border-radius: $r-sm;
|
||||||
|
padding: 3px;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-tab {
|
.msg-segment-tab {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: $tab-h;
|
height: 40px;
|
||||||
|
border-radius: $r-xs;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-tab-text {
|
.msg-segment-active {
|
||||||
font-size: 28px;
|
background: $card;
|
||||||
font-weight: 600;
|
box-shadow: $shadow-sm;
|
||||||
color: $tx2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.msg-tab-active .msg-tab-text {
|
.msg-segment-text {
|
||||||
color: $pri;
|
color: $tx;
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
||||||
|
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 {
|
.msg-content {
|
||||||
padding: 0 24px;
|
// wrapper
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-empty {
|
.msg-empty {
|
||||||
@@ -79,18 +95,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg-empty-text {
|
.msg-empty-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 咨询卡片 ─── */
|
/* ─── 咨询卡片 ─── */
|
||||||
.consult-card {
|
.consult-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 24px;
|
padding: 16px;
|
||||||
margin-bottom: 12px;
|
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-sm;
|
||||||
|
|
||||||
&:active {
|
&: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;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.consult-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.consult-doctor {
|
.consult-doctor {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
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 {
|
.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;
|
color: $tx2;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.consult-badge {
|
.consult-badge {
|
||||||
min-width: 24px;
|
min-width: 18px;
|
||||||
height: 24px;
|
height: 18px;
|
||||||
border-radius: 12px;
|
border-radius: 9px;
|
||||||
background: $dan;
|
background: $dan;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
padding: 0 6px;
|
padding: 0 4px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.consult-badge-text {
|
.consult-badge-text {
|
||||||
font-size: 18px;
|
font-size: var(--tk-font-micro);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -152,43 +199,72 @@
|
|||||||
/* ─── 通知卡片 ─── */
|
/* ─── 通知卡片 ─── */
|
||||||
.notify-card {
|
.notify-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
gap: 12px;
|
||||||
|
align-items: flex-start;
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 24px;
|
padding: 16px;
|
||||||
margin-bottom: 12px;
|
|
||||||
box-shadow: $shadow-sm;
|
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;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-title {
|
.notify-row {
|
||||||
font-size: 28px;
|
display: flex;
|
||||||
font-weight: 600;
|
justify-content: space-between;
|
||||||
color: $tx;
|
align-items: center;
|
||||||
display: block;
|
margin-bottom: 4px;
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-desc {
|
.notify-title {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
font-weight: 400;
|
||||||
display: block;
|
color: $tx;
|
||||||
overflow: hidden;
|
}
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
.notify-title-bold {
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-time {
|
.notify-time {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-micro);
|
||||||
color: $tx2;
|
color: var(--tk-text-secondary);
|
||||||
flex-shrink: 0;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alerts-tab-text {
|
.alerts-tab-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -75,12 +75,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge-text {
|
.alert-badge-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-info .alert-badge-text {
|
.alert-badge.sev-info .alert-badge-text {
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-warning .alert-badge-text {
|
.alert-badge.sev-warning .alert-badge-text {
|
||||||
@@ -96,12 +96,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-time {
|
.alert-time {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-title {
|
.alert-title {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
@@ -115,14 +115,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alerts-empty-text {
|
.alerts-empty-text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alerts-empty-hint {
|
.alerts-empty-hint {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alerts-empty-action {
|
.alerts-empty-action {
|
||||||
@@ -134,5 +134,5 @@
|
|||||||
|
|
||||||
.alerts-empty-action-text {
|
.alerts-empty-action-text {
|
||||||
color: $card;
|
color: $card;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,20 +26,20 @@
|
|||||||
|
|
||||||
.dm-hero-icon-text {
|
.dm-hero-icon-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 40px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dm-hero-title {
|
.dm-hero-title {
|
||||||
@include section-title;
|
@include section-title;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dm-hero-sub {
|
.dm-hero-sub {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── card (standalone, used for date picker) ── */
|
/* ── card (standalone, used for date picker) ── */
|
||||||
@@ -60,14 +60,14 @@
|
|||||||
|
|
||||||
.dm-card-title {
|
.dm-card-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dm-card-badge {
|
.dm-card-badge {
|
||||||
@include tag($acc-l, $acc);
|
@include tag($acc-l, $acc);
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -82,7 +82,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dm-date-value {
|
.dm-date-value {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -90,8 +90,8 @@
|
|||||||
|
|
||||||
.dm-date-arrow {
|
.dm-date-arrow {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@@ -118,14 +118,14 @@
|
|||||||
|
|
||||||
.dm-group-title {
|
.dm-group-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dm-group-arrow {
|
.dm-group-arrow {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
transition: transform 0.2s ease;
|
transition: transform 0.2s ease;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@@ -163,7 +163,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dm-field-label {
|
.dm-field-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -185,14 +185,14 @@
|
|||||||
|
|
||||||
.dm-bp-slash {
|
.dm-bp-slash {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dm-field-unit {
|
.dm-field-unit {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@@ -210,8 +210,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dm-unit-inline {
|
.dm-unit-inline {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@@ -221,7 +221,7 @@
|
|||||||
background: $bg;
|
background: $bg;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -238,7 +238,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dm-field-warning {
|
.dm-field-warning {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $wrn;
|
color: $wrn;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -269,7 +269,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dm-submit-text {
|
.dm-submit-text {
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
@@ -283,6 +283,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dm-reset-text {
|
.dm-reset-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,20 +26,20 @@
|
|||||||
|
|
||||||
.input-hero-icon-text {
|
.input-hero-icon-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 40px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-hero-title {
|
.input-hero-title {
|
||||||
@include section-title;
|
@include section-title;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-hero-sub {
|
.input-hero-sub {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── sync entry ── */
|
/* ── sync entry ── */
|
||||||
@@ -60,14 +60,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-sync-entry-text {
|
.input-sync-entry-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-sync-entry-hint {
|
.input-sync-entry-hint {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── card ── */
|
/* ── card ── */
|
||||||
@@ -96,14 +96,14 @@
|
|||||||
|
|
||||||
.input-card-indicator-char {
|
.input-card-indicator-char {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $acc;
|
color: $acc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-card-label {
|
.input-card-label {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -119,15 +119,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-picker-value {
|
.input-picker-value {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-picker-arrow {
|
.input-picker-arrow {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@@ -135,7 +135,7 @@
|
|||||||
/* ── section title ── */
|
/* ── section title ── */
|
||||||
.input-section-title {
|
.input-section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
@@ -154,7 +154,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-field-label {
|
.input-field-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -176,8 +176,8 @@
|
|||||||
|
|
||||||
.input-bp-slash {
|
.input-bp-slash {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -186,7 +186,7 @@
|
|||||||
background: $bg;
|
background: $bg;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -197,8 +197,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-field-unit {
|
.input-field-unit {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@@ -225,7 +225,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-submit-text {
|
.input-submit-text {
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
|||||||
@@ -26,14 +26,14 @@
|
|||||||
|
|
||||||
.trend-hero-icon-text {
|
.trend-hero-icon-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 40px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trend-hero-title {
|
.trend-hero-title {
|
||||||
@include section-title;
|
@include section-title;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trange-tab-text {
|
.trange-tab-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -91,13 +91,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trend-ref-label {
|
.trend-ref-label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $acc;
|
color: $acc;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trend-ref-value {
|
.trend-ref-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $acc;
|
color: $acc;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
|
|
||||||
.trend-list-title {
|
.trend-list-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -146,7 +146,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trend-item-date {
|
.trend-item-date {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -159,7 +159,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trend-item-value {
|
.trend-item-value {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|||||||
@@ -1,34 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-page {
|
.detail-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -46,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.balance-label {
|
.balance-label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -54,7 +25,7 @@
|
|||||||
|
|
||||||
.balance-value {
|
.balance-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 60px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -79,7 +50,7 @@
|
|||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|
||||||
@@ -97,7 +68,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -135,7 +106,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.type-tab-text {
|
.type-tab-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
|
|
||||||
.type-tab.active & {
|
.type-tab.active & {
|
||||||
@@ -182,7 +153,7 @@
|
|||||||
|
|
||||||
.tx-badge-text {
|
.tx-badge-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
.tx-badge-earn & {
|
.tx-badge-earn & {
|
||||||
@@ -204,7 +175,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tx-desc {
|
.tx-desc {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@@ -214,7 +185,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tx-date {
|
.tx-date {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -229,7 +200,7 @@
|
|||||||
|
|
||||||
.tx-amount {
|
.tx-amount {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|
||||||
@@ -244,6 +215,6 @@
|
|||||||
|
|
||||||
.tx-remaining {
|
.tx-remaining {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exchange-page {
|
.exchange-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -58,7 +29,7 @@
|
|||||||
|
|
||||||
.product-icon-char {
|
.product-icon-char {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 52px;
|
font-size: var(--tk-font-hero);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
@@ -69,7 +40,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.product-name {
|
.product-name {
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -113,19 +84,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
&.detail-cost {
|
&.detail-cost {
|
||||||
color: $pri;
|
color: $pri;
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.detail-sufficient {
|
&.detail-sufficient {
|
||||||
@@ -148,12 +119,12 @@
|
|||||||
|
|
||||||
.notice-title {
|
.notice-title {
|
||||||
@include section-title;
|
@include section-title;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-text {
|
.notice-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
@@ -182,19 +153,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer-cost-label {
|
.footer-cost-label {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-cost-num {
|
.footer-cost-num {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 38px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-cost-unit {
|
.footer-cost-unit {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
@@ -212,7 +183,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.confirm-btn-text {
|
.confirm-btn-text {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.orders-page {
|
.orders-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -66,7 +37,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-tab-text {
|
.status-tab-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
|
|
||||||
.status-tab.active & {
|
.status-tab.active & {
|
||||||
@@ -98,7 +69,7 @@
|
|||||||
|
|
||||||
.order-product {
|
.order-product {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -116,7 +87,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.order-status-text {
|
.order-status-text {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -132,13 +103,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.order-row-label {
|
.order-row-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-row-value {
|
.order-row-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
|
|
||||||
&.order-cost {
|
&.order-cost {
|
||||||
@@ -158,14 +129,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.qrcode-label {
|
.qrcode-label {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qrcode-value {
|
.qrcode-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $pri-d;
|
color: $pri-d;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -175,7 +146,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.qrcode-tap {
|
.qrcode-tap {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
@@ -1,23 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.consents-page {
|
.consents-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -52,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.consent-card__type {
|
.consent-card__type {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -72,7 +54,7 @@
|
|||||||
.consent-card__scope,
|
.consent-card__scope,
|
||||||
.consent-card__date,
|
.consent-card__date,
|
||||||
.consent-card__expiry {
|
.consent-card__expiry {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@@ -96,7 +78,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.revoke-btn__text {
|
.revoke-btn__text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.scss';
|
||||||
@mixin tag($bg, $color) {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 500;
|
|
||||||
background: $bg;
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diagnoses-page {
|
.diagnoses-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -19,7 +10,7 @@
|
|||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@@ -48,7 +39,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.diagnosis-card__name {
|
.diagnosis-card__name {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -91,19 +82,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.diagnosis-card__code {
|
.diagnosis-card__code {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnosis-card__date {
|
.diagnosis-card__date {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnosis-card__notes {
|
.diagnosis-card__notes {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
@import '../../../../styles/variables.scss';
|
@import '../../../../styles/variables.scss';
|
||||||
|
@import '../../../../styles/mixins.scss';
|
||||||
@mixin serif-number {
|
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-page {
|
.detail-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -31,7 +27,7 @@
|
|||||||
|
|
||||||
.detail-title {
|
.detail-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -40,7 +36,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
@@ -57,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header-sub {
|
.header-sub {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
@@ -65,7 +61,7 @@
|
|||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -85,13 +81,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -100,7 +96,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.notes-text {
|
.notes-text {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
@@ -113,6 +109,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-text {
|
.empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialysis-prescriptions-page {
|
.dialysis-prescriptions-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -61,7 +38,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.prescription-model {
|
.prescription-model {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -85,14 +62,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.meta-item {
|
.meta-item {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prescription-date {
|
.prescription-date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
@import '../../../../styles/variables.scss';
|
@import '../../../../styles/variables.scss';
|
||||||
|
@import '../../../../styles/mixins.scss';
|
||||||
@mixin serif-number {
|
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-page {
|
.detail-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -31,7 +27,7 @@
|
|||||||
|
|
||||||
.detail-title {
|
.detail-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -40,7 +36,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
@@ -57,14 +53,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header-sub {
|
.header-sub {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-info {
|
.review-info {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
@@ -72,7 +68,7 @@
|
|||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -92,13 +88,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -114,6 +110,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-text {
|
.empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialysis-records-page {
|
.dialysis-records-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -86,7 +63,7 @@
|
|||||||
|
|
||||||
.record-date {
|
.record-date {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -99,13 +76,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.weight-item {
|
.weight-item {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-meta {
|
.record-meta {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
background: $acc-l;
|
background: $acc-l;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $acc;
|
color: $acc;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.elder-mode-title {
|
.elder-mode-title {
|
||||||
font-size: 18px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -47,8 +47,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.elder-mode-desc {
|
.elder-mode-desc {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.elder-mode-status {
|
.elder-mode-status {
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.elder-mode-status-text {
|
.elder-mode-status-text {
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -93,13 +93,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 效果预览 ─── */
|
/* --- 效果预览 --- */
|
||||||
.elder-mode-preview {
|
.elder-mode-preview {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.elder-mode-preview-title {
|
.elder-mode-preview-title {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -115,7 +115,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.elder-mode-preview-sample {
|
.elder-mode-preview-sample {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -127,6 +127,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.elder-mode-preview-note {
|
.elder-mode-preview-note {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.family-add-page {
|
.family-add-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -48,7 +34,7 @@
|
|||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 140px;
|
width: 140px;
|
||||||
@@ -57,7 +43,7 @@
|
|||||||
|
|
||||||
.form-input {
|
.form-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -77,7 +63,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-picker-text {
|
.form-picker-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
||||||
@@ -87,7 +73,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-picker-arrow {
|
.form-picker-arrow {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
}
|
}
|
||||||
@@ -109,7 +95,7 @@
|
|||||||
|
|
||||||
.submit-text {
|
.submit-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
|||||||
@@ -1,34 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.family-page {
|
.family-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -78,7 +49,7 @@
|
|||||||
|
|
||||||
.family-avatar-text {
|
.family-avatar-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 36px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri-d;
|
color: $pri-d;
|
||||||
}
|
}
|
||||||
@@ -98,14 +69,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.family-name {
|
.family-name {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.family-current-tag {
|
.family-current-tag {
|
||||||
@include tag($pri, #fff);
|
@include tag($pri, #fff);
|
||||||
font-size: 18px;
|
font-size: var(--tk-font-body-sm);
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -117,12 +88,12 @@
|
|||||||
|
|
||||||
.family-relation-tag {
|
.family-relation-tag {
|
||||||
@include tag($pri-l, $pri-d);
|
@include tag($pri-l, $pri-d);
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
padding: 2px 12px;
|
padding: 2px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.family-gender {
|
.family-gender {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -135,7 +106,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.family-edit-text {
|
.family-edit-text {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -152,7 +123,7 @@
|
|||||||
|
|
||||||
.family-add-text {
|
.family-add-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
|||||||
@@ -1,19 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-followups-page {
|
.my-followups-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -38,7 +24,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab-text {
|
.tab-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
|
||||||
@@ -82,7 +68,7 @@
|
|||||||
|
|
||||||
.task-name {
|
.task-name {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -104,7 +90,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.task-desc {
|
.task-desc {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
@@ -115,7 +101,7 @@
|
|||||||
|
|
||||||
.task-due {
|
.task-due {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.scss';
|
||||||
|
|
||||||
.health-records-page {
|
.health-records-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -9,7 +10,7 @@
|
|||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@@ -38,33 +39,33 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.record-card__type {
|
.record-card__type {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-card__date {
|
.record-card__date {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-card__assessment {
|
.record-card__assessment {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-card__source {
|
.record-card__source {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-card__notes {
|
.record-card__notes {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
|||||||
@@ -1,24 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.medication-page {
|
.medication-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -63,7 +44,7 @@
|
|||||||
|
|
||||||
.reminder-avatar-text {
|
.reminder-avatar-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $acc;
|
color: $acc;
|
||||||
}
|
}
|
||||||
@@ -77,7 +58,7 @@
|
|||||||
|
|
||||||
.reminder-name {
|
.reminder-name {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@@ -85,7 +66,7 @@
|
|||||||
|
|
||||||
.reminder-dosage {
|
.reminder-dosage {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -133,7 +114,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.delete-btn {
|
.delete-btn {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $dan;
|
color: $dan;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
}
|
}
|
||||||
@@ -148,7 +129,7 @@
|
|||||||
|
|
||||||
.form-card-title {
|
.form-card-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@@ -168,7 +149,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
@@ -176,7 +157,7 @@
|
|||||||
|
|
||||||
.form-input {
|
.form-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -198,12 +179,12 @@
|
|||||||
|
|
||||||
.time-value {
|
.time-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-modify {
|
.time-modify {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $pri;
|
color: $pri;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -222,7 +203,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-cancel-text {
|
.form-cancel-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -235,7 +216,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-confirm-text {
|
.form-confirm-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@@ -253,7 +234,7 @@
|
|||||||
|
|
||||||
.add-text {
|
.add-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 32px;
|
font-size: var(--tk-font-num);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
|||||||
@@ -1,34 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-reports-page {
|
.my-reports-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -83,14 +54,14 @@
|
|||||||
|
|
||||||
.report-avatar-text {
|
.report-avatar-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri-d;
|
color: $pri-d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-type {
|
.report-type {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
@@ -109,7 +80,7 @@
|
|||||||
|
|
||||||
.report-date {
|
.report-date {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
padding-left: 72px;
|
padding-left: 72px;
|
||||||
|
|||||||
@@ -1,19 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-page {
|
.settings-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -61,14 +47,14 @@
|
|||||||
|
|
||||||
.settings-icon-text {
|
.settings-icon-text {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $pri-d;
|
color: $pri-d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-label {
|
.settings-label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,7 +64,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.settings-arrow {
|
.settings-arrow {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
.profile-avatar-char {
|
.profile-avatar-char {
|
||||||
font-family: Georgia, 'Times New Roman', serif;
|
font-family: Georgia, 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
|
|
||||||
.profile-name {
|
.profile-name {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -51,13 +51,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.profile-phone {
|
.profile-phone {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-arrow {
|
.profile-arrow {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
@@ -94,13 +94,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-unit {
|
.stat-unit {
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 13px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 分组菜单 ─── */
|
/* ─── 分组菜单 ─── */
|
||||||
@@ -109,7 +109,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-group-title {
|
.menu-group-title {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -167,7 +167,7 @@
|
|||||||
|
|
||||||
.menu-icon-text {
|
.menu-icon-text {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 16px;
|
font-size: var(--tk-font-body-sm);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
&.menu-icon-text--pri {
|
&.menu-icon-text--pri {
|
||||||
@@ -185,13 +185,13 @@
|
|||||||
|
|
||||||
.menu-label {
|
.menu-label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 15px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-arrow {
|
.menu-arrow {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -203,6 +203,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logout-text {
|
.logout-text {
|
||||||
font-size: 14px;
|
font-size: var(--tk-font-cap);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import Taro, { useDidShow } from '@tarojs/taro';
|
|||||||
import { useAuthStore } from '../../stores/auth';
|
import { useAuthStore } from '../../stores/auth';
|
||||||
import { usePointsStore } from '../../stores/points';
|
import { usePointsStore } from '../../stores/points';
|
||||||
import { useUIStore } from '../../stores/ui';
|
import { useUIStore } from '../../stores/ui';
|
||||||
|
import { navigateToLogin } from '../../utils/navigate';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
interface MenuItem {
|
interface MenuItem {
|
||||||
@@ -110,7 +111,7 @@ export default function Profile() {
|
|||||||
<View className={`profile-page ${modeClass}`}>
|
<View className={`profile-page ${modeClass}`}>
|
||||||
{/* 用户信息卡片 */}
|
{/* 用户信息卡片 */}
|
||||||
{isGuest ? (
|
{isGuest ? (
|
||||||
<View className='profile-user-card' onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}>
|
<View className='profile-user-card' onClick={navigateToLogin}>
|
||||||
<View className='profile-avatar profile-avatar--guest'>
|
<View className='profile-avatar profile-avatar--guest'>
|
||||||
<Text className='profile-avatar-char'>?</Text>
|
<Text className='profile-avatar-char'>?</Text>
|
||||||
</View>
|
</View>
|
||||||
@@ -174,7 +175,7 @@ export default function Profile() {
|
|||||||
|
|
||||||
{/* 退出登录 / 登录 */}
|
{/* 退出登录 / 登录 */}
|
||||||
{isGuest ? (
|
{isGuest ? (
|
||||||
<View className='profile-logout' onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}>
|
<View className='profile-logout' onClick={navigateToLogin}>
|
||||||
<Text className='logout-text logout-text--pri'>登录账号</Text>
|
<Text className='logout-text logout-text--pri'>登录账号</Text>
|
||||||
</View>
|
</View>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import '../../../styles/variables.scss';
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.scss';
|
||||||
|
|
||||||
.detail-page {
|
.detail-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -15,14 +16,9 @@
|
|||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin serif-number {
|
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-title {
|
.detail-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 34px;
|
font-size: var(--tk-font-num-lg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -42,13 +38,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx;
|
color: $tx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -64,7 +60,7 @@
|
|||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -89,13 +85,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.indicator-name {
|
.indicator-name {
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator-value {
|
.indicator-value {
|
||||||
font-size: 30px;
|
font-size: var(--tk-font-num);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
@@ -108,14 +104,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.indicator-ref {
|
.indicator-ref {
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator-status {
|
.indicator-status {
|
||||||
font-size: 24px;
|
font-size: var(--tk-font-h2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
@@ -146,6 +142,6 @@
|
|||||||
|
|
||||||
.loading-text,
|
.loading-text,
|
||||||
.empty-text {
|
.empty-text {
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
color: $tx3;
|
color: var(--tk-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
// 关怀模式 CSS 覆写（Phase 1 非线性放大策略）
|
// 关怀模式 CSS 覆写（仅保留结构性调整）
|
||||||
// 策略：标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55 / 间距 ×1.4
|
// 字号 / 颜色由 tokens.scss 的 .elder-mode 块自动级联处理
|
||||||
// 布局：体征网格 1 列 / 行高 1.7 / 触控 56px+ / 对比度增强
|
// 此文件仅保留无法通过 CSS 变量表达的布局覆写
|
||||||
|
|
||||||
.elder-mode {
|
.elder-mode {
|
||||||
font-size: 34px; // 28 × 1.2（根字号适度放大）
|
line-height: var(--tk-line-height);
|
||||||
line-height: 1.7; // 从 1.5 提升到 1.7
|
|
||||||
|
|
||||||
// ─── 全局触控放大 ───
|
// ─── 全局触控放大 ───
|
||||||
.vital-card,
|
.vital-card,
|
||||||
@@ -19,340 +18,22 @@
|
|||||||
.period-btn,
|
.period-btn,
|
||||||
.device-card,
|
.device-card,
|
||||||
.article-entry {
|
.article-entry {
|
||||||
min-height: 56px;
|
min-height: var(--tk-touch-min);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn,
|
.action-btn,
|
||||||
.save-btn,
|
.save-btn,
|
||||||
.consultation-create-btn,
|
.consultation-create-btn,
|
||||||
.guest-login-btn {
|
.guest-login-btn {
|
||||||
height: 60px;
|
height: var(--tk-btn-primary-h);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn-text,
|
// ─── 体征网格：2 列 → 1 列（解决溢出核心改动）───
|
||||||
.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 列（解决溢出核心改动）
|
|
||||||
.vitals-grid {
|
.vitals-grid {
|
||||||
grid-template-columns: 1fr;
|
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 {
|
.vitals-grid {
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
}
|
}
|
||||||
@@ -397,75 +78,55 @@
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ═══════════════════════════════════════
|
// ─── 组件布局调整 ───
|
||||||
// 共享组件
|
|
||||||
// ═══════════════════════════════════════
|
|
||||||
|
|
||||||
// EmptyState
|
// 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 {
|
.empty-state-action {
|
||||||
padding: 20px 56px;
|
padding: 20px 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state-action-text {
|
|
||||||
font-size: 32px; // 28 × 1.14
|
|
||||||
}
|
|
||||||
|
|
||||||
// ErrorState
|
// ErrorState
|
||||||
.error-state-icon {
|
|
||||||
font-size: 96px; // 80 × 1.2
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-state-text {
|
|
||||||
font-size: 32px; // 28 × 1.14
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-state-retry {
|
.error-state-retry {
|
||||||
padding: 20px 56px;
|
padding: 20px 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-state-retry-text {
|
|
||||||
font-size: 32px; // 28 × 1.14
|
|
||||||
}
|
|
||||||
|
|
||||||
// Loading
|
// Loading
|
||||||
.loading-spinner {
|
.loading-spinner {
|
||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-state-text {
|
|
||||||
font-size: 30px; // 26 × 1.15
|
|
||||||
color: #5A554F; // $tx2
|
|
||||||
}
|
|
||||||
|
|
||||||
// StepIndicator
|
// StepIndicator
|
||||||
.step-dot {
|
.step-dot {
|
||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
font-size: 28px; // 24 × 1.17
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-label {
|
|
||||||
font-size: 26px; // 22 × 1.18
|
|
||||||
color: #5A554F; // $tx2
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-line {
|
.step-line {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
top: 28px;
|
top: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── 登录页布局调整 ───
|
||||||
|
.login-page {
|
||||||
|
padding: 80px 48px 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand {
|
||||||
|
margin-bottom: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo {
|
||||||
|
width: 112px;
|
||||||
|
height: 112px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-login-btn {
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 积分商城空状态 ───
|
||||||
|
.mall-empty-state {
|
||||||
|
padding: 100px 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
@mixin section-title {
|
@mixin section-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 26px;
|
font-size: var(--tk-font-h1);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
font-size: 22px;
|
font-size: var(--tk-font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
color: $color;
|
color: $color;
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
background: $pri;
|
background: $pri;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: $pri;
|
color: $pri;
|
||||||
font-size: 28px;
|
font-size: var(--tk-font-body-lg);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: 2px solid $pri;
|
border: 2px solid $pri;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -1,79 +1,49 @@
|
|||||||
// Design Token — CSS 自定义属性
|
// Design Token — CSS 自定义属性（校准后）
|
||||||
// 正常模式值定义在 :root，关怀模式通过 .elder-mode 覆盖
|
// 基于全量审计：600+ font-size 声明的频率分布
|
||||||
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
|
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
|
||||||
|
// 关怀模式通过 .elder-mode 覆盖 token 值自动生效
|
||||||
|
|
||||||
// ═══════════════════════════════════════
|
// ═══════════════════════════════════════
|
||||||
// 正常模式 Token
|
// 正常模式 Token
|
||||||
// ═══════════════════════════════════════
|
// ═══════════════════════════════════════
|
||||||
page {
|
page {
|
||||||
// ─── 字号 ───
|
// ─── 字号（10 级，覆盖 92.5% 场景）───
|
||||||
--tk-font-hero: 48px; // 登录标题等超大字
|
--tk-font-hero: 48px; // 装饰图标、空状态字符
|
||||||
--tk-font-h1: 26px; // 页面标题
|
--tk-font-h1: 26px; // 页面/区块标题
|
||||||
--tk-font-h2: 22px; // 区块标题
|
--tk-font-h2: 24px; // 副标题、日期、菜单组
|
||||||
--tk-font-body: 15px; // 正文 / 列表项
|
--tk-font-body-lg: 28px; // 大正文、按钮（页面默认字号）
|
||||||
--tk-font-body-lg: 17px; // 大正文 / 按钮文字
|
--tk-font-body: 22px; // 正文、标签
|
||||||
--tk-font-cap: 13px; // 辅助说明 / 次要文字
|
--tk-font-body-sm: 16px; // 中等正文、列表项
|
||||||
--tk-font-micro: 11px; // 标签 / 角标 / 最小文字
|
--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-line-height: 1.5;
|
||||||
|
--tk-touch-min: 48px;
|
||||||
|
--tk-btn-primary-h: 56px;
|
||||||
|
--tk-text-secondary: #78716C; // $tx3 — 关怀模式提升对比度
|
||||||
}
|
}
|
||||||
|
|
||||||
// ═══════════════════════════════════════
|
// ═══════════════════════════════════════
|
||||||
// 关怀模式 Token（非线性放大）
|
// 关怀模式 Token（非线性放大）
|
||||||
|
// 标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
|
||||||
// ═══════════════════════════════════════
|
// ═══════════════════════════════════════
|
||||||
.elder-mode {
|
.elder-mode {
|
||||||
// 字号：标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
|
|
||||||
--tk-font-hero: 56px;
|
--tk-font-hero: 56px;
|
||||||
--tk-font-h1: 30px;
|
--tk-font-h1: 30px;
|
||||||
--tk-font-h2: 26px;
|
--tk-font-h2: 28px;
|
||||||
--tk-font-body: 20px;
|
--tk-font-body-lg: 34px;
|
||||||
--tk-font-body-lg: 22px;
|
--tk-font-body: 30px;
|
||||||
|
--tk-font-body-sm: 22px;
|
||||||
|
--tk-font-num: 34px;
|
||||||
|
--tk-font-num-lg: 40px;
|
||||||
--tk-font-cap: 18px;
|
--tk-font-cap: 18px;
|
||||||
--tk-font-micro: 17px;
|
--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-line-height: 1.7;
|
||||||
|
--tk-touch-min: 56px;
|
||||||
|
--tk-btn-primary-h: 64px;
|
||||||
|
--tk-text-secondary: #5A554F; // $tx2 — 对比度提升
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user