body { /*background-color: #010112;*/ -webkit-text-size-adjust: none; /*overflow-x: hidden;*/ background: -webkit-radial-gradient(circle, #020a42, #010112); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, #020a42, #010112); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, #020a42, #010112s); /* Firefox 3.6 - 15 */ background: radial-gradient(circle, #020a42, #010112); } div{ box-sizing: border-box; } .chartWarp{ padding: 0 15px; } .logOut{ color: #48abff; font-size: 16px; width: 150px; height: 33px; line-height: 33px; background-color: #0d1940; text-align: center; cursor: pointer; } .logOut i{ display: inline-block; width: 14px; height: 14px; background: url(../images/logOut.png) no-repeat; margin-right: 10px; } .contentTop_left,.contentTop_middle,.contentTop_right{ box-sizing: border-box; } .header{ margin-bottom: 10px; font-family: "DigifaceWide"; color: #1591F9; } .header ul li { float: left; height: 78px; line-height: 78px; text-align: center; position: relative; } .header ul li>div{ position: absolute; left: 0; right: 0; top: 0; } .header ul li img{ vertical-align: middle; } .head_in{ padding: 0 7%; line-height: initial; } .head_in .head_inConL,.head_in .head_inConR{ width: 37%; height: 38px; display: inline-block; line-height: 38px; /*color: #1591F9;*/ font-size: 16px; /*font-family: "DigifaceWide";*/ vertical-align: middle; } .temperature{ display: inline-block; width: 30%; text-align: left; } .head_in .head_inConL{ background: url(../images/headInL.png) no-repeat; background-size: 100% 100%; text-align: right; } .head_in .head_inConR{ background: url(../images/headInR.png) no-repeat; background-size: 100% 100%; } .head_inConM{ display: inline-block; height: 70px; width: 70px; border: 1px solid #245fd5; border-radius: 50%; vertical-align: middle; background: url(../images/windNum.png) no-repeat center; font-size: 16px; } .head_inConM p{ height: 38px; line-height: 40px; } /*.head_in>div { float: left; width: 25%; color: #48abff; font-size: 14px; } .head_in div p.head_count{ text-align: center; font-family: "DigifaceWide"; font-size: 18px; margin: 15px 0 5px 0; }*/ .headerLeft{ width: 26%; } .headerRight { width: 27%; } .headerLeftIn,.headerRightIn{ height: 100%; width: 107%; background: url(../images/headSide.png) no-repeat center; background-size: 100% 100%; } .headerRightIn { left: -7%!important; transform:rotateY(180deg); -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */ -moz-transform: rotateY(180deg); } .headFourIn img{ transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); } .headerRightInCon{ transform:rotateY(180deg); -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */ -moz-transform: rotateY(180deg); } .headerRightInCon .headerRightInCon_m{ height: 63px; width: 63px; border: 1px solid #163887; background: #091c5c; border-radius: 50%; font-family: "DigifaceWide"; color: #1591F9; line-height: 63px; } .headerRightInCon .headerRightInCon_l,.headerRightInCon .headerRightInCon_r{ width: 37%; height: 42px; background: url(../images/rightInL.png) no-repeat; line-height: 42px; color: #1591F9; font-size: 18px; font-family: "DigifaceWide"; background-size: 100% 100%; padding-left: 3%; } .headerRightInCon .headerRightInCon_r{ background: url(../images/rightInR.png) no-repeat; font-family: "Microsoft YaHei"; font-size: 14px; padding: 0; text-align: center; background-size: 100% 100%; } .headerRightInCon div{ display: inline-block; vertical-align: middle; } .headTwo, .headFour { width: 6%; background: url(../images/headFour0.png) no-repeat center; } .headTwo{ /*position: relative; right: -28px;*/ } .headFour { background: url(../images/headFour0.png) no-repeat center; cursor: pointer; transform:rotateX(180deg); -webkit-transform: rotateX(180deg); /* Safari 和 Chrome */ -moz-transform: rotateX(180deg); /*position: relative; left: -28px;*/ } .headerLeft,.headerRight,.headTwo,.headFour{ background-size: 100% 100%; } .headerTitle { width:35%; /*background: url(../images/headTitle.png) no-repeat center; background-size: 100% 100%;*/ line-height: 67px; cursor: pointer; } .headerTitleIn{ width: 108%; background: url(../images/headTitle.png) no-repeat center; background-size: 100% 100%; left: -4%!important; } .headerTitle img{ max-width: 70%; } @font-face { font-family: DigifaceWide; src: url('../font/DIGIFAW.TTF'); } .head_count { font-size: 22px; font-family: "DigifaceWide"; color: #fff!important; } .world { color: #cfdef1; font-size: 18px; vertical-align: middle; margin: 0 15px 0 10px; font-weight: bold; } /*角边框开始*/ /* 外层右上有左下 2 个角*/ .outter { position: relative; padding: 5px; } .outter:before, .outter:after { content: ""; position: absolute; width: 10px; height: 10px; } .outterBox:before, .outterBox:after{ width: 20px; height: 20px; } .outter:before { right: -1px; top: -1px; border-right: 2px solid #507fdf; border-top: 2px solid #507fdf; } .outter:after { left: -1px; bottom: -1px; border-left: 2px solid #507fdf; border-bottom: 2px solid #507fdf; } /*内层左上和右下 2 个角*/ .inner { position: relative; } .inner::before, .inner::after { position: absolute; content: ''; height: 10px; width: 10px; } .outterBox .inner::before, .outterBox .inner::after{ height: 20px; width: 20px; } .inner::before { left: -7px; top: -6px; border-left: 2px solid #507fdf; border-top: 2px solid #507fdf; } .inner::after { right: -6px; bottom: -6px; border-right: 2px solid #507fdf; border-bottom: 2px solid #507fdf; } .outterBox { border: 1px solid #0f3287; margin-top: 10px; } /*角边框结束*/ .title_tips { width: 150px; height: 33px; line-height: 33px; background-color: #1b43b4; color: #cedbff; font-size: 16px; text-align: center; margin: 0 auto; } .wxTab .title_tips.active{ background: #113589; } .title_outter { width: 160px; } .content { padding: 0 20px; } .contentTop_leftTop{ padding: 0 5px; height: 224px; } .contentTop_leftTop>div { width: 50%; float: left; height: 100%; } .contentTop_leftTop ul li { background-color: #0d1940; color: #2d7bd3; font-size: 16px; height: 35px; line-height: 35px; margin-top: 7px; cursor: pointer; } .contentTop_leftTop ul li .numbers { display: inline-block; width: 35px; height: 100%; text-align: center; color: #fa9d33; margin-right: 10px; } .contentTop_leftTop ul li.active{ background-color: #1a3ba6; color: #fff; border: 2px solid #416cf5; border-right: 0; position: relative; } /*.contentTop_leftTop ul li.active:before{ content: ""; position: absolute; height: 0; width:0; border-top: 19px solid transparent; border-left: 27px solid #406cf5; border-bottom: 21px solid transparent; right: -27px; top: -2px; } .contentTop_leftTop ul li.active:after{ content: ""; position: absolute; height: 0; width:0; border-top: 19px solid transparent; border-left: 27px solid #406cf5; border-bottom: 21px solid transparent; right: -27px; top: -2px; }*/ .contentTop_leftTop ul li.active:before{ display: block; content: ""; width: 28px; height: 28px; border: 2px solid #406cf5; border-left: 0; border-top: 0; position: absolute; right: -15px; background-color: #1b3ba6; top: 3px; transform: rotate(7deg); -ms-transform: rotate(7deg); -moz-transform: rotate(7deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(7deg); } .contentTop_leftTop ul li.active .numbers{ color: #fff; } .htLate{ /*background: url(../images/circle0.png) no-repeat;*/ color: #fff; font-size: 13px; height: 150px; width: 150px; margin: 0 auto; line-height: 150px; text-align: center; display: inline-block; vertical-align: middle; position: relative; } /*.htLate.active{ background: url(../images/circle1.png) no-repeat; }*/ .htLate div{ width: 100%; height: 100%; position: absolute; } .htLate .htLateIn_1{ background: url(../images/htLateIn_01.png) no-repeat center; } .htLate .htLateIn_2{ background: url(../images/htLateIn_02.png) no-repeat center; } .htLate .htLateIn_3{ background: url(../images/htLateIn_03.png) no-repeat center; } .htLate.active .htLateIn_1{ background: url(../images/htLateIn_11.png) no-repeat center; } .htLate.active .htLateIn_2{ background: url(../images/htLateIn_12.png) no-repeat center; } .htLate.active .htLateIn_3{ background: url(../images/htLateIn_13.png) no-repeat center; } .htLate .htLateIn_1,.htLate.active .htLateIn_1{ animation: 20s infinite anticlockwise linear; -webkit-animation: 20s infinite anticlockwise linear; } .htLate .htLateIn_2,.htLate.active .htLateIn_2{ animation: 20s infinite clockwise linear; -webkit-animation: 20s infinite clockwise linear; } .lateTime{ font-family: "DigifaceWide"; font-size: 18px; } .verticalBox{ display: inline-block; width: 0; height: 100%; vertical-align: middle; } .htWorld{ color: #fff; font-size: 16px; } .htWorld.active{ color: #fa203a; } .content_nav{ color: #48abff; font-size: 16px; padding: 8px 10px; } .content_navTitle{ margin-left: 15px; } .btns{ padding: 2px 17px; border-radius: 2px; background-color: #081337; color: #45599d; font-size: 12px; border-color: #081337; } .btn:hover { text-decoration: none; background-color: #081337; color: #45599d; } .btns.active,.btns.active:hover{ color: #fff; background-color: #245fd5; } .btn:active:focus,.btn:focus{ outline: none; outline: 0 auto -webkit-focus-ring-color; outline-offset: 0; color: #45599d; } .btn.active:active:focus{ outline: none; outline: 0 auto -webkit-focus-ring-color; outline-offset: 0; } .btn.active:focus{ color: #fff; outline: 0px auto -webkit-focus-ring-color; } .btn.btns.active, .btn:active{ -webkit-box-shadow: none; box-shadow: none; } .contentTop_RightTop,.contentTop_RightBottom,.contentTop_leftBottom{ border: 1px solid transparent; } .contentTop_RightTop ul{ background: #06153e; font-size: 14px; } .contentTop_RightTop ul li{ height: 32px; line-height: 32px; color: #48abff; padding: 0 5px; margin-top: 3px; } .contentTop_RightTop ul li span,.contentTop_RightBottom ul li span{ display: inline-block; } .contentTop_RightTop ul li span{ vertical-align: middle; } .contentTop_RightTop ul li .numbers,.contentTop_RightBottom ul li .numbers{ height: 24px; width: 24px; background: #3491e6; text-align: center; line-height: 24px; color: #06153e; border-radius: 3px; margin-right: 12px; } .contentTop_RightTop ul li .numbers.importants,.contentTop_RightBottom ul li .numbers.importants{ background: #fa9d33; } .contentTop_RightTop ul li span.messages{ display: inline-block; width: calc(100% - 120px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .contentTop_RightTop ul li span.times{ color: #48abff; } .contentTop_RightTop ul li.active{ background: #16327c; } .contentTop_RightBottom ul li{ height: 32px; color: #48abff; line-height: 32px; background-color: #091748; margin-top: 5px; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .byWord{ color: #1591f9; font-size: 16px; display: inline-block; vertical-align: middle; } .progressBox{ background: #0a2c6b; /*width: 87%;*/ width: calc(100% - 55px); padding: 10px 10px; border-radius: 5px; position: relative; display: inline-block; vertical-align: middle; } .progress{ margin: 3px 0; padding: 2px 0; border-radius: 20px; background-color: #010c33; } .progressIn{ border-radius: 20px; background-color: #1591f9; } .progressInspect{ background-color: #2db8ec; border-radius: 20px; } .progressInspectBox{ border: 2px solid #27418b; padding: 1px 0; width: 90%; margin: 0 auto; } .progressInspectWord { color: #4f84ef; font-size: 14px; font-family: "DigifaceWide"; width: 90%; margin: 0 auto; margin-bottom: 18px; } .progressInspectWord span{ font-size: 18px; } .countNum{ position: absolute; padding: 0; margin: -1px; border: 0; top: -35px; z-index: 9999; display: block; left: 15%; color: #148aef; background: #0b2c6b; border-radius: 5px; padding: 3px 10px; font-size: 12px; font-family: "DigifaceWide"; } .countNum:before{ content: ""; display: block; position: absolute; width: 0; height: 0; border-right: 10px solid transparent; border-top: 10px solid #0a2c6a; border-left: 10px solid transparent; bottom: -10px; left: 27%; } .contentTop_leftBottom_b{ margin: 24px 0 10px 0; } .InspectDatas,.Inspection{ width: 33.3%; text-align: center; color: #fff; float: left; } .InspectDatas div,.Inspection div { font-family: "DigifaceWide"; font-size: 18px; text-align: center; line-height: 100px; margin: 0 auto; margin-bottom: 20px; } .Inspection .InspectionInBox,.InspectDatas .InspectionInBox{ width: 100px; height: 100px; position: relative; color: #fff; } .InspectDatas .InspectionInBox{ color: #1591f9; } .Inspection .InspectionInBox div,.InspectDatas .InspectionInBox div{ width: 100%; height: 100%; position: absolute; } .InspectDatas .InspectionInBox div.InspectionIn_1{ background: url(../images/InspectDatas_1.png) no-repeat center; animation: 20s infinite anticlockwise linear; -webkit-animation: 20s infinite anticlockwise linear; } .InspectDatas .InspectionInBox div.InspectionIn_2{ background: url(../images/InspectDatas_2.png) no-repeat center; animation: 20s infinite clockwise linear; -webkit-animation: 20s infinite clockwise linear; } .Inspection .InspectionInBox div.InspectionIn_1{ background: url(../images/Inspection_1.png) no-repeat center; animation: 20s infinite clockwise linear; -webkit-animation: 20s infinite clockwise linear; } .Inspection .InspectionInBox div.InspectionIn_2{ background: url(../images/Inspection_2.png) no-repeat center; animation: 20s infinite anticlockwise linear; -webkit-animation: 20s infinite anticlockwise linear; } .Inspection .InspectionInBox div.InspectCount,.Inspect_done,.Inspect_nodo{ background: url(../images/Inspection_3.png) no-repeat center; } @keyframes anticlockwise { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @-webkit-keyframes anticlockwise { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @keyframes clockwise { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes clockwise { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .contentTop_middle_top{ width: 85%; margin: 0 auto; padding-top: 20px; } .contentTop_middle_top .contentTop_middle_top_pro{ width: 33.3333%; text-align: center; float: left; } .contentTop_middle_top div span.contentTop_middle_top_pro_span{ display: block; color: #fff; font-size: 18px; font-weight: bold; margin-bottom: 25px; } .dataNums .tt span{ color: #fff; } .dataNums .dataOne{ background: #155af6; height: 35px; } .mapBox { width: 100%; position: relative; } .mapBox img{ display: block; min-width: 300px; width: 51%; max-width: 80%; margin: 0 auto; } .mapword{ width: 295px; height: 158px; background: url(../images/mapKuang.png) no-repeat center; position: absolute; top: 13%; right: 2%; text-align: center; background-size: 100% 100%; } .mapword ul li{ padding: 17px 30px; } .mapword p{ text-align: left; color: #fff; font-size: 16px; margin-top: 15px; } .mapword .mapword_title{ color: #fff; font-weight: bold; text-align: center; font-size: 16px; margin-top: 0; } /*@media(max-width: 1410px) { .headerRight{ display: none; } .headFour{ width: 17%; } .headerTitle{ width: 50%; } }*/ /*地图*/ @media (min-width: 992px) and (max-width: 1520px) { .col-md-3{ width: 100%; } /*.col-md-3 .outterBox{ width: 50%; }*/ .col-md-6{ width: 100%; } } @media (min-width: 1667px)and (max-width: 1827px) { .mapBox img{ width: 54%; } .mapword { width: 265px; height: 156px; } } @media (min-width: 1520px)and (max-width: 1660px) { .mapBox img{ width: 60%; } .mapword{ width: 240px; height: 155px; } } @media (min-width: 1300px) and (max-width: 1520px) { .mapBox img{ width: 40%; } .mapword{ top: 17%; right: 17%; } } @media (max-width: 992px) { .mapBox img{ width: 50%; } }