dy-admin-manager/src/views/smallStudentManager/components/index.vue

<template>
  <div class="Statistics">
    <el-row class="rows" :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <sleep :data="statistic" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <studyStudent :data="statistic" :groupType="groupType"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <remainder :data="statistic" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <studentChange :groupType="groupType" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sleep from './sleep';
import studyStudent from './studyStudent';
import remainder from './remainder';
import studentChange from './studentChange';
import { studentSmallClassStatisticsSum } from '../api'
export default {
  name: 'Statistics',
  props: ['groupType'],
  components: {
    sleep,
    studyStudent,
    remainder,
    studentChange
  },
  data() {
    return {
      statistic: {}
    }
  },
  async mounted() {
    try {
      let res = await studentSmallClassStatisticsSum({ groupType: this.groupType })
      this.statistic = res.data || {}
    } catch {}
  },
}
</script>

<style lang="scss" scoped>
.rows {
    > div {
      margin-bottom: 20px;
    }
  }
/deep/ .el-card__body .statistic {
  margin-bottom: 15px;
  padding: 0;
}
.statistic {
  .statistic-content > span {
    font-size: 22px !important;
    &:first-child {
      font-size: 14px !important;
    }
  }
}
</style>