改变排版

mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/printDialog.vue

@@ -43,39 +43,21 @@ const onPrint = () => {
     <style type="text/css">
       /* 浏览器打印基本样式 */
 @page {
-  size: 200mm 200mm;
+  size: 70mm 200mm;
   margin: 0;
-  orientation: portrait; /* 或 portrait 根据实际情况 */
 }
 @media print {
   .page {
     margin: 0;
-    border: initial;
-    border-radius: initial;
-    width: initial;
-    min-height: initial;
-    box-shadow: initial;
-    background: initial;
-    page-break-after: always;
-    
   }
+    .qr-page {
+      width: 70mm;
+      height: 200mm;
+      margin: 0;
+      padding: 0;
+    }
 }
-.qr-page {
-  page-break-after: always;
-   position: relative; /* 添加 position: relative; 以便使用 top 和 left */
-  transform: rotate(90deg);
-  transform-origin: left bottom; /* 设置旋转原点为左下角 */
-  top:-50mm; /* 调整 top 以确保元素位置正确 */
-  left: 0; /* 调整 left 以确保元素位置正确 */
-  
-}
-.qr-code-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
 
-}
     </style>
     <div>
       ${printNode.innerHTML}
@@ -165,18 +147,20 @@ const open = async (Fdata, vals, val, allSorts) => {
         }),
           (qrCodeElement.innerHTML +=
             `<div class="page qr-page">
-         <div class="qr-code-container" style=" padding:0 5mm; border:1px #d3d3d3 solid;display:flex; justify-content: flex-start; font-size:16px;font-weight:700;">
-           <img src="${qrCodeData}" width="30%"  alt="QR Code"/>
-            <div style="margin-left:5mm;text-align:left;width:70%;" >
-            <p style="line-height:20px;position: relative;width:100%;">订单名称(Order name)：${Fdata.code} <span style="position:absolute;right:0;bottom:0; border:1px solid #999;width:25px;height:25px;line-height:25px; text-align: center;border-radius: 50%;font-weight:500 !important;font-size:12px !important;color:#999;"> ${item.index}</span></p>
+         <div class="qr-code-container" style="padding:0mm;font-size:14px !important;font-weight:700;position: relative; height: 200mm">
+         <div style="text-align:center;"> <img src="${qrCodeData}" width="80%" alt="QR Code"/></div>
+            <div style="margin:0 2mm;text-align:left;" >
+            <p style="line-height:16px;">订单名称(Order name)：</p>
+            <p>${Fdata.code} </p>
             <hr style="margin: -10px 0;"/>
-             <p style="line-height:20px">序号(Serial number)：${specarr.value}- ${allSorts}</p>
+             <p style="line-height:16px;">序号(Serial number)：</p>
+             <p>${specarr.value}- ${allSorts} </p>
             <hr style="margin: -10px 0;"/>
-            <p style="line-height:20px">产品清单(Product list)：</p>` +
+            <p style="line-height:16px">产品清单(Product list)：</p>` +
             tempString +
             ` </div>
+            <span style="position:absolute;right:0;bottom:0; border:1px solid #999;width:25px;height:25px;line-height:25px; text-align: center;border-radius: 50%;font-weight:500 !important;font-size:12px !important;color:#999;"> ${item.index}</span>
         </div>
-
       </div>`)
       }
     })
@@ -189,55 +173,13 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 <style scoped lang="scss">
 .page {
-  width: 200mm;
-  min-height: 70mm;
+  width: 70mm;
+  min-height: 200mm;
   margin: auto;
-  border: 1px #d3d3d3 solid;
-  border-radius: 5px;
-  background: white;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-.qrCodeContainer {
-  width: 200mm;
-  height: 70mm;
-  border: 1px #d3d3d3 solid;
-  border-radius: 5px;
-  background: white;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
-@page {
-  size: 200mm 70mm;
-  margin: 0;
-}
-@media print {
-  .page {
-    margin: 0;
-    border: initial;
-    border-radius: initial;
-    width: initial;
-    min-height: initial;
-    box-shadow: initial;
-    background: initial;
-    page-break-after: always;
-  }
-}
-.qr-page {
-  page-break-after: always;
-}
-.qr-code-container {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border: 1px #d3d3d3 solid;
-  width: 200mm;
-  height: 69mm;
-}
 
-.qr-code-container-item {
-  width: 100mm;
-  height: 69mm;
-}
 /*
 	A4的大小：21cm*29.7cm（width:794px;）。
 	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/