<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <chart-layout title=" ">
    <div class="block-container">
      <div class="block" v-for="(value,key,index) in data" :key="index">
        <simple-block :data="value">
          <img :src="images[key]">
        </simple-block>
      </div>
    </div>
    <corner1 slot="corner"/>
  </chart-layout>
</template>

<script>
import SimpleBlock from './components/simpleBlock'
import ChartLayout from '@/components/layout/chartLayout'
import Corner1 from '@/components/corner/Corner1'
export default {
  name: 'introduce3',
  components: {Corner1, ChartLayout, SimpleBlock},
  data () {
    return {
      data: {
        area: {name: '三小场所', value: '12', unit: '个'},
        quhua: {name: '隐患场所', value: '14', unit: '个'},
        population: {name: '商事主体', value: '31', unit: '个'},
        street: {name: '异常企业', value: '42', unit: '个'},
        community: {name: 'P2P企业', value: '8', unit: '个'},
        grid: {name: '巡查次数', value: '121', unit: '次'}
      },
      images: {
        area: require('@/assets/images/city/icon-huanwei.png'),
        quhua: require('@/assets/images/city/icon-zhatu.png'),
        population: require('@/assets/images/city/icon-jingche.png'),
        street: require('@/assets/images/city/icon-xuncha.png'),
        community: require('@/assets/images/city/icon-shouli.png'),
        grid: require('@/assets/images/city/icon-jingcha.png')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block-container{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0.04rem;
  .block{
    width: 33%;
    height: 45%;
  }
}
</style>