质量报告打印斜线问题。

src/views/statistic/report/toPrintTables.vue

@@ -5,20 +5,18 @@ import {
   moduleScreeningData,
   productAcceptanceData,
 } from "@/api/statistic/reportMockData";
-import {getQualityTableData} from "@/api/statistic/reportData";
+import { getQualityTableData } from "@/api/statistic/reportData";
 
 const detail = ref<any>({});
 
 const dialogVisible = ref(false);
-const tableData=ref([]);
+const tableData = ref([]);
 const openPrintDialog = (row) => {
   dialogVisible.value = true;
   console.info("openPrintDialog", row);
-    getQualityTableData(row).then(
-        (data)=>{
-          tableData.value=data.data;
-        }
-    )
+  getQualityTableData(row).then((data) => {
+    tableData.value = data.data;
+  });
   //   在这里调接口
   detail.value = row;
 };
@@ -63,10 +61,29 @@ defineExpose({
                   <tr>
                     <th rowspan="2">序号</th>
                     <th id="lineId" rowspan="2">
-                      <span style="float: left">筛选项目</span>
-                      <span style="float: right; margin-top: 10px"
-                        >产品型号<br />检验批号</span
-                      >
+                      <span class="left-text">筛选项目</span>
+                      <span class="right-text">产品型号/检验批号</span>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="xiexian">
+                        <path
+                          d="M 0 80 L 250 80 L 0 0 Z"
+                          stroke="rgba(0, 0, 0, 0.3)"
+                          stroke-width="1"
+                          fill="none"
+                        />
+                        <path
+                          d="M 0 80 L 250 80"
+                          stroke="rgba(0, 0, 0, 0.3)"
+                          stroke-width="1"
+                          fill="none"
+                        />
+                        <!-- 左边 -->
+                        <path
+                          d="M 250 80 L 0 0"
+                          stroke="rgba(0, 0, 0, 0.3)"
+                          stroke-width="1"
+                          fill="none"
+                        />
+                      </svg>
                     </th>
                     <th colspan="2">JMT332024</th>
                   </tr>
@@ -107,7 +124,10 @@ defineExpose({
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="(item, index) in tableData.salesReportList" :key="index">
+                  <tr
+                    v-for="(item, index) in tableData.salesReportList"
+                    :key="index"
+                  >
                     <td>{{ index }}</td>
                     <td>{{ item.created }}</td>
                     <td>{{ item.materialModel }}</td>
@@ -127,8 +147,29 @@ defineExpose({
                 <thead>
                   <tr>
                     <th id="lineId" rowspan="2">
-                      <span style="float: right">产品分类</span>
-                      <span style="float: left; margin-top: 10px">工序</span>
+                      <span class="right-text">产品分类</span>
+                      <span class="left-text">工序</span>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="xiexian">
+                        <path
+                          d="M 0 80 L 250 80 L 0 0 Z"
+                          stroke="rgba(0, 0, 0, 0.3)"
+                          stroke-width="1"
+                          fill="none"
+                        />
+                        <path
+                          d="M 0 80 L 250 80"
+                          stroke="rgba(0, 0, 0, 0.3)"
+                          stroke-width="1"
+                          fill="none"
+                        />
+                        <!-- 左边 -->
+                        <path
+                          d="M 250 80 L 0 0"
+                          stroke="rgba(0, 0, 0, 0.3)"
+                          stroke-width="1"
+                          fill="none"
+                        />
+                      </svg>
                     </th>
                     <th colspan="3">HTH328MJ</th>
                   </tr>
@@ -183,7 +224,12 @@ defineExpose({
     <template #header>
       <div class="dialog-header">
         <div>报告预览</div>
-        <el-button type="primary" size="small" @click="dialogVisible = false" v-print="'#print'">
+        <el-button
+          type="primary"
+          size="small"
+          @click="dialogVisible = false"
+          v-print="'#print'"
+        >
           打印
         </el-button>
       </div>
@@ -204,9 +250,39 @@ defineExpose({
 }
 
 #lineId {
-  background: #f2f2f2
-    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=)
-    no-repeat 100% center;
+  width: 250px;
+  height: 81px;
+  position: relative;
+  padding: 0;
+  //background: #f2f2f2
+  //  url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=)
+  //  no-repeat 100% center;
+
+  .xiexian {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .left-text {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    line-height: 40px;
+    width: 70%;
+    text-align: start;
+    padding-left: 10px;
+  }
+
+  .right-text {
+    position: absolute;
+    right: 0;
+    top: 0;
+    line-height: 40px;
+    width: 70%;
+    text-align: end;
+    padding-right: 10px;
+  }
 }
 @media print {
   #print {