feat: 建筑信息

package.json

@@ -12,6 +12,7 @@
     "@antv/g2plot": "^2.4.16",
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
+    "vue-count-to": "^1.0.13",
     "vue-router": "^3.5.1",
     "vue-seamless-scroll": "^1.1.23"
   },

src/views/main/right/BuildInfo/NumberValue1.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="__item">
+    <div class="number">
+      <CountTo  :startVal='0' :endVal='count' separator="" :duration='3000'/>
+    </div>
+    <div class="name">{{title}}</div>
+  </div>
+</template>
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    count: {
+      type: Number,
+      default: 0
+    },
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+
+
+.__item {
+  width: 154px;
+  height: 79px;
+  margin: 20px 0px;
+  font-size: 30px;
+  background: url("@/assets/images/number-bg1.png") no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  .name {
+    font-size: 18px;
+  }
+  .number {
+    font-weight: bold;
+    background-image:-webkit-linear-gradient(bottom,#06a57f,#f0ffff); 
+    -webkit-background-clip:text; 
+    -webkit-text-fill-color:transparent;
+  }
+}
+</style>

src/views/main/right/BuildInfo/NumberValue2.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="__item">
+    <div class="number-bg">
+      <div class="number">
+        <CountTo  :startVal='0' :endVal='count' separator="" :duration='3000'/>
+      </div>
+    </div>
+    <div class="name">{{title}}</div>
+  </div>
+</template>
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    count: {
+      type: Number,
+      default: 0
+    },
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.__item {
+  font-size: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  .name {
+    font-size: 18px;
+  }
+  .number-bg {
+    width: 120px;
+    height: 100px;
+    background: url("@/assets/images/number-bg2.png") no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 10px;
+    .number {
+      font-weight: bold;
+      background-image:-webkit-linear-gradient(bottom,#bf9b05,#f9f7d5); 
+      -webkit-background-clip:text; 
+      -webkit-text-fill-color:transparent;
+    }
+  }
+}
+</style>

src/views/main/right/BuildInfo/index.vue

@@ -1,16 +1,104 @@
 <template>
   <ContainerBorder title="建筑信息" pos="center">
-
-
+    <div class="build-info">
+      <div class="__top">
+        <span>建筑物</span>
+        <span class="unit">单位：栋</span>
+      </div>
+      <div class="build-data">
+        <NumberValue1 v-for="item in data1" :title="item.title" :count="item.count" />
+      </div>
+    </div>
+    <div class="unit-info">
+      <div class="__top">
+        <span>单位</span>
+        <span class="unit">单位：个</span>
+      </div>
+      <div class="unit-data">
+        <NumberValue2 v-for="item in data2" :title="item.title" :count="item.count" />
+      </div>
+    </div>
   </ContainerBorder>
 </template>
 
 <script>
 import { ContainerBorder } from '@/components'
+import NumberValue1 from './NumberValue1'
+import NumberValue2 from './NumberValue2'
 
 export default {
   components: {
-    ContainerBorder
-  }
+    ContainerBorder,
+    NumberValue1,
+    NumberValue2
+  },
+  data: () => ({
+    data1: [
+      {
+        title: '高层',
+        count: 2362
+      },
+      {
+        title: '超高层',
+        count: 1362
+      },
+      {
+        title: '多层',
+        count: 1362
+      }
+    ],
+    data2: [
+      {
+        title: '火灾高危单位',
+        count: 1362
+      },
+      {
+        title: '消防安全重点单位',
+        count: 1362
+      },
+      {
+        title: '一般单位',
+        count: 1362
+      },
+      {
+        title: '其他单位',
+        count: 1362
+      }
+    ]
+  }),
+  
 }
 </script>
+
+
+<style lang="less" scoped>
+
+.__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 20px;
+  font-size: 26px;
+  color: #fff;
+  background: #0c435d;
+
+  .unit {
+    font-size: 20px;
+  }
+}
+
+.build-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+  font-size: 40px;
+}
+.unit-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+  font-size: 40px;
+}
+</style>

src/views/main/right/index.vue

@@ -27,6 +27,6 @@ export default {
 
 <style>
 .margin-top {
-  margin-top: 50px;
+  margin-top: 30px;
 }
 </style>

yarn.lock

@@ -6009,6 +6009,11 @@ vary@~1.1.2:
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vue-count-to@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"
+  integrity sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"