hui
1 year ago
|
Before Width: | Height: | Size: 403 KiB |
@ -1,159 +0,0 @@ |
|||||
<template> |
|
||||
<div class='TrafficFlow'> |
|
||||
|
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
|
|
||||
export default { |
|
||||
name: 'digitalRoadNetwork', |
|
||||
components: { |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
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; |
|
||||
background: url("./assets/online_bj.jpg") no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
|
|
||||
.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-l { |
|
||||
width: calc(32.2%); |
|
||||
margin-right: 20px; |
|
||||
display: inline-flex; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
>div { |
|
||||
margin-bottom: 15px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.content-r { |
|
||||
width: calc(33%); |
|
||||
display: inline-flex; |
|
||||
} |
|
||||
|
|
||||
.content-rm { |
|
||||
width: calc(33%); |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
|
|
||||
.content-mi { |
|
||||
width: calc(50%); |
|
||||
|
|
||||
margin-right: 20px; |
|
||||
} |
|
||||
|
|
||||
.content-mi:last-child { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.content-m { |
|
||||
display: inline-flex; |
|
||||
width: 66%; |
|
||||
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; |
|
||||
} |
|
||||
|
|
||||
.foot-w { |
|
||||
width: 100%; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.foot-l { |
|
||||
width: 726px; |
|
||||
} |
|
||||
|
|
||||
.foot-m { |
|
||||
width: 613px; |
|
||||
} |
|
||||
|
|
||||
.foot-r { |
|
||||
width: 493px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
|
After Width: | Height: | Size: 805 B |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 353 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 870 B |
|
After Width: | Height: | Size: 4.1 KiB |
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<div class='roadNet'> |
||||
|
<div class="summary"> |
||||
|
<div class="unit" v-for="item in summary"> |
||||
|
<p class="p01"> |
||||
|
{{ item.dataAll.title }}<em class="blue">{{ item.dataAll.value }}</em><span>{{ item.dataAll.unit }}</span> |
||||
|
</p> |
||||
|
<p class="p02"> |
||||
|
{{ item.dataGreen.title }}<em class="green">{{ item.dataGreen.value }}</em><span>{{ item.dataGreen.unit }}</span> |
||||
|
{{ item.dataRed.title }}<em class="red">{{ item.dataRed.value }}</em><span>{{ item.dataRed.unit }}</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'dataVRoadNet', |
||||
|
data(){ |
||||
|
return { |
||||
|
summary:[] |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
initData() { |
||||
|
this.summary = [ |
||||
|
{ |
||||
|
|
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.roadNet{ |
||||
|
.summary{ |
||||
|
display: flex; justify-content: space-between; |
||||
|
.unit{ border-left: 2px solid #00D1FF; background: linear-gradient( 180deg, rgba(6,66,88,0) 0%, #064258 93%);} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||