iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(mp): CSS 变量主题 + 登录页改造 — UI 优化 Phase 0-2

Browse Source 
Phase 0: 建立 design token 体系
- tokens.scss 新增 --tk-pri/--tk-pri-l/--tk-pri-d/--tk-shadow-btn/--tk-shadow-tab
- .doctor-mode 覆盖为靛蓝色系，.elder-mode 非线性放大字号
- variables.scss 新增医生端色彩 + 阴影变量

Phase 1: 组件库 + 页面全局替换
- 75 个页面 SCSS $pri → var(--tk-pri) 全量替换
- 11 个新 UI 组件（PrimaryButton/TabFilter/FormInput/ProgressRing 等）
- 8 个现有组件 SCSS 更新
- 18 个医生端页面 useElderClass → useDoctorClass
- PageHeader 匹配原型 NavBar 规格

Phase 2: 登录页重写
- Logo: 方形+ → 圆形渐变 H
- 登录方式: 纯微信 → 账号密码 + 微信一键登录
- 新增 credentialLogin API + store action
- 字号/间距严格匹配原型 mp-01-login.html
This commit is contained in:
iven
2026-05-16 21:29:13 +08:00
parent 1786f0d707
commit 95e219ad5a
124 changed files with 2306 additions and 1142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/miniprogram/src/pages/pkg-profile/consents/index.scss
View File

