优化打印的页面

src/components/zhu-yuan-yi-sheng/shou-shu-shen-qing/DaYingShouShuShengQingDan.vue

@@ -5,15 +5,15 @@
     <el-radio v-model="zhiZhang" :label="2" size="large">A5</el-radio>
     <el-button @click="daYing">打印</el-button>
     <div id="daYing">
-      <div style="width:393pt;height:760px;background-color: white;font-size: 13px">
-        <div style="height: 20px"></div>
+      <div style="width:393pt;height:570pt;background-color: white;font-size: 9.75pt">
+        <div style="height: 15pt"></div>
         <table style="width: 100%;table-layout: fixed;">
           <thead style="text-align: center;">
           <tr>
             <th colspan="3">长沙泰和医院</th>
           </tr>
           <tr>
-            <th style="font-size: 14px" colspan="3">
+            <th style="font-size: 10.5pt" colspan="3">
               手术申请单
             </th>
           </tr>
@@ -27,9 +27,9 @@
           </tbody>
         </table>
         <!--    患者信息    -->
-        <div style="border: 1px solid #000;margin: 5px;height: 550px">
+        <div style="border: 0.75pt solid #000;margin: 3.75pt;height: 412.5pt">
 
-          <table style=" width: 100%; font-size: 12px">
+          <table style=" width: 100%; font-size: 9pt">
             <tr>
               <td>住院号：{{ data.inpatientNo }}</td>
               <td>床号：{{ data.bedNo }}</td>
@@ -39,7 +39,7 @@
             </tr>
           </table>
 
-          <table style="width: 100%; border-collapse:separate; border-spacing:5px 6px;">
+          <table style="width: 100%; border-collapse:separate; border-spacing:3.75pt 4.5pt;">
             <tr>
               <td>术前诊断：{{ data.diagBeforeOp }}</td>
             </tr>
@@ -51,18 +51,19 @@
             </tr>
           </table>
 
-          <table style="width: 100%; border-bottom: 1px solid #000; margin-top: 5px">
+          <table style="width: 100%; border-bottom: 0.75pt solid #000; margin-top: 3.75pt">
             <tr>
               <td>术前等级：{{ data.opScaleName }}</td>
               <td>术后等级：</td>
             </tr>
           </table>
 
-          <div style="width: 100%; margin: 4px 0 0 5px;">
+          <div style="width: 100%; padding: 4pt 2pt;box-sizing: border-box">
             主刀医生:{{ data.doctorZdName }}
           </div>
 
-          <table style="width: 100%;border-collapse:separate; border-spacing:5px 6px;border-bottom: 1px solid #000">
+          <table
+              style="width: 100%;border-collapse:separate; border-spacing:3.75pt 4.5pt;border-bottom: 0.75pt solid #000">
             <tr>
               <td>第一助手:{{ data.doctor1Name }}</td>
               <td>第二助手：{{ data.doctor2Name }}</td>
@@ -77,7 +78,8 @@
             </tr>
           </table>
 
-          <table style="width: 100%;border-collapse:separate; border-spacing:5px 6px;border-bottom: 1px solid #000">
+          <table
+              style="width: 100%;border-collapse:separate; border-spacing:3.75pt 4.5pt;border-bottom: 0.75pt solid #000">
             <tr>
               <td>申请日期：{{ data.applyDate }}</td>
               <td>手术时间：{{ data.opDatetime }}</td>
@@ -89,8 +91,8 @@
           </table>
 
           <div>
-            <div style="margin: 10px;">附注说明(包括传染疾病类型注明等)：</div>
-            <div style="width: 480px;height: 120px; margin:10px;overflow: hidden">
+            <div style="margin: 7.5pt;">附注说明(包括传染疾病类型注明等)：</div>
+            <div style="width: 360pt;height: 115pt; margin:7.5pt;overflow: hidden">
               {{ data.remark }}
             </div>
           </div>
@@ -130,7 +132,7 @@ const zuJianDaXiao = computed(() => {
 })
 const zhiZhang = ref(2)
 const data = ref({})
-const css = '*{font-size:16px}.tanXingHeZiHeng{display:flex;justify-content:space-between;margin-top:3pt;padding:0 3.75pt}.tanXingHeZiHeng2{display:flex;margin-top:3pt;padding:0 3.75pt}.tanXingHeZiShu{display:flex;flex-direction:column}.wen-zi{display:flex;margin-top:3pt;margin-left:5px;height:25px}.wen-zi div:first-child{display:flex;flex-direction:row;justify-content:center;text-align:right}.wen-zi div:nth-child(2){margin-left:3pt;display:table}.ge-zi{display:table-column}'
+const css = '*{font-size:12pt}.tanXingHeZiHeng{display:flex;justify-content:space-between;margin-top:3pt;padding:0 3.75pt}.tanXingHeZiHeng2{display:flex;margin-top:3pt;padding:0 3.75pt}.tanXingHeZiShu{display:flex;flex-direction:column}.wen-zi{display:flex;margin-top:3pt;margin-left:3.75pt;height:23.75pt}.wen-zi div:first-child{display:flex;flex-direction:row;justify-content:center;text-align:right}.wen-zi div:nth-child(2){margin-left:3pt;display:table}.ge-zi{display:table-column}'
 
 const situationFunc = () => {
   if (XEUtils.isEmpty(data.value.urgentClinicFlag)) {
@@ -173,7 +175,7 @@ defineExpose({
 
 <style scoped>
 * {
-  font-size: 16px;
+  font-size: 12pt;
 }
 
 .tanXingHeZiHeng {
@@ -197,8 +199,8 @@ defineExpose({
 .wen-zi {
   display: flex;
   margin-top: 3pt;
-  margin-left: 5px;
-  height: 25px;
+  margin-left: 3.75pt;
+  height: 23.75pt;
 }
 
 .wen-zi div:first-child {