邓洁: 优化界面

src/components/content/badGasInfo/BadGasInfo.vue

@@ -3,7 +3,10 @@
       id="bad-gas-info"
       :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
     <div class="title">有害气体</div>
-    <div class="info-list">
+    <div v-if="badGasList==null||badGasList.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="info-list">
       <gas-info-item
           v-for="item in badGasList"
           :key="item.equipmentId"
@@ -11,7 +14,6 @@
           @click="handleOpenChart"
       />
     </div>
-
     <div class="digital-tunnel">
       <el-dialog
           :close-on-click-modal="false"
@@ -355,32 +357,31 @@ const initChart = (type, values) => {
 
 <style lang="scss" scoped>
 #bad-gas-info {
+  margin-top:40px;
   cursor: pointer;
-  position: absolute;
+  //position: absolute;
   width: 824px;
+  min-height: 300px;
   //height: 621px;
-  top: 1441px;
-  right: 72px;
+  //top: 1441px;
+  //right: 72px;
   background-image: url(../../../assets/images/badGasInfo/bg.png);
-
+  padding: 22px 17px 25px 50px;
   .title {
-    width: 128px;
-    height: 45px;
-    font-size: 32px;
-    font-family: PingFang-SC, PingFang-SC;
+    font-size: 38px;
     font-weight: 800;
     color: #38cafb;
     line-height: 45px;
-    margin: 22px 0px 0px 62px;
+    //margin: 22px 0px 0px 62px;
   }
 
   .info-list {
     width: 100%;
-    height: calc(621px - 45px - 22px);
+    //height: calc(621px - 45px - 22px);
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    padding: 10px 0px 0px 10px;
+    padding: 16px 0 0 10px;
   }
 }
 </style>