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

<template>
  <div class='TrafficFlow'>
    <!-- 交通路网状况 -->
    <Traffic class="head" />
    <section class="content">
      <!-- 在途车流量车型分类 -->
      <Classification class="content-l" />
      <!--  畅通率 -->
      <!-- <Unblocked class="content-m" /> -->
      <!-- 全路车流量状况 -->
      <Flowstate class="content-r" />
   
    </section>
    <section class="foot">
      <!-- 交通路段状态 -->
      <Heightway class="foot-l" />
      <!--  全路段拥堵状况 --> 
      <Congestion class="foot-m"></Congestion>
      <!-- 路段交通量情况 --> 
      <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 {
    width: 98%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex: 1;
    pointer-events: none;
    margin-top: 19px;
    >div {
      pointer-events: auto;
    }

    .content-l {
      width: 49.4%;
    }


    .content-m {
      width: 260px;
    }
    .content-r {
      width: 49.4%;
    }
  }
  .foot{
    width: 98%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex: 1;
    pointer-events: none;
    margin-top: 19px;
    >div {
      pointer-events: auto;
    }

    .foot-l {
      width: 726px;
    }
    .foot-m {
      width: 613px;
    }
    .foot-r {
      width: 493px;
    }
  }
}
</style>