更改

src/views/Dashboard.vue

@@ -815,7 +815,7 @@ onMounted(async () => {
             </div>
           </header>
           <div class="dash-metric-card__body">
-            <div class="dash-stat-grid dash-stat-grid--core">
+            <div class="dash-stat-grid dash-stat-grid--core dash-stat-grid--align-left">
               <div class="dash-stat-cell dash-stat-cell--violet">
                 <div class="dash-stat-cell__value">{{ stats.summary.venues_count ?? 0 }}</div>
                 <div class="dash-stat-cell__label">现有场馆</div>
@@ -903,7 +903,7 @@ onMounted(async () => {
             </div>
           </header>
           <div class="dash-metric-card__body">
-            <div class="dash-stat-grid dash-stat-grid--schedule-act">
+            <div class="dash-stat-grid dash-stat-grid--schedule-act dash-stat-grid--align-left">
               <div class="dash-stat-cell dash-stat-cell--rose">
                 <div class="dash-stat-cell__value">{{ stats.activity_schedule_counts.total }}</div>
                 <div class="dash-stat-cell__label">活动数</div>
@@ -942,7 +942,7 @@ onMounted(async () => {
             </div>
           </header>
           <div class="dash-metric-card__body">
-            <div class="dash-stat-grid dash-stat-grid--schedule-tg">
+            <div class="dash-stat-grid dash-stat-grid--schedule-tg dash-stat-grid--align-left">
               <div class="dash-stat-cell dash-stat-cell--rose">
                 <div class="dash-stat-cell__value">{{ stats.ticket_grab_schedule_counts.total }}</div>
                 <div class="dash-stat-cell__label">总场数</div>
@@ -1460,12 +1460,6 @@ onMounted(async () => {
   }
 }
 
-@media (min-width: 1000px) {
-  .dash-stat-grid.dash-stat-grid--schedule-act {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}
-
 .dash-stat-grid.dash-stat-grid--schedule-tg {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1476,24 +1470,18 @@ onMounted(async () => {
   }
 }
 
-@media (min-width: 900px) {
-  .dash-stat-grid.dash-stat-grid--schedule-tg {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-}
-
 .dash-stat-cell.dash-stat-cell--verify-rate {
   grid-column: 1 / -1;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 520px) {
   .dash-stat-cell.dash-stat-cell--verify-rate {
     grid-column: auto;
   }
 }
 
 .dash-stat-cell__value--pct {
-  font-size: clamp(20px, 2.2vw, 26px);
+  font-size: clamp(19px, 2.2vw, 25px);
   letter-spacing: -0.02em;
 }
 
@@ -1624,12 +1612,6 @@ onMounted(async () => {
   }
 }
 
-@media (min-width: 1100px) {
-  .dash-stat-grid.dash-stat-grid--core {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}
-
 .dash-stat-cell {
   border-radius: 10px;
   padding: 12px 10px 14px;
@@ -1638,7 +1620,7 @@ onMounted(async () => {
 }
 
 .dash-stat-cell__value {
-  font-size: clamp(22px, 2.5vw, 30px);
+  font-size: clamp(21px, 2.5vw, 29px);
   font-weight: 700;
   line-height: 1.1;
   font-variant-numeric: tabular-nums;
@@ -1715,6 +1697,46 @@ onMounted(async () => {
   color: #0d9488;
 }
 
+.dash-stat-grid--align-left {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.dash-stat-grid--align-left .dash-stat-cell {
+  box-sizing: border-box;
+  flex: 0 0 calc((100% - 10px) / 2);
+  max-width: calc((100% - 10px) / 2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 12px 10px 14px;
+}
+
+@media (min-width: 640px) {
+  .dash-stat-grid--align-left .dash-stat-cell {
+    flex: 0 0 calc((100% - 20px) / 3);
+    max-width: calc((100% - 20px) / 3);
+  }
+}
+
+.dash-stat-grid--align-left .dash-stat-cell__value,
+.dash-stat-grid--align-left .dash-stat-cell__label,
+.dash-stat-grid--align-left .dash-stat-cell__hint {
+  text-align: center;
+  width: 100%;
+}
+
+@media (max-width: 639px) {
+  .dash-stat-grid--align-left .dash-stat-cell--verify-rate {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
 .dash-todo-sheet {
   --dash-todo-row-h: 44px;
   flex: 1;