21 changed files with 399 additions and 409 deletions
@ -1,196 +1,185 @@ |
|||
<template> |
|||
<div class='TrafficFlow'> |
|||
<section class="foot"> |
|||
<div class="content" > |
|||
<div class="content-l" > |
|||
<RoadNetwork /> |
|||
<LaneTolls /> |
|||
</div> |
|||
<div class="content-l" > |
|||
<VehicleTolls /> |
|||
<TruckLaneTolls /> |
|||
</div> |
|||
<RoadSectionTolls class="content-r" /> |
|||
</div> |
|||
</section> |
|||
<section class="foot"> |
|||
<div class="content " style="position: relative;top:-10px;" > |
|||
<AccessAnalysis class="content-m" /> |
|||
<AuxiliaryFlowcharts class="content-rm" /> |
|||
<div class="TrafficFlow"> |
|||
<section class="foot"> |
|||
<div class="content"> |
|||
<div class="content-l"> |
|||
<RoadNetwork /> |
|||
<LaneTolls /> |
|||
</div> |
|||
</section> |
|||
<section class="foot"> |
|||
<div class="content " > |
|||
<MonthlyAnalysis class="content-mi" /> |
|||
<DaylyAnalysis class="content-mi" /> |
|||
<div class="content-l"> |
|||
<VehicleTolls /> |
|||
<TruckLaneTolls /> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import RoadNetwork from './components/roadNetworkTraffic'; |
|||
import LaneTolls from './components/laneTolls'; |
|||
import VehicleTolls from './components/vehicleTolls'; |
|||
import TruckLaneTolls from './components/truckLaneTolls'; |
|||
import RoadSectionTolls from './components/RoadSectionTolls'; |
|||
import AccessAnalysis from './components/accessAnalysis'; |
|||
import AuxiliaryFlowcharts from './components/auxiliaryFlowcharts'; |
|||
import MonthlyAnalysis from './components/monthlyAnalysis'; |
|||
import DaylyAnalysis from './components/daylyAnalysis'; |
|||
|
|||
export default { |
|||
name: 'publicService', |
|||
components: { |
|||
RoadNetwork, |
|||
LaneTolls, |
|||
VehicleTolls, |
|||
TruckLaneTolls, |
|||
RoadSectionTolls, |
|||
AccessAnalysis, |
|||
AuxiliaryFlowcharts, |
|||
MonthlyAnalysis, |
|||
DaylyAnalysis, |
|||
}, |
|||
data(){ |
|||
return { |
|||
activeName:"first" |
|||
} |
|||
}, |
|||
methods:{ |
|||
changeTabs(){ |
|||
|
|||
} |
|||
} |
|||
|
|||
<RoadSectionTolls class="content-r" /> |
|||
</div> |
|||
</section> |
|||
<section class="foot"> |
|||
<div class="content" style="position: relative; top: -10px"> |
|||
<AccessAnalysis class="content-m" /> |
|||
<AuxiliaryFlowcharts class="content-rm" /> |
|||
</div> |
|||
</section> |
|||
<section class="foot"> |
|||
<div class="content"> |
|||
<MonthlyAnalysis class="content-mi" /> |
|||
<DaylyAnalysis class="content-mi" /> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import RoadNetwork from "./components/roadNetworkTraffic"; |
|||
import LaneTolls from "./components/laneTolls"; |
|||
import VehicleTolls from "./components/vehicleTolls"; |
|||
import TruckLaneTolls from "./components/truckLaneTolls"; |
|||
import RoadSectionTolls from "./components/RoadSectionTolls"; |
|||
import AccessAnalysis from "./components/accessAnalysis"; |
|||
import AuxiliaryFlowcharts from "./components/auxiliaryFlowcharts"; |
|||
import MonthlyAnalysis from "./components/monthlyAnalysis"; |
|||
import DaylyAnalysis from "./components/daylyAnalysis"; |
|||
|
|||
export default { |
|||
name: "publicService", |
|||
components: { |
|||
RoadNetwork, |
|||
LaneTolls, |
|||
VehicleTolls, |
|||
TruckLaneTolls, |
|||
RoadSectionTolls, |
|||
AccessAnalysis, |
|||
AuxiliaryFlowcharts, |
|||
MonthlyAnalysis, |
|||
DaylyAnalysis, |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: "first", |
|||
}; |
|||
}, |
|||
methods: { |
|||
changeTabs() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-tabs__item { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
min-width: 128px; |
|||
position: relative; |
|||
left: 10px; |
|||
} |
|||
|
|||
::v-deep .el-tabs__active-bar { |
|||
min-width: 128px; |
|||
} |
|||
|
|||
::v-deep .el-tabs__nav-wrap::after { |
|||
background-color: #133242; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.footTabs { |
|||
display: inline; |
|||
width: 100%; |
|||
} |
|||
|
|||
.TrafficFlow { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
padding-top: 15px; |
|||
|
|||
.header-shot { |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
height: 160px; |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
::v-deep .el-tabs__item{ |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
min-width:128px; |
|||
position: relative; |
|||
left:10px; |
|||
} |
|||
|
|||
::v-deep .el-tabs__active-bar { |
|||
min-width:128px; |
|||
} |
|||
|
|||
::v-deep .el-tabs__nav-wrap::after { |
|||
background-color: #133242; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.footTabs { |
|||
display: inline; |
|||
width:100%; |
|||
|
|||
} |
|||
|
|||
.TrafficFlow { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
padding-top: 15px; |
|||
|
|||
.header-shot{ |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
height:160px; |
|||
|
|||
.content { |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 0px; |
|||
|
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 0px; |
|||
|
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
width: calc(32.2%); |
|||
margin-right:20px; |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
|
|||
>div { |
|||
margin-bottom:15px; |
|||
} |
|||
} |
|||
.content-l { |
|||
width: calc(32.2%); |
|||
margin-right: 20px; |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
|
|||
.content-r { |
|||
width: calc(33%); |
|||
display: inline-flex; |
|||
> div { |
|||
margin-bottom: 15px; |
|||
} |
|||
} |
|||
|
|||
.content-rm { |
|||
width: calc(33%); |
|||
margin-right:10px; |
|||
} |
|||
.content-r { |
|||
width: calc(33%); |
|||
display: inline-flex; |
|||
} |
|||
|
|||
.content-mi { |
|||
width: calc(50%); |
|||
|
|||
margin-right:20px; |
|||
} |
|||
.content-rm { |
|||
width: calc(33%); |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.content-mi:last-child { |
|||
margin-right:10px; |
|||
} |
|||
|
|||
|
|||
.content-m { |
|||
display: inline-flex; |
|||
width: 66%; |
|||
margin-right:20px; |
|||
} |
|||
.content-mi { |
|||
width: calc(50%); |
|||
|
|||
|
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.foot{ |
|||
width: 98%; |
|||
margin: auto; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 8px; |
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
.content-mi:last-child { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.foot-w { |
|||
width:100%; |
|||
.content-m { |
|||
display: inline-flex; |
|||
width: 66%; |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.foot-l { |
|||
width: 726px; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
width: 493px; |
|||
} |
|||
.foot { |
|||
width: 98%; |
|||
margin: auto; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 8px; |
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.foot-w { |
|||
width: 100%; |
|||
} |
|||
|
|||
.foot-l { |
|||
width: 726px; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
width: 493px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue