<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo
  },
  data () {
    return {
      inforCardData: [
        { title: '累计已注册用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
        { title: '今天登陆用户', icon: 'md-locate', count: 232, color: '#19be6b' },
        { title: '累计开通订阅数', icon: 'md-help-circle', count: 142, color: '#ff9900' },
        { title: '累计邀请好友数', icon: 'md-share', count: 657, color: '#ed3f14' }
      ]
    }
  },
  mounted () {
    //
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
