<template>
  <div class="community-summary">
    <div>
      <div v-for="item in list.slice(0, 8)" :key="item.name">
        <img src="@/assets/images/location.png"/>
        <p>{{item.name}}</p>
        <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
      </div>
    </div>
    <div>
      <div v-for="item in list.slice(8)" :key="item.name">
        <img src="@/assets/images/location.png"/>
        <p>{{item.name}}</p>
        <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommunitySummary',
  data() {
    return {
      list: [
        {name: '浦东新区', value: 2790},
        {name: '静安区', value: 828},
        {name: '徐汇区', value: 983},
        {name: '杨浦区', value: 933},
        {name: '虹口区', value: 780},
        {name: '嘉定区', value: 636},
        {name: '松江区', value: 704},
        {name: '金山区', value: 243},
        {name: '黄浦区', value: 811},
        {name: '普陀区', value: 709},
        {name: '长宁区', value: 775},
        {name: '闵行区', value: 1071},
        {name: '宝山区', value: 813},
        {name: '青浦区', value: 412},
        {name: '奉贤区', value: 356},
        {name: '崇明区', value: 149},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.community-summary
  display flex
  height 100%
  >div
    flex 1
    >div
      display flex
      align-items center
      padding 0 .5rem
      line-height 1.8
      &:nth-child(2n+1)
        background $black
      p
        color $light-blue
        width 40%
        margin 0 .5rem
      img
        width 1rem
        height 1.2rem
</style>
