21 changed files with 399 additions and 409 deletions
@ -1,196 +1,185 @@ |
|||||
<template> |
<template> |
||||
<div class='TrafficFlow'> |
<div class="TrafficFlow"> |
||||
<section class="foot"> |
<section class="foot"> |
||||
<div class="content" > |
<div class="content"> |
||||
<div class="content-l" > |
<div class="content-l"> |
||||
<RoadNetwork /> |
<RoadNetwork /> |
||||
<LaneTolls /> |
<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> |
</div> |
||||
</section> |
<div class="content-l"> |
||||
<section class="foot"> |
<VehicleTolls /> |
||||
<div class="content " > |
<TruckLaneTolls /> |
||||
<MonthlyAnalysis class="content-mi" /> |
|
||||
<DaylyAnalysis class="content-mi" /> |
|
||||
</div> |
</div> |
||||
</section> |
<RoadSectionTolls class="content-r" /> |
||||
</div> |
</div> |
||||
</template> |
</section> |
||||
|
<section class="foot"> |
||||
<script> |
<div class="content" style="position: relative; top: -10px"> |
||||
import RoadNetwork from './components/roadNetworkTraffic'; |
<AccessAnalysis class="content-m" /> |
||||
import LaneTolls from './components/laneTolls'; |
<AuxiliaryFlowcharts class="content-rm" /> |
||||
import VehicleTolls from './components/vehicleTolls'; |
</div> |
||||
import TruckLaneTolls from './components/truckLaneTolls'; |
</section> |
||||
import RoadSectionTolls from './components/RoadSectionTolls'; |
<section class="foot"> |
||||
import AccessAnalysis from './components/accessAnalysis'; |
<div class="content"> |
||||
import AuxiliaryFlowcharts from './components/auxiliaryFlowcharts'; |
<MonthlyAnalysis class="content-mi" /> |
||||
import MonthlyAnalysis from './components/monthlyAnalysis'; |
<DaylyAnalysis class="content-mi" /> |
||||
import DaylyAnalysis from './components/daylyAnalysis'; |
</div> |
||||
|
</section> |
||||
export default { |
</div> |
||||
name: 'publicService', |
</template> |
||||
components: { |
|
||||
RoadNetwork, |
<script> |
||||
LaneTolls, |
import RoadNetwork from "./components/roadNetworkTraffic"; |
||||
VehicleTolls, |
import LaneTolls from "./components/laneTolls"; |
||||
TruckLaneTolls, |
import VehicleTolls from "./components/vehicleTolls"; |
||||
RoadSectionTolls, |
import TruckLaneTolls from "./components/truckLaneTolls"; |
||||
AccessAnalysis, |
import RoadSectionTolls from "./components/RoadSectionTolls"; |
||||
AuxiliaryFlowcharts, |
import AccessAnalysis from "./components/accessAnalysis"; |
||||
MonthlyAnalysis, |
import AuxiliaryFlowcharts from "./components/auxiliaryFlowcharts"; |
||||
DaylyAnalysis, |
import MonthlyAnalysis from "./components/monthlyAnalysis"; |
||||
}, |
import DaylyAnalysis from "./components/daylyAnalysis"; |
||||
data(){ |
|
||||
return { |
export default { |
||||
activeName:"first" |
name: "publicService", |
||||
} |
components: { |
||||
}, |
RoadNetwork, |
||||
methods:{ |
LaneTolls, |
||||
changeTabs(){ |
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 { |
.content-l { |
||||
width: 100%; |
width: calc(32.2%); |
||||
margin: auto; |
margin-right: 20px; |
||||
display: flex; |
display: inline-flex; |
||||
flex: 1; |
flex-direction: column; |
||||
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-r { |
> div { |
||||
width: calc(33%); |
margin-bottom: 15px; |
||||
display: inline-flex; |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.content-rm { |
.content-r { |
||||
width: calc(33%); |
width: calc(33%); |
||||
margin-right:10px; |
display: inline-flex; |
||||
} |
} |
||||
|
|
||||
.content-mi { |
.content-rm { |
||||
width: calc(50%); |
width: calc(33%); |
||||
|
margin-right: 10px; |
||||
margin-right:20px; |
} |
||||
} |
|
||||
|
|
||||
.content-mi:last-child { |
.content-mi { |
||||
margin-right:10px; |
width: calc(50%); |
||||
} |
|
||||
|
|
||||
|
|
||||
.content-m { |
|
||||
display: inline-flex; |
|
||||
width: 66%; |
|
||||
margin-right:20px; |
|
||||
} |
|
||||
|
|
||||
|
margin-right: 20px; |
||||
} |
} |
||||
|
|
||||
.foot{ |
.content-mi:last-child { |
||||
width: 98%; |
margin-right: 10px; |
||||
margin: auto; |
} |
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
flex: 1; |
|
||||
pointer-events: none; |
|
||||
margin-top: 8px; |
|
||||
>div { |
|
||||
pointer-events: auto; |
|
||||
} |
|
||||
|
|
||||
.foot-w { |
.content-m { |
||||
width:100%; |
display: inline-flex; |
||||
|
width: 66%; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
} |
.foot { |
||||
|
width: 98%; |
||||
.foot-l { |
margin: auto; |
||||
width: 726px; |
display: flex; |
||||
} |
justify-content: space-between; |
||||
.foot-m { |
flex: 1; |
||||
width: 613px; |
pointer-events: none; |
||||
} |
margin-top: 8px; |
||||
.foot-r { |
> div { |
||||
width: 493px; |
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