保留页面布局

pages/mall/admin/homePage/components/KpiMiniCard.uvue

@@ -81,7 +81,7 @@ const props = withDefaults(defineProps<{
 const trendArrow = computed((): string => {
   if (props.trend === 'up') return '▲'
   if (props.trend === 'down') return '▼'
-  return '•'
+  return ''
 })
 
 const trendClass = computed((): string => {
@@ -94,33 +94,43 @@ const trendClass = computed((): string => {
 <style>
 .kpi-card{
   background-color:#ffffff;
-  border:1px solid #ebeef5;
-  border-radius:6px;
+  border-radius:4px;
   padding:16px;
-  box-shadow:0 2px 12px rgba(0,0,0,0.04);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.3s;
+  height: 200px; /* 固定高度 */
+  min-width: 0; /* 允许由父级 grid 容器决定宽度，防止在 4 列布局时撑爆容器 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; 
+}
+
+.kpi-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
 
 /* Header */
 .kpi-header{
   display:flex;
+  flex-direction: row;
   align-items:center;
   justify-content:space-between;
-  gap:12px;
+  margin-bottom: 8px;
+  flex-shrink: 0;
 
   .kpi-title{
     font-size:14px;
-    color:#303133;
-    font-weight:600;
+    color:#666666;
+    font-weight:400;
   }
   .kpi-tag{
-    padding:2px 8px;
-    border-radius:4px;
-    border:1px solid #e1f3d8;
-    background:#f0f9eb;
+    padding:1px 6px;
+    border-radius:2px;
+    background-color: #e8f4ff;
   }
   .kpi-tag-text{
     font-size:12px;
-    color:#67c23a;
+    color:#1890ff;
   }
 
 }
@@ -128,60 +138,82 @@ const trendClass = computed((): string => {
 
 /* Body */
 .kpi-body{
-  margin-top:10px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
   .kpi-main-value{
-    font-size:32px;
-    font-weight:600;
-    color:#303133;
-    line-height:40px;
+    font-size:30px;
+    font-weight:500;
+    color:#262626;
+    line-height:1.2;
+    margin-bottom: 4px;
   }
 
   /* “昨日 / 日环比” */
   .kpi-meta{
-    margin-top:8px;
     display:flex;
+    flex-direction: row;
     align-items:center;
-    justify-content:flex-start;
-    gap:12px;
-    flex-wrap:wrap;
+    gap:8px;
+    padding-bottom:12px;
+    border-bottom:1px solid #f0f0f0;
+    margin-bottom: auto; /* 将 footer 顶到底部 */
+    flex-wrap: nowrap; /* 不允许换行，依靠父容器 min-width 保证空间 */
   }
   .kpi-meta-text{
     font-size:12px;
-    color:#909399;
+    color:#8c8c8c;
+    flex-shrink: 0;
   }
   .kpi-meta-right{
     display:flex;
+    flex-direction: row;
     align-items:center;
-    gap:6px;
+    gap:4px;
+    flex-shrink: 0;
   }
   .kpi-trend-arrow{
     font-size:12px;
+    font-weight: 500;
   }
-  .kpi-trend-arrow.is-up{ color:#f56c6c; }
-  .kpi-trend-arrow.is-down{ color:#67c23a; }
-  .kpi-trend-arrow.is-flat{ color:#909399; }
+  .kpi-trend-arrow.is-up{ color:#ff4d4f; }
+  .kpi-trend-arrow.is-down{ color:#52c41a; }
+  .kpi-trend-arrow.is-flat{ color:#8c8c8c; }
 
   .kpi-divider{
-    height:1px;
-    background:#ebeef5;
-    margin:12px 0;
+    display: none; /* 已整合到 meta 的 border-bottom */
   }
 
   /* Footer */
   .kpi-footer{
     display:flex;
+    flex-direction: row;
     align-items:center;
     justify-content:space-between;
-    gap:12px;
+    flex-shrink: 0;
   }
   .kpi-footer-left{
     font-size:12px;
-    color:#909399;
+    color:#8c8c8c;
+    white-space: nowrap;
   }
   .kpi-footer-right{
     font-size:12px;
-    color:#909399;
+    color:#262626;
+    font-weight:500;
+    white-space: nowrap;
   }
 }
 
+/* 响应式微调 */
+@media screen and (max-width: 480px) {
+  .kpi-main-value {
+    font-size: 26px !important;
+  }
+  .kpi-card {
+    padding: 12px !important;
+  }
+}
 </style>