<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="info">
      <div class="detail cur1">
        <div class="">
          <img src="../../assets/peoplenum.png"  class="detail-img">
        </div>


        <div class="data">
          <div class="people-text">
            登录人数
          </div>
          <div class="people-detail">
            {{zhuchecount}}
          </div>
        </div>

      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="info">
      <div class="detail cur2">
        <div class="">
          <img src="@/assets/store.png"  class="detail-img">
        </div>
        <div class="data">
          <div class="people-text">
            入驻商户
          </div>
          <div class="people-detail">
            12000
          </div>
        </div>
      </div>

    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="info">
      <div class="detail cur3">
        <div class="">
          <img src="@/assets/memo.png"  class="detail-img">
        </div>
        <div class="data">
          <div class="people-text">
            惠军次数
          </div>
          <div class="people-detail">
            12000
          </div>
        </div>
      </div>

    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="info">
      <div class="detail cur4">
        <div class="">
          <img src="@/assets/money.png"  class="detail-img">
        </div>
        <div class="data">
          <div class="people-text">
            惠军金额
          </div>
          <div class="people-detail">
            12000
          </div>
        </div>
      </div>
    </el-col>


  </el-row>
</template>

<script>

  import CountTo from 'vue-count-to'
  import {getIndexInfo } from "@/api/hj/info";
  export default {
  components: {
    CountTo
  },
  data() {
    return {
      zhuchecount:0,
      huijuncount:0,
      shopcount:0
    }
  },
  created() {
    this.getIndexInfo();
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    getIndexInfo(){
      getIndexInfo().then(response => {
        this.zhuchecount=response.data.zhuchecount;
        this.huijuncount=response.data.huijuncount;
        this.shopcount=response.data.shopcount
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 0px;


  .info{
    margin-bottom: 32px;
  }


  .detail{

    display: flex;
    align-items: center;
    padding: 20px;
    margin-right:10px;
    border-radius: 5px;

  }
  .detail-img{
    width: 60px;
    height: 60px;
  }
  .data{
    padding: 0px 43px 0 20px;
  }
  .people-text{
    font-size: 20px;
    font-weight: bolder;
    color: #FFFFFF;
  }
  .people-detail{
    font-size: 16px;
    margin-top: 4px;
    font-weight: bolder;
    color: #FFFFFF;
  }

  .cur1{
    background-image: linear-gradient(#c54e11, #ffa800);
  }
  .cur2{
    background-image: linear-gradient(#035efc, #1cbde4);
  }
  .cur3{
    background-image: linear-gradient(#5c9b1e, #85cb3d);
  }
  .cur4{
    background-image: linear-gradient(#16978f, #2ecbb3);
  }


}
</style>
