473 lines
8.3 KiB
CSS
473 lines
8.3 KiB
CSS
.dashboard .clearfix:after {
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
opacity: 0;
|
||
}
|
||
|
||
.dashboard .left {
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .right {
|
||
float: right;
|
||
}
|
||
|
||
.dashboard .row {
|
||
width: 100%;
|
||
display: block;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.dashboard .row:after {
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
opacity: 0;
|
||
}
|
||
|
||
.dashboard .col-2 {
|
||
width: 8.3333333%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-3 {
|
||
width: 12.5%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-4 {
|
||
width: 16.6666667%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-6 {
|
||
width: 25%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-8 {
|
||
width: 33.3333333%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-12 {
|
||
width: 50%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-16 {
|
||
width: 66.6666667%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-18 {
|
||
width: 75%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard .col-24 {
|
||
width: 100%;
|
||
float: left;
|
||
}
|
||
|
||
.dashboard {
|
||
height:100%;
|
||
overflow-y:auto;
|
||
overflow-x:hidden;
|
||
padding: 0;
|
||
-webkit-box-sizing: content-box;
|
||
-moz-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.dashboard .mainContent {
|
||
background: #fff;
|
||
border: 1px solid #e3e3e3;
|
||
-webkit-border-radius: 3px;
|
||
-moz-border-radius: 3px;
|
||
border-radius: 3px;
|
||
padding: 10px 0 10px 10px;
|
||
-webkit-box-sizing: content-box;
|
||
-moz-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.dashboard .mainContent .leftContentBox {
|
||
width: 280px;
|
||
flex-shrink: 0;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.dashboard .mainContent .leftContentBox .leftNavHead {
|
||
text-align: center;
|
||
position: relative;
|
||
background: #f5f5f5;
|
||
line-height: 66px;
|
||
margin-bottom: 12px;
|
||
-webkit-border-radius: 2px;
|
||
-moz-border-radius: 2px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.dashboard .leftNavHead h2 {
|
||
font-size: 30px;
|
||
line-height: 66px;
|
||
font-weight: bold;
|
||
color: #2d2d2d;
|
||
}
|
||
|
||
.dashboard .leftNavHead .iconfont {
|
||
font-size: 32px;
|
||
position: absolute;
|
||
left: 18px;
|
||
color: #3090ef;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem {
|
||
list-style: none;
|
||
background: #dfc472;
|
||
padding: 13px 30px;
|
||
color: #fff;
|
||
position: relative;
|
||
-webkit-border-radius: 2px;
|
||
-moz-border-radius: 2px;
|
||
border-radius: 2px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.customHeight {
|
||
height:115px;
|
||
}
|
||
.customHeight .itemTitle {
|
||
margin-bottom:20px;
|
||
}
|
||
.customHeight1{
|
||
height:118px;
|
||
}
|
||
.customHeight1 .itemTitle {
|
||
margin-bottom:20px;
|
||
}
|
||
.customHeight2{
|
||
height:160px;
|
||
}
|
||
.customHeight3{
|
||
height:96px;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem:nth-of-type(2) {
|
||
background: #3ecbb3;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem:nth-of-type(3) {
|
||
background: #3eafc8;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem:nth-of-type(4) {
|
||
background: #b7866e;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem:nth-of-type(5) {
|
||
background: #57c0f2;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem:nth-of-type(6) {
|
||
background: #7f93d8;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem:nth-of-type(7) {
|
||
background: #f49335;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem .itemTitle {
|
||
font-size: 24px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem .itemValue {
|
||
font-size: 36px;
|
||
line-height: 56px;
|
||
min-height: 56px;
|
||
}
|
||
|
||
.dashboard .leftNavBody .leftNavListItem .iconfont {
|
||
font-size: 28px;
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
display: block;
|
||
width: 48px;
|
||
height: 48px;
|
||
-webkit-border-radius: 50%;
|
||
-moz-border-radius: 50%;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
text-align: center;
|
||
line-height: 48px;
|
||
}
|
||
.dashboard .leftNavBody .leftNavListItem .leftNavListItemUnit {
|
||
margin: 0 6px;
|
||
}
|
||
.dashboard .mainContent .centerContentBox {
|
||
flex:1;
|
||
width:0;
|
||
}
|
||
|
||
.dashboard .panel {
|
||
margin: 0 6px;
|
||
-webkit-box-sizing: content-box;
|
||
-moz-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
border: 1px solid #e3e3e3;
|
||
|
||
}
|
||
|
||
.dashboard .panel .panelHead {
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
}
|
||
|
||
.dashboard .panel .panelHead .panelHeadLeftWrap {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 46px;
|
||
overflow: hidden;
|
||
width: 50%;
|
||
padding: 8px 16px;
|
||
}
|
||
|
||
.dashboard .panel .panelHead .panelHeadRightWrap {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
height: 46px;
|
||
overflow: hidden;
|
||
width: 50%;
|
||
padding: 8px 16px;
|
||
}
|
||
.dashboard .panel .panelHead .panelHeadRightWrap .selectComponent {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.dashboard .panel .panelHead .panelTitle {
|
||
color: #2d2d2d;
|
||
font-size: 16px;
|
||
line-height: 46px;
|
||
height: 46px;
|
||
text-align: center;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.dashboard .panel .panelHead .panelTitle.leftTitle {
|
||
text-align: left;
|
||
}
|
||
.dashboard .panel .panelBody {
|
||
padding: 6px 12px;
|
||
-webkit-box-sizing: content-box;
|
||
-moz-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
}
|
||
.dashboard .btn {
|
||
height: 30px;
|
||
line-height: 14px;
|
||
padding: 8px 20px;
|
||
border: 1px solid rgba(0,0,0,0.1);
|
||
border-radius: 3px;
|
||
}
|
||
.dashboard .btnPrimary {
|
||
background: #07aede;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
.selectComponent {
|
||
height: 28px;
|
||
width: 80px;
|
||
font-size: 14px;
|
||
}
|
||
.selectUnit {
|
||
margin: 0 6px;
|
||
font-size: 14px;
|
||
}
|
||
.echartGraph {
|
||
width: 100%;
|
||
/*height: 270px;*/
|
||
height: 209px;
|
||
}
|
||
.echartGraph1 {
|
||
width: 100%;
|
||
height: 186px;
|
||
}
|
||
.echartGraph2 {
|
||
width: 100%;
|
||
height: 190px;
|
||
}
|
||
|
||
|
||
.emptyTips {
|
||
text-align: center;
|
||
padding: 80px 0 20px 0;
|
||
color: #999999;
|
||
width: calc(100% - 24px);
|
||
}
|
||
|
||
|
||
|
||
.safetyDashboard .legend {
|
||
background: #f5f5f5;
|
||
width: calc(100% - 12px);
|
||
line-height: 32px;
|
||
margin: 0 6px;
|
||
display:flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
.legend-label {
|
||
font-size: 14px;
|
||
color:#333333;
|
||
flex:1;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.legendItem {
|
||
margin-right: 20px;
|
||
position: relative;
|
||
width: 70px;
|
||
padding-left: 20px;
|
||
|
||
}
|
||
|
||
|
||
.legendItem:before {
|
||
content: "";
|
||
display: block;
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 6px;
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 0;
|
||
}
|
||
|
||
.legendItem:nth-of-type(1):before {
|
||
background: #43d28f;
|
||
}
|
||
.legendItem:nth-of-type(2):before {
|
||
background: #009ad6;
|
||
}
|
||
.legendItem:nth-of-type(3):before {
|
||
background: #dfd100;
|
||
}
|
||
.legendItem:nth-of-type(4):before {
|
||
background: #f49335;
|
||
}
|
||
.legendItem:nth-of-type(5):before {
|
||
background: #da390a;
|
||
}
|
||
|
||
.chuangyou:nth-of-type(1):before {
|
||
background: #FDD46D;
|
||
}
|
||
.chuangyou:nth-of-type(2):before {
|
||
background: #7AD8F3;
|
||
}
|
||
.chuangyou:nth-of-type(3):before {
|
||
background: #72ACFD;
|
||
}
|
||
|
||
|
||
|
||
/* <20>ֲ<EFBFBD><D6B2><EFBFBD>ͼ<EFBFBD><CDBC>ʽ */
|
||
.statisList {
|
||
display: flex;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
height: calc(100% - 46px);
|
||
}
|
||
|
||
.statisList .statisListBox {
|
||
display: flex;
|
||
height: 100%;
|
||
width: 100%;
|
||
min-height: 176px;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.statisList .statisListBox > div {
|
||
width: 20%;
|
||
position: relative;
|
||
}
|
||
|
||
.statisListTitle {
|
||
font-size: 14px;
|
||
color: #7e7e7e;
|
||
}
|
||
|
||
.statisList .statisListBox > div canvas {
|
||
margin: 6px auto 6px;
|
||
display: block;
|
||
}
|
||
|
||
.statisList .statisListBox > div div {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0px;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.statisListTitle > ul {
|
||
overflow: hidden;
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 200px;
|
||
margin-left: -100px;
|
||
top: 15px;
|
||
color: #000;
|
||
}
|
||
|
||
.statisListTitle > ul li {
|
||
float: left;
|
||
color: #000;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.statisListTitle > ul li span {
|
||
display: inline-block;
|
||
width: 21px;
|
||
height: 8px;
|
||
border-radius: 3px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.statisListTitle > ul li:nth-child(1) span {
|
||
background: #6b7285;
|
||
}
|
||
|
||
.statisListTitle > ul li:nth-child(2) span {
|
||
background: #00fdfd;
|
||
}
|
||
|
||
.statisListTitle > ul li:nth-child(3) span {
|
||
background: #8ee873;
|
||
}
|
||
|
||
.statisListTitle > ul li:nth-child(4) span {
|
||
background: #6eb957;
|
||
}
|
||
|
||
.swiper-pagination {
|
||
margin-top: 10px;
|
||
}
|