Shanghai-SanFenYuan/src/views/inspector/index.vue

<template>
  <div class="bg">
    <div class="title">
      同步录音录像软件
    </div>
    <div class="inspector-container">
      <div style="display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
        <Card title="总同录数量">
          <div class="shu">
            <span>{{ tongji.totalCount }}</span>
          </div>
        </Card>
        <Card title="本年同录数量">
          <div class="shu">
            <span>{{ tongji.yearCount }}</span>
          </div>
        </Card>
        <Card title="本月同录数量">
          <div class="shu">
            <span>{{tongji.monthCount}}</span>
          </div>
        </Card>
        <Card title="本周同录数量">
          <div class="shu">
            <span>{{ tongji.weekCount }}</span>
          </div>
        </Card>
      </div>
      <div style="flex:1;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
        <Card title="总同录数量">
          <div class="shu">
            <span>6090.99</span>
          </div>
        </Card>
        <Card title="本年同录数量">
          <div class="shu">
            <span>6090.99</span>
          </div>
        </Card>
        <Card title="本月同录数量">
          <div class="shu">
            <span>6090.99</span>
          </div>
        </Card>
        <Card title="本周同录数量">
          <div class="shu">
            <span>6090.99</span>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>

import Card from "@/views/inspector/components/Card.vue";
import {getTongJiData} from "@/api/inspector";

export default {
  name: 'inspector',
  components: {Card},
  data() {
    return {
      tongji: {}
    }
  },
  async mounted() {
    await this.getTongJi()
  },
  methods: {
    async getTongJi() {
      const data = await getTongJiData()
      this.tongji = data.data
    }
  }
}
</script>

<style scoped>
:root {
  font-size: 16px;
}

.bg {
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  background: url(https://demo.eiun.net/web/003%20%E9%85%B7%E7%82%AB%E6%99%BA%E8%83%BD%E5%A4%A7%E5%B1%8F%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83/images/bg2.jpg) no-repeat;
  background-size: cover;
  padding: 0rem 3rem;
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 27px;
  font-weight: bolder;
  color: rgba(14, 253, 255, 1);
  height: 75px;
  margin-bottom: 20px;
}

.inspector-container {
  display: flex;
  flex-flow: column;
  //display: grid;
  //grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
  flex: 1;
  margin-bottom: 40px;
}

.inspector-statistics {
  display: grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.shu {
  position: relative;
  color: rgba(14, 253, 255, 1);
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 10px;
  font-family: dig;
}
</style>