header { position: relative; height: 1.113rem; background: linear-gradient(#0a0634 0, #204a9e 100%) } header h1 { font-size: .575rem; color: #fff; text-align: center; line-height: 1.113rem; font-weight: 400 } header .showTime { position: absolute; top: 0; right: .375rem; line-height: .9375rem; font-size: .25rem; color: rgba(255, 255, 255, .7) } .mainbox { min-width: 1024px; max-width: 1920px; padding: .287rem .287rem 0; display: flex; height: 100%; min-height: 600px; } .mainbox .column { flex: 3; height: 100%; } .mainbox .column:nth-child(2) { flex: 6; margin: 0 .575rem 0; overflow: hidden } .panel { position: relative; /* // background: rgba(255, 255, 255, .01) url(../images/line\(1\) .png); background: rgba(255, 255, 255, .01) url(../images/line\(1\) .png);*/ background-repeat: no-repeat; padding: 0 .1875rem .5rem; margin-bottom: .287rem; background-size: 100% 100% } .no h2, .panel h2 { height: .7rem; line-height: .7rem; text-align: center; font-size: .275rem; background-image: -webkit-linear-gradient(bottom, #00adce, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .panel h2 a { margin: 0 .1875rem; color: #fff; text-decoration: underline } .panel .chart { /* height: 90%; */ display: flex; justify-content: center; align-items: center } .no { height: calc(40% - 0.574rem); /* height: 4.05rem; */ overflow: hidden; background-image: url(../images/no-bg.png) } table { width: 10.262rem; margin: 0 auto; color: #fff; font-weight: 400; font-size: .2rem; /* line-height: .5rem; */ text-align: center } thead th { font-size: 0.2125rem; line-height: 0.5rem; font-weight: 400 } table tr th { background: rgba(3, 64, 128, .4); /* padding: .0625rem; */ } table tr td { padding: .0625rem; line-height: 1.5 } table tr:first-child th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px } table tr:first-child th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px } .map { position: relative; /* height: 7.55rem; */ height: 60%; margin-bottom: .287rem; background-size: 90% 90%; background-position: bottom center; /*background-image: url(../images/store.png);*/ background-repeat: no-repeat; opacity: .5 } .map .chart { position: absolute; top: 0; left: 0; z-index: 5; height: 10.125rem; width: 100% } /* .map .map1, .map .map2, .map .map3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6.475rem; height: 6.475rem; background: url(../images/map.png) no-repeat; background-size: 100% 100%; opacity: .3 } .map .map2 { width: 8.0375rem; height: 8.0375rem; background-image: url(../images/lbx.png); opacity: .6; animation: rotate 15s linear infinite; z-index: 2 } .map .map3 { width: 7.075rem; height: 7.075rem; background-image: url(../images/jt.png); animation: rotate1 10s linear infinite } */ @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0) } to { transform: translate(-50%, -50%) rotate(360deg) } } @keyframes rotate1 { from { transform: translate(-50%, -50%) rotate(0) } to { transform: translate(-50%, -50%) rotate(-360deg) } } .panel.pie-bar { /* height: 7.55rem; */ height: 60%; background-image: url(../images/pie-bar-bg.png) } .panel.line { /* height: 4.05rem; */ height: calc(40% - 0.574rem); background-image: url(../images/line-bg.png) } .panel.right-top { height: 43%; /* height: 5.425rem; */ background-image: url(../images/right-top-bg.png) } .panel.right-top .chart { /* height: 3.4rem; */ height: calc(100% - 1.85rem) } .pie-bar-container { height: calc(100% - 0.7rem) } .pie-bar-bottom, .pie-bar-top { /* height: 3.438rem; */ height: 50%; width: 100%; position: relative } .pie-bar-top .chart { height: 100% } .pie-bar-bottom .chart { height: 90% } .line .chart { /* height: 90% */ height: calc(100% - 0.7rem) } .title-btn { color: #fff; width: 1.75rem; line-height: .4rem; background: rgba(0, 130, 255, .4); border: 2px solid #0082ff; border-radius: 10px; text-align: center; font-size: .25rem; margin: .1rem auto 0.2rem } .total-squares { margin: .175rem auto; text-align: center } .total-square { display: inline-block; width: .55rem; height: .55rem; line-height: .55rem; border: 1px solid rgba(0, 212, 233, .4); font-size: .375rem; color: #F6FF00 } .yq-total { font-size: .25rem; color: #00D4E9; text-align: center } .huan { /* height: 6.175rem; */ height: calc(57% - 0.574rem); background-image: url(../images/right-bottom-bg.png); /* min-width:380px; */ } .huan table { width: 100%; } .huan>table { margin-top: 0.25rem; } .huan ul { margin: 0 0 0 .7rem } .huan li { width: 35%; text-align: center; border: 1px solid rgba(0, 212, 233, .4); display: inline-block; } .huan li { display: flex; float: left; justify-content: center; align-items: center; margin-right: .35rem; margin-bottom: 0.125rem; margin-top: 0.1rem; height: calc(50% - 0.225rem); } .num-huan { font-size: 0.325rem } .des-huan { max-width: 100%; font-size: 0.225rem; color: #02DDF2; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .no table { width: 100% } .no table th, .no table td { border-bottom: 1px solid rgba(0, 212, 233, .1); display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative } /* .no table th:hover, .no table td:hover { overflow: auto; text-overflow: clip; } */ .no tr td:first-child, .no tr th:first-child { width: 8% } .no tr td:nth-child(2), .no tr th:nth-child(2) { width: 25% } .no tr td:nth-child(3), .no tr th:nth-child(3) { width: 15%; } .no tr td:nth-child(4), .no tr th:nth-child(4) { width: 32%; } .no tr td:nth-child(5), .no tr th:nth-child(5) { width: 1.9rem } .huan tr td:first-child, .huan tr th:first-child { width: 10% } .huan tr td:nth-child(2), .huan tr th:nth-child(2) { width: 30% } .huan tr td:nth-child(3), .huan tr th:nth-child(3) { width: 20% } .huan tr td:nth-child(4), .huan tr th:nth-child(4) { width: 40% } /* 溢出滚动样式 */ /* 兼容火狐浏览器美化无效 */ .scroll { scrollbar-color: transparent transparent; scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent; } .scroll::-webkit-scrollbar { height: 7px !important; width: 7px !important; } /*定义了滚动条滑块的样式*/ .scroll::-webkit-scrollbar-thumb { border-radius: 5px; border-style: dashed; background-color: rgba(40, 190, 252, .6); border-color: #e2242400; border-width: 1.5px; background-clip: padding-box; } /*定义了轨道的样式*/ td::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); border-radius: 5px; background: rgba(0, 0, 0, 0.2); } /* 溢出滚动样式 */ td::-webkit-scrollbar { height: 5px !important; width: 5px !important; } /*定义了滚动条滑块的样式*/ td::-webkit-scrollbar-thumb { border-radius: 5px; border-style: dashed; background-color: rgba(40, 190, 252, .6); border-color: #e2242400; border-width: 1.5px; background-clip: padding-box; } /*定义了轨道的样式*/ td::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); border-radius: 5px; background: rgba(0, 0, 0, 0.2); } /* 火狐 */ @-moz-document url-prefix() { .title { font-size: 200px; } }