overview页面 机器人列表布局使用flex

src/views/overview.vue

@@ -80,7 +80,7 @@
         </el-input>
       </div>
     </div>
-    <ul class="robots-box clearfix">
+    <ul class="robots-box">
       <li v-for="(item,index) in robotList" :key="item.tag"
           :class="[(item.base_status==='abnormal' ||item.coin_status==='abnormal' || item.profit_status === 'abnormal') ? 'abnormal' : item.status || 'normal']">
         <div class="operations">
@@ -128,6 +128,10 @@
           </div>
         </div>
       </li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
     </ul>
     <p v-if="robotList === null" class="no-data">暂无数据</p>
   </div>
@@ -615,16 +619,26 @@
     }
   }
   .robots-box {
-    width: calc(100% + 20px);
+    /*width: calc(100% + 20px);*/
+    display: flex;
+    align-items: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
   }
   ul.robots-box>li{
-    float: left;
-    margin: 0 20px 20px 0;
+    /*float: left;*/
+    /*margin: 0 20px 20px 0;*/
+    margin-bottom: 20px;
     width:306px;
     height:340px;
     background:rgba(255,255,255,1);
     border-radius:4px;
     padding: 13px 23px 0 20px;
+    &:empty {
+      height: 0;
+      border: none;
+    }
     &.normal {
       border:1px solid rgba(146,208,171,1);
       .chart-box {