'页面修改'

This commit is contained in:
徐克 2022-07-20 17:09:02 +08:00
parent 2a0d823446
commit bcc14c6916
16 changed files with 2575 additions and 211 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/fire/susan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/fire/work.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

@ -131,6 +131,53 @@ a {
}
}
}
// 切换按钮样式
.tabs_datag1 {
ul {
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 20px;
font-size: 13px;
margin: 0 30px 0 0;
li {
margin: 0 5px;
width: 66px;
height: 24px;
padding-top: 2px;
//background: #09304a;
background: linear-gradient(-45deg,transparent 8px,#09304a 0);
//border: 1px solid transparent;
color: #8ebbcd;
cursor: pointer;
text-align: center;
}
li:nth-child(1) {
margin: 0 5px;
width: 66px;
height: 24px;
//background: #0b4471;
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
//border: 1px solid transparent;
color: #fff;
cursor: pointer;
text-align: center;
}
li:hover {
margin: 0 5px;
width: 66px;
height: 24px;
//background: #0b4471;
background: linear-gradient(-45deg,transparent 8px,#0b4471 0);
//border: 1px solid transparent;
color: #fff;
cursor: pointer;
text-align: center;
}
}
}
.colorBlack {
color: #272727 !important;

View File

@ -0,0 +1,116 @@
<template>
<div class="container">
<div id="echart" style="width: auto;height: 250px"></div>
</div>
</template>
<script>
export default {
name: "safeChart",
data(){
return{
}
},
mounted() {
this.getecharts()
},
methods:{
getecharts(){
const colors = ['#C51C1C', '#F5C212', '#1BE274']
var echarts = this.$echarts.init(
document.getElementById("echart")
);
var option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
axisLine: {
show: true,
lineStyle: {
width: 10,
// color: [[1, '#D7EAFF']]
color: [
[0.25, new this.$echarts.graphic.LinearGradient(
//
1, 0, 0, 0,
[
{offset: 0, color: colors[0]},
{offset: 0.7, color: colors[1]}
]
)],
[0.5, new this.$echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: colors[1]},
{offset: 0, color: colors[1]}
]
)],
[0.75, new this.$echarts.graphic.LinearGradient(
0, 0, 1, 1,
[
{offset: 0.0, color: colors[1]},
{offset: 1, color: colors[2]}
]
)],
[1, new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0.5, color: colors[2]},
{offset: 1, color: colors[2]}
]
)]
]
},
},
progress: {
show: false
},
pointer: {
length:"70%",
offsetCenter:[0,"-60%"],
itemStyle: {
color: 'auto'
}
},
axisLabel: {
distance:5,
color: 'rgb(60,209,233)',
formatter:"{value}"
},
splitLine:{
show:false
},
axisTick: {
length:20,
splitNumber:5,
lineStyle: {
color: 'auto',
}
},
detail: {
valueAnimation: true,
formatter: '{value}',
color:'transition'
},
data: [
{
value: 100,
}
]
}
],
};
echarts.setOption(option);
}
}
}
</script>
<style scoped>
</style>

View File

