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

<template>
  <div class="TrafficFlow">
    <!-- 交通路网状况 -->
    <Traffic class="head" />
    <section class="content">
      <!-- 在途车流量车型分类 -->
      <!--  全路段拥堵状况 -->
      <Congestion class="content-l"></Congestion>
      <!--  畅通率 -->
      <!-- <Unblocked class="content-m" /> -->
      <!-- 全路车流量状况 -->
      <Flowstate class="content-r" />
    </section>
    <section class="foot">
      <!-- 交通路段状态 -->
      <Heightway class="foot-l" />
      <Classification class="foot-m" />
      <!-- 路段交通量情况 -->
      <Situation class="foot-r" />
    </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%;
  position: relative;
  z-index: 6;
  color: white;

  .head {
    width: 98%;
    margin: auto;
    margin-top: 15px;
  }

  .content {
    --keep-ratio: scaleX(1);
    width: 98%;
    margin: auto;
    display: flex;
    flex: 1;
    pointer-events: none;
    margin-top: 19px;

    > div {
      pointer-events: auto;
    }

    .content-l {
      width: 49.4%;
      margin-right: 20px;
    }

    .content-m {
      width: 260px;
    }

    .content-r {
      width: 49.4%;
    }
  }

  .foot {
    --keep-ratio: scaleX(1);
    width: 98%;
    margin: auto;
    display: flex;
    flex: 1;
    pointer-events: none;
    margin-top: 19px;

    > div {
      pointer-events: auto;
    }

    .foot-l {
      width: 756px;
      margin-right: 20px;
    }

    .foot-m {
      width: 580px;
      margin-right: 20px;
    }

    .foot-r {
      width: 500px;
    }
  }
}
</style>