|
|
@@ -0,0 +1,459 @@
|
|
|
+* {
|
|
|
+ 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: 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.2rem;
|
|
|
+ border-radius:6px;
|
|
|
+}
|
jichaobo