Pārlūkot izejas kodu

```
feat(gameScore): 优化打印样式提升打印效果一致性

- 移除排名行的内联样式,改用CSS类控制排名背景色
- 添加完整的打印媒体查询样式,确保打印预览和实际打印效果一致
- 优化表格边框、字体大小、行高等打印样式细节
- 添加页面边距、纸张大小等页面设置
- 增加对IE浏览器的打印兼容性支持
- 统一打印时的字体族和颜色显示
```

zhou 3 mēneši atpakaļ
vecāks
revīzija
9dce32d699
2 mainītis faili ar 229 papildinājumiem un 14 dzēšanām
  1. 116 6
      src/views/system/gameScore/index.vue
  2. 113 8
      src/views/system/gameScore/print.vue

+ 116 - 6
src/views/system/gameScore/index.vue

@@ -664,18 +664,127 @@ const buildPrintHtml = (projects: any[], topCount: number) => {
           background: #f8f9fa;
           font-weight: bold;
         }
-        .rank-1 { background-color: #fff7e6; font-weight: bold; }
+        .rank-1 { background-color: #fff7e6; }
         .rank-2 { background-color: #f6ffed; }
         .rank-3 { background-color: #f0f9ff; }
+        
+        /* 打印样式 - 优化打印预览和实际打印效果一致性 */
         @media print {
-          @page {
-            margin: 20px;
+          * {
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+            background: transparent !important;
+            box-shadow: none !important;
+            text-shadow: none !important;
           }
+          
           body {
-            padding: 0;
+            font-family: SimSun, "Times New Roman", serif !important;
+            font-size: 12pt !important;
+            line-height: 1.4 !important;
+            color: #000 !important;
+            padding: 0 !important;
+          }
+          
+          .print-container {
+            padding: 0 !important;
+            max-width: 100% !important;
+          }
+          
+          .print-content {
+            width: 100% !important;
+            max-width: 100% !important;
           }
+          
           .project-section {
-            page-break-inside: avoid;
+            page-break-inside: avoid !important;
+            page-break-after: auto !important;
+          }
+          
+          .score-table {
+            width: 100% !important;
+            border-collapse: collapse !important;
+            font-size: 11pt !important;
+            page-break-inside: avoid !important;
+          }
+          
+          .score-table th,
+          .score-table td {
+            border: 1px solid #000 !important;
+            padding: 5pt !important;
+            text-align: center !important;
+            vertical-align: middle !important;
+          }
+          
+          .score-table th {
+            background-color: #f8f9fa !important;
+            color: #000 !important;
+            font-weight: bold !important;
+          }
+          
+          .score-table thead {
+            display: table-header-group !important; /* 确保表头在每页重复 */
+          }
+          
+          .score-table tbody {
+            display: table-row-group !important;
+          }
+          
+          /* 确保排名样式在打印中正确显示 */
+          .rank-1 {
+            background-color: #fff7e6 !important;
+            color: #000 !important;
+          }
+          
+          .rank-2 {
+            background-color: #f6ffed !important;
+            color: #000 !important;
+          }
+          
+          .rank-3 {
+            background-color: #f0f9ff !important;
+            color: #000 !important;
+          }
+          
+          /* 设置页面边距 */
+          @page {
+            margin: 20mm !important;
+            size: A4 !important;
+          }
+          
+          /* 避免第一页顶部和最后一页底部有太多空白 */
+          .print-header {
+            page-break-after: avoid !important;
+            border-bottom: 2px solid #000 !important;
+            margin-bottom: 30pt !important;
+            padding-bottom: 20pt !important;
+          }
+          
+          /* 确保字体大小在打印中保持一致 */
+          h1 {
+            font-size: 18pt !important;
+            margin-bottom: 10pt !important;
+            color: #000 !important;
+          }
+          
+          .project-title {
+            font-size: 14pt !important;
+            margin-bottom: 10pt !important;
+            padding: 8pt !important;
+            border-left: 4px solid #000 !important;
+            background-color: #f5f5f5 !important;
+            color: #000 !important;
+          }
+          
+          .title-label {
+            color: #000 !important;
+          }
+          
+          /* 确保在IE浏览器中也能正常打印 */
+          @media print and (-ms-high-contrast: none), print and (-ms-high-contrast: active) {
+            * {
+              color-adjust: exact !important;
+            }
           }
         }
       </style>
@@ -706,7 +815,7 @@ const buildPrintHtml = (projects: any[], topCount: number) => {
             </thead>
             <tbody>
               ${project.scores.slice(0, topCount).map((score: any, index: number) => `
-                <tr class="${index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : 'rank-3'}">
+                <tr>
                   <td>${score.classification === '0' ? '个人项目' : '团体项目'}</td>
                   <td>第${Number(index) + 1}名</td>
                   <td>${score.teamName || '-'}</td>
@@ -929,3 +1038,4 @@ onMounted(() => {
 </script>
 
 
+

+ 113 - 8
src/views/system/gameScore/print.vue

@@ -33,8 +33,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(score, index) in project.scores.slice(0, topCount)" :key="score.scoreId" 
-                :class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : 'rank-3'">
+            <tr v-for="(score, index) in project.scores.slice(0, topCount)" :key="score.scoreId" >
               <td>{{ score.classification === '0' ? '个人项目' : '团体项目' }}</td>
               <td>第{{ Number(index) + 1 }}名</td>
               <td>{{ score.teamName || '-' }}</td>
@@ -248,27 +247,133 @@ onMounted(() => {
   color: #333;
 }
 
-.rank-1 { background-color: #fff7e6; font-weight: bold; }
+.rank-1 { background-color: #fff7e6; }
 .rank-2 { background-color: #f6ffed; }
 .rank-3 { background-color: #f0f9ff; }
 
 /* 打印样式 */
 @media print {
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  
+  body {
+    font-family: SimSun, "Times New Roman", serif !important;
+    font-size: 12pt !important;
+    line-height: 1.4 !important;
+    color: #000 !important;
+  }
+  
   .print-actions {
-    display: none;
+    display: none !important;
   }
   
   .print-container {
-    padding: 0;
+    padding: 0 !important;
+    max-width: 100% !important;
+  }
+  
+  .print-content {
+    width: 100% !important;
+    max-width: 100% !important;
   }
   
   .project-section {
-    page-break-inside: avoid;
+    page-break-inside: avoid !important;
+    page-break-after: auto !important;
+  }
+  
+  .score-table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    font-size: 11pt !important;
+  }
+  
+  .score-table th,
+  .score-table td {
+    border: 1px solid #000 !important;
+    padding: 5pt !important;
+    text-align: center !important;
+    vertical-align: middle !important;
   }
   
   .score-table th {
-    background: #f8f9fa !important;
-    -webkit-print-color-adjust: exact;
+    background-color: #f8f9fa !important;
+    color: #000 !important;
+    font-weight: bold !important;
+  }
+  
+  /* 确保排名样式在打印中正确显示 */
+  .rank-1 {
+    background-color: #fff7e6 !important;
+    color: #000 !important;
+  }
+  
+  .rank-2 {
+    background-color: #f6ffed !important;
+    color: #000 !important;
+  }
+  
+  .rank-3 {
+    background-color: #f0f9ff !important;
+    color: #000 !important;
+  }
+  
+  /* 设置页面边距 */
+  @page {
+    margin: 20mm !important;
+    size: A4 !important;
+  }
+  
+  /* 避免第一页顶部和最后一页底部有太多空白 */
+  .print-header {
+    page-break-after: avoid !important;
+  }
+  
+  /* 确保表格不被截断 */
+  .score-table {
+    page-break-inside: avoid !important;
+  }
+  
+  .score-table thead {
+    display: table-header-group !important; /* 确保表头在每页重复 */
+  }
+  
+  .score-table tbody {
+    display: table-row-group !important;
+  }
+  
+  /* 隐藏可能干扰打印的元素 */
+  .no-print {
+    display: none !important;
+  }
+  
+  /* 确保字体大小在打印中保持一致 */
+  h1 {
+    font-size: 18pt !important;
+    margin-bottom: 10pt !important;
+    color: #000 !important;
+  }
+  
+  .project-title {
+    font-size: 14pt !important;
+    margin-bottom: 10pt !important;
+    padding: 8pt !important;
+    border-left: 4px solid #000 !important;
+    background-color: #f5f5f5 !important;
+    color: #000 !important;
+  }
+  
+  /* 确保在IE浏览器中也能正常打印 */
+  @media print and (-ms-high-contrast: none), print and (-ms-high-contrast: active) {
+    * {
+      color-adjust: exact !important;
+    }
   }
 }
 </style> 
+