jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue

<template>
  <div class="TrafficFlow fl-col">
    <!-- 交通路网状况 -->
    <Traffic class="row_01" />
    <section class="row_02">
      <!-- 在途车流量车型分类 -->
      <!--  全路段拥堵状况 -->
      <Congestion class="unit_01" />
      <!--  畅通率 -->
      <!-- <Unblocked class="content-m" /> -->
      <!-- 全路车流量状况 -->
      <Flowstate class="unit_02" />
    </section>
    <section class="row_03">
      <Heightway class="unit_01" />
      <Classification class="unit_02" />
      <Situation class="unit_03" />
    </section>
  </div>
</template>

<script>
import Traffic from "./components/traffic/";
import Classification from "./components/classification/";
import Unblocked from "./components/unblocked/";
import Congestion from "./components/congestion/";
import Heightway from "./components/heightway/";
import Flowstate from "./components/flowstate/";
import Situation from "./components/situation/";

export default {
  name: "TrafficFlow",
  components: {
    Traffic,
    Classification,
    Unblocked,
    Congestion,
    Heightway,
    Flowstate,
    Situation,
  },
};
</script>

<style lang="scss" scoped>
.TrafficFlow {
  width: 100%;
  height: 100%;
  padding: 14px;

  .row_01 {
    height: 160px;
  }

  .row_02 {
    overflow: hidden;
    // --keep-ratio: scaleX(1);
    display: flex;
    pointer-events: none;
    margin-top: 14px;

    > div {
      pointer-events: auto;
    }
    .unit_01 {
      flex-basis: 50%;
      margin-right: 14px;
    }
    .unit_02 {
      flex-basis: 50%;
    }
  }

  .row_03 {
    display: flex;
    flex: 1;
    pointer-events: none;
    margin-top: 14px;

    > div {
      pointer-events: auto;
    }

    .unit_01 {
      width: 756px;
      margin-right: 14px;
    }

    .unit_02 {
      width: 580px;
      margin-right: 14px;
    }

    .unit_03 {
      flex: 1;
    }
  }
}
</style>