刘朋
2 years 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> |
|||
|
|||