<template>
  <div class="city-environment">
    <div v-for="item in list" :key="item.title">
      <div>
        <img :src="require(`@/assets/images/${item.icon}`)" />
        <p>{{item.title}}</p>
      </div>
      <div>
        <m-count class="count" :value="item.value" :decimal="item.decimal" />
        <span class="unit">{{item.unit}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityEnvironment',
  data() {
    return {
      list: [
        {title: '空气质量', value: 91.1, unit: '%优良率', decimal: 1, icon: 'city1.png'},
        {title: 'PM2.5', value: 32, unit: '微克/㎡', decimal: 0, icon: 'city2.png'},
        {title: '人均绿地', value: 91.1, unit: '㎡/人', decimal: 2, icon: 'city3.png'},
        {title: '环卫公厕', value: 9, unit: '个', decimal: 0, icon: 'city4.png'},
        {title: '生活垃圾收集', value: 98, unit: '个', decimal: 0, icon: 'city5.png'},
        {title: '小型压缩站', value: 34, unit: '个', decimal: 0, icon: 'city6.png'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.city-environment
  display flex
  flex-wrap wrap
  width 100%
  height 100%
  >div
    width 33.3%
    >div
      display flex
      align-items center
      img
        width .13rem
        height @width
        margin-right .05rem
      .count
        font-size .12rem
        margin-left .18rem
      .unit
        color #999
        font-size .08rem
</style>
