Polish dashboard mobile KPI layout

templates/dashboard_v2.html

@@ -7,6 +7,16 @@
     .dashboard-v2-stack {
         display: grid;
         gap: 24px;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .dashboard-v2-stack > section,
+    .dashboard-filter-card,
+    .dashboard-table-card,
+    .dashboard-table-wrap {
+        min-width: 0;
+        max-width: 100%;
     }
 
     .dashboard-section-label {
@@ -14,6 +24,8 @@
         align-items: baseline;
         gap: 10px;
         margin-bottom: 12px;
+        min-width: 0;
+        flex-wrap: wrap;
     }
 
     .dashboard-section-label .num {
@@ -47,6 +59,8 @@
         margin-left: auto;
         color: var(--momo-text-tertiary);
         font-size: 10px;
+        min-width: 0;
+        overflow-wrap: anywhere;
     }
 
     .dashboard-kpi-grid {
@@ -113,7 +127,7 @@
         color: var(--momo-text-primary);
         font-size: 34px;
         font-weight: 800;
-        letter-spacing: -0.04em;
+        letter-spacing: 0;
         line-height: 1;
     }
 
@@ -195,7 +209,7 @@
         color: var(--momo-danger);
         font-size: 24px;
         font-weight: 800;
-        letter-spacing: -0.02em;
+        letter-spacing: 0;
         line-height: 1;
     }
 
@@ -431,7 +445,10 @@
     }
 
     .dashboard-table-wrap {
+        width: 100%;
+        max-width: 100%;
         overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
     }
 
     .dashboard-table {
@@ -865,8 +882,11 @@
 
     @media (max-width: 640px) {
         .dashboard-kpi-grid,
-        .dashboard-focus-grid,
         .dashboard-ai-summary-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        .dashboard-focus-grid {
             grid-template-columns: 1fr;
         }
 
@@ -880,14 +900,54 @@
         }
 
         .dashboard-kpi {
-            border-right: 0;
+            padding: 14px;
+            border-right: 1px solid var(--momo-border-light);
             border-bottom: 1px solid var(--momo-border-light);
         }
 
-        .dashboard-kpi:last-child {
+        .dashboard-kpi:nth-child(2n) {
+            border-right: 0;
+        }
+
+        .dashboard-kpi:nth-last-child(-n + 2) {
             border-bottom: 0;
         }
 
+        .dashboard-kpi.is-accent {
+            color: var(--momo-text-primary);
+            background: var(--momo-bg-surface);
+            border-left: 3px solid var(--momo-ink);
+        }
+
+        .dashboard-kpi.is-accent .dashboard-kpi-label,
+        .dashboard-kpi.is-accent .dashboard-kpi-sub {
+            color: var(--momo-text-tertiary);
+        }
+
+        .dashboard-kpi.is-accent .dashboard-kpi-value {
+            color: var(--momo-text-primary);
+        }
+
+        .dashboard-kpi-label {
+            margin-bottom: 7px;
+            font-size: 9px;
+            letter-spacing: 0.06em;
+        }
+
+        .dashboard-kpi-value {
+            margin-bottom: 6px;
+            font-size: 24px;
+        }
+
+        .dashboard-kpi-value.is-small {
+            font-size: 14px;
+        }
+
+        .dashboard-kpi-sub {
+            font-size: 10px;
+            line-height: 1.35;
+        }
+
         .dashboard-search,
         .dashboard-select,
         .dashboard-segmented {
@@ -897,6 +957,23 @@
         .dashboard-segmented {
             overflow-x: auto;
         }
+
+        .dashboard-table-wrap::before {
+            content: '左右滑動查看完整商品列表';
+            position: sticky;
+            left: 0;
+            display: block;
+            width: fit-content;
+            max-width: calc(100vw - 28px);
+            margin: 0 0 8px;
+            padding: 6px 9px;
+            color: var(--momo-text-secondary);
+            background: var(--momo-bg-paper);
+            border: 1px solid var(--momo-border-light);
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 700;
+        }
     }
 </style>
 {% endblock %}