<template>
  <m-scroll :length="list.length" :limit="6">
    <div class="govern-wrapper">
      <div class="inner" v-for="item in list" :key="item.name">
        <p><m-count autoUpdate style="color: gold;font-size:1.2rem" :value="item.count" :decimal="0"/> 件</p>
        <p>{{item.name}}</p>
      </div>
  </div>
  </m-scroll>
</template>

<script>
export default {
  name: 'Govern',
  data() {
    return {}
  },
  computed: {
    list() {
      const {data} = require('../../../static/mock.json')
      return data.map(e => {
        return {
          name: e.name,
          count: e.count || 0,
        }
      })
    }
  },
}
</script>

<style lang="stylus" scoped>
.govern-wrapper
  display flex
  flex-wrap wrap
  .inner
    width 33.3%
    padding-right 1rem
    margin-bottom 1rem
    text-align center
    p
     &:last-child
       color $color-blue
</style>
