<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,
    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>
