|
|
|
@ -1,165 +1,168 @@ |
|
|
|
<template> |
|
|
|
<div class='TrafficFlow'> |
|
|
|
<div class="TrafficFlow"> |
|
|
|
<section class="foot"> |
|
|
|
<div class="item keep-ratio" v-for="(item,index) in topDatas" > |
|
|
|
<div class="item-title" > |
|
|
|
<span> {{ item.text }} <span class="num">{{ item.textNum }}</span>{{ item.textEnd }}</span> |
|
|
|
<div class="item keep-ratio" v-for="(item, index) in topDatas"> |
|
|
|
<div class="item-title"> |
|
|
|
<span> |
|
|
|
{{ item.text }} <span class="num">{{ item.textNum }}</span |
|
|
|
>{{ item.textEnd }}</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="item-body" > |
|
|
|
<div class="icon-left" > |
|
|
|
<div class="item-body"> |
|
|
|
<div class=""> |
|
|
|
<img :src="item.icon" /> |
|
|
|
</div> |
|
|
|
<div class="text-right" > |
|
|
|
<div class="topText" > |
|
|
|
<div class="text-right"> |
|
|
|
<div class="topText"> |
|
|
|
已审核 <span class="num">{{ item.reviewed }}</span> 起 |
|
|
|
</div> |
|
|
|
<div class="bottomText" > |
|
|
|
未审核 <span class="num" >{{ item.noReviewed }}</span> 起 |
|
|
|
<div class="bottomText"> |
|
|
|
未审核 <span class="num">{{ item.noReviewed }}</span> 起 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'publicService', |
|
|
|
components: { |
|
|
|
|
|
|
|
}, |
|
|
|
data(){ |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: "publicService", |
|
|
|
components: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeName:"first", |
|
|
|
topDatas:[ { |
|
|
|
text:"其他事件", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/其他事件.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"路障清除", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/路障清除.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"车辆故障", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/车辆故障.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"服务区异常", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/服务区异常.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"交通管制", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/交通管制.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"交通拥堵", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/交通拥堵.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"施工建设", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/施工建设.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"异常天气", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/异常天气.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
},{ |
|
|
|
text:"交通事故", |
|
|
|
textEnd:"起", |
|
|
|
textNum:9, |
|
|
|
icon:require("./assets/交通事故.png"), |
|
|
|
reviewed:4, |
|
|
|
noReviewed:5 |
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
} |
|
|
|
activeName: "first", |
|
|
|
topDatas: [ |
|
|
|
{ |
|
|
|
text: "其他事件", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/其他事件.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
changeTabs(){ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
{ |
|
|
|
text: "路障清除", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/路障清除.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "车辆故障", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/车辆故障.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "服务区异常", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/服务区异常.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "交通管制", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/交通管制.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "交通拥堵", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/交通拥堵.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "施工建设", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/施工建设.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "异常天气", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/异常天气.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "交通事故", |
|
|
|
textEnd: "起", |
|
|
|
textNum: 9, |
|
|
|
icon: require("./assets/交通事故.png"), |
|
|
|
reviewed: 4, |
|
|
|
noReviewed: 5, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
changeTabs() {}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
::v-deep .el-tabs__item{ |
|
|
|
<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; |
|
|
|
color: #ffffff; |
|
|
|
min-width: 128px; |
|
|
|
position: relative; |
|
|
|
left:10px; |
|
|
|
} |
|
|
|
left: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-tabs__active-bar { |
|
|
|
min-width:128px; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__active-bar { |
|
|
|
min-width: 128px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-tabs__nav-wrap::after { |
|
|
|
::v-deep .el-tabs__nav-wrap::after { |
|
|
|
background-color: #133242; |
|
|
|
opacity: 0.1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.footTabs { |
|
|
|
.footTabs { |
|
|
|
display: inline; |
|
|
|
width:99%; |
|
|
|
|
|
|
|
} |
|
|
|
width: 99%; |
|
|
|
} |
|
|
|
|
|
|
|
.TrafficFlow { |
|
|
|
.TrafficFlow { |
|
|
|
width: 100%; |
|
|
|
height: 182px; |
|
|
|
display: inline-flex; |
|
|
|
position: relative; |
|
|
|
z-index: 6; |
|
|
|
color: white; |
|
|
|
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425804 93%); |
|
|
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%); |
|
|
|
border-radius: 0px 0px 0px 0px; |
|
|
|
|
|
|
|
.foot { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: row; |
|
|
|
width:100%; |
|
|
|
height:100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.item { |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
width: calc(100% / 9); |
|
|
|
height:100%; |
|
|
|
height: 100%; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
@ -168,26 +171,30 @@ |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
width: 162px; |
|
|
|
height:35px; |
|
|
|
height: 35px; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background: linear-gradient(180deg, rgba(3,60,82,0) 0%, #033C52 100%); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(3, 60, 82, 0) 0%, |
|
|
|
#033c52 100% |
|
|
|
); |
|
|
|
border-radius: 4px 4px 4px 4px; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
|
|
|
|
span.num { |
|
|
|
font-size: 22px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 400; |
|
|
|
color: #E2B066; |
|
|
|
color: #e2b066; |
|
|
|
display: inline-flex; |
|
|
|
position: relative; |
|
|
|
left:-2px; |
|
|
|
top:1px; |
|
|
|
left: -2px; |
|
|
|
top: 1px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -195,52 +202,51 @@ |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
width: 162px; |
|
|
|
height:100%; |
|
|
|
height: 100%; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
margin-top:15px; |
|
|
|
color: #ffffff; |
|
|
|
margin-top: 15px; |
|
|
|
|
|
|
|
img { |
|
|
|
width:47px; |
|
|
|
height:47px; |
|
|
|
margin:0 10px; |
|
|
|
margin-right:20px; |
|
|
|
width: 47px; |
|
|
|
height: 47px; |
|
|
|
margin: 0 10px; |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
span.num { |
|
|
|
font-size: 18px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 400; |
|
|
|
color: #E2B066; |
|
|
|
color: #e2b066; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.item::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
display: inline-flex; |
|
|
|
top:20px; |
|
|
|
right:0px; |
|
|
|
top: 20px; |
|
|
|
right: 0px; |
|
|
|
width: 1px; |
|
|
|
height: 116px; |
|
|
|
background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2)); |
|
|
|
background: linear-gradient( |
|
|
|
90deg, |
|
|
|
rgba(8, 135, 182, 0.2), |
|
|
|
rgba(0, 100, 137, 1), |
|
|
|
rgba(3, 60, 81, 0.2) |
|
|
|
); |
|
|
|
opacity: 1; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhangzhang
11 months ago