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: 120px; margin-top: 4px; 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; } .contentTop_left { width: 28%; } .contentTop_middle { width: 43%; } .contentTop_right { width: 29%; } .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; z-index: 2; } .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; } .title_sign_transparent::before, .title_sign_transparent::after, .title_sign_transparent .inner::before, .title_sign_transparent .inner::after{ border-color: transparent; transition: all .2s ease-in-out; } #switchTitleTabs .title_tips{ cursor: pointer; } /*内层左上和右下 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: #113589; color: #cedbff; font-size: 16px; text-align: center; margin: 0 auto; } .wxTab .title_tips { background-color: #0c1940; } .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; min-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); z-index: -1; } .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, .contentTop_RightBottom ul { /*background: #06153e;*/ font-size: 14px; } .contentTop_RightTop ul li, .contentTop_RightBottom ul li { height: 32px; line-height: 32px; color: #48abff; padding: 0 5px; margin-top: 5px; background: #091748; } .contentTop_RightTop ul li span, .contentTop_RightBottom ul li span { display: inline-block; 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, .contentTop_RightBottom 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 span.times.nodo { color: #ff5e5e; } .contentTop_RightBottom ul li span.times.newOrder { color: #D8D8FA; } .contentTop_RightBottom ul li span.times.finish { color: #429dec; } .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; } .InspectDatas .InspectionInBox div.InspectionInwby_11.active { background: url(../images/InspectDatas_11.png) no-repeat center; } .InspectDatas .InspectionInBox div.InspectionInwby_21.active { background: url(../images/InspectDatas_22.png) no-repeat center; } .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.InspectionIn1_nodo.active { background: url(../images/Inspection_11.png) no-repeat center; } .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.InspectionIn2_nodo.active { background: url(../images/Inspection_22.png) no-repeat center; } .Inspection .InspectionInBox div.InspectCount, .Inspect_done, .Inspect_nodo { background: url(../images/Inspection_3.png) no-repeat center; } .Inspect_nodo.active { background: url(../images/Inspection_33.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%;*/ width: 100%; max-width: 100%; margin: 0 auto; } .mapword { width: 231px; height: 147px; background: url(../images/mapKuang.png) no-repeat center; position: absolute; top: 2%; right: -2%; text-align: center; background-size: 100% 100%; } .mapwordFloor { right: auto; left: -1%; } .mapword ul li { padding: 17px 30px; } .mapword p { text-align: left; color: #fff; font-size: 14px; margin-top: 10px; } .mapword .mapword_title { color: #fff; font-weight: bold; text-align: center; font-size: 14px; margin-top: 0; } /*@media(max-width: 1410px) { .headerRight{ display: none; } .headFour{ width: 17%; } .headerTitle{ width: 50%; } }*/ /*地图*/ /* 排班信息 */ .contentTop_RightTop ul .scheduling_info { color: #48abff; background-color: #091748; font-size: 14px; height: auto; margin-top: 5px; padding: 5px 0; } .scheduling_info .scheduling_dept { width: 25%; text-align: center; font-size: 16px; line-height: 32px; } .scheduling_info .scheduling_items { width: 75%; text-align: left; } .scheduling_info .scheduling_items .scheduling_time { line-height: 28px; } .scheduling_info .scheduling_items .scheduling_personnels { line-height: 26px; } /* @media (min-width: 992px) and (max-width: 1520px) { .col-md-3 { width: 100%; } .col-md-6 { width: 100%; } } */ @media (min-width: 1667px)and (max-width: 1827px) { .mapword { width: 265px; height: 156px; } #switchTitleTabs .logOut{ width: 60px; } #switchTitleTabs .logOut i{ margin: 0 auto; } #switchTitleTabs .logOut span{ display: none; } } @media (min-width: 1520px)and (max-width: 1660px) { .temperature{ width: auto; } .head_in .head_inConR{ width: auto; padding: 0 2%; } .headerTitle .headerTitleIn span{ font-size: 30px; } .mapword { width: 240px; height: 155px; } #switchTitleTabs .logOut{ width: 60px; } #switchTitleTabs .logOut i{ margin: 0 auto; } #switchTitleTabs .logOut span{ display: none; } } @media (min-width: 1300px) and (max-width: 1520px) { .temperature{ width: auto; } .head_in .head_inConL, .head_in .head_inConR{ font-size: 14px; width: auto; padding: 0 2%; } .headerTitle .headerTitleIn span{ font-size: 27px; } .headerRightInCon .headerRightInCon_l{ font-size: 16px; } .mapword { top: 17%; right: 17%; } #switchTitleTabs .logOut{ width: 15px; } #switchTitleTabs .logOut i{ margin: 0 auto; } #switchTitleTabs .logOut span{ display: none; } } @media (max-width: 1300px) { .temperature{ width: auto; } .head_in .head_inConL, .head_in .head_inConR{ font-size: 14px; width: auto; padding: 0 2%; } .headerTitle .headerTitleIn span{ font-size: 27px; } .headerRightInCon .headerRightInCon_l{ font-size: 16px; } .content { margin-top: 90px; } .mapword { top: 17%; right: 17%; } } @media (max-width: 992px){ .contentTop_left, .contentTop_middle, .contentTop_right{ width: 100% !important; } }