feature/二维码样式修改

src/views/plan/order/index.vue

@@ -191,13 +191,22 @@
         <div style="padding: 0 20px; text-align: center">
           二维码数量:{{ scanCodeArray.length }}
         </div>
-        <el-scrollbar class="scrollbar">
+        <el-scrollbar class="scrollbarA">
           <div
-            class="scancodeitem"
-            v-for="(item, index) in scanCodeArray"
-            :key="index"
+            class="box"
+            :style="
+              scanCodeArray.length == 1 ? '   justify-content: center;' : ''
+            "
           >
-            <vue-qrcode :value="item" size="70" error-level="H" />
+            <div
+              class="scancodeitem"
+              v-for="(item, index) in scanCodeArray"
+              :key="index"
+            >
+              <div class="qrcodeItem">
+                <vue-qrcode :value="item" size="70" error-level="low" />
+              </div>
+            </div>
           </div>
 
           <div v-if="scanCodeArray.length < 1">暂无数据</div>
@@ -847,14 +856,18 @@ const onSelectedFinish = (selectedValue) => {
       }
     }
     .scancodeitem {
-      width: 100%;
+      width: 300px;
       height: 300px;
-      margin: 20px 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      margin: 0 20px;
+      display: inline-block;
       border-radius: 16px;
       border: 1px solid black;
+      padding-top: 10px;
+      .qrcodeItem {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
   }
   .bottombtn {
@@ -862,5 +875,45 @@ const onSelectedFinish = (selectedValue) => {
     justify-content: center;
     align-items: center;
   }
+  .scrollbarA {
+    padding: 20px;
+    height: 350px;
+    .box {
+      display: flex;
+      align-items: center;
+
+      .item {
+        margin: 20px 0;
+        width: 100%;
+        background-color: #80808030;
+        border-radius: 16px;
+        height: 60px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        .el-icon {
+          width: 50px;
+          height: 50px;
+          color: red;
+          cursor: pointer;
+        }
+      }
+      .scancodeitem {
+        width: 300px;
+        height: 300px;
+        margin: 0 20px;
+        display: inline-block;
+        border-radius: 16px;
+        border: 1px solid black;
+        padding-top: 10px;
+        .qrcodeItem {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
 }
 </style>