dbsd_kczx/src/views/site/tongJi/index.vue

<template>
  <a-row class="rowGutter" :gutter="[16,16]">
    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
      <a-card title="今日课堂数">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="总数" :value="1128"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="已下课" :value="1124"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
      <a-card title="上课中">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="&nbsp;" :value="6"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
      <a-card title="已开课堂数">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="总数" :value="1128"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="听课课堂" :value="1893"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="听课人次" :value="1193"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
      <a-card title="今日听课">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="课堂数" :value="1123"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="听课人次" :value="1893"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
      <div style="margin: 0 auto;width: fit-content;font-size: 3.5rem;color: #cccccc8c;">
        <PlusOutlined/>
      </div>
    </a-col>
  </a-row>
</template>
<script setup lang="ts">

</script>
<style lang="less" scoped>

</style>