<template>
  <a-row :gutter="16">
    <a-col :lg="5" :md="8" :sm="24">
      <a-card :bordered="false" :hoverable="true">
        <a-statistic :value="0" class="text-center" title="已完成的项目" />
      </a-card>
    </a-col>
    <a-col :lg="5" :md="8" :sm="24">
      <a-card :bordered="false" :hoverable="true">
        <a-statistic :value="c" class="text-center" title="正在进行的项目" />
      </a-card>
    </a-col>
    <a-col :lg="5" :md="8" :sm="24">
      <a-card :bordered="false" :hoverable="true">
        <a-statistic :value="0" class="text-center" title="还未开始的项目" />
      </a-card>
    </a-col>
    <a-col :lg="9" :md="24">
      <a-card :bordered="false" :hoverable="true">
        <a-row>
          <a-col :span="12">
            <a-statistic :value="8893" class="text-center" title="用户总量" />
          </a-col>
          <a-col :span="12">
            <a-statistic :value="1255" :value-style="{ color: '#3f8600' }" class="text-center">
              <template #title>
                <a-dropdown>
                  <span>
                    当月活跃用户
                    <a-icon type="down" />
                  </span>
                  <a-menu slot="overlay">
                    <a-menu-item>当月活跃用户</a-menu-item>
                    <a-menu-item>当年活跃用户</a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
              <template #prefix>
                <a-icon :style="{ fontSize: '13px' }" type="arrow-up" />
              </template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
export default {
  data() {
    return {
      c: 6,
    };
  },
};
</script>