tire-platform-ui/src/views/wel/home/defaultPage.vue

<template>
  <div class="container">
    <quick-launch class="item1" :sysType="sysType" />
    <audit-data class="item2" :sysType="sysType"/>
    <realtime-data class="item3" :sysType="sysType"/>
    <sales-reached class="item4" :sysType="sysType" v-if="sysType==4&&roleName!='采购'"/>
    <sales-trend class="item5" :sysType="sysType" v-if="sysType==4&&roleName!='采购'"/>
    <charge-today class="item6" :sysType="sysType" v-if="sysType==4&&roleName!='采购'"/>
    <pay-today class="item7" :sysType="sysType" v-if="sysType==4&&roleName!='采购'"/>
  </div>
</template>

<script>
import quickLaunch from "../components/quick-launch";
import auditData from "../components/audit-data";
import realtimeData from "../components/realtime-data";
import salesReached from "../components/sales-reached";
import salesTrend from "../components/sales-trend";
import chargeToday from "../components/charge-today";
import payToday from "../components/pay-today";
export default {
  name: "wel",
  data() {
    return {
      roleName:''
    };
  },
  props:{
    sysType:Number
  },
  created() {
    this.roleName=localStorage.getItem("roleName")
  },
  components: {
    quickLaunch,
    auditData,
    realtimeData,
    salesReached,
    salesTrend,
    chargeToday,
    payToday
  },
  computed: {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
.item5 {
  grid-area: e;
}
.item6 {
  grid-area: f;
}
.item7 {
  grid-area: g;
}
.container {
  display: grid;
  width: 100%;
  height: 95.5vh;
  grid-template-columns: repeat(auto-fill, 10%);
  grid-template-rows: 140px 180px 180px 350px 140px;
  grid-template-areas:
    "a a a a a a a a a a"
    "b b b b b b b b b b"
    "c c c c c c c c c c"
    "d d d d e e e e e e"
    "f f f f f g g g g g";
}
</style>