優化當日業績手機版排版

config.py

@@ -320,7 +320,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
 # ==========================================
 # 系統版本與路徑
 # ==========================================
-SYSTEM_VERSION = "V10.125"
+SYSTEM_VERSION = "V10.126"
 LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
 public_url = PUBLIC_URL  # 用於模板顯示
 

templates/daily_sales.html

@@ -357,15 +357,15 @@
               <tbody>
                 {% for cat in categories %}
                 <tr>
-                  <td>{{ cat.category }}</td>
-                  <td>{{ cat.vendor or '-' }}</td>
-                  <td class="num">${{ "{:,.0f}".format(cat.revenue) }}</td>
-                  <td class="num">${{ "{:,.0f}".format(cat.cost or 0) }}</td>
-                  <td class="num">${{ "{:,.0f}".format(cat.profit or 0) }}</td>
-                  <td class="num">{{ "{:.1f}%".format(cat.margin_rate) }}</td>
-                  <td class="num">{{ "{:,.0f}".format(cat.qty or 0) }}</td>
-                  <td class="num">{{ cat.sku_count or 0 }}</td>
-                  <td class="num">${{ "{:,.0f}".format(cat.avg_price) }}</td>
+                  <td data-label="分類">{{ cat.category }}</td>
+                  <td data-label="廠商">{{ cat.vendor or '-' }}</td>
+                  <td class="num" data-label="總業績">${{ "{:,.0f}".format(cat.revenue) }}</td>
+                  <td class="num" data-label="總成本">${{ "{:,.0f}".format(cat.cost or 0) }}</td>
+                  <td class="num" data-label="毛利">${{ "{:,.0f}".format(cat.profit or 0) }}</td>
+                  <td class="num" data-label="毛利率">{{ "{:.1f}%".format(cat.margin_rate) }}</td>
+                  <td class="num" data-label="總銷量">{{ "{:,.0f}".format(cat.qty or 0) }}</td>
+                  <td class="num" data-label="SKU 數">{{ cat.sku_count or 0 }}</td>
+                  <td class="num" data-label="平均單價">${{ "{:,.0f}".format(cat.avg_price) }}</td>
                 </tr>
                 {% endfor %}
               </tbody>

web/static/css/page-daily-sales.css

@@ -714,11 +714,11 @@
 
 .kpi-card__icon-bg {
   position: absolute;
-  right: -12px;
-  bottom: -12px;
-  font-size: 4.6rem;
+  right: 10px;
+  bottom: 10px;
+  font-size: 3.8rem;
   color: currentColor;
-  opacity: 0.08;
+  opacity: 0.06;
   transform: rotate(-12deg);
   pointer-events: none;
 }
@@ -845,11 +845,14 @@
 .chart-container--md { height: 350px; }
 
 .chart-responsive {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
+  min-width: 0;
+  overflow: hidden;
 }
 
-#top10ChartContainer { min-width: 400px; }
+#top10ChartContainer {
+  min-width: 0;
+  width: 100%;
+}
 
 .chart-mobile-hint {
   background: var(--momo-page-accent-soft);
@@ -929,8 +932,69 @@
 }
 
 @media (max-width: 767px) {
-  #categoryTable { min-width: 800px; white-space: nowrap; }
-  #categoryTable th, #categoryTable td { font-size: 0.82rem; padding: 0.5rem; }
+  .daily-sales-page .table-responsive {
+    overflow: visible;
+  }
+
+  #categoryTable,
+  #categoryTable thead,
+  #categoryTable tbody,
+  #categoryTable tr,
+  #categoryTable td {
+    display: block;
+    width: 100%;
+  }
+
+  #categoryTable thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  #categoryTable tbody {
+    display: grid;
+    gap: 10px;
+    padding: 10px 0;
+    background: var(--momo-bg-paper);
+  }
+
+  #categoryTable tbody tr {
+    background: var(--momo-bg-surface);
+    border: 1px solid var(--momo-border-light);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  #categoryTable tbody td {
+    display: grid;
+    grid-template-columns: minmax(82px, 0.36fr) minmax(0, 1fr);
+    gap: 10px;
+    align-items: start;
+    min-height: 38px;
+    padding: 9px 12px;
+    border-bottom: 1px solid var(--momo-border-light);
+    font-size: 0.78rem;
+    white-space: normal;
+  }
+
+  #categoryTable tbody td:last-child {
+    border-bottom: 0;
+  }
+
+  #categoryTable tbody td::before {
+    content: attr(data-label);
+    color: var(--momo-text-tertiary);
+    font-family: var(--momo-font-mono, ui-monospace, monospace);
+    font-size: 0.66rem;
+    font-weight: 800;
+  }
+
+  #categoryTable td.num {
+    text-align: left;
+  }
 }
 
 /* ---------- Mobile KPI compaction ---------- */
@@ -942,6 +1006,11 @@
   .daily-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .kpi-card__value { font-size: 1.2rem; }
   .kpi-card__label { font-size: 0.7rem; }
+  .kpi-card__icon-bg {
+    right: 8px;
+    bottom: 8px;
+    font-size: 2.8rem;
+  }
   .chart-container { height: 250px; }
 }
 
@@ -951,5 +1020,5 @@
 
 @media (max-width: 575px) {
   .chart-container { height: 220px; }
-  #top10ChartContainer { min-width: 450px; }
+  #top10ChartContainer { min-width: 0; }
 }