mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

bug更改

wangqin
zhangzhang 11 months ago
parent
287d981d3d
commit
20380c54da
6 changed files with 536 additions and 542 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 558
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
  2. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
  3. 30
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
  4. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
  5. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
  6. 468
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue

558
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
View File

@ -1,319 +1,309 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="foot"> <section class="foot">
<div class="item keep-ratio" v-for="(item, index) in topDatas">
<div class="item keep-ratio" v-for="(item, index) in topDatas"> <div class="line"></div>
<div class="line"> <div class="item-title">
</div> <span>
<div class="item-title"> {{ item.eventName }} <span class="num">{{ item.total }}</span
<span> {{ item.eventName }} <span class="num">{{ item.total }}</span>起</span> >起</span
</div> >
<div class="item-body"> </div>
<div class="icon-left" <div class="item-body">
:style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`, '--bgColor': `rgba(0, 209, 255, 10%)` }"> <div
</div> class="left"
:style="{
<div class="text-right"> backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`,
<div class="text"> '--bgColor': `rgba(0, 209, 255, 10%)`,
已处理 <span class="num">{{ item.finished }}</span> 起 }"
</div> ></div>
<div class="text">
处理中 <span class="num">{{ item.processing }}</span> 起 <div class="text-right">
</div> <div class="text">
<div class="text"> 已处理 <span class="num">{{ item.finished }}</span> 起
待处理 <span class="num">{{ item.unconfirmed }}</span> 起 </div>
</div> <div class="text">
</div> 处理中 <span class="num">{{ item.processing }}</span> 起
</div>
</div> </div>
</section> <div class="text">
</div> 待处理 <span class="num">{{ item.unconfirmed }}</span> 起
</div>
</div>
</div>
</div>
</section>
</div>
</template> </template>
<script> <script>
import { eventStatusNum } from "@/api/event/governanceAnalysis" import { eventStatusNum } from "@/api/event/governanceAnalysis";
export default { export default {
name: 'publicService', name: "publicService",
components: { components: {},
data() {
}, return {
data() { active: "事件专题",
return { activeName: "first",
active: "事件专题", topDatas: [],
activeName: "first", // topDatas: [{
topDatas: [] // text: "其他事件",
// topDatas: [{ // textEnd: "起",
// text: "其他事件", // textNum: 9,
// textEnd: "起", // icon: require("./assets/其他事件.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/其他事件.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "路障清除",
// }, { // textEnd: "起",
// text: "路障清除", // textNum: 9,
// textEnd: "起", // icon: require("./assets/路障清除.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/路障清除.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "车辆故障",
// }, { // textEnd: "起",
// text: "车辆故障", // textNum: 9,
// textEnd: "起", // icon: require("./assets/车辆故障.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/车辆故障.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "服务区异常",
// }, { // textEnd: "起",
// text: "服务区异常", // textNum: 9,
// textEnd: "起", // icon: require("./assets/服务区异常.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/服务区异常.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "交通管制",
// }, { // textEnd: "起",
// text: "交通管制", // textNum: 9,
// textEnd: "起", // icon: require("./assets/交通管制.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/交通管制.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "交通拥堵",
// }, { // textEnd: "起",
// text: "交通拥堵", // textNum: 9,
// textEnd: "起", // icon: require("./assets/交通拥堵.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/交通拥堵.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "施工建设",
// }, { // textEnd: "起",
// text: "施工建设", // textNum: 9,
// textEnd: "起", // icon: require("./assets/施工建设.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/施工建设.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "异常天气",
// }, { // textEnd: "起",
// text: "异常天气", // textNum: 9,
// textEnd: "起", // icon: require("./assets/异常天气.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/异常天气.png"), // noReviewed: 5
// reviewed: 4, // }, {
// noReviewed: 5 // text: "交通事故",
// }, { // textEnd: "起",
// text: "交通事故", // textNum: 9,
// textEnd: "起", // icon: require("./assets/交通事故.png"),
// textNum: 9, // reviewed: 4,
// icon: require("./assets/交通事故.png"), // noReviewed: 5
// reviewed: 4, // }
// noReviewed: 5
// } // ]
};
// ] },
} methods: {
}, getEventStatusNum() {
methods: { eventStatusNum().then((response) => {
getEventStatusNum() { this.topDatas = response.data;
eventStatusNum().then(response => { });
this.topDatas = response.data
})
},
changeTabs() {
}
}, },
mounted() { changeTabs() {},
this.getEventStatusNum() },
}, mounted() {
this.getEventStatusNum();
} },
};
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
::v-deep .el-tabs__item { ::v-deep .el-tabs__item {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
min-width: 128px; min-width: 128px;
position: relative; position: relative;
left: 10px; left: 10px;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
min-width: 128px; min-width: 128px;
} }
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
background-color: #133242; background-color: #133242;
opacity: 0.1; opacity: 0.1;
} }
.footTabs { .footTabs {
display: inline; display: inline;
width: 99%; width: 99%;
} }
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 182px; height: 182px;
display: inline-flex;
position: relative;
z-index: 6;
color: white;
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%);
border-radius: 0px 0px 0px 0px;
.item:nth-child(11) .line {
display: none;
}
.foot {
display: inline-flex; display: inline-flex;
position: relative; flex-direction: row;
z-index: 6; width: 100%;
color: white; height: 100%;
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%); background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%);
border-radius: 0px 0px 0px 0px;
.item {
.item:nth-child(11) .line { position: relative;
display: none; display: inline-flex;
} width: calc(100% / 9);
height: 100%;
.foot { flex-direction: column;
justify-content: center;
align-items: center;
.item-title {
position: relative;
display: inline-flex; display: inline-flex;
width: 162px;
height: 35px;
flex-direction: row; flex-direction: row;
width: 100%; justify-content: center;
height: 100%; align-items: center;
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%); background: linear-gradient(
180deg,
rgba(3, 60, 82, 0) 0%,
.item { #033c52 100%
position: relative; );
display: inline-flex; border-radius: 4px 4px 4px 4px;
width: calc(100% / 9); font-size: 16px;
height: 100%; font-family: PingFang SC, PingFang SC;
flex-direction: column; font-weight: 500;
justify-content: center; color: #ffffff;
align-items: center;
span.num {
.item-title { font-size: 22px;
position: relative; font-family: PangMenZhengDao;
display: inline-flex; font-weight: 400;
width: 162px; color: #e2b066;
height: 35px; position: relative;
flex-direction: row; display: inline-flex;
justify-content: center; top: 2px;
align-items: center; left: -2px;
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;
span.num {
font-size: 22px;
font-family: PangMenZhengDao;
font-weight: 400;
color: #E2B066;
position: relative;
display: inline-flex;
top: 2px;
left: -2px;
}
}
.item-body {
position: relative;
display: inline-flex;
width: 162px;
// 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: 20px 0;
.icon-left {
display: flex;
align-items: center;
justify-content: center;
// position: absolute;
// transition: all .15s linear;
// top: 0;
// width: 100%;
width: 47px;
height: 47px;
margin-left: -8px;
margin-right: 10px;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
transition: all .18s linear;
&::before {
content: "";
position: absolute;
width: 45px;
height: 45px;
border: 1px solid rgba(0, 209, 255, .5);
background-color: var(--bgColor);
border-radius: 50%;
z-index: -1;
}
}
.text-right {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.text {
margin-top: 7px;
// margin: 5px;
}
}
span.num {
font-size: 18px;
font-family: PangMenZhengDao;
font-weight: 400;
color: #E2B066;
}
}
} }
}
.line { .item-body {
position: relative;
display: inline-flex;
width: 162px;
// 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: 20px 0;
.left {
display: flex;
align-items: center;
justify-content: center;
// position: absolute;
// transition: all .15s linear;
// top: 0;
// width: 100%;
width: 47px;
height: 47px;
margin-left: -8px;
margin-right: 10px;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
transition: all 0.18s linear;
&::before {
content: "";
position: absolute; position: absolute;
width: 2px; width: 45px;
height: 120px; height: 45px;
top: 25px; border: 1px solid rgba(0, 209, 255, 0.5);
left: 180px; background-color: var(--bgColor);
background: url("~@screen/images/divide.svg"); border-radius: 50%;
background-repeat: no-repeat; z-index: -1;
background-size: 100% 100%; }
} }
.text-right {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.text {
margin-top: 7px;
// margin: 5px;
}
}
// .item::after { span.num {
// content: ""; font-size: 18px;
// position: absolute; font-family: PangMenZhengDao;
// display: inline-flex; font-weight: 400;
// top: 20px; color: #e2b066;
// 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));
// opacity: 1;
// flex-direction: row;
// justify-content: center;
// align-items: center;
// }
.line {
position: absolute;
width: 2px;
height: 120px;
top: 25px;
left: 180px;
background: url("~@screen/images/divide.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
} }
// .item::after {
// content: "";
// position: absolute;
// display: inline-flex;
// 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));
// opacity: 1;
// flex-direction: row;
// justify-content: center;
// align-items: center;
// }
}
} }
</style> </style>