@@ -5,19 +5,19 @@
.page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.consent-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.consent-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
}
@@ -25,7 +25,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
margin-bottom: var(--tk-gap-sm);
}
.consent-card__type {
@@ -52,19 +52,19 @@
font-size: var(--tk-font-h2);
color: $tx2;
display: block;
margin-bottom: 4px;
margin-bottom: var(--tk-gap-2xs);
font-variant-numeric: tabular-nums;
}
.revoke-btn {
margin-top: 16px;
padding: 12px 0;
margin-top: var(--tk-gap-md);
padding: var(--tk-gap-sm) 0;
text-align: center;
border-radius: $r-sm;
border: 1px solid $dan;
&:active {
background: $dan-l;
opacity: var(--tk-touch-feedback-opacity);
}
&--disabled {

20
apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss
View File

@@ -8,21 +8,21 @@
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
display: block;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.diagnosis-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.diagnosis-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
}
@@ -30,7 +30,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
margin-bottom: var(--tk-gap-sm);
}
.diagnosis-card__name {
@@ -38,7 +38,7 @@
font-weight: bold;
color: $tx;
flex: 1;
margin-right: 12px;
margin-right: var(--tk-gap-sm);
}
.diagnosis-card__status {
@@ -60,12 +60,12 @@
.diagnosis-card__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
gap: var(--tk-gap-sm);
margin-bottom: var(--tk-gap-xs);
}
.diagnosis-card__type {
@include tag($pri-l, $pri-d);
@include tag(var(--tk-pri-l), var(--tk-pri-d));
&.secondary {
@include tag($bd-l, $tx2);
@@ -92,5 +92,5 @@
font-size: var(--tk-font-body);
color: $tx2;
display: block;
margin-top: 8px;
margin-top: var(--tk-gap-xs);
}

12
apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss
View File

@@ -5,7 +5,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.detail-title {
@@ -17,7 +17,7 @@
.status-tag {
display: inline-block;
padding: 4px 12px;
padding: var(--tk-gap-2xs) var(--tk-gap-sm);
border-radius: $r-xs;
font-size: var(--tk-font-body);
font-weight: 500;
@@ -48,14 +48,14 @@
font-weight: bold;
color: $tx;
display: block;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 0;
padding: var(--tk-gap-sm) 0;
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -74,7 +74,7 @@
color: $tx;
text-align: right;
flex: 1;
margin-left: 24px;
margin-left: var(--tk-gap-lg);
@include serif-number;
}
@@ -88,7 +88,7 @@
display: flex;
justify-content: center;
align-items: center;
padding: 120px 0;
padding: var(--tk-gap-2xl) 0;
}
.empty-text {

14
apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss
View File

@@ -5,23 +5,23 @@
.page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.prescription-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.prescription-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
&:active {
box-shadow: $shadow-md;
opacity: var(--tk-touch-feedback-opacity);
}
}
@@ -29,7 +29,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
margin-bottom: var(--tk-gap-sm);
}
.prescription-model {
@@ -52,8 +52,8 @@
.prescription-meta {
display: flex;
gap: 24px;
margin-bottom: 8px;
gap: var(--tk-gap-lg);
margin-bottom: var(--tk-gap-xs);
}
.meta-item {

18
apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.scss
View File

@@ -5,7 +5,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.detail-title {
@@ -17,7 +17,7 @@
.status-tag {
display: inline-block;
padding: 4px 12px;
padding: var(--tk-gap-2xs) var(--tk-gap-sm);
border-radius: $r-xs;
font-size: var(--tk-font-body);
font-weight: 500;
@@ -25,8 +25,8 @@
color: $tx3;
&.completed {
background: $pri-l;
color: $pri;
background: var(--tk-pri-l);
color: var(--tk-pri);
}
&.reviewed {
@@ -45,7 +45,7 @@
font-size: var(--tk-font-h2);
color: var(--tk-text-secondary);
display: block;
margin-top: 8px;
margin-top: var(--tk-gap-xs);
@include serif-number;
}
@@ -55,14 +55,14 @@
font-weight: bold;
color: $tx;
display: block;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 0;
padding: var(--tk-gap-sm) 0;
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -81,7 +81,7 @@
color: $tx;
text-align: right;
flex: 1;
margin-left: 24px;
margin-left: var(--tk-gap-lg);
@include serif-number;
}
@@ -89,7 +89,7 @@
display: flex;
justify-content: center;
align-items: center;
padding: 120px 0;
padding: var(--tk-gap-2xl) 0;
}
.empty-text {

20
apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss
View File

@@ -5,23 +5,23 @@
.page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.record-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.record-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
&:active {
box-shadow: $shadow-md;
opacity: var(--tk-touch-feedback-opacity);
}
}
@@ -29,11 +29,11 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
margin-bottom: var(--tk-gap-sm);
}
.type-tag {
@include tag($pri-l, $pri-d);
@include tag(var(--tk-pri-l), var(--tk-pri-d));
&.hdf {
@include tag($acc-l, $acc);
@@ -48,7 +48,7 @@
@include tag($bd-l, $tx3);
&.completed {
@include tag($pri-l, $pri);
@include tag(var(--tk-pri-l), var(--tk-pri));
}
&.reviewed {
@@ -61,13 +61,13 @@
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.weight-row {
display: flex;
gap: 24px;
margin-bottom: 4px;
gap: var(--tk-gap-lg);
margin-bottom: var(--tk-gap-2xs);
}
.weight-item {

16
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss
View File

@@ -12,8 +12,8 @@
.elder-mode-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
gap: var(--tk-gap-md);
margin-bottom: var(--tk-section-gap);
}
.elder-mode-icon {
@@ -37,7 +37,7 @@
font-weight: 700;
color: $tx;
display: block;
margin-bottom: 4px;
margin-bottom: var(--tk-gap-2xs);
}
.elder-mode-desc {
@@ -49,7 +49,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0 0;
padding: var(--tk-gap-md) 0 0;
border-top: 1px solid $bd-l;
}
@@ -89,7 +89,7 @@
/* --- 效果预览 --- */
.elder-mode-preview {
margin-top: 4px;
margin-top: var(--tk-gap-2xs);
}
.elder-mode-preview-title {
@@ -97,8 +97,8 @@
font-weight: 600;
color: $tx2;
display: block;
margin-bottom: 10px;
padding-left: 4px;
margin-bottom: var(--tk-gap-sm);
padding-left: var(--tk-gap-2xs);
}
.elder-mode-preview-card {
@@ -109,7 +109,7 @@
font-size: var(--tk-font-body-sm);
color: $tx;
display: block;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
transition: font-size 0.25s;
&--large {

32
apps/miniprogram/src/pages/pkg-profile/events/index.scss
View File

@@ -3,12 +3,12 @@
// PageShell 已接管：min-height, background, padding
.events-page {
padding-bottom: 120px;
padding-bottom: var(--tk-tabbar-space);
}
.events-header {
background: $pri;
padding: 48px 32px 32px;
background: var(--tk-pri);
padding: var(--tk-gap-2xl) var(--tk-gap-xl) var(--tk-gap-xl);
color: $card;
&__title {
@@ -16,7 +16,7 @@
font-size: var(--tk-font-h1);
font-weight: bold;
display: block;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
&__subtitle {
@@ -26,23 +26,23 @@
}
.event-list {
padding: 24px;
padding: var(--tk-page-padding);
display: flex;
flex-direction: column;
gap: 20px;
gap: var(--tk-section-gap);
}
.event-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
&__status {
@@ -51,7 +51,7 @@
}
&__status--published {
@include tag($pri-l, $pri);
@include tag(var(--tk-pri-l), var(--tk-pri));
}
&__status--ongoing {
@@ -79,22 +79,22 @@
font-weight: bold;
color: $tx;
display: block;
margin-bottom: 12px;
margin-bottom: var(--tk-gap-sm);
}
&__desc {
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
line-height: 1.5;
}
&__info {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
gap: var(--tk-gap-xs);
margin-bottom: var(--tk-gap-md);
}
&__date {
@@ -111,7 +111,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
padding-top: var(--tk-gap-md);
border-top: 1px solid $bd-l;
}
@@ -122,9 +122,9 @@
}
&__btn {
background: $pri;
background: var(--tk-pri);
border-radius: $r-sm;
padding: 16px 32px;
padding: var(--tk-gap-md) var(--tk-gap-xl);
&--disabled {
background: $bd;

14
apps/miniprogram/src/pages/pkg-profile/family-add/index.scss
View File

@@ -8,13 +8,13 @@
.page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.form-card {
background: $card;
border-radius: $r;
padding: 4px 28px;
padding: var(--tk-gap-2xs) var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
}
@@ -22,7 +22,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 0;
padding: var(--tk-card-padding-lg) 0;
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -63,7 +63,7 @@
.form-picker-text {
font-size: var(--tk-font-body-lg);
color: $tx;
margin-right: 10px;
margin-right: var(--tk-gap-sm);
&.placeholder {
color: $tx3;
@@ -81,10 +81,10 @@
bottom: 0;
left: 0;
right: 0;
background: $pri;
padding: 28px;
background: var(--tk-pri);
padding: var(--tk-card-padding-lg);
text-align: center;
box-shadow: 0 -2px 12px rgba(196, 98, 58, 0.15);
box-shadow: 0 -2px 12px rgba($pri, 0.15);
&.disabled {
opacity: 0.5;

36
apps/miniprogram/src/pages/pkg-profile/family/index.scss
View File

@@ -8,13 +8,13 @@
.family-page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.family-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.family-item {
@@ -22,12 +22,12 @@
align-items: center;
background: $card;
border-radius: $r;
padding: 24px;
padding: var(--tk-card-padding);
box-shadow: $shadow-sm;
transition: box-shadow 0.2s;
&:active {
box-shadow: $shadow-md;
opacity: var(--tk-touch-feedback-opacity);
}
&.active {
@@ -40,16 +40,16 @@
width: 80px;
height: 80px;
border-radius: $r;
background: $pri-l;
background: var(--tk-pri-l);
flex-shrink: 0;
margin-right: 20px;
margin-right: var(--tk-section-gap);
}
.family-avatar-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-num-lg);
font-weight: bold;
color: $pri-d;
color: var(--tk-pri-d);
}
.family-info {
@@ -62,8 +62,8 @@
.family-name-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
gap: var(--tk-gap-sm);
margin-bottom: var(--tk-gap-xs);
}
.family-name {
@@ -73,7 +73,7 @@
}
.family-current-tag {
@include tag($pri, $white);
@include tag(var(--tk-pri), $white);
font-size: var(--tk-font-body-sm);
padding: 2px 10px;
}
@@ -81,11 +81,11 @@
.family-meta {
display: flex;
align-items: center;
gap: 12px;
gap: var(--tk-gap-sm);
}
.family-relation-tag {
@include tag($pri-l, $pri-d);
@include tag(var(--tk-pri-l), var(--tk-pri-d));
font-size: var(--tk-font-body);
padding: 2px 12px;
}
@@ -97,15 +97,15 @@
.family-edit {
flex-shrink: 0;
margin-left: 16px;
padding: 14px 24px;
margin-left: var(--tk-gap-md);
padding: var(--tk-gap-md) var(--tk-gap-lg);
border: 1px solid $bd;
border-radius: $r-pill;
min-height: 48px;
@include flex-center;
&:active {
background: $bd-l;
opacity: var(--tk-touch-feedback-opacity);
}
}
@@ -119,10 +119,10 @@
bottom: 0;
left: 0;
right: 0;
background: $pri;
padding: 28px;
background: var(--tk-pri);
padding: var(--tk-card-padding-lg);
text-align: center;
box-shadow: 0 -2px 12px rgba(196, 98, 58, 0.15);
box-shadow: 0 -2px 12px rgba($pri, 0.15);
}
.family-add-text {

26
apps/miniprogram/src/pages/pkg-profile/followups/detail/index.scss
View File

@@ -4,13 +4,13 @@
.detail-title {
@include section-title;
font-size: var(--tk-font-num-lg);
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 12px 0;
padding: var(--tk-gap-sm) 0;
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -33,8 +33,8 @@
}
.countdown {
margin-top: 12px;
padding: 12px 16px;
margin-top: var(--tk-gap-sm);
padding: var(--tk-gap-sm) var(--tk-gap-md);
background: $wrn-l;
border-radius: $r-sm;
}
@@ -52,8 +52,8 @@
}
.detail-desc {
margin-top: 16px;
padding: 20px;
margin-top: var(--tk-gap-md);
padding: var(--tk-section-gap);
background: $bd-l;
border-radius: $r-sm;
}
@@ -66,7 +66,7 @@
.section-title {
@include section-title;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
.submit-textarea {
@@ -76,21 +76,21 @@
color: $tx;
background: $bg;
border-radius: $r-sm;
padding: 20px;
padding: var(--tk-section-gap);
box-sizing: border-box;
border: none;
outline: none;
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
}
.submit-btn {
background: $pri;
background: var(--tk-pri);
border-radius: $r;
padding: 24px;
padding: var(--tk-gap-lg);
text-align: center;
&:active {
opacity: 0.85;
opacity: var(--tk-touch-feedback-opacity);
}
&.disabled {
@@ -107,7 +107,7 @@
.loading-state,
.empty-state {
@include flex-center;
padding: 120px 0;
padding: var(--tk-tabbar-space) 0;
}
.loading-text,

20
apps/miniprogram/src/pages/pkg-profile/followups/index.scss
View File

@@ -16,17 +16,17 @@
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px 0 20px;
padding: var(--tk-gap-lg) 0 var(--tk-section-gap);
position: relative;
}
.tab-text {
font-size: var(--tk-font-body-lg);
color: $tx2;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
.tab-item.active & {
color: $pri;
color: var(--tk-pri);
font-weight: bold;
}
}
@@ -34,25 +34,25 @@
.tab-indicator {
width: 32px;
height: 4px;
background: $pri;
background: var(--tk-pri);
border-radius: $r-xs;
}
.task-list {
padding: 24px;
padding: var(--tk-gap-lg);
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.task-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
&:active {
box-shadow: $shadow-md;
opacity: var(--tk-touch-feedback-opacity);
}
}
@@ -60,7 +60,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
margin-bottom: var(--tk-gap-sm);
}
.task-name {
@@ -90,7 +90,7 @@
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

16
apps/miniprogram/src/pages/pkg-profile/health-records/index.scss
View File

@@ -8,21 +8,21 @@
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
display: block;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.record-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.record-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
}
@@ -30,7 +30,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.record-card__type {
@@ -49,19 +49,19 @@
font-size: var(--tk-font-h2);
color: $tx;
display: block;
margin-bottom: 4px;
margin-bottom: var(--tk-gap-2xs);
}
.record-card__source {
font-size: var(--tk-font-body);
color: var(--tk-text-secondary);
display: block;
margin-bottom: 4px;
margin-bottom: var(--tk-gap-2xs);
}
.record-card__notes {
font-size: var(--tk-font-body);
color: $tx2;
display: block;
margin-top: 8px;
margin-top: var(--tk-gap-xs);
}

46
apps/miniprogram/src/pages/pkg-profile/medication/index.scss
View File

@@ -7,7 +7,7 @@
}
.medication-loading {
padding: 40px 0;
padding: var(--tk-gap-2xl) 0;
text-align: center;
}
@@ -18,13 +18,13 @@
.page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.reminder-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.reminder-card {
@@ -32,7 +32,7 @@
align-items: center;
background: $card;
border-radius: $r;
padding: 24px;
padding: var(--tk-gap-lg);
box-shadow: $shadow-sm;
&.disabled {
@@ -47,7 +47,7 @@
border-radius: $r;
background: $acc-l;
flex-shrink: 0;
margin-right: 20px;
margin-right: var(--tk-section-gap);
}
.reminder-avatar-text {
@@ -69,7 +69,7 @@
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
margin-bottom: 4px;
margin-bottom: var(--tk-gap-2xs);
}
.reminder-dosage {
@@ -81,9 +81,9 @@
.reminder-actions {
display: flex;
align-items: center;
gap: 16px;
gap: var(--tk-gap-md);
flex-shrink: 0;
margin-left: 12px;
margin-left: var(--tk-gap-sm);
}
.toggle {
@@ -95,7 +95,7 @@
transition: background 0.3s;
&.on {
background: $pri;
background: var(--tk-pri);
}
&.off {
@@ -132,8 +132,8 @@
.form-card {
background: $card;
border-radius: $r;
padding: 28px;
margin-top: 24px;
padding: var(--tk-card-padding-lg);
margin-top: var(--tk-gap-lg);
box-shadow: $shadow-sm;
}
@@ -142,7 +142,7 @@
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
display: block;
}
@@ -150,7 +150,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0;
padding: var(--tk-gap-lg) 0;
border-bottom: 1px solid $bd-l;
&:last-of-type {
@@ -184,7 +184,7 @@
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
gap: var(--tk-gap-sm);
}
.time-value {
@@ -195,20 +195,20 @@
.time-modify {
font-size: var(--tk-font-h2);
color: $pri;
color: var(--tk-pri);
}
.form-actions {
display: flex;
gap: 16px;
margin-top: 24px;
gap: var(--tk-gap-md);
margin-top: var(--tk-gap-lg);
}
.form-cancel {
flex: 1;
background: $bd-l;
border-radius: $r-sm;
padding: 20px;
padding: var(--tk-section-gap);
text-align: center;
}
@@ -219,9 +219,9 @@
.form-confirm {
flex: 1;
background: $pri;
background: var(--tk-pri);
border-radius: $r-sm;
padding: 20px;
padding: var(--tk-section-gap);
text-align: center;
}
@@ -236,10 +236,10 @@
bottom: 0;
left: 0;
right: 0;
background: $pri;
padding: 28px;
background: var(--tk-pri);
padding: var(--tk-card-padding-lg);
text-align: center;
box-shadow: 0 -2px 12px rgba(196, 98, 58, 0.15);
box-shadow: 0 -2px 12px rgba($pri, 0.15);
}
.add-text {

18
apps/miniprogram/src/pages/pkg-profile/reports/detail/index.scss
View File

@@ -7,14 +7,14 @@
font-weight: bold;
color: $tx;
display: block;
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 0;
padding: var(--tk-gap-sm) 0;
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -33,7 +33,7 @@
color: $tx;
text-align: right;
flex: 1;
margin-left: 24px;
margin-left: var(--tk-gap-lg);
}
.section-title {
@@ -42,14 +42,14 @@
font-weight: bold;
color: $tx;
display: block;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
.indicator-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
padding: var(--tk-section-gap) 0;
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -65,7 +65,7 @@
.indicator-name {
font-size: var(--tk-font-h1);
color: $tx2;
margin-bottom: 4px;
margin-bottom: var(--tk-gap-2xs);
}
.indicator-value {
@@ -84,14 +84,14 @@
.indicator-ref {
font-size: var(--tk-font-body);
color: var(--tk-text-secondary);
margin-bottom: 4px;
margin-bottom: var(--tk-gap-2xs);
@include serif-number;
}
.indicator-status {
font-size: var(--tk-font-h2);
font-weight: bold;
padding: 4px 12px;
padding: var(--tk-gap-2xs) var(--tk-gap-sm);
border-radius: $r;
&.normal {
@@ -115,7 +115,7 @@
display: flex;
justify-content: center;
align-items: center;
padding: 120px 0;
padding: var(--tk-gap-2xl) 0;
}
.loading-text,

16
apps/miniprogram/src/pages/pkg-profile/reports/index.scss
View File

@@ -5,23 +5,23 @@
.page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.report-list {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--tk-gap-md);
}
.report-card {
background: $card;
border-radius: $r;
padding: 28px;
padding: var(--tk-card-padding-lg);
box-shadow: $shadow-sm;
&:active {
box-shadow: $shadow-md;
opacity: var(--tk-touch-feedback-opacity);
}
}
@@ -29,7 +29,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
.report-type-row {
@@ -42,8 +42,8 @@
width: 56px;
height: 56px;
border-radius: $r-sm;
background: $pri-l;
margin-right: 16px;
background: var(--tk-pri-l);
margin-right: var(--tk-gap-md);
flex-shrink: 0;
}
@@ -51,7 +51,7 @@
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $pri-d;
color: var(--tk-pri-d);
}
.report-type {

12
apps/miniprogram/src/pages/pkg-profile/settings/index.scss
View File

@@ -5,21 +5,21 @@
.page-title {
@include section-title;
padding-left: 4px;
padding-left: var(--tk-gap-2xs);
}
.settings-group {
background: $card;
border-radius: $r;
overflow: hidden;
margin-bottom: 24px;
margin-bottom: var(--tk-gap-lg);
box-shadow: $shadow-sm;
}
.settings-item {
display: flex;
align-items: center;
padding: 28px 24px;
padding: var(--tk-card-padding-lg) var(--tk-gap-lg);
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -36,8 +36,8 @@
width: 48px;
height: 48px;
border-radius: $r-sm;
background: $pri-l;
margin-right: 16px;
background: var(--tk-pri-l);
margin-right: var(--tk-gap-md);
flex-shrink: 0;
}
@@ -45,7 +45,7 @@
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-h2);
font-weight: bold;
color: $pri-d;
color: var(--tk-pri-d);
}
.settings-label {