feat：火灾指标

app/src/views/Home/components/FireIndex.vue

@@ -1,9 +1,106 @@
 <template>
-  <div>
-    <div></div>
+  <div class="fire-list">
+    <!-- 火灾总数 -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">456</span>
+          <span>起</span>
+        </div>
+        <div>火灾总数</div>
+      </div>
+      <div>
+        <img src="../../../assets/images/Vector (1).png" alt="">
+        <span class="num">15%</span>
+      </div>
+    </div>
+    <!--亡人  -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">8</span>
+          <span>人</span>
+        </div>
+        <div>亡人</div>
+      </div>
+      <div>
+        <img src="../../../assets/images/Vector (2).png" alt="">
+        <span class="num">15%</span>
+      </div>
+    </div>
+    <!-- 伤人 -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">46</span>
+          <span>人</span>
+        </div>
+        <div>伤人</div>
+      </div>
+      <div>
+        <img src="../../../assets/images/Vector (1).png" alt="">
+        <span class="num">10%</span>
+      </div>
+    </div>
+    <!-- 直接经济损失 -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">6</span>
+          <span class="money">万元</span>
+          <img src="../../../assets/images/Vector (1).png" alt="">
+        <span class="num">15%</span>
+        </div>
+        <div class="manoue">直接经济损失</div>
+      </div>
+      <!-- <div>
+        <img src="../../../assets/images/Vector (1).png" alt="">
+        <span class="num">15%</span>
+      </div> -->
+    </div>
   </div>
 </template>
 
 <script></script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.fire-list{
+  display: flex;
+  justify-content: space-around;
+  margin: 14px 2px 10px 5px;
+  letter-spacing: 1px;
+}
+// 渐变
+.fire{
+  width: 105px;
+  height: 40px;
+  background: #2b3739;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 3px 0;
+  border-radius: 2px;
+  .fire-num{
+    color: #FFBF1A;
+    font-size: 20px;
+    
+  }
+  .num{
+    color: #FB3636;
+    font-size: 16px
+  }
+}
+img{
+  display: inline-block;
+  width: 10px;
+  height: 20px;
+}
+.manoue{
+  font-size: 12px !important;
+  margin-right: 10px;
+}
+.money{
+  margin-right: 5px;
+}
+</style>

app/src/views/Home/index.vue

@@ -53,7 +53,7 @@
             <WisdomFire />
           </border-panel>
           <border-panel height="298px" title="火灾指标">
-            3333
+         <FireIndex/>
             <template #ext-header>
               <!-- TODO  实现火灾指标日期范围切换事件 -->
               <button-block :items="['月', '年']" />
@@ -71,6 +71,7 @@ import HiddenDangerDetection from "./components/HiddenDangerDetection.vue";
 import MapCharts from "./components/MapCharts.vue";
 import RiskWarning from "./components/RiskWarning.vue";
 import WisdomFire from "./components/WisdomFire.vue";
+import FireIndex from './components/FireIndex.vue'
 export default {
   name: "HomePage",
   components: {
@@ -81,6 +82,7 @@ export default {
     RiskWarning,
     AutonomousManagement,
     HiddenDangerDetection,
+    FireIndex
   },
 };
 </script>