notarization_admin/src/views/home/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <el-row class="one_1">
            <el-col :span="24" class="title">
              <span>二手车交易平台统计</span>
            </el-col>
            <el-col :span="24" class="info">
              <el-row class="info_1">
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">校友登记数</el-col>
                      <el-col :span="24" class="num">{{ info.num_1 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-dengji"></span>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">审核中</el-col>
                      <el-col :span="24" class="num">{{ info.num_2 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-shenhezhong"></span>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">审核通过</el-col>
                      <el-col :span="24" class="num">{{ info.num_3 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-shenhetongguo"></span>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">审核未通过</el-col>
                      <el-col :span="24" class="num">{{ info.num_4 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-dkw_shenheweitongguo"></span>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="one_1">
            <el-col :span="24" class="title">
              <span>照片上传统计</span>
            </el-col>
            <el-col :span="24" class="info">
              <el-row class="info_1">
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">照片上传数</el-col>
                      <el-col :span="24" class="num">{{ info.num_5 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-dengji"></span>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">审核中</el-col>
                      <el-col :span="24" class="num">{{ info.num_6 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-shenhezhong"></span>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">审核通过</el-col>
                      <el-col :span="24" class="num">{{ info.num_7 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-shenhetongguo"></span>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" class="list">
                  <el-row>
                    <el-col :span="20" class="l">
                      <el-col :span="24" class="name">审核未通过</el-col>
                      <el-col :span="24" class="num">{{ info.num_8 }}<span class="dw">人</span></el-col>
                    </el-col>
                    <el-col :span="4" class="r">
                      <span class="iconfont icon-dkw_shenheweitongguo"></span>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" class="two" style="display: none">
          <el-row class="two_1">
            <el-col :span="12" class="l">1</el-col>
            <el-col :span="12" class="l">1</el-col>
          </el-row>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';

// 接口
// import type { IQueryResult } from '@/util/types.util';

// 加载中
const loading: Ref<any> = ref(false);
const info: Ref<any> = ref({});

// 请求
onMounted(async () => {
  loading.value = true;
  search();
  loading.value = false;
});
const search = async () => {
  // let res: IQueryResult = await toolsAxios.dataCount();
  // if (res.errcode == '0') {
  //   info.value = res.data;
  // }
};
</script>
<style scoped lang="scss">
.main {
  .one {
    margin: 0 0 20px 0;
    .one_1 {
      margin: 0 0 20px 0;
      .title {
        margin: 0 0 20px 0;
        span {
          background-color: #439eff;
          color: #ffffff;
          padding: 5px 10px;
          border-radius: 5px;
          font-weight: bold;
        }
      }
      .info {
        .info_1 {
          display: flex;
          justify-content: center;
          .list {
            max-width: 23%;
            margin: 0 10px;
            border-radius: 5px;
            padding: 15px 10px;
            background: linear-gradient(to bottom, #439eff 90%, #f1f1f1);
            .l {
              .name {
                font-size: 18px;
                font-weight: bold;
                color: #ffffff;
                margin: 0 0 10px 0;
              }
              .num {
                color: #ffffff;
                font-size: 22px;
                font-weight: bold;
                .dw {
                  padding: 0 0 0 5px;
                  font-size: 12px;
                  color: #f1f1f1;
                }
              }
            }
            .r {
              text-align: center;
              padding: 5px 0;
              .iconfont {
                font-size: 40px;
                color: #ffffff;
              }
            }
          }
          .list:nth-child(2) {
            background: linear-gradient(to bottom, #ffa500 90%, #f1f1f1);
          }
          .list:nth-child(3) {
            background: linear-gradient(to bottom, #00ff7f 90%, #f1f1f1);
          }
          .list:nth-child(4) {
            background: linear-gradient(to bottom, #ff0000 90%, #f1f1f1);
          }
          .list:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
  .two {
    .two_1 {
      display: flex;
      justify-content: center;
      .l {
        max-width: 48%;
        margin: 0 10px;
        border: 1px solid #ff0000;
        padding: 20px;
        border-radius: 10px;
      }
    }
  }
}
</style>