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

<template>
  <div class="container">
    <quick-launch class="item1" :sysType="sysType" />
<!--    <audit-data class="item2" :sysType="sysType"/>-->
    <sales-reached class="item2" :sysType="sysType"/>
    <sales-trend class="item3" :sysType="sysType"/>
  </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 {};
  },
  props:{
    sysType:Number
  },
  created() {},
  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;
}
.container {
  display: grid;
  width: 100%;
  height: 95.5vh;
  grid-template-columns: repeat(auto-fill, 10%);
  grid-template-rows: 140px 260px 480px;
  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"
}
</style>