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.
111 lines
2.0 KiB
111 lines
2.0 KiB
1 year ago
|
<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>
|