|
|
@charset "utf-8"; |
|
|
/*通用样式ͨ*/ |
|
|
body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd { |
|
|
margin:0; |
|
|
padding:0; |
|
|
} |
|
|
ul, li{ |
|
|
list-style: none; |
|
|
} |
|
|
a:link, |
|
|
a:visited, |
|
|
a:active { |
|
|
text-decoration: none; |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.header{ |
|
|
width: 824px; |
|
|
margin: 0 auto; |
|
|
position: relative; |
|
|
padding-top: 28px; |
|
|
font-size: 36px; |
|
|
color: #ffffff; |
|
|
text-align: center; |
|
|
} |
|
|
.header a.a-access{ |
|
|
position: absolute; |
|
|
right: 3%; |
|
|
top: -18%; |
|
|
} |
|
|
.main{ |
|
|
padding: 0 10px 10px; |
|
|
} |
|
|
.main-left, |
|
|
.main-right{ |
|
|
float: left; |
|
|
width: 25%; |
|
|
padding: 0 10px; |
|
|
height: 90%; |
|
|
} |
|
|
.main-middle{ |
|
|
float: left; |
|
|
width: 50%; |
|
|
padding: 0 10px; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.box-container { |
|
|
position: relative; |
|
|
margin-top: 15px; |
|
|
padding: 10px; |
|
|
height: 400px; |
|
|
background-color: #041149; |
|
|
#border: 1px solid #54dcf2; |
|
|
} |
|
|
.mail-container{ |
|
|
position: relative; |
|
|
margin-top: 15px; |
|
|
padding: 10px; |
|
|
height: 335px; |
|
|
background-color: #041149; |
|
|
} |
|
|
.box-console{ |
|
|
position: relative; |
|
|
margin-top: 15px; |
|
|
padding: 10px; |
|
|
} |
|
|
.box-container span.border-span { |
|
|
display: block; |
|
|
position: absolute; |
|
|
width:35px; |
|
|
height: 35px; |
|
|
} |
|
|
|
|
|
.box-container span.top-left { |
|
|
top: -4px; |
|
|
left:-4px; |
|
|
border-top: 3px solid #54dcf2; |
|
|
border-left: 3px solid #54dcf2; |
|
|
} |
|
|
|
|
|
.box-container span.top-right { |
|
|
top:-4px; |
|
|
right:-4px; |
|
|
border-top: 3px solid #54dcf2; |
|
|
border-right: 3px solid #54dcf2; |
|
|
} |
|
|
|
|
|
.box-container span.bottom-left { |
|
|
bottom: -4px; |
|
|
left: -4px; |
|
|
border-bottom: 3px solid #54dcf2; |
|
|
border-left: 3px solid #54dcf2; |
|
|
} |
|
|
|
|
|
.box-container span.bottom-right { |
|
|
bottom: -4px; |
|
|
right: -4px; |
|
|
border-bottom: 3px solid #54dcf2; |
|
|
border-right: 3px solid #54dcf2; |
|
|
} |
|
|
.name-title{ |
|
|
font-weight: bold; |
|
|
font-family: SourceHanSansCN-Bold; |
|
|
font-size: 24px; |
|
|
color: #FFFFFF; |
|
|
letter-spacing: 0.8px; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
#map{ |
|
|
height: 380px; |
|
|
min-width: 600px; |
|
|
} |
|
|
|
|
|
#dayEchart{ |
|
|
height: 220px; |
|
|
|
|
|
} |
|
|
#monthEchart{ |
|
|
height: 220px; |
|
|
|
|
|
} |
|
|
#weekEchart{ |
|
|
height: 220px; |
|
|
|
|
|
} |
|
|
|
|
|
@import url("https://fonts.googleapis.com/css?family=Raleway"); |
|
|
* { |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
|
|
|
.clearfix:after, .clearfix:before { |
|
|
display: table; |
|
|
content: " " |
|
|
} |
|
|
.clearfix:after { |
|
|
clear: both |
|
|
} |
|
|
.echart-tabs > .el-tabs__content { |
|
|
color: #fff; |
|
|
font-size: 32px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.echart-tabs .el-tabs__nav{ |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.trend-tabs > .el-tabs__content { |
|
|
color: #fff; |
|
|
font-size: 32px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
|
|
|
.trend-tabs .el-tabs__item { |
|
|
color: #3a5bbe; |
|
|
border: 0; |
|
|
border-left: none; |
|
|
border-right: none; |
|
|
boeder-top: none; |
|
|
} |
|
|
.el-tabs--card > .el-tabs__header .el-tabs__nav{ |
|
|
border: 0; |
|
|
|
|
|
} |
|
|
|
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item{ |
|
|
border-left: none; |
|
|
border-right: none; |
|
|
font-family: SourceHanSansCN-Bold; |
|
|
font-size: 18px; |
|
|
text-align: center; |
|
|
} |
|
|
.echart-tabs .el-tabs__active-bar{ |
|
|
color: #28ebff; |
|
|
background-color: #28ebff; |
|
|
} |
|
|
.echart-tabs .el-tabs__item { |
|
|
color: #3a5bbe; |
|
|
width: 100%; |
|
|
border: 0; |
|
|
border-left: none; |
|
|
border-right: none; |
|
|
boeder-top: none; |
|
|
} |
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active { |
|
|
color: #fff; |
|
|
border-bottom-color: #28ebff; |
|
|
border-bottom-width: initial; |
|
|
font-weight: 700; |
|
|
} |
|
|
.console-div ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;} |
|
|
.console-div li{ float: left; width: 16%; text-align: center; position: relative} |
|
|
.console-div li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;} |
|
|
.console-div li:last-child:before{ width: 0;} |
|
|
|
|
|
.console-div li h2{ |
|
|
font-size:30px; |
|
|
color: #fff; |
|
|
padding-bottom: 10px; |
|
|
text-align: center; |
|
|
padding-top: 17px; |
|
|
width: 155px; |
|
|
height: 70px; |
|
|
|
|
|
} |
|
|
.bulebg{ |
|
|
background-image: url("@/assets/bg_shuju1.png"); |
|
|
} |
|
|
.yellowbg{ |
|
|
background-image: url("@/assets/bg_shuju2.png"); |
|
|
} |
|
|
.console-div li span{height: 30px; width: 154px; font-size:20px; color: #fff; text-align: center;font-family: SourceHanSansCN-Normal;padding-left: 10px;margin-top: 10px} |
|
|
|
|
|
|
|
|
.el-tabs--card > .el-tabs__header { |
|
|
border: 0; |
|
|
} |
|
|
|
|
|
.boxnav{height: calc(100% - 2rem);} |
|
|
.row>li{ float: left; height: 100%;} |
|
|
.col-6{width: 50%;} |
|
|
.col-3{width: 25%;} |
|
|
.col-4{width: 33.33333%;} |
|
|
.h100{height: 100%;} |
|
|
.pmbar{position: relative; display: flex;} |
|
|
|
|
|
.pmbar span{ background: linear-gradient(to right,#14b6ff,#9cefff); display: inline-block; |
|
|
|
|
|
vertical-align: middle; height: 1.5rem; } |
|
|
.pmbar i{ line-height: 2rem; font-style: normal; padding-left: 1rem; font-family: PingFang-SC-Regular; |
|
|
font-size: 12px; |
|
|
color: #FFFFFF; |
|
|
text-align: right; |
|
|
font-weight: 400;} |
|
|
.pmnav{width:calc(100% - 5rem);margin:0 10px} |
|
|
.pmnav p{color: #fff; padding-bottom: 0.5rem; white-space: nowrap; |
|
|
overflow: hidden; text-overflow: ellipsis; font-family: SourceHanSansCN-Normal; |
|
|
font-size: 16px; |
|
|
letter-spacing: 0.53px; |
|
|
font-weight: 400;} |
|
|
.paim li>span{width: 3rem; height: 3rem;font-family: SourceHanSansCN-Bold; |
|
|
font-size: 24px; |
|
|
color: #FFFFFF; |
|
|
letter-spacing: 0.8px; |
|
|
text-align: center; |
|
|
font-weight: 700; |
|
|
text-align: center; line-height: 3rem; border-radius: .05rem; margin-right: .1rem; } |
|
|
/*.paim li:nth-child(1)>span{ background: #ed405d} |
|
|
.paim li:nth-child(2)>span{background: #f78c44} |
|
|
.paim li:nth-child(3)>span{background: #49bcf7}*/ |
|
|
.paim li{display: flex; align-items: center; height:12%;} |
|
|
|
|
|
.pmsum{ |
|
|
margin-top: 25px; |
|
|
font-family: SourceHanSansCN-Bold; |
|
|
font-size: 12px; |
|
|
color: #FFFFFF; |
|
|
letter-spacing: 0.8px; |
|
|
text-align: center; |
|
|
font-weight: 400; |
|
|
} |
|
|
|
|
|
.boxLeftMailCon{ |
|
|
height: 360px; |
|
|
overflow: auto; |
|
|
} |
|
|
|
|
|
.boxLeftMailCon::-webkit-scrollbar { |
|
|
width: 8px; /* 宽度 */ |
|
|
} |
|
|
.boxLeftMailCon::-webkit-scrollbar-track { |
|
|
background: #071a4e; /* 滚动条背景色 */ |
|
|
|
|
|
} |
|
|
|
|
|
.boxLeftMailCon::-webkit-scrollbar-thumb { |
|
|
background-clip: padding-box; /* 背景剪裁 */ |
|
|
border: 8px solid transparent; /* 边框 */ |
|
|
background-image: linear-gradient(180deg, #007FFF 0%, #0049FF 100%); |
|
|
border-radius: 11px; |
|
|
} |
|
|
|
|
|
.boxLeftMailCon::-webkit-scrollbar-thumb:hover { |
|
|
background: #0060fe; /* 鼠标悬停时的滚动条颜色 */ |
|
|
} |
|
|
|
|
|
.boxRightMailCon{ |
|
|
height: 300px; |
|
|
overflow: auto; |
|
|
} |
|
|
.boxRightMailCon::-webkit-scrollbar { |
|
|
width: 8px; /* 宽度 */ |
|
|
} |
|
|
.boxRightMailCon::-webkit-scrollbar-track { |
|
|
background: #071a4e; /* 滚动条背景色 */ |
|
|
} |
|
|
|
|
|
.boxRightMailCon::-webkit-scrollbar-thumb { |
|
|
background: #005dfe; /* 滚动条颜色 */ |
|
|
border-radius: 6px; /* 圆角 */ |
|
|
background-clip: padding-box; /* 背景剪裁 */ |
|
|
border: 8px solid transparent; /* 边框 */ |
|
|
} |
|
|
|
|
|
.boxRightMailCon::-webkit-scrollbar-thumb:hover { |
|
|
background: #0060fe; /* 鼠标悬停时的滚动条颜色 */ |
|
|
} |
|
|
.mailUl{ |
|
|
list-style: none; |
|
|
color: #fff; |
|
|
padding: 0px; |
|
|
width: 407px; |
|
|
height: 50px; |
|
|
background-image: linear-gradient(270deg, rgba(16,151,255,0.10) 0%, rgba(0,55,236,0.87) 98%); |
|
|
|
|
|
} |
|
|
.boxLeftMailCon ul{ |
|
|
animation: scroll-list 10s linear infinite; |
|
|
} |
|
|
@keyframes scroll-list { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-300%); |
|
|
} |
|
|
} |
|
|
.dutyUl{ |
|
|
list-style: none; |
|
|
font-size: 12px; |
|
|
color: #fff; |
|
|
padding: 0px; |
|
|
} |
|
|
|
|
|
.mailULspan{ |
|
|
float: right; |
|
|
width: 44px; |
|
|
height: 14px; |
|
|
font-family: SourceHanSansCN-Bold; |
|
|
font-weight: 700; |
|
|
} |
|
|
.mailUl li{ |
|
|
padding-bottom: 1%; |
|
|
background-size: 100% 100%; |
|
|
background-repeat: no-repeat; |
|
|
margin-top: 1%; |
|
|
padding-left: 2%; |
|
|
padding-right: 2%; |
|
|
cursor: pointer; |
|
|
background-image: linear-gradient(270deg, rgba(16,151,255,0.10) 0%, rgba(0,55,236,0.87) 98%); |
|
|
} |
|
|
.mailUl li p{ |
|
|
padding-top: 1%; |
|
|
|
|
|
} |
|
|
.dutyUl li{ |
|
|
padding-top: 1%; |
|
|
padding-bottom: 1%; |
|
|
background-size: 100% 100%; |
|
|
background-repeat: no-repeat; |
|
|
background-color: #050e39; |
|
|
margin-top: 1%; |
|
|
padding-left: 2%; |
|
|
padding-right: 2%; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
.dutyUl li p{ |
|
|
padding-top: 1%; |
|
|
padding-bottom: 1%; |
|
|
} |
|
|
|
|
|
.dutyDept{ |
|
|
font-family: SourceHanSansCN-Normal; |
|
|
font-size: 14px; |
|
|
color: #597AE9; |
|
|
text-align: center; |
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
.dutyULspan{ |
|
|
float: right; |
|
|
padding-right: 5px; |
|
|
margin: 0 10px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.ratesbox{height: calc(100% - 2rem);} |
|
|
.row>li{ float: left; height: 100%;} |
|
|
.col-6{width: 50%;} |
|
|
.col-3{width: 25%;} |
|
|
.col-4{width: 33.33333%;} |
|
|
.h100{height: 100%;} |
|
|
.ratebar{position: relative; display: flex;width: 100% } |
|
|
|
|
|
.ratebar span{ background: linear-gradient(to right,#14b6ff,#9cefff); display: inline-block; height: 1.5rem; } |
|
|
.ratebar i{ line-height: 2rem; font-style: normal; padding-left: 1rem; color: #49bcf7; font-size: 1.6rem; } |
|
|
.ratenav{ |
|
|
/* width:calc(100% - 5rem)*/ |
|
|
width: 250px; |
|
|
} |
|
|
.ratenav p{color: #fff; font-size: 1.5rem; padding-bottom: 0.5rem; white-space: nowrap; |
|
|
overflow: hidden; text-overflow: ellipsis;} |
|
|
.rates li>span{width: 80px; height: 3rem;font-family: PingFang-SC-Regular; |
|
|
font-size: 16px; |
|
|
color: #FFFFFF; |
|
|
text-align: right; |
|
|
font-weight: 400; line-height: 3rem; padding-right: 5px; border-radius: .05rem; margin-right: .1rem; } |
|
|
.ratesum{ |
|
|
font-size: 1.6rem; |
|
|
} |
|
|
.ratesum p{ |
|
|
float: left; |
|
|
font-family: Roboto-Regular; |
|
|
font-size: 16px; |
|
|
color: #FFFFFF; |
|
|
font-weight: 400; |
|
|
} |
|
|
.ratesum i{ |
|
|
font-family: PingFang-SC-Medium; |
|
|
font-size: 10px; |
|
|
color: #09C700; |
|
|
text-align: right; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.rates li{display: flex; align-items: center; height:12%;padding-bottom: 10px;} |
|
|
.ratespan{ |
|
|
font-size: 10px; |
|
|
margin-left: 10px; |
|
|
font-weight: 500; |
|
|
font-family: PingFang-SC-Medium; |
|
|
} |
|
|
|
|
|
ul.h100 li:nth-of-type(-n+3) .ratebar span { |
|
|
background-image: linear-gradient(270deg, #63E700 0%, #19674C 100%); |
|
|
} |
|
|
ul.h100 li:nth-of-type(n+4):nth-of-type(-n+6) .ratebar span { |
|
|
background-image: linear-gradient(270deg, #FFB90E 0%, #71501D 99%); |
|
|
} |
|
|
ul.h100 li:nth-of-type(n+6) .ratebar span { |
|
|
background-image: linear-gradient(270deg, #FB002D 0%, #822232 97%); |
|
|
} |
|
|
|
|
|
ul.h100 li:nth-of-type(-n+4) .pmbar span { |
|
|
background-image: linear-gradient(270deg, #FB002D 0%, #822232 97%); |
|
|
} |
|
|
ul.h100 li:nth-of-type(n+4):nth-of-type(-n+6) .pmbar span { |
|
|
background-image: linear-gradient(270deg, #FFB90E 0%, #71501D 99%); |
|
|
} |
|
|
|
|
|
ul.h100 li:nth-of-type(n+6) .pmbar span { |
|
|
background-image: linear-gradient(270deg, #63E700 0%, #19674C 100%); |
|
|
} |
|
|
|
|
|
.trendOptions{ |
|
|
float: right; |
|
|
z-index: 9999; |
|
|
width: 100px; |
|
|
} |
|
|
|
|
|
.tooltip{ |
|
|
width: 110px; |
|
|
height: 120px; |
|
|
|
|
|
} |
|
|
.tooltip-title{ |
|
|
color: #fff; |
|
|
font-weight: bold; |
|
|
text-align: center; |
|
|
line-height: 30px; |
|
|
width:110px; |
|
|
height: 30px; |
|
|
background: #031577; |
|
|
|
|
|
} |
|
|
|
|
|
.tooltip-content{ |
|
|
color: #fff; |
|
|
font-weight: bold; |
|
|
width:110px; |
|
|
height: 120px; |
|
|
font-size: 12px; |
|
|
background: linear-gradient(180deg, #010457 0%, #031577 100%); |
|
|
|
|
|
} |
|
|
.tooltip-content ul li{ |
|
|
line-height: 20px; |
|
|
margin-left: 5px; |
|
|
font-family: SourceHanSansCN, SourceHanSansCN; |
|
|
color: #597AE9; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tooltip-ul span{ |
|
|
float: right; |
|
|
width: 50px; |
|
|
text-align: right; |
|
|
margin-right: 5px; |
|
|
color: #fff; |
|
|
} |
