修改列印呈現方式

2025-10-12 03:35:50 +08:00
parent fbb423243a
commit ef640e9bdb
2 changed files with 707 additions and 7 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -19,6 +19,179 @@
    padding: 0 !important;
  }
  
+  /* 管理員結果頁面專用樣式 - 並排佈局 */
+  .admin-result-print {
+    
+    /* 整體佈局調整 */
+    .container {
+      max-width: none !important;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    
+    /* 主容器調整 */
+    .admin-result-print .max-w-4xl {
+      max-width: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    
+    /* 主頁面並排佈局（非列印時） */
+    .admin-result-print .print-user-info {
+      width: 48% !important;
+      display: inline-block !important;
+      vertical-align: top !important;
+      margin: 0 !important;
+      margin-right: 2% !important;
+      margin-bottom: 1rem !important;
+    }
+    
+    .admin-result-print .print-logic-test {
+      width: 48% !important;
+      display: inline-block !important;
+      vertical-align: top !important;
+      margin: 0 !important;
+      margin-right: 2% !important;
+      margin-bottom: 1rem !important;
+    }
+    
+    .admin-result-print .print-creative-test {
+      width: 48% !important;
+      display: inline-block !important;
+      vertical-align: top !important;
+      margin: 0 !important;
+      margin-left: 2% !important;
+      margin-bottom: 1rem !important;
+    }
+    
+    /* 測驗結果卡片（綜合測試） */
+    .admin-result-print .text-center.mb-6:not(.print-logic-test):not(.print-creative-test) {
+      width: 48% !important;
+      display: inline-block !important;
+      vertical-align: top !important;
+      margin: 0 !important;
+      margin-left: 2% !important;
+      margin-bottom: 1rem !important;
+    }
+    
+    /* 其他卡片保持全寬度 */
+    .admin-result-print .card:not(.print-user-info):not(.print-logic-test):not(.print-creative-test) {
+      width: 100% !important;
+      display: block !important;
+      margin: 1rem 0 !important;
+    }
+    
+    /* 卡片樣式調整 */
+    .card {
+      margin: 0 !important;
+      padding: 0.3rem !important;
+      border: 1px solid #ccc !important;
+      page-break-inside: avoid !important;
+    }
+    
+    .card-header,
+    .card-content {
+      padding: 0.2rem !important;
+      margin: 0 !important;
+    }
+    
+    /* 分數圓圈縮小 */
+    .w-24.h-24,
+    .w-20.h-20,
+    .w-16.h-16 {
+      width: 2rem !important;
+      height: 2rem !important;
+    }
+    
+    /* 文字大小調整 */
+    .text-3xl {
+      font-size: 1rem !important;
+    }
+    
+    .text-2xl {
+      font-size: 0.875rem !important;
+    }
+    
+    .text-xl {
+      font-size: 0.75rem !important;
+    }
+    
+    .text-lg {
+      font-size: 0.7rem !important;
+    }
+    
+    .text-base {
+      font-size: 0.65rem !important;
+    }
+    
+    .text-sm {
+      font-size: 0.6rem !important;
+    }
+    
+    .text-xs {
+      font-size: 0.55rem !important;
+    }
+    
+    /* 網格佈局緊湊 */
+    .grid {
+      gap: 0.2rem !important;
+    }
+    
+    .grid-cols-3 {
+      grid-template-columns: repeat(3, 1fr) !important;
+    }
+    
+    .grid-cols-2 {
+      grid-template-columns: repeat(2, 1fr) !important;
+    }
+    
+    /* 進度條縮小 */
+    .h-3,
+    .h-2 {
+      height: 0.3rem !important;
+    }
+    
+    /* 徽章縮小 */
+    .badge {
+      font-size: 0.5rem !important;
+      padding: 0.1rem 0.2rem !important;
+    }
+    
+    /* 按鈕隱藏 */
+    .button,
+    button {
+      display: none !important;
+    }
+    
+    /* 間距調整 */
+    .space-y-8 > * + * {
+      margin-top: 0 !important;
+    }
+    
+    .space-y-6 > * + * {
+      margin-top: 0.1rem !important;
+    }
+    
+    .space-y-4 > * + * {
+      margin-top: 0.05rem !important;
+    }
+    
+    /* 列印時隱藏不需要的元素 */
+    @media print {
+      header,
+      .print\\:hidden,
+      .hide-in-print,
+      #detailed-results-card {
+        display: none !important;
+      }
+      
+      @page {
+        size: A4;
+        margin: 0.8cm;
+      }
+    }
+  }
+  
  .space-y-8 > * + * {
    margin-top: 1.5rem !important;
  }