删除目录4.车联网平台
@ -1,86 +0,0 @@
|
||||
/*css 初始化 */
|
||||
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*将标签原有的默认内外边距去掉*/
|
||||
|
||||
fieldset, img, input, button {
|
||||
border: none; /*去掉边框*/
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline-style: none; /*去掉环绕边框*/
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none; /*去掉原样式中的小黑点*/
|
||||
/*ctrl+alt+l*/
|
||||
}
|
||||
|
||||
input {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
select, input {
|
||||
vertical-align: middle; /*输入字居中显示*/
|
||||
}
|
||||
|
||||
select, input, textarea {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**/
|
||||
textarea {
|
||||
resize: none; /*防止拖动*/
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
vertical-align: middle; /* 去掉图片底部默认的3像素空白缝隙*/
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /*合并外边线*/
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Microsoft YaHei, Arial, "\5b8b\4f53";
|
||||
}
|
||||
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1; /*IE/7/6*/
|
||||
/*兼容IE6下的写法*/
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-decoration: none; /**/
|
||||
font-weight: normal; /*不加粗*/
|
||||
font-size: 100%;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
s, i, em {
|
||||
/*一般起装饰作用*/
|
||||
font-style: normal; /*将字体变成正常字体*/
|
||||
text-decoration: none; /*去掉中划线*/
|
||||
}
|
||||
.fl{
|
||||
float: left;
|
||||
}
|
||||
.fr{
|
||||
float: right;
|
||||
}
|
@ -1,273 +0,0 @@
|
||||
html,body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.data{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('../img/map_bg.png') center;
|
||||
min-width: 1366px;
|
||||
}
|
||||
.data>.data-title{
|
||||
width: 100%;
|
||||
height: 105px;
|
||||
padding: 30px 0 35px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.data>.data-title>.title-center{
|
||||
width: 440px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-right: 5px solid #0089ff;
|
||||
border-left: 5px solid #0089ff;
|
||||
background: url("../img/title.png") no-repeat;
|
||||
}
|
||||
.data>.data-title>.title-left,
|
||||
.data>.data-title>.title-right{
|
||||
width:calc(50% - 220px);
|
||||
height: 3px;
|
||||
background: #0089ff;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.data>.data-content{
|
||||
width: 100%;
|
||||
height:calc(100% - 105px);
|
||||
padding:0 20px 20px 20px ;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.data>.data-content>.con-left{
|
||||
width: 23.4375%;
|
||||
height: 100%;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top{
|
||||
width: 100%;
|
||||
height:calc(75% - 20px);
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data>.data-content>.con-left>.left-top>.info{
|
||||
height:62%;
|
||||
width: 100%;
|
||||
border: 1px solid #20558b;
|
||||
/*border-radius: 4px;*/
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-title{
|
||||
width: 158px;
|
||||
height: 43px;
|
||||
background: url('../img/info-title.png') no-repeat;
|
||||
position: absolute;
|
||||
top: -22px;
|
||||
left:50%;
|
||||
margin-left: -74px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 43px;
|
||||
text-align: center;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main{
|
||||
width: 100%;
|
||||
height: 80% ;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main>div{
|
||||
width: 275px;
|
||||
height: 25%;
|
||||
background: url('../img/info-text.png') no-repeat;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main>div.info-1{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main .info-img{
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main .info-img>img{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main .info-text{
|
||||
width: 175px;
|
||||
height: 70px;
|
||||
padding-left: 30px;
|
||||
padding-top: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main .info-text>p:nth-child(1){
|
||||
color:#fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main>.info-1> .info-text>p:nth-child(2){
|
||||
font-weight: 600;
|
||||
color:#ffff44;
|
||||
font-size: 22px;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main>.info-2> .info-text>p:nth-child(2){
|
||||
font-weight: 600;
|
||||
color:#25f3e6;
|
||||
font-size: 22px;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main>.info-3> .info-text>p:nth-child(2){
|
||||
font-weight: 600;
|
||||
color:#f84a4a;
|
||||
font-size: 22px;
|
||||
}
|
||||
.data>.data-content>.con-left>.left-top>.info>.info-main>.info-4> .info-text>p:nth-child(2){
|
||||
font-weight: 600;
|
||||
color:#f5c847;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.data>.data-content>.con-left>.left-top>.top-bottom{
|
||||
height:calc(38% - 20px);
|
||||
width: 100%;
|
||||
background-color: rgba(0,24,106,0.5);
|
||||
margin-top: 20px;
|
||||
border: 1px solid #20558b;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.data>.data-content>.con-left>.left-bottom{
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
background-color: rgba(0,24,106,0.5);
|
||||
border: 1px solid #20558b;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.data>.data-content>.con-center{
|
||||
width: 53.125%;
|
||||
height: 100%;
|
||||
padding:0 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.data>.data-content>.con-center>.map-num{
|
||||
width: 500px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:50px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.data>.data-content>.con-center>.map-num>p{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color:#fff;
|
||||
}
|
||||
.data>.data-content>.con-center>.map-num span{
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
line-height: 65px;
|
||||
background-color: #0089ff;
|
||||
color:#fff;
|
||||
font-size: 68px;
|
||||
font-weight: 600;
|
||||
font-family: "LcdD";
|
||||
margin-top: 15px;
|
||||
}
|
||||
.data>.data-content>.con-center>.map-num span:nth-child(2),
|
||||
.data>.data-content>.con-center>.map-num span:nth-child(6){
|
||||
background-color: transparent;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.data>.data-content>.con-center>.cen-top{
|
||||
width: 100%;
|
||||
height:calc(75% - 20px);
|
||||
margin-bottom: 20px;
|
||||
/*background-color: rgba(0,24,106,0.3);*/
|
||||
/*border: 1px solid #0089ff;*/
|
||||
/*border-radius: 4px;*/
|
||||
/*box-sizing: border-box;*/
|
||||
}
|
||||
|
||||
|
||||
.data>.data-content>.con-center>.cen-bottom{
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
background-color: rgba(0,24,106,0.5);
|
||||
border: 1px solid #20558b;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data>.data-content>.con-right{
|
||||
width: 23.4375%;
|
||||
height: 100%;
|
||||
}
|
||||
.data>.data-content>.con-right>.right-top{
|
||||
width: 100%;
|
||||
height: 32%;
|
||||
background-color: rgba(0,24,106,0.5);
|
||||
border: 1px solid #20558b;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.data>.data-content>.con-right>.right-center{
|
||||
width: 100%;
|
||||
height:calc(36% - 40px);
|
||||
margin: 20px 0;
|
||||
background-color: rgba(0,24,106,0.5);
|
||||
border: 1px solid #20558b;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.data>.data-content>.con-right>.right-bottom{
|
||||
width: 100%;
|
||||
height:32%;
|
||||
background-color: rgba(0,24,106,0.5);
|
||||
border: 1px solid #20558b;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data>.data-content .title{
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
width: 100%;
|
||||
color:#fff;
|
||||
font-weight: 600;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.data>.data-content .charts{
|
||||
width: 100%;
|
||||
height:calc(100% - 35px);
|
||||
}
|
||||
|
||||
.data>.data-content img.bj-1{
|
||||
position: absolute;
|
||||
left:-1px;
|
||||
top:-1px;
|
||||
}
|
||||
.data>.data-content img.bj-2{
|
||||
position: absolute;
|
||||
right:-1px;
|
||||
top:-1px;
|
||||
}
|
||||
.data>.data-content img.bj-3{
|
||||
position: absolute;
|
||||
right:-1px;
|
||||
bottom:-1px;
|
||||
}
|
||||
.data>.data-content img.bj-4{
|
||||
position: absolute;
|
||||
left:-1px;
|
||||
bottom:-1px;
|
||||
}
|
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 1002 KiB |
Before Width: | Height: | Size: 12 KiB |
@ -1,142 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新能源车联网综合大数据平台</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/map.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="data">
|
||||
|
||||
<div class="data-title">
|
||||
<div class="title-left fl"></div>
|
||||
<div class="title-center fl"></div>
|
||||
<div class="title-right fr"></div>
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="con-left fl">
|
||||
<div class="left-top">
|
||||
<div class="info">
|
||||
<div class="info-title">实时统计</div>
|
||||
<img src="img/bj-1.png" alt="" class="bj-1">
|
||||
<img src="img/bj-2.png" alt="" class="bj-2">
|
||||
<img src="img/bj-3.png" alt="" class="bj-3">
|
||||
<img src="img/bj-4.png" alt="" class="bj-4">
|
||||
<div class="info-main">
|
||||
<div class="info-1">
|
||||
<div class="info-img fl">
|
||||
<img src="img/info-img-1.png" alt="">
|
||||
</div>
|
||||
<div class="info-text fl">
|
||||
<p>车辆总数(辆)</p>
|
||||
<p>12,457</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-2">
|
||||
<div class="info-img fl">
|
||||
<img src="img/info-img-2.png" alt="">
|
||||
</div>
|
||||
<div class="info-text fl">
|
||||
<p>当前在线数(辆)</p>
|
||||
<p>12,457</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-3">
|
||||
<div class="info-img fl">
|
||||
<img src="img/info-img-3.png" alt="">
|
||||
</div>
|
||||
<div class="info-text fl">
|
||||
<p>今日活跃数(辆)</p>
|
||||
<p>12,457</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-4">
|
||||
<div class="info-img fl">
|
||||
<img src="img/info-img-4.png" alt="">
|
||||
</div>
|
||||
<div class="info-text fl">
|
||||
<p>今日活跃率(%)</p>
|
||||
<p>83</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-bottom">
|
||||
<div class="title">行业分类</div>
|
||||
<img src="img/bj-1.png" alt="" class="bj-1">
|
||||
<img src="img/bj-2.png" alt="" class="bj-2">
|
||||
<img src="img/bj-3.png" alt="" class="bj-3">
|
||||
<img src="img/bj-4.png" alt="" class="bj-4">
|
||||
<div id="echarts_1" class="charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-bottom">
|
||||
<div class="title">车型分类</div>
|
||||
<img src="img/bj-1.png" alt="" class="bj-1">
|
||||
<img src="img/bj-2.png" alt="" class="bj-2">
|
||||
<img src="img/bj-3.png" alt="" class="bj-3">
|
||||
<img src="img/bj-4.png" alt="" class="bj-4">
|
||||
<div id="echarts_2" class="charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-center fl">
|
||||
<div class="map-num">
|
||||
<p>实时行驶车辆(辆)</p>
|
||||
<div class="num">
|
||||
<span>1</span>
|
||||
<span>,</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>,</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
<span>7</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cen-top" id="map"></div>
|
||||
<div class="cen-bottom">
|
||||
<div class="title">车辆充电高峰时间</div>
|
||||
<img src="img/bj-1.png" alt="" class="bj-1">
|
||||
<img src="img/bj-2.png" alt="" class="bj-2">
|
||||
<img src="img/bj-3.png" alt="" class="bj-3">
|
||||
<img src="img/bj-4.png" alt="" class="bj-4">
|
||||
<div id="echarts_3" class="charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-right fr">
|
||||
<div class="right-top">
|
||||
<div class="title">本月行驶里程TOP5</div>
|
||||
<img src="img/bj-1.png" alt="" class="bj-1">
|
||||
<img src="img/bj-2.png" alt="" class="bj-2">
|
||||
<img src="img/bj-3.png" alt="" class="bj-3">
|
||||
<img src="img/bj-4.png" alt="" class="bj-4">
|
||||
<div id="echarts_4" class="charts"></div>
|
||||
</div>
|
||||
<div class="right-center">
|
||||
<div class="title">报警车辆TOP5</div>
|
||||
<img src="img/bj-1.png" alt="" class="bj-1">
|
||||
<img src="img/bj-2.png" alt="" class="bj-2">
|
||||
<img src="img/bj-3.png" alt="" class="bj-3">
|
||||
<img src="img/bj-4.png" alt="" class="bj-4">
|
||||
<div id="echarts_5" class="charts"></div>
|
||||
</div>
|
||||
<div class="right-bottom">
|
||||
<div class="title">电池报警车辆TOP10</div>
|
||||
<img src="img/bj-1.png" alt="" class="bj-1">
|
||||
<img src="img/bj-2.png" alt="" class="bj-2">
|
||||
<img src="img/bj-3.png" alt="" class="bj-3">
|
||||
<img src="img/bj-4.png" alt="" class="bj-4">
|
||||
<div id="echarts_6" class="charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="js/jquery-2.1.1.min.js"></script>
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/china.js"></script>
|
||||
<script src="js/echarts.js"></script>
|
||||
</html>
|