You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.1 KiB
116 lines
2.1 KiB
<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>
|
|
|