a4打印模板修改

public/order-print-module/module0.html

@@ -16,7 +16,7 @@
 
     .table table td,
     .table table th {
-      padding: 15px;
+      padding: 10px;
       font-size: 16px;
     }
 
@@ -30,14 +30,18 @@
       position: relative;
       display: flex;
       justify-content: center;
-      font-size: 25px;
+      font-size: 20px;
       font-weight: bold;
-      padding: 10px 0;
+    }
+
+    .shop-name {
+      width: 350px;
+      text-align: center;
     }
 
     .order-num {
       position: absolute;
-      top: 10px;
+      top: 0;
       right: 10px;
     }
 
@@ -45,14 +49,20 @@
       font-weight: bold;
     }
 
+    .product-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-around;
+    }
+
     .product-info {
       display: flex;
       padding: 15px 0;
     }
 
     .product-img {
-      width: 220px;
-      height: 220px;
+      width: 150px;
+      height: 150px;
       margin-right: 15px;
     }
 
@@ -73,7 +83,10 @@
         <tr>
           <td colspan="4">
             <div class="title">
-              <div>平台店铺名称(配送单)</div>
+              <div class="shop-name">
+                <span>平台店铺名称</span>
+                (配送单)
+              </div>
               <div class="order-num">订单号：M1</div>
             </div>
           </td>
@@ -94,12 +107,14 @@
         <tr class="tr-goods">
           <td style="line-height: 1.5">商品信息</td>
           <td colspan="3">
-            <div class="product-info">
-              <img class="product-img"
-                src="https://ecloud-cdn.51sssd.com/20230309/9cd72cf69ade42b398aededd219c53a0.jpg">
-              <div class="other-info">
-                <p class="product-name content">这里是商品标题</p>
-                <p class="product-tips">这里是商品的描述信息</p>
+            <div class="product-list">
+              <div class="product-info">
+                <img class="product-img"
+                  src="https://ecloud-cdn.51sssd.com/20230309/9cd72cf69ade42b398aededd219c53a0.jpg">
+                <div class="other-info">
+                  <p class="product-name content">这里是商品标题</p>
+                  <p class="product-tips">这里是商品的描述信息</p>
+                </div>
               </div>
             </div>
           </td>

public/order-print-module/module1.html

@@ -16,7 +16,7 @@
 
     .table table td,
     .table table th {
-      padding: 15px;
+      padding: 10px;
       font-size: 16px;
     }
 
@@ -30,14 +30,18 @@
       position: relative;
       display: flex;
       justify-content: center;
-      font-size: 25px;
+      font-size: 20px;
       font-weight: bold;
-      padding: 10px 0;
+    }
+
+    .shop-name {
+      width: 350px;
+      text-align: center;
     }
 
     .order-num {
       position: absolute;
-      top: 10px;
+      top: 0;
       right: 10px;
     }
 
@@ -78,7 +82,7 @@
         <tr>
           <td colspan="4">
             <div class="title">
-              <div>平台店铺名称(预订单)</div>
+              <div class="shop-name">平台店铺名称(预订单)</div>
               <div class="order-num">订单号：M1</div>
             </div>
           </td>

public/order-print-module/module2.html

@@ -16,7 +16,7 @@
 
     .table table td,
     .table table th {
-      padding: 15px;
+      padding: 10px;
       font-size: 16px;
     }
 
@@ -30,14 +30,18 @@
       position: relative;
       display: flex;
       justify-content: center;
-      font-size: 25px;
+      font-size: 20px;
       font-weight: bold;
-      padding: 10px 0;
+    }
+
+    .shop-name {
+      width: 350px;
+      text-align: center;
     }
 
     .order-num {
       position: absolute;
-      top: 10px;
+      top: 0;
       right: 10px;
     }
 
@@ -79,12 +83,12 @@
       width: 15px;
       height: 15px;
       border: 1px solid #333;
-      margin-left: 5px;
+      margin: 0 5px;
     }
 
     .contact {
       text-align: center;
-      line-height: 35px !important;
+      line-height: 25px !important;
     }
 
     .contact1 {
@@ -100,7 +104,7 @@
         <tr>
           <td colspan="4">
             <div class="title">
-              <div>平台店铺名称(配送单)</div>
+              <div class="shop-name">平台店铺名称(配送单)</div>
               <div class="order-num">订单号：M1</div>
             </div>
           </td>