fix(miniprogram): 补充健康 Hub 趋势横向滚动卡片样式 + 快捷操作 flex-wrap

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;
 }
 
 /* ─── 最近监测 ─── */