微信小程序页面迁移校验之前 P5任务处理之前

apps/miniprogram - 副本/miniprogram/components/metric-card/metric-card.wxss

@@ -0,0 +1,82 @@
+.metric-card {
+  background: #ffffff;
+  border-radius: var(--radius-lg);
+  padding: 24rpx;
+  box-shadow: var(--shadow-lg);
+}
+
+.metric-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12rpx;
+}
+
+.metric-title {
+  font-size: var(--font-sm);
+  color: var(--color-gray-7);
+}
+
+.metric-help {
+  padding: 4rpx;
+}
+
+.metric-body {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+  margin-bottom: 8rpx;
+}
+
+.metric-value {
+  font-size: 48rpx;
+  font-weight: 700;
+  color: var(--color-gray-13);
+  font-variant-numeric: tabular-nums;
+}
+
+.metric-unit {
+  font-size: var(--font-sm);
+  color: var(--color-gray-7);
+}
+
+.metric-trend {
+  display: flex;
+  align-items: center;
+}
+
+.trend-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4rpx;
+  padding: 4rpx 12rpx;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-xs);
+}
+
+/* 上升 → 绿色 */
+.trend-up {
+  color: var(--color-success);
+  background: rgba(0, 168, 112, 0.08);
+}
+
+/* 下降 → 红色 */
+.trend-down {
+  color: var(--color-error);
+  background: rgba(227, 77, 89, 0.08);
+}
+
+/* 持平 → 灰色 */
+.trend-flat {
+  color: var(--color-gray-7);
+  background: rgba(139, 139, 139, 0.08);
+}
+
+.trend-flat-icon {
+  font-weight: 700;
+}
+
+.trend-text {
+  font-size: var(--font-xs);
+  font-variant-numeric: tabular-nums;
+}