123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446 |
- 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;
- }
- }
|