You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
538 lines
29 KiB
538 lines
29 KiB
@charset "UTF-8"; |
|
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } |
|
|
|
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; } |
|
|
|
address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 400; } |
|
|
|
ol, ul, li { list-style: none; } |
|
|
|
a { text-decoration: none; color: #fff; background-color: transparent; -webkit-text-decoration-skip: objects; } |
|
|
|
a:hover { text-decoration: none; color: #93FCFF; } |
|
|
|
a:active, a:focus, a:hover { outline-width: 0; text-decoration: none; outline: none; } |
|
|
|
label { font-weight: 400; } |
|
|
|
fieldset, img { border: 0; } |
|
|
|
html, body { color: #fff; background: #000D12; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; height: 100%; } |
|
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } |
|
|
|
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } |
|
|
|
body, button, input, select, textarea { font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; font-size: 12px; line-height: 1.428571; } |
|
|
|
::-ms-clear, ::-ms-reveal { display: none; } |
|
|
|
button, input, select, textarea { font-size: 100%; } |
|
|
|
button, input[type=button], input[type=reset], input[type=submit] { cursor: pointer; -webkit-appearance: button; } |
|
|
|
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } |
|
|
|
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } |
|
|
|
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } |
|
|
|
b, strong { font-weight: bolder; } |
|
|
|
del { text-decoration: line-through; } |
|
|
|
mark { background: #ff0; color: #000; } |
|
|
|
small { font-size: 80%; } |
|
|
|
audio, video { display: inline-block; } |
|
|
|
img { border-style: none; } |
|
|
|
svg:not(:root) { overflow: hidden; } |
|
|
|
table { border-collapse: collapse; border-spacing: 0; } |
|
|
|
th { text-align: inherit; } |
|
|
|
td { word-break: break-all; word-wrap: break-word; } |
|
|
|
textarea { resize: none; } |
|
|
|
iframe { display: block; } |
|
|
|
/*float*/ |
|
.clearfix { *zoom: 1; } |
|
.clearfix:before, .clearfix:after { content: ""; display: table; } |
|
.clearfix:after { clear: both; overflow: hidden; } |
|
|
|
.clear { clear: both; } |
|
|
|
/*盒模型*/ |
|
*, *:before, *:after { -wekbit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } |
|
|
|
/*被选中的文本背景颜色*/ |
|
::-webkit-selection { color: #fff; background: #93FCFF; } |
|
|
|
::-moz-selection { color: #fff; background: #93FCFF; } |
|
|
|
::selection { color: #fff; background: #93FCFF; } |
|
|
|
/*placeholder颜色*/ |
|
::-webkit-input-placeholder { color: #999; font-weight: 400; } |
|
|
|
:-moz-placeholder { color: #999; font-weight: 400; } |
|
|
|
::-moz-placeholder { color: #999; font-weight: 400; } |
|
|
|
:-ms-input-placeholder { color: #999 !important; font-weight: 400 !important; } |
|
|
|
[class*=" icon-"], [class^=icon-] { font-family: icom !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
|
|
|
/*删格系统*/ |
|
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .col-17, .col-18, .col-19, .col-20, .col-21, .col-22, .col-23, .col-24 { flex: 1; } |
|
|
|
.container { padding-right: 10px; padding-left: 10px; margin-right: auto; margin-left: auto; } |
|
.container .container-pt { padding-top: 20px; } |
|
.container .container-padding { padding: 20px; } |
|
|
|
.row { display: flex; } |
|
|
|
.col-1 { width: 4.1666666667%; } |
|
|
|
.col-2 { width: 8.3333333333%; } |
|
|
|
.col-3 { width: 12.5%; } |
|
|
|
.col-4 { width: 16.6666666667%; } |
|
|
|
.col-5 { width: 20.8333333333%; } |
|
|
|
.col-6 { width: 25%; } |
|
|
|
.col-7 { width: 29.1666666667%; } |
|
|
|
.col-8 { width: 33.3333333333%; } |
|
|
|
.col-9 { width: 37.5%; } |
|
|
|
.col-10 { width: 41.6666666667%; } |
|
|
|
.col-11 { width: 45.8333333333%; } |
|
|
|
.col-12 { width: 50%; } |
|
|
|
.col-13 { width: 54.1666666667%; } |
|
|
|
.col-14 { width: 58.3333333333%; } |
|
|
|
.col-15 { width: 62.5%; } |
|
|
|
.col-16 { width: 66.6666666667%; } |
|
|
|
.col-17 { width: 70.8333333333%; } |
|
|
|
.col-18 { width: 75%; } |
|
|
|
.col-19 { width: 79.1666666667%; } |
|
|
|
.col-20 { width: 83.3333333333%; } |
|
|
|
.col-21 { width: 87.5%; } |
|
|
|
.col-22 { width: 91.6666666667%; } |
|
|
|
.col-23 { width: 95.8333333333%; } |
|
|
|
.col-24 { width: 100%; } |
|
|
|
.row-gap { margin-left: 10px; margin-right: 10px; } |
|
.row-gap .col-1 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-2 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-3 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-4 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-5 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-6 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-7 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-8 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-9 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-10 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-11 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-12 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-13 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-14 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-15 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-16 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-17 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-18 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-19 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-20 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-21 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-22 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-23 { padding-left: 0; padding-right: 0; } |
|
.row-gap .col-24 { padding-left: 0; padding-right: 0; } |
|
|
|
.header { position: absolute; top: 0; left: 0; width: 100%; height: 0px; background: url(../images/header-bg.png) center center no-repeat; background-size: auto 100%; } |
|
.header:before { content: ""; position: absolute; top: 116px; left: 50%; margin-left: -100px; width: 200px; height: 8px; background-color: #93FCFF; } |
|
|
|
.logo { margin-top: 30px; height: 50px; line-height: 46px; text-align: center; font-size: 40px; letter-spacing: 2.2px; text-indent: 2.2px; font-weight: 500; user-select: none; position: relative; z-index: 10; } |
|
.logo img { width: 118px; height: 50px; vertical-align: top; margin-right: 20px; } |
|
|
|
.notice-box { width: 460px; margin: 8px auto; line-height: 22px; height: 22px; display: flex; position: relative; overflow: hidden; } |
|
.notice-box .notice-icon { width: 28px; } |
|
.notice-box .notice-icon svg { vertical-align: middle; } |
|
.notice-box .notice-txt { position: relative; width: 432px; overflow: hidden; white-space: nowrap; font-size: 16px; } |
|
.notice-box .notice-txt .str_move { white-space: nowrap; position: absolute; left: 0px; } |
|
|
|
.str_move { white-space: nowrap; position: absolute; top: 0; left: 0; cursor: move; } |
|
|
|
.str_move_clone { display: inline-block; vertical-align: top; position: absolute; left: 100%; top: 0; } |
|
|
|
.str_vertical .str_move_clone { left: 0; top: 100%; } |
|
|
|
.str_down .str_move_clone { left: 0; bottom: 100%; } |
|
|
|
.str_vertical .str_move, .str_down .str_move { white-space: normal; width: 100%; } |
|
|
|
.str_static .str_move, .no_drag .str_move, .noStop .str_move { cursor: inherit; } |
|
|
|
.str_wrap img { max-width: none !important; } |
|
|
|
/*网站通用样式及组件*/ |
|
.mt { margin-top: 10px; } |
|
|
|
.mt-lg { margin-top: 20px !important; } |
|
|
|
.mt-sm { margin-top: 5px; } |
|
|
|
.mt-lg { margin-top: 20px; } |
|
|
|
.mt-mlg { margin-top: 30px; } |
|
|
|
.mt-mlger { margin-top: 50px; } |
|
|
|
.show { display: block; } |
|
|
|
.hide { display: none; } |
|
|
|
.vs-show { visibility: visible; } |
|
|
|
.vs-hide { visibility: hidden; } |
|
|
|
.pull-left { float: left; } |
|
|
|
.pull-right { float: right; } |
|
|
|
.text-center { text-align: center; } |
|
|
|
.text-left { text-align: left; } |
|
|
|
.text-right { text-align: right; } |
|
|
|
.text-justify { text-align: justify; } |
|
|
|
.text-default { color: #fff; } |
|
|
|
.text-primary { color: #93FCFF; } |
|
|
|
.text-light, .text-tips { color: #666; } |
|
|
|
.text-lighter { color: #999; } |
|
|
|
.text-lightest { color: #d3d3d3; } |
|
|
|
.text-success { color: #5eb95e; } |
|
|
|
.text-error { color: #f00; } |
|
|
|
.text-warning { color: #f37b1d; } |
|
|
|
.text-danger { color: #B9302D; } |
|
|
|
.text-disabled { color: #eaeded; } |
|
|
|
.text-price { color: #f10214; } |
|
|
|
.text-white { color: #fff; } |
|
|
|
.text-lg { font-size: 16px; } |
|
|
|
.text-mlg { font-size: 18px; } |
|
|
|
.text-blg { font-size: 20px; } |
|
|
|
.text-sm { font-size: 12px; } |
|
|
|
.text-md { font-size: 12px; } |
|
|
|
.text-bold, .text-700 { font-weight: 700; } |
|
|
|
.text-normal, .text-400 { font-weight: 400; } |
|
|
|
.text-underline { text-decoration: underline; } |
|
.text-underline:hover { text-decoration: underline; } |
|
|
|
.text-indent { text-indent: 2em; } |
|
|
|
.text-required { color: #f00; font-weight: 400; } |
|
|
|
.small-size { transform: scale(0.8); margin: 0px 0 0 -1px; display: inline-block; vertical-align: sub; } |
|
|
|
.text-linear { background: linear-gradient(to bottom, #fff, #C0C2C2); -webkit-background-clip: text; color: transparent; } |
|
|
|
.panel, .box-wrap { max-height: 270px; max-width: 590px; background-image: url(../images/panel-bg.png); background-size: 100% 100%; display: flex; flex-direction: column; width: 100%; } |
|
.panel.panel-lg, .box-wrap.panel-lg { width: 120%; } |
|
.panel.panel02, .box-wrap.panel02 { background-image: url(../images/panel-bg02.png); } |
|
.panel.panel03, .box-wrap.panel03 { background-image: url(../images/panel-bg03.png); max-height: 226px; } |
|
.panel.panel04, .box-wrap.panel04 { background-image: url(../images/panel-bg04.png); } |
|
.panel.panel05, .box-wrap.panel05 { background-image: url(../images/panel-bg05.png); max-width: 100%; background-size: 100% 100%; } |
|
.panel.panel06, .box-wrap.panel06 { background-image: url(../images/panel-bg06.png); max-width: none; max-height: 339px; background-size: 100% 100%; } |
|
.panel .panel-hd, .box-wrap .panel-hd { padding: 5px 30px 15px; position: relative; } |
|
.panel .panel-hd .panel-tit, .box-wrap .panel-hd .panel-tit { padding-top: 15px; font-size: 18px; line-height: 26px; } |
|
.panel .panel-hd .panel-more, .box-wrap .panel-hd .panel-more { position: absolute; right: 30px; top: 20px; z-index: 100; transition: .3s opactiy; } |
|
.panel .panel-hd .panel-more:hover, .box-wrap .panel-hd .panel-more:hover { opacity: 0.9; } |
|
.panel .panel-hd + .panel-bd, .box-wrap .panel-hd + .panel-bd { margin-top: -20px; } |
|
.panel .panel-bd, .box-wrap .panel-bd { flex: 1; padding: 20px 30px 20px; display: flex; justify-content: center; align-items: center; } |
|
.panel .panel-bd > div, .box-wrap .panel-bd > div { flex: 1; } |
|
|
|
.box-wrap { margin-left: auto; margin-right: auto; min-width: 300px; max-width: 470px; border: 1px solid #1F6F9B; position: relative; background-image: none; } |
|
|
|
.box-wrap:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; background: linear-gradient(#93FCFF, #93FCFF) left top, linear-gradient(#93FCFF, #93FCFF) left top, linear-gradient(#93FCFF, #93FCFF) right top, linear-gradient(#93FCFF, #93FCFF) right top, linear-gradient(#93FCFF, #93FCFF) left bottom, linear-gradient(#93FCFF, #93FCFF) left bottom, linear-gradient(#93FCFF, #93FCFF) right bottom, linear-gradient(#93FCFF, #93FCFF) right bottom; background-repeat: no-repeat; background-size: 18px 2px, 2px 18px; } |
|
|
|
.chart-item { height: 100%; } |
|
|
|
.table { width: 100%; text-align: center; color: rgba(255, 255, 255, 0.8); } |
|
.table th { background-color: rgba(18, 148, 184, 0.9); line-height: 22px; padding: 7px 5px; font-size: 16px; } |
|
.table td { background-color: rgba(20, 72, 93, 0.7); line-height: 16px; padding: 10px 5px; font-size: 12px; border-top: 1px solid rgba(0, 0, 0, 0.6); } |
|
.table tbody tr { transition: .3s color; } |
|
.table tbody tr:hover { color: #93FCFF; } |
|
|
|
.progress { height: 36px; line-height: 36px; padding: 0 3px; } |
|
.progress .progress-bar { position: relative; margin-top: 2px; margin-bottom: 2px; height: 30px; background-color: transparent; } |
|
.progress .progress-bar-inner { width: 0; max-width: 100%; height: 30px; background-color: #93FCFF; animation: animate-positive 2s; position: relative; } |
|
.progress .progress-bar-inner:before { content: ""; width: 100%; position: absolute; left: 0; top: 0; bottom: 0; background-image: url(../images/barbg.png); background-size: auto 30px; } |
|
.progress .progress-bar-inner.progress-bar-success { background: #5eb95e; } |
|
.progress .progress-bar-inner.progress-bar-error { background: #f00; } |
|
.progress .progress-bar-inner.progress-bar-gradient { background: linear-gradient(to right, #019CFE, #FEFC01); } |
|
|
|
.progress-list .progress-item { height: 44px; line-height: 36px; padding-top: 4px; display: flex; } |
|
.progress-list .progress-name { width: 120px; padding-right: 10px; overflow: hidden; white-space: nowrap; font-size: 16px; color: rgba(255, 255, 255, 0.5); } |
|
.progress-list .progress-num { position: absolute; width: 0px; overflow: hidden; left: 5px; top: 0; width: 42px; white-space: nowrap; z-index: 100; font-weight: 500; font-size: 18px; line-height: 34px; } |
|
.progress-list .progress { border: 1px solid #fff; border-radius: 2px; position: relative; flex: 1; } |
|
.progress-list .progress:before { content: ""; width: 4px; height: 34px; border-radius: 100px; border: 1px solid #fff; position: absolute; left: -8px; top: 0; } |
|
|
|
@font-face { font-family: 'digiface'; src: url("../font/digiface.ttf") format("truetype"); } |
|
.page { position: relative; min-width: 1000px; background: url(../images/bg.png) center center repeat; background-size: 158px 159px; min-height: 100%; } |
|
|
|
.page-side { position: absolute; top: 100px; bottom: 10px; padding: 30px 0px; z-index: 99; display: flex; flex-direction: column; justify-content: space-between; width: 30%; max-width: 678px; } |
|
|
|
.page-left { padding-left: 30px; } |
|
.page-left .num-item { flex: 1; height: auto; } |
|
.page-left .panel { flex: 2; } |
|
.page-left .common-list { flex: 2; margin-bottom: 10px; } |
|
|
|
.page-right { padding-right: 30px; left: auto; right: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } |
|
.page-right div { flex: 1; margin-bottom: 10px; } |
|
.page-right div:last-child { margin-bottom: 0; } |
|
.page-right > .chart-item { margin-bottom: 0px; width: 100%; max-height: 270px; min-height: 190px; } |
|
|
|
.page-center { left: 32%; right: 32%; position: absolute; top: 106px; bottom: 20px; z-index: 100; } |
|
|
|
.page01 .page-center { top: 230px; } |
|
.page01 .page-left { top: 262px; } |
|
|
|
.page-bottom { padding: 0 150px 0 350px; } |
|
|
|
.page-top { position: relative; z-index: 100; left: 0; padding: 160px 30% 0 30px; } |
|
.page-top .num-list { display: flex; padding-top: 0; } |
|
.page-top .num-list .num-item { flex: 1; } |
|
.page-top .num-item { margin-right: 20px; margin-bottom: 0; } |
|
|
|
.page-bd { padding: 40px 30px 10px; display: flex; } |
|
.page-bd .page-map { flex: 1; margin: 0 90px; height: 677px; background-image: url(../images/panel-bg07.png); background-size: 100% 100%; display: flex; align-items: center; padding-right: 60px; } |
|
.page-bd .page-map .chart-item { width: 62%; } |
|
.page-bd .page-map .table-box { overflow: hidden; padding: 20px 0; width: 38%; max-height: 90%; display: flex; flex-direction: column; } |
|
.page-bd .page-map .table-box .table-body { flex: 1; overflow: auto; } |
|
.page-bd .page-map .table-box .table-body::-webkit-scrollbar { display: none; } |
|
|
|
.common-list { padding: 10px 0 0 44px; margin-left: -44px; background-image: url(../images/common-bg.png); background-repeat: no-repeat; background-size: 44px 280px; display: flex; flex-direction: column; justify-content: space-between; max-height: 326px; } |
|
.common-list .list-item { display: block; line-height: 62px; height: 60px; overflow: hidden; width: 200px; background-image: url(../images/common01.png); background-size: cover; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .3s all; } |
|
.common-list .list-item.is-active, .common-list .list-item:hover { background-image: url(../images/common-active.png); } |
|
.common-list .list-item .list-tit { font-size: 18px; } |
|
|
|
.num-list { padding: 30px 0 0 0px; } |
|
|
|
.num-item { display: block; padding: 12px 22px; height: auto; overflow: hidden; max-width: 346px; background-image: url(../images/numbg.png); background-size: contain; background-repeat: no-repeat; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .3s color; margin-bottom: 10px; } |
|
.num-item .num-tit { font-size: 20px; line-height: 30px; } |
|
.num-item .num-text { color: #93FCFF; font-weight: 500; font-family: 'digiface'; font-size: 50px; line-height: 62px; letter-spacing: 0.1em; } |
|
.num-item .num-text .unit { font-size: 34px; margin-left: 10px; } |
|
|
|
.main { display: flex; flex-direction: column; padding: 0 30px 10px; height: 100%; } |
|
|
|
.main-top { flex: 2; display: flex; padding: 30px 0 0; max-height: 699px; } |
|
|
|
.main-left { flex: 0.7; display: flex; flex-direction: column; justify-content: space-between; } |
|
.main-left > div { flex: 1; } |
|
|
|
.main-right { flex: 0.8; display: flex; flex-direction: column; justify-content: space-between; } |
|
.main-right > div { flex: 1; } |
|
|
|
.main-bottom { flex: 1; overflow: hidden; margin-top: 10px; display: flex; align-items: center; } |
|
.main-bottom > div { height: 100%; max-height: none; } |
|
|
|
.main-center { padding: 0 50px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } |
|
.main-center .number-area { flex: 0.5; display: flex; justify-content: space-between; } |
|
.main-center .number-area .number-box { flex: 1; padding-right: 10px; } |
|
.main-center .number-area .number-item { flex: 0.5; } |
|
.main-center > div { flex: 1; } |
|
|
|
.number-area { display: flex; align-items: flex-end; height: 150px; } |
|
.number-area .number-tit { font-size: 22px; line-height: 30px; margin-bottom: 22px; } |
|
.number-area .number-item { margin-left: 5px; } |
|
.number-area .number-item .item-tit { font-size: 18px; line-height: 24px; margin-bottom: 10px; color: rgba(255, 255, 255, 0.8); } |
|
.number-area .number-item .item-txt { font-size: 22px; line-height: 30px; color: #93FCFF; } |
|
|
|
.count-number { display: flex; } |
|
.count-number > li { flex: 1; min-width: 24px; max-width: 50px; line-height: 50px; padding: 10px 0; background: rgba(173, 219, 252, 0.3); background-size: 100% 100%; margin-right: 10px; text-align: center; font-size: 48px; color: #fff; font-style: normal; user-select: none; overflow: hidden; } |
|
.count-number > li:last-child { margin-right: 0; } |
|
.count-number span { display: block; } |
|
.count-number .is-active span { animation: numMove .3s forwards; } |
|
|
|
@keyframes numMove { 100% { transform: translateY(-100%); } } |
|
.total-box { display: flex; flex-direction: column; justify-content: space-between; } |
|
.total-box .total-item { display: flex; padding: 3px 0; text-align: center;color: #fff; } |
|
.total-box .total-item > div { height: 36px; line-height: 36px; font-size: 16px; flex: 1; background-color: rgba(88, 206, 208, 0.16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; } |
|
.total-box .total-item .total-name { margin-right: 10px; } |
|
|
|
.total-list { margin: 0 0 30px; display: flex; justify-content: space-between; } |
|
.total-list .total-tit { margin-bottom: 10px; color: rgba(255, 255, 255, 0.8); } |
|
.total-list .total-item { margin: 0 5px; } |
|
.total-list .total-num { display: flex; padding: 5px 0 5px 10px; position: relative; background: linear-gradient(to bottom, rgba(11, 68, 138, 0.3), rgba(6, 10, 34, 0.38), rgba(11, 68, 138, 0.3)); } |
|
.total-list .total-num:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; background: linear-gradient(#164C6C, #164C6C) left top, linear-gradient(#164C6C, #164C6C) left top, linear-gradient(#164C6C, #164C6C) right top, linear-gradient(#164C6C, #164C6C) right top, linear-gradient(#164C6C, #164C6C) left bottom, linear-gradient(#164C6C, #164C6C) left bottom, linear-gradient(#164C6C, #164C6C) right bottom, linear-gradient(#164C6C, #164C6C) right bottom; background-repeat: no-repeat; background-size: 50% 1px, 1px 15px, 50% 1px, 1px 15px; } |
|
.total-list .total-num li { margin-right: 10px; height: 32px; line-height: 32px; } |
|
.total-list .total-num li b { vertical-align: middle; display: inline-block; font-weight: 400; width: 3px; height: 3px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); } |
|
.total-list .total-num .num-item { width: 20px; background: linear-gradient(to bottom, rgba(214, 239, 254, 0.3), rgba(173, 219, 252, 0.3)); background-size: 100% 100%; margin-right: 10px; text-align: center; font-size: 18px; color: #fff; font-style: normal; user-select: none; overflow: hidden; } |
|
.total-list .total-num .num { display: block; width: 20px; height: 32px; line-height: 32px; } |
|
.total-list .total-num .is-active span { animation: numMove .3s forwards; } |
|
|
|
.login-main { display: flex; flex-direction: column; height: 100%; align-items: center; padding-top: 3%; position: relative; background: url(../images/loginbg.jpg) no-repeat center bottom; background-size: 100% auto; background-repeat: no-repeat; } |
|
.login-main .login-header { width: 100%; background: url(../images/login-header.png) no-repeat center center; height: 320px; background-size: auto 320px; } |
|
.login-main .login-header .logo { margin-top: 66px; font-size: 58px; height: 80px; line-height: 80px; } |
|
.login-main .login-header .logo img { width: 188px; height: 80px; } |
|
.login-main .login-error { margin-top: -50px; margin-bottom: 50px; display: none; } |
|
|
|
.login-item { width: 753px; height: 104px; background-image: url(../images/login-inputbg.png); background-size: auto 100%; background-position: center center; padding: 20px 0 0 236px; margin-bottom: 40px; font-size: 16px; transition: .3s background; } |
|
.login-item .login-icon { display: inline-block; vertical-align: top; width: 60px; line-height: 54px; height: 54px; text-align: center; } |
|
.login-item .login-icon svg { vertical-align: top; margin-top: 15px; } |
|
.login-item:hover, .login-item.is-active { background-image: url(../images/login-inputbg01.png); } |
|
.login-item .login-input { vertical-align: middle; background-color: transparent; border-color: transparent; outline: none; color: #fff; line-height: 54px; height: 54px; width: 350px; } |
|
.login-item.login-btn { background-image: url(../images/loginbtn-bg.png); width: 100%; text-align: center; letter-spacing: 10px; text-indent: 10px; font-size: 20px; padding: 0; font-weight: 500; } |
|
.login-item.login-btn .login-txt { width: 700px; margin: 0 auto; display: block; padding-top: 32px; height: 100%; transition: .3s color; } |
|
|
|
@media all and (max-width: 1100px) { .header { height: 0px; } |
|
.header:before { top: 86px; } |
|
.page-top { padding-top: 98px; padding-right: 35%; } |
|
.page-top .num-item { margin-right: 10px; padding-top: 20px; } |
|
.common-list { background-image: none; } |
|
.logo { margin-top: 10px; font-size: 30px; } |
|
.notice-box { margin-top: 0; } |
|
.page-side { padding-top: 0; padding-bottom: 10px; } |
|
.page-side .num-list { padding-top: 0; } |
|
.page-left { padding-left: 10px; } |
|
.page-right { padding-right: 10px; } |
|
.main { padding-left: 10px; padding-right: 10px; } |
|
.main .panel .panel-bd, .main .box-wrap .panel-bd { padding: 10px; } |
|
.main .main-center { padding-left: 10px; padding-right: 10px; } |
|
.main .main-top { margin-top: 10px; } |
|
.main .count-number li { font-size: 30px; padding: 0; } |
|
.main .number-area .number-tit { font-size: 18px; } |
|
.box-wrap .panel-bd { padding-top: 0; } |
|
.box-wrap .panel-hd { padding-bottom: 0; padding-top: 0; } |
|
.box-wrap .panel-hd .panel-tit { padding-top: 10px; } |
|
.progress-list .progress-item { height: 36px; line-height: 28px; } |
|
.progress-list .progress { line-height: 28px; height: 28px; } |
|
.progress-list .progress:before { height: 28px; } |
|
.progress-list .progress-num { line-height: 26px; } |
|
.progress-list .progress-bar { height: 22px; } |
|
.progress-list .progress-bar .progress-bar-inner { height: 22px; } } |
|
@media all and (max-width: 1440px) { .page-top { padding-left: 10px; } |
|
.page-top .num-item { background-size: 100% 100%; padding-bottom: 0; display: flex; flex-direction: column; justify-content: baseline; } |
|
.page-top .num-item .num-text { font-size: 32px; line-height: 46px; } |
|
.page-top .num-item .num-text .unit { font-size: 26px; } } |
|
@media all and (min-width: 1630px) { .main-bottom { margin-top: 30px; } } |
|
@media all and (max-width: 1630px) { .panel .panel-bd, .panel .panel-hd, .box-wrap .panel-bd, .box-wrap .panel-hd { padding-left: 10px; padding-right: 10px; } } |
|
@media all and (max-height: 620px) { .page-top { padding-top: 105px; } } |
|
@media all and (min-height: 768px) { .main-bottom { flex: 1.2; } } |
|
@media all and (min-height: 820px) { .box-wrap.mt { margin-top: 30px; } |
|
.main-bottom { margin-top: 30px; } } |
|
@media all and (max-height: 768px) { .page01 .page-left { top: 190px; } |
|
.num-item .num-text { font-size: 32px; } |
|
.num-item .num-text .unit { font-size: 26px; } |
|
.logo { font-size: 30px; } |
|
.notice-box { margin-top: 0; } |
|
.panel .panel-bd { padding: 10px; } } |
|
@keyframes fadeIn { from { opacity: 0; } |
|
to { opacity: 1; } } |
|
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } |
|
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } |
|
@keyframes fadeOut { from { opacity: 1; } |
|
to { opacity: 0; } } |
|
@keyframes fadeOutDown { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } |
|
@keyframes fadeOutDownBig { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } |
|
@keyframes fadeOutUp { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } |
|
@keyframes fadeOutUpBig { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } |
|
@keyframes fadeOutLeft { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } |
|
@keyframes fadeOutLeftBig { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } |
|
@keyframes fadeOutRight { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } |
|
@keyframes fadeOutRightBig { from { opacity: 1; } |
|
to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } |
|
@keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } |
|
50% { opacity: 1; } } |
|
@keyframes zoomOut { from { opacity: 1; } |
|
50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } |
|
to { opacity: 0; } } |
|
@keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } |
|
to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } |
|
@keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } |
|
to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } |
|
@keyframes up-small { 0% { transform: translate3d(0, 30px, 0); opacity: 0.3; } |
|
100% { transform: translate3d(0, 0, 0); opacity: 1; } } |
|
@keyframes animate-positive { 0% { width: 0%; } } |
|
@keyframes rotate { 100% { transform: rotate(360deg); } } |
|
@keyframes rotate-everse { 100% { transform: rotate(-360deg); } } |
|
@keyframes scale-spring { 0% { opacity: 0.5; -ms-transform: scale(0.5); transform: scale(0.5); } |
|
80% { opacity: 0.8; -ms-transform: scale(1.1); transform: scale(1.1); } |
|
100% { opacity: 1; -ms-transform: scale(1); transform: scale(1); } } |
|
@keyframes light-move { 0% { transform: translate(0); } } |
|
/* |
|
z-index: |
|
|
|
*/ |
|
|
|
/*# sourceMappingURL=style.css.map */ |
|
@media screen and (min-width:1200px) and (max-width:1300px){ |
|
#chartMap{ |
|
padding-left: 25px; |
|
} |
|
} |