危化品补充

src/views/disasterRiskMonitor/hazardousChemicals.vue

@@ -35,9 +35,9 @@
         <div v-for="(item, index) in rankData" :key="index" class="item">
           <i :class="getClass2(item.name)" />
           <div class="text1">{{ item.name }}</div>
-          <div class="text-box">
-            <i :class="getLevelClass(item.level)" />
-            {{ item.level }}
+          <div :class="getLevelClass(item.level)">
+            <i class="icon" />
+            <div class="text">{{ item.level }}</div>
           </div>
         </div>
       </div>
@@ -81,8 +81,16 @@ const getClass2 = (name) => {
   }
   return res
 }
-const getLevelClass = () => {
-
+const getLevelClass = (data) => {
+  let res = 'level1'
+  if (data === '一般风险') {
+    res = 'level2';
+  } else if (data === '较大风险') {
+    res = 'level3';
+  } else if (data === '重大风险') {
+    res = 'level4';
+  }
+  return res;
 }
 const initData = () => {
   const data = [{
@@ -261,6 +269,10 @@ onMounted(() => {
         background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/box.png') no-repeat;
         background-size: 100% 100%;
         margin-bottom: 16px;
+        .text1 {
+          width: 86px;
+          text-align: center;
+        }
         .icon-mn {
           background: url('@/assets/images/disasterRiskMonitor/hazardousChemicals/mn.png') no-repeat;
         }
@@ -288,6 +300,70 @@ onMounted(() => {
           background-size: 100% 100%;
         }
       }
+      .level1 {
+        display: flex;
+        align-items: center;
+        .icon {
+          display: inline-block;
+          margin: 0 8px 0 12px;
+          width: 12px;
+          height: 15px;
+          background: url(@/assets/images/disasterRiskMonitor/hazardousChemicals/icon1.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .text {
+          font-size: 14px;
+          color: #40C75F;
+        }
+      }
+      .level2 {
+        display: flex;
+        align-items: center;
+        .icon {
+          display: inline-block;
+          margin: 0 8px 0 12px;
+          width: 12px;
+          height: 15px;
+          background: url(@/assets/images/disasterRiskMonitor/hazardousChemicals/icon2.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .text {
+          font-size: 14px;
+          color: #2C81FF;
+        }
+      }
+      .level3 {
+        display: flex;
+        align-items: center;
+        .icon {
+          display: inline-block;
+          margin: 0 8px 0 12px;
+          width: 12px;
+          height: 15px;
+          background: url(@/assets/images/disasterRiskMonitor/hazardousChemicals/icon3.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .text {
+          font-size: 14px;
+          color: #FFAF00;
+        }
+      }
+      .level4 {
+        display: flex;
+        align-items: center;
+        .icon {
+          display: inline-block;
+          margin: 0 8px 0 12px;
+          width: 12px;
+          height: 15px;
+          background: url(@/assets/images/disasterRiskMonitor/hazardousChemicals/icon4.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .text {
+          font-size: 14px;
+          color: #FF2F3C;
+        }
+      }
     }
   }
 }