<template>
  <div class="full-width full-height">
    <div class="layout flex flex-center">
      <img class="ico" src="@/assets/biz-img/ico2.png" />
      <div class="block ml-5">
        <div class="number bold">
          {{ data.articleCount ? data.articleCount : 0 }}
        </div>
        <img class="ico-name" src="@/assets/biz-img/ljzcs.png" />
      </div>
    </div>
    <div class="layout flex flex-center">
      <img class="ico" src="@/assets/biz-img/ico3.png" />
      <div class="block ml-5">
        <div class="number bold">{{ data.debtCount ? data.debtCount : 0 }}</div>
        <img class="ico-name" src="@/assets/biz-img/lizzsl.png" />
      </div>
    </div>
    <div class="layout flex flex-center" style="margin-top: -10px">
      <img class="ico" src="@/assets/biz-img/ico4.png" />
      <div class="block ml-5">
        <div class="number1 bold">
          {{ data.todayArticleCount ? data.todayArticleCount : 0 }}
        </div>
        <div style="width: 80px; margin-top: 10px">
          <img class="ico-name1" src="@/assets/biz-img/xzzcsl.png" />
        </div>
      </div>
    </div>
    <div class="layout flex flex-center" style="margin-top: -10px">
      <img class="ico" src="@/assets/biz-img/ico5.png" />
      <div class="block ml-5">
        <div class="number1 bold">
          {{ data.todayDebtCount ? data.todayDebtCount : 0 }}
        </div>
        <div style="width: 80px; margin-top: 10px">
          <img class="ico-name1" src="@/assets/biz-img/xzzzsl.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  mounted() {
    this.getCount()
  },
  methods: {
    getCount() {
      this.$api.biz.getCount().then(res => {
        if (res.code === 200) {
          this.data = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  float: left;
  height: 47%;
  width: 50%;
}
.ico {
  width: 80px;
  height: 80px;
}
.ico-name {
  width: 80px;
  height: 35px;
  margin-top: 10px;
}
.ico-name1 {
  width: 55px;
  height: 35px;
}
.number {
  width: 115px;
  font-size: 26px;
  color: #f3a845;
}
.number1 {
  width: 115px;
  font-size: 26px;
  color: #07efdb;
}
</style>
