YZProjectCloud/yanzhu-ui-vue3/src/views/index.vue

<template>
  <div class="app-container home">
    <el-card class="nav-top">
      <nav-top-unit />
      <nav-top-att-worker-count />
      <nav-top-att-online-count />
      <nav-top-att-mgr-count />
      <nav-top-att-real-count />
    </el-card>

    <el-card class="nav-body" style="margin-top: 20px">
      <el-row>
        <el-col :span="8">
          <nav-attendance-rate />
        </el-col>
        <el-col :span="8">
          <nav-att-laborer-rate />
        </el-col>
        <el-col :span="8">
          <nav-att-manager-rate />
        </el-col>
        <el-col :span="8">
          <nav-att-laborer-trend />
        </el-col>
        <el-col :span="8">
          <nav-att-woker-prop />
        </el-col>
        <el-col :span="8">
          <nav-att-job-type-group />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import navTopAttMgrCount from "./indexCompents/navTopAttMgrCount.vue";
import navTopAttWokerProp from "./indexCompents/navAttWokerProp.vue";
import navTopAttRealCount from "./indexCompents/navTopAttRealCount.vue";
import navTopAttWorkerCount from "./indexCompents/navTopAttWorkerCount.vue";
import navTopUnit from "./indexCompents/navTopUnit.vue";

import navAttendanceRate from "./indexCompents/navAttendanceRate.vue";
import navAttLaborerRate from "./indexCompents/navAttLaborerRate.vue";
import navAttManagerRate from "./indexCompents/navAttManagerRate.vue";

import navAttLaborerTrend from "./indexCompents/navAttLaborerTrend.vue";
import navAttWokerProp from "./indexCompents/navAttWokerProp.vue";
import navAttJobTypeGroup from "./indexCompents/navAttJobTypeGroup.vue";
import NavTopAttOnlineCount from "./indexCompents/navTopAttOnlineCount.vue";

export default {
  components: {
    navTopAttMgrCount,
    navTopAttWokerProp,
    navTopAttRealCount,
    navTopAttWorkerCount,
    navTopUnit,
    navAttendanceRate,
    navAttLaborerRate,
    navAttManagerRate,
    navAttLaborerTrend,
    navAttWokerProp,
    navAttJobTypeGroup,
    NavTopAttOnlineCount,
  },
};
</script>

<style lang="scss">
.home {
  .el-card__body {
    padding: 10px !important;
  }
  .nav-top {
    .index-nav-top {
      display: inline-flex;
      width: calc(20% - 20px);
      margin: 10px;
      height: 100px;
      background-color: #f0f3f8;
      align-items: center;
      border-radius: 5px;
      max-width: 300px;
      min-width: 220px;
      .top-icon {
        margin-left: 30px;
        .svg-icon {
          width: 40px;
          height: 40px;
          fill: #6bc1da;
        }
      }
      .top-data {
        margin-left: 10px;
        width: calc(100% - 60px);
        .data-title {
          text-align: center;
          color: #999;
        }
        .data-number {
          line-height: 40px;
          height: 40px;
          text-align: center;
          font-size: 20px;
        }
      }
    }
  }
  .nav-body {
    .index-nav-body {
      height: 400px;
      background-color: #f0f3f8;
      margin: 10px;
      border-radius: 5px;
      .index-nav-body-title {
        line-height: 30px;
        font-weight: bold;
        padding: 6px 0px 0px 10px;
      }
      .chart-content {
        height: calc(100% - 50px);
        display: flex;
        align-items: center;
        justify-content: center;
        .my-chart {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>