style: 创建po模块 - 样式调整.

src/App.vue

@@ -35,6 +35,7 @@ body {
 }
 
 #app {
+  background-color: rgb(233,230,231);
   height: 100%;
   width: 100%;
   position: relative;

src/pages/purchase-order/edit.vue

@@ -7,7 +7,7 @@
     ></div>
     <div
       class="flex"
-      style="position: fixed; top: 20px; right: 100px; z-index: 2"
+      style="position: fixed; top: 20px; right: calc((100% - 1600px) / 2 + 24px); z-index: 2"
     >
       <el-button
         type="info"
@@ -109,7 +109,7 @@
           </div>
 
           <div class="layout-right flex-auto">
-            <div style="position: absolute; right: 0; top: 0">
+            <div style="position: absolute; right: 24px; top: 0">
               <el-form-item label="Template:">
                 <el-select
                   v-model="currentCompany"
@@ -1962,6 +1962,10 @@ input[type='number'] {
   font-size: 12pt;
   line-height: 22pt;
 }
+.print {
+  padding: 20px 0;
+}
+
 .page-title-wrap {
   padding: 12px 36px;
   border-bottom: 1px solid #eee;
@@ -1998,6 +2002,7 @@ input[type='number'] {
   }
 }
 .screen {
+  background-color: #fff;
   max-width: 1600px;
   margin: 0 auto;
 
@@ -2132,6 +2137,7 @@ input[type='number'] {
   }
 }
 .preview-area {
+  background-color: #fff;
   font-size: 10pt;
   line-height: 22pt;
   color: $mainColor;
@@ -2295,6 +2301,7 @@ input[type='number'] {
 }
 
 .preview-area2 {
+  background-color: #fff;
   .supplier-name {
     font-size: 22pt;
     text-align: center;
@@ -2414,13 +2421,16 @@ input[type='number'] {
   .pdf-wrap {
     position: relative;
     width: 21cm;
-    min-height: 29.69cm;
-    margin: 20px auto;
+    margin:0 auto;
     box-shadow: 1px 1px 2pt 0px $subColor;
+    & + .pdf-wrap {
+      margin-top: 20px;
+    }
   }
   .preview-area,
   .preview-area2 {
     padding: 1cm;
+    min-height: 29.69cm;
   }
 }
 </style>