3
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
View File

@ -3,6 +3,9 @@ import * as echarts from "echarts";
let options = { let options = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
valueFormatter: (value) => {
return value + "%";
},
// backgroundColor: "rgba(17,95,182,0.5)", // backgroundColor: "rgba(17,95,182,0.5)",
// textStyle: { // textStyle: {
// color: "#fff", // color: "#fff",

30
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
View File

@ -65,20 +65,26 @@
prop="deviceName" prop="deviceName"
label="设备名称" label="设备名称"
></el-table-column> ></el-table-column>
<el-table-column prop="deviceNo" label="设备桩号" width=""> <el-table-column prop="deviceNo" label="设备桩号">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="direction" prop="direction"
label="方向" label="方向"
class-name="showClass" class-name="showClass"
width=""
> >
<template slot-scope="scope">
<span>{{
scope.row.direction == "1"
? "上行"
: scope.row.direction == "2"
? "中间"
: "下行"
}}</span>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="deviceIp" label="设备IP" width=""> <el-table-column prop="deviceIp" label="设备IP"> </el-table-column>
</el-table-column> <el-table-column prop="production" label="厂家"> </el-table-column>
<el-table-column prop="production" label="厂家" width=""> <el-table-column prop="type" label="型号">
</el-table-column>
<el-table-column prop="type" label="型号" width="">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.type == '1-1'">高清网络枪型固定摄像机</div> <div v-if="scope.row.type == '1-1'">高清网络枪型固定摄像机</div>
<div v-if="scope.row.type == '1-2'">高清网络球形摄像机</div> <div v-if="scope.row.type == '1-2'">高清网络球形摄像机</div>
@ -99,11 +105,9 @@
<div v-if="scope.row.type == '13'">智能设备箱</div> <div v-if="scope.row.type == '13'">智能设备箱</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="network" label="网段" width=""> <!-- <el-table-column prop="network" label="网段"> </el-table-column> -->
</el-table-column> <el-table-column prop="time" label="监测时间"> </el-table-column>
<el-table-column prop="time" label="监测时间" width=""> <el-table-column prop="deviceStatus" label="设备状态">
</el-table-column>
<el-table-column prop="deviceStatus" label="设备状态" width="">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.deviceStatus == 1">在线</div> <div v-if="scope.row.deviceStatus == 1">在线</div>
<div v-if="scope.row.deviceStatus == 0" style="color: #bbb"> <div v-if="scope.row.deviceStatus == 0" style="color: #bbb">
@ -422,7 +426,7 @@ export default {
.floatEmpty { .floatEmpty {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
background: rgba($color: #000000, $alpha: 0.2); // background: rgba($color: #000000, $alpha: 0.2);
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;

6
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
View File

@ -11,14 +11,14 @@
style="width: 140px" style="width: 140px"
placeholder="请选择" placeholder="请选择"
/> />
<el-quarter-picker <!-- <el-quarter-picker
size="mini" size="mini"
class="selectRoad" class="selectRoad"
style="width: 180px" style="width: 180px"
v-if="year == 'quarter'" v-if="year == 'quarter'"
v-model="quarter" v-model="quarter"
aria-placeholder="请选季度" aria-placeholder="请选季度"
/> /> -->
<el-button <el-button
type="primary" type="primary"
@ -97,7 +97,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
top: 2px; top: 2px;
z-index: 0; z-index: 9;
div { div {
white-space: nowrap; white-space: nowrap;

13
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
View File

@ -1,25 +1,16 @@
<template> <template>
<div class="congestion"> <div class="congestion">
<WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle> <WgtTitle title="月发布渠道趋势分析"></WgtTitle>
<div class="board"> <div class="board">
<div class="searchPanel_1"> <div class="searchPanel_1">
<el-date-picker <el-date-picker
size="mini" size="mini"
v-if="year != 'quarter'"
class="selectRoad" class="selectRoad"
v-model="dateTime" v-model="dateTime"
style="width: 140px" style="width: 140px"
type="month" type="month"
placeholder="请选择" placeholder="请选择"
/> />
<el-quarter-picker
size="mini"
class="selectRoad"
style="width: 180px"
v-if="year == 'quarter'"
v-model="quarter"
aria-placeholder="请选季度"
/>
<el-button <el-button
type="primary" type="primary"
@ -99,7 +90,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
top: 2px; top: 2px;
z-index: 0; z-index: 9;
div { div {
white-space: nowrap; white-space: nowrap;

468
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/topComponent/index.vue
View File

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

Write Preview
Loading…
Cancel
Save