jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue

<template>
  <div class='CommandDispatch'>
    <EventInformation style="grid-area: 1/1/span 9/1;">1</EventInformation>
    <DispatchLiaison style="grid-area: 10/1/span 7/2;">2</DispatchLiaison>
    <DisposalPlan style="grid-area: 17/1/span 9/2;">3</DisposalPlan>
    <CrowdnessIndicatorRankings style="grid-area: 1/2/span 12/2;">4</CrowdnessIndicatorRankings>
    <DisposalProcess style="grid-area: 13/2/span 13/2;">5</DisposalProcess>
    <RealTimeVideo style="grid-area: 1/3/span 6/3;">6</RealTimeVideo>
    <ReleaseInformation style="grid-area: 7/3/span 14/3;">7</ReleaseInformation>
    <TrafficControl style="grid-area: 21/3/span 5/3;">8</TrafficControl>
  </div>
</template>

<script>
import Card from "./components/Card.vue";
import CrowdnessIndicatorRankings from "./Cards/CrowdnessIndicatorRankings/index.vue";
import DispatchLiaison from "./Cards/DispatchLiaison/index.vue";
import DisposalPlan from "./Cards/DisposalPlan/index.vue";
import DisposalProcess from "./Cards/DisposalProcess/index.vue";
import EventInformation from "./Cards/EventInformation/index.vue";
import RealTimeVideo from "./Cards/RealTimeVideo/index.vue";
import ReleaseInformation from "./Cards/ReleaseInformation/index.vue";
import TrafficControl from "./Cards/TrafficControl/index.vue";

export default {
  name: 'CommandDispatch',
  components: {
    Card,
    CrowdnessIndicatorRankings,
    DispatchLiaison,
    DisposalPlan,
    DisposalProcess,
    EventInformation,
    RealTimeVideo,
    ReleaseInformation,
    TrafficControl,
  }
}
</script>

<style lang='scss' scoped>
.CommandDispatch {
  padding: 24px 12px 21px 12px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(24, 1fr);
  gap: 18px;

  ::v-deep {
    .title-button {
      border-radius: 65px;
      font-size: 12px;
    }
  }
}
</style>