@ -50,25 +50,182 @@
</div>
<div class="middle">
<div>
<img src="../../assets/img/cb1.png" alt="">
<div class="data-block-bk mar-top">
<div class="data-tit-bg">车均费用排名统计</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
<li>公务用车</li>
</ul>
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li>总费用</li>
<li>加油费用</li>
<li style="width: 100px">维修保养费用</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li>排名</li>
<li>费用类别</li>
<li>车型</li>
<li>车均费用</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
<li v-else><img :src="item.id"/></li>
<li>{{item.type}}</li>
<li>{{item.carType}}</li>
<li>{{item.cost}}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="data-block-bk mar-top" style="margin-top: 5%;position:relative;">
<div class="data-tit-bg">单车成本排名</div>
<!-- <img src="../../assets/img/cb2.png" alt="">-->
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
<li>公务用车</li>
</ul>
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li>总费用</li>
<li>加油费用</li>
<li style="width: 100px">维修保养费用</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li>排名</li>
<li>费用类别</li>
<li>车型</li>
<li>车牌号</li>
<li>车均费用</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData1" :key="item.id">
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
<li v-else><img :src="item.id"/></li>
<li>{{item.type}}</li>
<li>{{item.carType}}</li>
<li>{{item.carCode}}</li>
<li>{{item.cost}}</li>
</ul>
</div>
</div>
</div>
<div style="margin-top:15px">
<img src="../../assets/img/cb2.png" alt="">
</div>
</div>
<div class="rightTravel">
<div>
<img src="../../assets/img/cb3.png" alt="">
<!-- <div>-->
<!-- <img src="../../assets/img/cb3.png" alt="">-->
<!-- </div>-->
<div class="data-block-bk mar-top">
<div class="data-tit-bg">品牌型号成本排名</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
<li>公务用车</li>
</ul>
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li>总费用</li>
<li>加油费用</li>
<li style="width: 100px">维修保养费用</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li>排名</li>
<li>费用类别</li>
<li>车型</li>
<li>品牌</li>
<li>车均费用</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData2" :key="item.id">
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
<li v-else><img :src="item.id"/></li>
<li>{{item.type}}</li>
<li>{{item.carType}}</li>
<li>{{item.brand}}</li>
<li>{{item.cost}}</li>
</ul>
</div>
</div>
</div>
</div>
<!-- <div style="margin-top:15px">-->
<!-- <img src="../../assets/img/cb4.png" alt="">-->
<!-- </div>-->
<div class="data-block-bk mar-top" style="margin-top: 5%;position:relative;">
<div class="data-tit-bg">动力类型成本排名</div>
<!-- <img src="../../assets/img/cb2.png" alt="">-->
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left: 86%">
<li>公务用车</li>
</ul>
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li>总费用</li>
<li>加油费用</li>
<li style="width: 100px">维修保养费用</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 1%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li>排名</li>
<li>费用类别</li>
<li>车型</li>
<li>动力类型</li>
<li>车均费用</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData3" :key="item.id">
<li v-if="typeof item.id === 'number'">{{item.id}}</li>
<li v-else><img :src="item.id"/></li>
<li>{{item.type}}</li>
<li>{{item.carType}}</li>
<li>{{item.powerType}}</li>
<li>{{item.cost}}</li>
</ul>
</div>
</div>
</div>
<div style="margin-top:15px">
<img src="../../assets/img/cb4.png" alt="">
</div>
</div>
<!-- <div class="rightTravel">
@ -136,6 +293,230 @@ export default {
['其他商服用地', '1', '0.07%'],
['居住用地', '560', '40.85%'],]
},
tableData:[
{
id:require('../../assets/carTravel/1.png'),
type:'总费用',
carType:'小车型',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/2.png'),
type:'总费用',
carType:'小车型',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/3.png'),
type:'总费用',
carType:'小车型',
cost:'5478963元'
},
{
id:4,
type:'总费用',
carType:'小车型',
cost:'5478963元'
},
{
id:5,
type:'总费用',
carType:'小车型',
cost:'5478963元'
},
{
id:6,
type:'总费用',
carType:'小车型',
cost:'5478963元'
},
{
id:7,
type:'总费用',
carType:'小车型',
cost:'5478963元'
},
{
id:8,
type:'总费用',
carType:'小车型',
cost:'5478963元'
}
],
tableData1:[
{
id:require('../../assets/carTravel/1.png'),
type:'总费用',
carType:'小车型',
carCode:'苏A56IOK',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/2.png'),
type:'总费用',
carType:'小车型',
carCode:'苏AGH596',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/3.png'),
type:'总费用',
carType:'小车型',
carCode:'苏ALK960',
cost:'5478963元'
},
{
id:4,
type:'总费用',
carType:'小车型',
carCode:'苏AP2589',
cost:'5478963元'
},
{
id:5,
type:'总费用',
carType:'小车型',
carCode:'苏A56IOK',
cost:'5478963元'
},
{
id:6,
type:'总费用',
carType:'小车型',
carCode:'苏A56IOK',
cost:'5478963元'
},
{
id:7,
type:'总费用',
carType:'小车型',
carCode:'苏A56IOK',
cost:'5478963元'
},
{
id:8,
type:'总费用',
carType:'小车型',
carCode:'苏A56IOK',
cost:'5478963元'
}
],
tableData2:[
{
id:require('../../assets/carTravel/1.png'),
type:'总费用',
carType:'小车型',
brand:'大众',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/2.png'),
type:'总费用',
carType:'小车型',
brand:'丰田',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/3.png'),
type:'总费用',
carType:'小车型',
brand:'奥迪',
cost:'5478963元'
},
{
id:4,
type:'总费用',
carType:'小车型',
brand:'大众',
cost:'5478963元'
},
{
id:5,
type:'总费用',
carType:'小车型',
brand:'丰田',
cost:'5478963元'
},
{
id:6,
type:'总费用',
carType:'小车型',
brand:'奥迪',
cost:'5478963元'
},
{
id:7,
type:'总费用',
carType:'小车型',
brand:'大众',
cost:'5478963元'
},
{
id:8,
type:'总费用',
carType:'小车型',
brand:'奔驰',
cost:'5478963元'
}
],
tableData3:[
{
id:require('../../assets/carTravel/1.png'),
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/2.png'),
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
},
{
id:require('../../assets/carTravel/3.png'),
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
},
{
id:4,
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
},
{
id:5,
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
},
{
id:6,
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
},
{
id:7,
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
},
{
id:8,
type:'总费用',
carType:'小车型',
powerType:'燃油',
cost:'5478963元'
}
]
};
},
components: {
@ -417,4 +798,62 @@ left: 63%;
</style>
<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
.data-block-bk {
border: 2px solid #29a3d3a1;
// background: #11223289;
background: rgba(16,29,37,0.8);
// height: 280px;
height: 437px;
.data-tit-bg {
width: 600px;
height: 38px;
line-height: 38px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url(../../assets/tit.png) no-repeat;
// background-size: contain;
background-size: 100% 30px;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
}
.data-flex {
display: flex;
justify-content: center;
// padding: 20px;
}
}
.list-table {
.tb-hd,
.tb-bd {
ul {
display: flex;
justify-content: space-around;
width: 100%;
height: 35px;
color: #a6d3e8;
li {
flex: 0.5;
line-height: 35px;
font-size: 14px;
&:first-child {
flex: 0.5;
}
}
}
}
.tb-hd {
ul {
background-color: rgba(14, 45, 66);
color: #65c1f2;
}
}
.tb-bd {
ul {
&:nth-child(2n) {
background-color: rgba(0, 0, 0, .3);
}
}
}
}
</style>

View File

@ -49,7 +49,15 @@
<!-- <carTravelLeft /> -->
<div class="topLeft">
<div class="main-title">用车品牌型号占比</div>
<div class="content">
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div class="content" style="position: relative;margin-top: 20px">
<ul>
<li >
<img src="../../assets/carTravel/orange.png" alt="">
@ -84,7 +92,15 @@
<div class="main">
<!-- <div class="mainTop"> -->
<div class="main-title">用车时间趋势</div>
<div class="content">
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div class="content" style="position: relative;bottom: 30px">
<LineChart1 type="0"></LineChart1>
</div>
@ -103,42 +119,446 @@
<ul>
<li>
<img src="../../assets/img/gjjg1.png" alt="">
<!-- <img src="../../assets/img/gjjg1.png" alt="">-->
<div class="rank_head_bk">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">入禁预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg2.png" alt="">
<!-- <img src="../../assets/img/gjjg2.png" alt="">-->
<div class="rank_head_bk" style="margin-left: 3px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">区域异常集中预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg3.png" alt="">
<!-- <img src="../../assets/img/gjjg3.png" alt="">-->
<div class="rank_head_bk" style="margin-left: 3px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">未按规定入库预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg4.png" alt="">
<!-- <img src="../../assets/img/gjjg4.png" alt="">-->
<div class="rank_head_bk" style="margin-left: 3px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">单车规律性停放预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg5.png" alt="">
<!-- <img src="../../assets/img/gjjg5.png" alt="">-->
<div class="rank_head_bk" style="margin-left: 1px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">工作日非工作时间用车预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div>
<div>
<img src="../../assets/img/wenzi2.png" alt="">
<img style="margin-top: 4px;" src="../../assets/img/wenzi2.png" alt="">
</div>
<ul>
<li >
<img src="../../assets/img/gjjg6.png" alt="">
<!-- <img src="../../assets/img/gjjg6.png" alt="">-->
<div class="rank_rujin" style="margin-left: 1px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">入禁预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li></li>
<li style="position: relative;left: -7px">排名</li>
<li style="position: relative;left: -7px">车牌号</li>
<li style="position: relative;left: 17px">单位名称</li>
<li style="position: relative;left: 15px">预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData1" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.brand}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg7.png" alt="">
<!-- <img src="../../assets/img/gjjg7.png" alt="">-->
<div class="rank_rujin" style="margin-left: 1px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">区域异常集中预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li></li>
<li style="position: relative;left: -7px">排名</li>
<li style="position: relative;left: -7px">车牌号</li>
<li style="position: relative;left: 17px">单位名称</li>
<li style="position: relative;left: 15px">预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData1" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.brand}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg8.png" alt="">
<!-- <img src="../../assets/img/gjjg8.png" alt="">-->
<div class="rank_rujin" style="margin-left: 1px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">未按规定入库预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li></li>
<li style="position: relative;left: -7px">排名</li>
<li style="position: relative;left: -7px">车牌号</li>
<li style="position: relative;left: 17px">单位名称</li>
<li style="position: relative;left: 15px">预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData1" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.brand}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg9.png" alt="">
<!-- <img src="../../assets/img/gjjg9.png" alt="">-->
<div class="rank_rujin" style="margin-left: 1px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">单车规律性停放预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li></li>
<li style="position: relative;left: -7px">排名</li>
<li style="position: relative;left: -7px">车牌号</li>
<li style="position: relative;left: 17px">单位名称</li>
<li style="position: relative;left: 15px">预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData1" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.brand}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<img src="../../assets/img/gjjg10.png" alt="">
<!-- <img src="../../assets/img/gjjg10.png" alt="">-->
<div class="rank_rujin" style="margin-left: 1px;position: relative">
<div class="data-block-bk mar-top" style="height: 292px">
<div class="data-tit-bg">工作日非工作时间用车预警</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div class="tabs_datag1">
<ul style="justify-content: flex-start;margin-top: 1%;position: relative;left:2%">
<li> </li>
<li> </li>
<li>近三月</li>
<li>近一年</li>
</ul>
</div>
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li></li>
<li style="position: relative;left: -7px">排名</li>
<li style="position: relative;left: -7px">车牌号</li>
<li style="position: relative;left: 17px">单位名称</li>
<li style="position: relative;left: 15px">预警数量</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData1" :key="item.id">
<li style="left: 20px;top: 4px;position: relative"><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.brand}}</li>
<li>{{item.name}}</li>
<li>{{item.count}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
@ -183,7 +603,71 @@ export default {
dateWeek: null,
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
decorationColor: ["#568aea", "#000000"],
tableData:[
{
rank:require('../../assets/carTravel/pm1.png'),
id:'1',
name:'南京市供电公司',
count:'11',
},
{
rank:require('../../assets/carTravel/pm2.png'),
id:'2',
name:'徐州市供电公司',
count:'12',
},
{
rank:require('../../assets/carTravel/pm3.png'),
id:'3',
name:'无锡市供电公司',
count:'9',
},
{
id:'4',
name:'扬州市供电公司',
count:'7',
},
{
id:'5',
name:'南通市供电公司',
count:'5',
},
],
tableData1:[
{
rank:require('../../assets/carTravel/pm1.png'),
id:'1',
brand:'苏A12345',
name:'南京市供电公司',
count:'11',
},
{
rank:require('../../assets/carTravel/pm2.png'),
id:'2',
brand:'苏A12345',
name:'徐州市供电公司',
count:'12',
},
{
rank:require('../../assets/carTravel/pm3.png'),
id:'3',
brand:'苏A12345',
name:'无锡市供电公司',
count:'9',
},
{
id:'4',
brand:'苏A12345',
name:'扬州市供电公司',
count:'7',
},
{
id:'5',
brand:'苏A12345',
name:'南通市供电公司',
count:'5',
},
],
};
},
components: {
@ -587,4 +1071,124 @@ left: 63%;
</style>
<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
.rank_head_bk{
width: 366px;
.data-block-bk {
border: 2px solid #29a3d3a1;
// background: #11223289;
background: rgba(16,29,37,0.8);
width: 366px;
.data-tit-bg {
width: 366px;
height: 38px;
line-height: 38px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url(../../assets/tit.png) no-repeat;
// background-size: contain;
background-size: 100% 30px;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
}
.data-flex {
display: flex;
justify-content: center;
// padding: 20px;
}
.list-table {
.tb-hd,
.tb-bd {
ul {
display: flex;
justify-content: space-around;
width: 100%;
height: 34px;
color: #a6d3e8;
li {
flex: 0.5;
line-height: 35px;
font-size: 14px;
&:first-child {
flex: 0.2;
}
}
}
}
.tb-hd {
ul {
background-color: rgba(14, 45, 66);
color: #65c1f2;
}
}
.tb-bd {
ul {
&:nth-child(2n) {
background-color: rgba(0, 0, 0, .3);
}
}
}
}
}
}
.rank_rujin{
width: 366px;
.data-block-bk {
border: 2px solid #29a3d3a1;
// background: #11223289;
background: rgba(16,29,37,0.8);
width: 366px;
.data-tit-bg {
width: 366px;
height: 38px;
line-height: 38px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url(../../assets/tit.png) no-repeat;
// background-size: contain;
background-size: 100% 30px;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
}
.data-flex {
display: flex;
justify-content: center;
// padding: 20px;
}
.list-table {
.tb-hd,
.tb-bd {
ul {
display: flex;
justify-content: space-around;
width: 100%;
height: 34px;
color: #a6d3e8;
li {
//flex: 0.5;
line-height: 30px;
font-size: 14px;
&:first-child {
flex: 0.1;
}
}
}
}
.tb-hd {
ul {
background-color: rgba(14, 45, 66);
color: #65c1f2;
}
}
.tb-bd {
ul {
&:nth-child(2n) {
background-color: rgba(0, 0, 0, .3);
}
}
}
}
}
}
</style>

View File

@ -50,8 +50,86 @@
</div>
<div class="leftTravel">
<div class="img">
<img src="../../assets/img/gx1.png" alt="">
<!-- <div class="img">-->
<!-- <img src="../../assets/img/gx1.png" alt="">-->
<!-- </div>-->
<div class="leftHeader">
<div class="head">
<ul>
<li>
报废更新概况
</li>
<li>
用车分析概况
</li>
</ul>
</div>
<div class="data-block-bk mar-top">
<div class="data-tit-bg" style="margin-top: 4%;">公务用车按报废车型统计</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li>排名</li>
<li>车型</li>
<li>平均年限</li>
<li>平均里程</li>
<li>平均维修成本</li>
<li>车辆更新率</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li>{{item.id}}</li>
<li>{{item.carType}}</li>
<li>{{item.ageAvg}}</li>
<li>{{item.mileAvg}}</li>
<li>{{item.repairAvg}}</li>
<li>{{item.renRate}}</li>
</ul>
</div>
</div>
</div>
<div style="position: relative;margin-top: 2%">
<div class="data-tit-bg">生产用车按报废车型统计</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%;margin-bottom: 1.8%;">
<div class="list-table">
<div class="tb-hd">
<ul>
<li>排名</li>
<li>车型</li>
<li>平均年限</li>
<li>平均里程</li>
<li>平均维修成本</li>
<li>车辆更新率</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData" :key="item.id">
<li>{{item.id}}</li>
<li>{{item.carType}}</li>
<li>{{item.ageAvg}}</li>
<li>{{item.mileAvg}}</li>
<li>{{item.repairAvg}}</li>
<li>{{item.renRate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bingimg">
<div class="head">
@ -143,15 +221,150 @@
</div>
<div style="display:inline-block;width:30%;position: absolute;
left: 24%;">
<img src="../../assets/img/gx2.png" alt="">
<!-- <img src="../../assets/img/gx2.png" alt=""> -->
<div class="rankHead">
<div class="head">
<ul>
<li>
公务用车
</li>
<li>
生产服务用车
</li>
</ul>
</div>
</div>
<div class="rank_head_bk">
<div class="data-block-bk mar-top" style="height: 344px">
<div class="data-tit-bg" style="margin-top: 4%;">车辆使用率较高的单位排名</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>车型</li>
<li>使用率</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData1" :key="item.id">
<li><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.carType}}</li>
<li>{{item.useRate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:inline-block;position: absolute;
left: 48%;">
<img src="../../assets/img/gx3.png" alt="">
<!-- <img src="../../assets/img/gx3.png" alt=""> -->
<div class="rankHead">
<div class="head">
<ul>
<li>
公务用车
</li>
<li style="width: 100px;left: 10px;position: relative">
生产服务用车
</li>
</ul>
</div>
</div>
<div class="rank_head_bk">
<div class="data-block-bk mar-top" style="height: 344px">
<div class="data-tit-bg" style="margin-top: 4%;">车辆使用率较低的单位排名</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>车型</li>
<li>使用率</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData2" :key="item.id">
<li><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.carType}}</li>
<li>{{item.useRate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:inline-block;position: absolute;
left: 72%;">
<img src="../../assets/img/gx4.png" alt="">
<!-- <img src="../../assets/img/gx4.png" alt=""> -->
<div class="rankHead">
<div class="head">
<ul>
<li>
公务用车
</li>
<li style="width: 100px;left: 10px;position: relative">
生产服务用车
</li>
</ul>
</div>
</div>
<div class="rank_head_bk">
<div class="data-block-bk mar-top" style="height: 344px">
<div class="data-tit-bg" style="margin-top: 4%;">车辆使用率较低的单位排名</div>
<!-- <img src="../../assets/img/cb1.png" alt="">-->
<!-- <BasicBoxCostControl title="全省宗地资源规划用途清单" :dataSource="false" :optList= optListData>
<template slot="top">
<CostControl :config="config" :style="{ height: '200px', padding: '10px' }"></CostControl>
</template>
</BasicBoxCostControl> -->
<div style="width: 95%;height: auto;margin-top: 3%;text-align: center;position: relative;left: 3%">
<div class="list-table">
<div class="tb-hd">
<ul>
<li style="width: 50px"></li>
<li>排名</li>
<li>单位名称</li>
<li>车型</li>
<li>使用率</li>
</ul>
</div>
<div class="tb-bd">
<ul v-for="item in tableData3" :key="item.id">
<li><img :src="item.rank"/></li>
<li>{{item.id}}</li>
<li>{{item.name}}</li>
<li>{{item.carType}}</li>
<li>{{item.useRate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -192,7 +405,137 @@ export default {
dateWeek: null,
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
decorationColor: ["#568aea", "#000000"],
tableData:[
{
id:1,
carType:'小车型',
ageAvg:'15年',
mileAvg:'400000公里',
repairAvg:'5478963元',
renRate:'10%'
},
{
id:2,
carType:'MPV',
ageAvg:'15年',
mileAvg:'400000公里',
repairAvg:'5478963元',
renRate:'20%'
},
{
id:3,
carType:'考斯特',
ageAvg:'15年',
mileAvg:'400000公里',
repairAvg:'5478963元',
renRate:'5%'
}
],
tableData1:[
{
rank:require('../../assets/carTravel/pm1.png'),
id:'1',
name:'南京市供电公司',
carType:'小型车',
useRate:'30%',
},
{
rank:require('../../assets/carTravel/pm2.png'),
id:'2',
name:'徐州市供电公司',
carType:'MPV',
useRate:'17%',
},
{
rank:require('../../assets/carTravel/pm3.png'),
id:'3',
name:'无锡市供电公司',
carType:'考斯特',
useRate:'12%',
},
{
id:'4',
name:'扬州市供电公司',
carType:'小型车',
useRate:'10%',
},
{
id:'5',
name:'南通市供电公司',
carType:'MPV',
useRate:'9%',
},
],
tableData2:[
{
rank:require('../../assets/carTravel/pm1.png'),
id:'1',
name:'扬州市供电公司',
carType:'考斯特',
useRate:'26%',
},
{
rank:require('../../assets/carTravel/pm2.png'),
id:'2',
name:'徐州市供电公司',
carType:'小型车',
useRate:'20%',
},
{
rank:require('../../assets/carTravel/pm3.png'),
id:'3',
name:'南京市供电公司',
carType:'MPV',
useRate:'10%',
},
{
id:'4',
name:'无锡市供电公司',
carType:'考斯特',
useRate:'5%',
},
{
id:'5',
name:'南通市供电公司',
carType:'小型车',
useRate:'4%',
},
],
tableData3:[
{
rank:require('../../assets/carTravel/pm1.png'),
id:'1',
name:'无锡市供电公司',
carType:'MPV',
useRate:'30%',
},
{
rank:require('../../assets/carTravel/pm2.png'),
id:'2',
name:'南京市供电公司',
carType:'考斯特',
useRate:'17%',
},
{
rank:require('../../assets/carTravel/pm3.png'),
id:'3',
name:'南通市供电公司',
carType:'小型车',
useRate:'12%',
},
{
id:'4',
name:'徐州市供电公司',
carType:'MPV',
useRate:'10%',
},
{
id:'5',
name:'扬州市供电公司',
carType:'小型车',
useRate:'9%',
},
],
};
},
components: {
@ -308,6 +651,30 @@ left: 63%;
top: 120px;
left: 2%;
width: 100%;
.leftHeader{
width: 34%;
display: inline-block;
position: absolute;
left: 2%;
.head{
width: 100%;
li{
float: left;
width: 22%;
height: 40px;
text-align: center;
line-height: 40px;
background: url(../../assets/carTravel/touch.png) no-repeat;
color: #8ec1d8;
font-weight: 700;
}
li:hover{
color: #25dff4;
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
font-weight: 700;
}
}
}
}
.rightTravel{
position: absolute;
@ -851,4 +1218,143 @@ height:50%
</style>
<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
.data-block-bk {
border: 2px solid #29a3d3a1;
// background: #11223289;
background: rgba(16,29,37,0.8);
margin-top: 6.1%;
width: 638px;
.data-tit-bg {
width: 600px;
height: 38px;
line-height: 38px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url(../../assets/tit.png) no-repeat;
// background-size: contain;
background-size: 100% 30px;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
}
.data-flex {
display: flex;
justify-content: center;
// padding: 20px;
}
}
.list-table {
.tb-hd,
.tb-bd {
ul {
display: flex;
justify-content: space-around;
width: 100%;
height: 35px;
color: #a6d3e8;
li {
flex: 0.5;
line-height: 35px;
font-size: 14px;
&:first-child {
flex: 0.5;
}
}
}
}
.tb-hd {
ul {
background-color: rgba(14, 45, 66);
color: #65c1f2;
}
}
.tb-bd {
ul {
&:nth-child(2n) {
background-color: rgba(0, 0, 0, .3);
}
}
}
}
.rankHead{
.head{
width: 100%;
li{
float: left;
width: 17%;
height: 40px;
text-align: center;
line-height: 40px;
background: url(../../assets/carTravel/touch.png) no-repeat;
color: #8ec1d8;
font-weight: 700;
}
li:hover{
color: #25dff4;
background: url(../../assets/carTravel/touch_hot.png) no-repeat;
font-weight: 700;
}
}
}
.rank_head_bk{
width: 454px;
.data-block-bk {
border: 2px solid #29a3d3a1;
// background: #11223289;
background: rgba(16,29,37,0.8);
margin-top: 9%;
width: 454px;
.data-tit-bg {
width: 454px;
height: 38px;
line-height: 38px;
padding-left: 50px;
margin-bottom: 5px;
background: -15px url(../../assets/tit.png) no-repeat;
// background-size: contain;
background-size: 100% 30px;
color: #8ec1d8;
font-weight: 700;
font-size: 16px;
}
.data-flex {
display: flex;
justify-content: center;
// padding: 20px;
}
.list-table {
.tb-hd,
.tb-bd {
ul {
display: flex;
justify-content: space-around;
width: 101%;
height: 44px;
color: #a6d3e8;
li {
flex: 0.5;
line-height: 35px;
font-size: 14px;
&:first-child {
flex: 0.2;
}
}
}
}
.tb-hd {
ul {
background-color: rgba(14, 45, 66);
color: #65c1f2;
}
}
.tb-bd {
ul {
&:nth-child(2n) {
background-color: rgba(0, 0, 0, .3);
}
}
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -152,8 +152,8 @@
</div>
<p>车辆管理</p>
</div>
<!-- <div class="baseBlock fire" @click="goPage(2)"> -->
<div class="baseBlock fire">
<div class="baseBlock fire" @click="goPage(2)">
<!-- <div class="baseBlock fire">-->
<p>消防安全</p>
</div>
<div class="baseBlock quanjing" @click="goPage(9)">