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"  style="flex-direction: column;">
      <Search />
      <section class="chartPanel">
        <section class="panel">
          <div class="title"><div class="icon"></div>全路段车流量状况分析</div>
          <Flow></Flow>
        </section>
        <section class="panel" style="margin:0px 20px;">
          <div class="title"><div class="icon"></div>车流量时段分析</div>
          <Timer></Timer>
        </section>
        <section class="panel">
          <div class="title"><div class="icon"></div>断面车流量排名</div>
          <Section></Section>
        </section>
      </section>
    </section>
    <section class="row_02">
      <section class="chartPanel">
        <section class="panel" style="margin-right:20px;">
          <div class="title"><div class="icon"></div>全路段双向实时车流量</div>
          <Real></Real>
        </section>
        <section class="panel">
          <div class="title"><div class="icon"></div>收费站出入口实时车流量</div>
          <Fee></Fee>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
import Search from "./search/index.vue";
import Traffic from "./components/traffic/index.vue";
import Flow from "./flow/index.vue";
import Timer from "./timer/index.vue";
import Section from "./section/index.vue";
import Real from "./real/index.vue";
import Fee from "./fee/index.vue";

export default {
  name: "TrafficFlow",
  components: {
    Traffic,
    Search,
    Flow,
    Timer,
    Section,
    Real,
    Fee
  },
};
</script>

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

  .row_01 {
    height: 160px;
  }

  .row_02 {
    padding:10px;
    background-color: #132d38;
    // --keep-ratio: scaleX(1);
    flex: 1;
    margin-top: 14px;
    display: flex;
  }
  .chartPanel{
    display: flex;
    flex: 1;
    flex-direction: row;
    .panel{
      flex: 1;
    }
  }
}

.title{
      display: flex;
      position: absolute;
      align-items: center;
      .icon {
        width: 5px;
        height: 16px;
        background-color: #3DE8FF;
        margin-right: 10px;
        border-radius: 2px;
      }
    }
</style>