diff --git a/apps/miniprogram/src/pages/health/index.scss b/apps/miniprogram/src/pages/health/index.scss index 0cc8538..f9d7304 100644 --- a/apps/miniprogram/src/pages/health/index.scss +++ b/apps/miniprogram/src/pages/health/index.scss @@ -41,19 +41,21 @@ /* ─── 快捷操作 ─── */ .health-actions-row { display: flex; - gap: 16px; + flex-wrap: wrap; + gap: 12px; padding: 16px 24px 24px; } .action-item { flex: 1; + min-width: 100px; background: $card; border-radius: $r; - padding: 24px 12px; + padding: 20px 12px; display: flex; flex-direction: column; align-items: center; - gap: 10px; + gap: 8px; box-shadow: $shadow-sm; &:active { @@ -62,8 +64,8 @@ } .action-icon { - width: 80px; - height: 80px; + width: 72px; + height: 72px; border-radius: 50%; @include flex-center; @@ -170,59 +172,59 @@ &.bar-green { background: $acc; } &.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; border-radius: $r; - overflow: hidden; + padding: 24px 16px; + margin-right: 16px; box-shadow: $shadow-sm; -} - -.trend-item { - display: flex; - align-items: center; - padding: 24px; - border-bottom: 1px solid $bd-l; - - &:last-child { - border-bottom: none; - } + vertical-align: top; &:active { - background: $bd-l; + opacity: 0.7; } } -.trend-icon { - width: 56px; - height: 56px; - border-radius: $r-sm; +.trend-card-icon { + width: 64px; + height: 64px; + border-radius: $r; background: $pri-l; @include flex-center; - margin-right: 16px; - flex-shrink: 0; + margin-bottom: 12px; } -.trend-char { +.trend-card-char { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 26px; + font-size: 28px; font-weight: bold; color: $pri; } -.trend-label { - flex: 1; - font-size: 28px; +.trend-card-label { + font-size: 26px; color: $tx; font-weight: 500; + white-space: nowrap; } -.trend-arrow { - font-size: 32px; +.trend-card-arrow { + font-size: 22px; color: $tx3; - flex-shrink: 0; + margin-top: 8px; } /* ─── 最近监测 ─── */