* { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } select, input { outline: none; } .text-left { text-align: left; } /* 溢出滚动样式 */ .summary ::-webkit-scrollbar { height: 7px !important; width: 7px !important; } /*定义了滚动条滑块的样式*/ .summary ::-webkit-scrollbar-thumb { border-radius: 5px; border-style: dashed; background-color: #28BEFC; border-color: #e2242400; border-width: 1.5px; background-clip: padding-box; } /*定义了轨道的样式*/ .summary ::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); border-radius: 5px; background: rgba(0, 0, 0, 0); } @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF); } @font-face { font-family: IMPACT; src: url(../font/IMPACT.TTF); } body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; /* 背景图定位 / 背景图尺寸 cover 完全铺满容器 contain 完整显示在容器内 */ background: url(../images/bg.jpg) no-repeat #000; background-size: cover; /* 行高是字体1.15倍 */ line-height: 1.15; position: relative; } body .page-container { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; /* 背景图定位 / 背景图尺寸 cover 完全铺满容器 contain 完整显示在容器内 */ background: url(../images/bg.jpg) no-repeat #000; background-size: cover; /* 行高是字体1.15倍 */ line-height: 1.15; position: relative; } header { position: relative; height: 1rem; background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100%; min-width: 1024px; max-width: 1920px; } header h1 { font-size: 0.35rem; color: #fff; text-align: center; line-height: 1rem; font-weight: normal; } header .filterSec { position: absolute; top: 0; right: 0.375rem; line-height: 0.9375rem; font-size: 0.25rem; color: rgba(255, 255, 255, 0.7); } .mainbox { min-width: 1024px; max-width: 1920px; padding: 0.225rem 0.225rem 0 0.2625rem; } .mainbox .topSection, .mainbox .bottomSection { display: flex; } .mainbox.eleFire .topSection .column { flex: 2; } .mainbox.eleFire .topSection .column:nth-child(2) { flex: 5; margin: 0 0 0 0.275rem; overflow: hidden; } .mainbox .bottomSection .column { flex: 1; } .mainbox .bottomSection .column:nth-child(2) { flex: 1; margin: 0 0 0 0.275rem; overflow: hidden; } .panel { position: relative; height: 5.9rem; border: 1px solid rgba(25, 140, 186, 0.5); background: rgba(8, 26, 50, 0.6); padding: 0 0.5375rem; margin-bottom: 0.2rem; } .panel::before { position: absolute; top: 0; left: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #28BEFC; border-left: 2px solid #28BEFC; } .panel::after { position: absolute; top: 0; right: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #28BEFC; border-right: 2px solid #28BEFC; } .panel .panel-footer { position: absolute; left: 0; bottom: 0; width: 100%; } .panel .panel-footer::before { position: absolute; bottom: 0; left: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #28BEFC; border-left: 2px solid #28BEFC; } .panel .panel-footer::after { position: absolute; bottom: 0; right: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #28BEFC; border-right: 2px solid #28BEFC; } .panel h2 { height: 0.6rem; line-height: 0.6rem; text-align: center; color: #0096FF; font-size: 0.25rem; font-weight: 400; position: relative; } .panel h2 .line { height: 1px; background: rgba(25, 140, 186, 0.5); position: relative; width: 100%; margin: 0 auto; } .panel h2 .line:before { content: ''; top: 0.07rem; left: -0.37rem; width: 0.375rem; height: 1px; border-bottom: 1px solid rgba(25, 140, 186, 0.5); display: inline-block; transform: rotate(335deg); position: absolute; } .panel h2 .line:after { content: ''; top: 0.07rem; right: -0.35rem; width: 0.375rem; height: 1px; border-bottom: 1px solid rgba(25, 140, 186, 0.5); display: inline-block; transform: rotate(25deg); position: absolute; } .panel h2 img { height: 0.125rem; vertical-align: middle; } .panel h2 span { margin: 0 0.1875rem; } .panel .chart { height: calc(100% - 0.6rem); } .tab-line { height: 0.6rem; margin: 0.25rem 0; display: inline-block; } .tab-line a { font-size: 0.175rem; color: #0090F5; padding: 0.125rem 0.45rem; display: block; float: left; border: 1px solid #0096ff; text-decoration: none; } .tab-line a.active { background: #0096FF; color: #fff; } @media screen and (max-width: 1024px) { html { font-size: 42px !important; } } @media screen and (min-width: 1920) { html { font-size: 80px !important; } } .line.panel { text-align: center; } .line.panel .chart { height: 50%; } .hotAnalysis.panel .chart, .data_fluctuation.panel .chart { height: 62%; margin-top: 0.5rem; } /* 搜索区域样式 */ .filterSec { position: absolute; bottom: -0.0625rem; right: 0; font-size: 0.175rem; } .filterSec select, .filterSec input { border: 1px solid #64A7D4; width: 2.1rem; height: 0.35rem; color: #fff; line-height: 0.35rem; background: rgba(0, 0, 0, 0); margin-right: 0.4rem; font-size: 0.175rem; } .filterSec span { display: inline-block; margin-right: 0.125rem; font-size: 0.175rem; } a.button { padding: 0 0.15rem; height: 0.35rem; line-height: 0.35rem; text-align: center; border: 1px solid #64A7D4; color: #fff; display: inline-block; text-decoration: none; background: #034854; cursor: pointer; font-size: 0.175rem; } a.button img { width: 0.25rem; margin-top: -2px; position: relative; vertical-align: middle; } a.button text { vertical-align: middle; display: inline-block; } .mainbox.water .topSection .column:first-child { flex: 1; } .mainbox.water .topSection .column:nth-child(2) { flex: 2; margin: 0 0.275rem; overflow: hidden; } .mainbox.water .topSection .column:last-child { flex: 1; } .water .divergence .chart { margin-top: 0.5rem; height: 60%; } .water .hiddenCheck .chart { margin-top: 0.5rem; height: 60%; } .summary { color: #fff; font-size: 0.175rem; text-align: left; width: 100%; margin-top: 0.1rem; height: 0.825rem; padding: 0.15rem; background-image: url(../images/summary-bg.png); background-size: 100% 100%; background-repeat: no-repeat; display: flex; align-items: top; } .summary div:first-child { width: 0.85rem; } .summary div:last-child { width: calc(100% - 0.85rem); padding-right: 0.2rem; height: 0.57rem; overflow: auto; } .summary p { line-height: 1.38; } .summary div { display: inline-block; } .bar-3d .chart { height: 50%; background: url(../images/3d-bg.png); background-repeat: no-repeat; background-position: 50% 80%; } .bar-3d ul { color: #fff; font-size: 0.2rem; display: flex; margin: 0.5625rem 0; } .bar-3d ul li { flex: 1; text-align: center; } .bar-3d ul li .num { font-size: 0.375rem; margin-bottom: 0.1rem; font-family: IMPACT; } .bar-3d ul li .num.total { color: #FF3E3E; } .bar-3d ul li .num.unsolve { color: #FA742B; } .bar-3d ul li .num.solved { color: #1DD9E5; } .exportBox { position: absolute; left: 0; right: 0; bottom: 1rem; top: 1rem; font-size: 14px; width: 100%; height: 90%; z-index: -1; } .exportBox table, .exportBox table tr th, .exportBox table tr td { border: 1px solid #eee; margin: 0 auto; } .exportBox td, .exportBox th { padding: 3px 0; } .exportBox .exportContainer { z-index: 19000; width: 650px; margin: 0 auto; box-shadow: #888888 0px 0px 4px; display: block; background: #1f2833; color: #fff; height: calc(100% - 1rem); overflow: auto; padding: 15px; } .exportBox h3.title { text-align: center; background: #1f2833; font-size: 16px; } .exportBox section { padding-bottom: 30px; } .exportBox section .table-sub { margin-top: 10px; font-size: 13px; } .exportBox section .innerChart { width: 100%; height: 220px; padding: 10px 0; } .exportBox section .summary2 { display: flex; margin: 0 10px; line-height: 1.5; } .exportBox section .summary2 > div:first-child { width: 60px; } .exportBox section .summary2 > div:last-child { width: calc(100% - 30px); } .exportBox section .big-tit { padding: 10px 0; background: #1f2833; } .exportBox .section1 { background: #1f2833; } .layui-layer-title { background: #081A32 !important; color: #fff !important; border-bottom: 1px solid #1E9FFF !important; } .layui-layer { background: #072442 !important; color: #fff; } .layui-layer-ico { border-radius: 50%; } .layui-layer-btn .layui-layer-btn0 { font-size: 0.3rem; }