css

lms/nladmin-ui/src/views/wms/produceScreen/index.vue

@@ -4,8 +4,8 @@
     <div class="m-content">
       <p>{{ screenData.device_name }}</p>
     </div>
-    <div class="button-wraper">
-      <div v-for="(e, i) in screenData.region_points" :key="i" class="button-item">
+    <div class="button-wraper" :style="screenData.region_points.length <= 2 ? 'justify-content: center' : 'justify-content: space-between'">
+      <div v-for="(e, i) in screenData.region_points" :key="i" class="button-item" :class="{'button-item_3': screenData.region_points.length <= 3}">
         <p v-if="e.type === '1'" class="point_name">{{ e.name }}</p>
         <p v-if="e.type === '0'" class="point_name point_name_btn" @click="showPop('IN', e)">{{ e.name }}</p>
         <p class="point_value">{{ e.device_code }}</p>

lms/nladmin-ui/src/views/wms/produceScreen/style.scss

@@ -189,7 +189,6 @@
 }
 .button-wraper {
   display: flex;
-  justify-content: center;
   width: 84%;
 }
 .button-item {
@@ -197,8 +196,15 @@
   height: 100%;
   border-radius: 20px;
   background-image: linear-gradient(to right, rgba(36, 128, 207, 0.5), rgba(15, 61, 101, 0.5));
-  margin-right: 2%;
   padding-top: 30px;
+  margin-right: 2%;
+  &:last-child {
+    margin-right: 0;
+  }
+}
+.button-item_3 {
+  width: 30%;
+  margin-right: 5%;
   &:last-child {
     margin-right: 0;
   }
@@ -228,13 +234,14 @@
   margin: 20% 0;
 }
 .button {
-  font-size: 18px;
+  font-size: 20px;
   line-height: 46px;
   color: #fff;
   font-weight: 700;
   text-align: center;
   background-image: linear-gradient(0deg, #277ddc, #213bc6);
   width: 80%;
+  max-width: 150px;
   margin: 30px auto;
   border-radius: 10px;
   border: 1px solid #2965e2;