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

fix(miniprogram): 补充健康 Hub 趋势横向滚动卡片样式 + 快捷操作 flex-wrap
Some checks failed
CI / rust-check (push) Has been cancelled
Details
CI / rust-test (push) Has been cancelled
Details
CI / frontend-build (push) Has been cancelled
Details
CI / security-audit (push) Has been cancelled
Details

Browse Source
This commit is contained in:
iven
2026-04-28 08:53:57 +08:00
parent 8edbe7be7b
commit f93321bd56
1 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
apps/miniprogram/src/pages/health/index.scss
View File

@@ -41,19 +41,21 @@
/* ─── 快捷操作 ─── */ /* ─── 快捷操作 ─── */
.health-actions-row { .health-actions-row {
display: flex; display: flex;
gap: 16px; flex-wrap: wrap;
gap: 12px;
padding: 16px 24px 24px; padding: 16px 24px 24px;
} }
.action-item { .action-item {
flex: 1; flex: 1;
min-width: 100px;
background: $card; background: $card;
border-radius: $r; border-radius: $r;
padding: 24px 12px; padding: 20px 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
&:active { &:active {
@@ -62,8 +64,8 @@
} }
.action-icon { .action-icon {
width: 80px; width: 72px;
height: 80px; height: 72px;
border-radius: 50%; border-radius: 50%;
@include flex-center; @include flex-center;
@@ -170,59 +172,59 @@
&.bar-green { background: $acc; } &.bar-green { background: $acc; }
&.bar-orange { background: $wrn; } &.bar-orange { background: $wrn; }
&.bar-red { background: $dan; }
} }
/* ─── 趋势入口 ─── */ /* ─── 趋势入口 — 水平滚动卡片 ─── */
.trend-row { .trend-scroll {
white-space: nowrap;
width: 100%;
}
.trend-card {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 200px;
background: $card; background: $card;
border-radius: $r; border-radius: $r;
overflow: hidden; padding: 24px 16px;
margin-right: 16px;
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
} vertical-align: top;
.trend-item {
display: flex;
align-items: center;
padding: 24px;
border-bottom: 1px solid $bd-l;
&:last-child {
border-bottom: none;
}
&:active { &:active {
background: $bd-l; opacity: 0.7;
} }
} }
.trend-icon { .trend-card-icon {
width: 56px; width: 64px;
height: 56px; height: 64px;
border-radius: $r-sm; border-radius: $r;
background: $pri-l; background: $pri-l;
@include flex-center; @include flex-center;
margin-right: 16px; margin-bottom: 12px;
flex-shrink: 0;
} }
.trend-char { .trend-card-char {
font-family: 'Georgia', 'Times New Roman', serif; font-family: 'Georgia', 'Times New Roman', serif;
font-size: 26px; font-size: 28px;
font-weight: bold; font-weight: bold;
color: $pri; color: $pri;
} }
.trend-label { .trend-card-label {
flex: 1; font-size: 26px;
font-size: 28px;
color: $tx; color: $tx;
font-weight: 500; font-weight: 500;
white-space: nowrap;
} }
.trend-arrow { .trend-card-arrow {
font-size: 32px; font-size: 22px;
color: $tx3; color: $tx3;
flex-shrink: 0; margin-top: 8px;
} }
/* ─── 最近监测 ─── */ /* ─── 最近监测 ─── */