html, body { width: 100%; height: 100%; margin: 0; padding: 0; color: #fff; font-size: 16px; font-family: 'Alibaba PuHuiTi R'; } .layout { display: flex; align-items: center; justify-content: start; box-sizing: border-box; } #content-box { width: 100%; height: 100%; /*padding: 0.5% 0.5% 0 0.5%;*/ box-sizing: border-box; justify-content: space-between; } .common-height { height: 100%; box-sizing: border-box; } #left { width: 32.108%; padding: 1% 0.5% 0 0.45%; z-index: 1000; justify-content: space-between; z-index: 1000; } #left-box { width: 77.016%; } #left-box2 { width: 20%; height: 100%; } #center-box { width: 37.0901%; padding: 1% 0.5% 0 0.45%; position: relative; } #right { width: 30.1045%; padding: 1% 0.5% 0 0.45%; z-index: 1000; justify-content: space-between; z-index: 1000; } #center-box2 { width: 16.42025%; z-index: 1000; } #right-box { width: 82.32%; z-index: 1000; } /*左侧样式设置start*/ /*日计划样式start*/ .pro-type-btn { width: 100%; height: 32px; margin-bottom: 15px; } .pro-type { width: 54px; height: 32px; font-size: 16px; line-height: 32px; text-align: center; border: 1px solid #0E3281; cursor: pointer; color: #fff; } .check-p { background-color: #0E3281; } .pro-type:nth-of-type(1), .pro-type:nth-of-type(2), .pro-type:nth-of-type(3) { border-right: none; } .pro-type:nth-of-type(1) { border-radius: 2px 0 0 2px; } .pro-type:nth-of-type(3) { border-radius: 0 2px 2px 0; } .main-box { width: 100%; height: 100%; /* height: calc(58% - 22px); */ /* margin-top: 20px; */ } .main-box-title { width: 100%; height: 40px; margin-bottom: 10px; background: url("../../img/compreDisplay/day-plan.png") no-repeat 0 0 / 100% 100%; } .main-box-btn, .ticket-bar-btn { width: 100%; height: 36px; } .date-btn { width: 124px; height: 100%; justify-content: space-around; align-items: start; } .echarts-legend { width: 160px; height: 100%; align-items: flex-start; margin-left: 36%; } .legend-title { width: 50%; justify-content: space-around; } .date-type img { position: relative; top: -10px; width: 32px; height: 2px; } .legend-title img { margin-top: 4px; } .date-type { flex-direction: column; cursor: pointer; text-align: center; } .check-p2 { color: #8FFFFA; } .count-num { width: 100%; height: 68px; justify-content: space-around; } .count, .count2 { width: 140px; height: 100%; flex-direction: column; justify-content: space-around; color: #fff; } .count { background: url("../../img/compreDisplay/light.png") no-repeat 0 0 / 100% 100%; } .count2 { background: url("../../img/compreDisplay/light2.png") no-repeat 0 0 / 100% 100%; } .count p:nth-of-type(1), .count2 p:nth-of-type(1) { font-size: 24px; font-family: 'zcoolqingkehuangyouti'; } #echarts-one { width: 100%; height: calc(100% - 150px); } /*日计划样式end*/ /*周风险样式start*/ .main-box2 { width: 100%; /* height: 36%; */ height: 100%; } .main-box2-title { width: 100%; height: 40px; margin-bottom: 10px; background: url("../../img/compreDisplay/week-risk.png") no-repeat 0 0 / 100% 100%; } .main-box2-btn { width: 100%; height: 36px; justify-content: space-between; } .date2-btn { width: 100px; height: 100%; justify-content: space-around; align-items: start; } .date2-type img { position: relative; top: -10px; width: 32px; height: 2px; } .date2-type { flex-direction: column; cursor: pointer; text-align: center; } .city-select { width: 150px; height: 100%; } .city-select select { width: 100%; height: 32px; border-color: #174FDD; background-color: transparent; color: #fff; } #echarts-two { width: 100%; height: calc(100% - 85px); } /*周风险样式end*/ /* 周风险 日计划合并 end */ /*左侧样式设置end*/ /*左侧2样式设置start*/ .switch-btn { width: 100%; height: 10%; } .back { width: 70%; height: 10%; justify-content: space-evenly; cursor: pointer; } .back p { color: #fff; } .switch-form .layui-form-item { justify-content: space-between; } .switch-form .layui-form-item p { color: #fff; } .layui-form-switch { margin-top: 0; } .pro-container { width: 100%; height: 62%; flex-direction: column; justify-content: space-between; } .pro-box { width: 100%; height: 127px; flex-direction: column; justify-content: space-between; cursor: pointer; color: #fff; } .pro-img-common { width: 102px; height: 101px; justify-content: center; font-size: 20px; } .pro-img-common p { font-size: 30px; font-family: 'zcoolqingkehuangyouti'; } .pro-img0 { background: url("../../img/compreDisplay/dkg-pro.png") no-repeat 0 0 / 100% 100%; } .pro-img { background: url("../../img/compreDisplay/build_pro_new.png") no-repeat 0 0 / 100% 100%; } .pro-img2 { background: url("../../img/compreDisplay/con-pro.png") no-repeat 0 0 / 100% 100%; } .pro-img3 { background: url("../../img/compreDisplay/stop-pro.png") no-repeat 0 0 / 100% 100%; } /*左侧2样式设置end*/ /*中间样式设置start*/ .switch-type, .switch-type2 { width: 100%; height: 100%; } .search { width: 100%; height: 50px; justify-content: center; position: absolute; } .keyWord { width: 460px; height: 40px; border: 1px solid #174FDD; background-color: #06182E; color: #fff; z-index: 1000; padding: 2px 9px; box-sizing: border-box; } .search img { position: relative; left: -30px; cursor: pointer; z-index: 1000; } #echarts-map { width: 100%; height: calc(100%) } .warning-info { width: 100%; height: 40px; position: absolute; top: 94%; border: 1px solid #174FDD; background-color: #06182E; border-radius: 2px; z-index: 1000; } .animate-p { width: calc(100% - 24px); height: 100%; overflow: hidden; margin-left: 20px; } .animate { font-size: 16px; color: #fff; display: inline-block; white-space: nowrap; animation: 30s wordsLoop linear infinite normal; } @keyframes wordsLoop { 0% { transform: translateX(200px); -webkit-transform: translateX(200px); } 100% { transform: translateX(-100%); -webkit-transform: translateX(-100%); } } @-webkit-keyframes wordsLoop { 0% { transform: translateX(200px); -webkit-transform: translateX(200px); } 100% { transform: translateX(-100%); -webkit-transform: translateX(-100%); } } .map-p, .terrain-map-p { color: #fff; font-weight: normal; margin-bottom: 10px; font-size: 16px; font-family: 'Alibaba PuHuiTi R'; } .basic-info { width: 100%; height: 145px; border: 1px solid #174FDD; background-color: #092351; border-radius: 2px; margin-bottom: 20px; flex-direction: column; position: absolute; z-index: 1000; } #echarts-map2 { width: 100%; height: calc(100%); } .city { width: 100%; height: 40px; padding: 1%; font-size: 20px; color: #fff; } .pro-attendance-risk-info { width: 100%; height: calc(100% - 40px); padding: 0 1%; color: #fff; } .pro-info, .attendance-info, .risk-info { width: 19%; height: 100%; flex-direction: column; } .risk-info { width: 56%; margin-left: 2%; } .pro, .attendance, .risk { width: 100%; } .attendance p { margin-bottom: 12%; } .pro p { margin-bottom: 3%; } .risk { margin-bottom: 4%; justify-content: space-between; } /*中间样式设置end*/ /*中间2样式设置start*/ .multiselect { width: 100%; height: 20%; flex-direction: column; justify-content: space-between; } .check-risk { width: 100%; height: 50px; justify-content: space-between; cursor: pointer; font-size: 14px; } .check-risk img { width: 18px; height: 18px; } .check-risk p { width: calc(100% - 25px); } /*中间2样式设置end*/ /*右侧样式设置start*/ /*作业票样式start*/ .main-box3 { width: 100%; height: 30%; } .main-box3-title { width: 100%; height: 40px; margin-bottom: 10px; background: url("../../img/compreDisplay/ticket-title.png") no-repeat 0 0 / 100% 100%; } .ticket { width: 100%; height: calc(100% - 50px); justify-content: space-between; flex-direction: column; } .ticket-pie { width: 100%; height: 22px; } .echarts-legend2 { width: 100%; height: 100%; } #ticket-history-echarts { width: 100%; height: calc(100% - 22px); } .legend-title2 { width: 50%; justify-content: space-evenly; } #echarts-three, #echarts-four { width: 100%; height: calc(100% - 22px); } .date3-btn { width: 130px; height: 100%; justify-content: space-around; align-items: start; } .echarts-legend { width: 160px; height: 100%; align-items: flex-start; margin-left: 36%; } .legend-title { width: 50%; justify-content: space-around; } .date3-type img { position: relative; top: -10px; width: 64px; height: 2px; } .date3-type { flex-direction: column; cursor: pointer; text-align: center; } .check-p3 { color: #8FFFFA; } .ticket-bar-btn .echarts-legend { width: 140px; } .ticket-bar-btn .echarts-legend .legend-title { justify-content: space-evenly; } .ticket-bar-btn .echarts-legend .legend-title img { margin-top: 0; } #echarts-five { width: 100%; height: calc(100% - 40px); } /*作业票样式end*/ /*站班会样式start*/ .main-box5 { width: 100%; height: 35%; } .main-box5-title { width: 100%; height: 40px; margin-bottom: 10px; background: url("../../img/compreDisplay/class_back.png") no-repeat 0 0 / 100% 100%; } .ticket-bar { width: 100%; height: calc(100% - 50px); } /*站班会样式end*/ /*人员统计样式start*/ .main-box4 { width: 100%; height: 35%; } .main-box4-title { width: 100%; height: 40px; margin-bottom: 10px; background: url("../../img/compreDisplay/personnel-statistics.png") no-repeat 0 0 / 100% 100%; } #echarts-six { width: 100%; height: calc(100% - 60px); } /*人员统计样式end*/ /*右侧样式设置end*/ /*隐藏百度水印 start*/ .BMap_cpyCtrl { display: none; } .anchorBL { display: none; } /*隐藏百度水印 end*/ /*地图标题 infoWindow*/ .BMap_bubble_title { color: #fff; font-size: 16px; font-weight: bold; text-align: left; background: transparent !important; } .BMap_pop .BMap_top { background: rgba(14, 17, 28, 0.63) !important; border: 0 !important; } .BMap_pop .BMap_center { width: 331px !important; border: 0 !important; background: rgba(14, 17, 28, 0.63) !important; } .BMap_pop .BMap_bottom { border: 0 !important; background: rgba(14, 17, 28, 0.63) !important; } .BMap_pop div:nth-child(3) { background: transparent !important; } .BMap_pop div:nth-child(3) div { border-radius: 3px; background: rgba(14, 17, 28, 0.63) !important; border: 0 !important; } .BMap_pop div:nth-child(1) { border-radius: 3px 0 0 0; background: transparent !important; border: 0 !important; } .BMap_pop div:nth-child(1) div { background: rgba(14, 17, 28, 0.63) !important; } .BMap_pop div:nth-child(5) { border-radius: 0 0 0 3px; background: transparent !important; border: 0 !important; } .BMap_pop div:nth-child(5) div { border-radius: 3px; background: rgba(14, 17, 28, 0.63) !important; } .BMap_pop div:nth-child(7) { background: transparent !important; left: 226px; } .BMap_pop div:nth-child(7) div { border-radius: 3px; background: rgba(14, 17, 28, 0.63) !important; } /*替换箭头*/ /*替换箭头*/ img[src="http://api.map.baidu.com/images/iw3.png"] { width: 1px !important; height: 1px !important; } img[src="https://api.map.baidu.com/images/iw3.png"] { opacity: 0.7; filter: alpha(opacity=70); width: 1px !important; height: 1px !important; } /*地图label样式 start*/ .BMapLabel { background-color: rgba(14, 17, 28, 0.63) !important; border: 1px solid #174FDD !important; } .labelStyle { width: 140px; height: 60px; flex-direction: column; color: #fff; } .temp { width: 100%; justify-content: space-around; } .temp p { font-size: 14px; fontFamily: 'Alibaba PuHuiTi R' } .temp:nth-of-type(1) p:nth-of-type(2) { font-size: 18px; font-weight: bold; } .layui-layer-content, .layui-layer-padding { color: #000; } /*地图label样式 end*/ /*iframe 页面start*/ body .my-skin.layui-layer, body .my-skin .layui-layer-content { background-color: transparent; } .shadows { background-color: transparent !important; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; } body .my-skin.child-skin { background: url("../../img/compreDisplay/child-back.png") no-repeat 0 0/100% 100% transparent; } /*iframe 页面end*/ /*滚动条样式start*/ /* ::-webkit-scrollbar { width: 5px; height: 10px; } ::-webkit-scrollbar-track { background: #e7e7f1 !important; border-radius: 0px; } ::-webkit-scrollbar-thumb { background: rgba(94, 96, 97, 0.43) !important; border-radius: 0px; } ::-webkit-scrollbar-thumb:hover { background: rgba(94, 96, 97, 0.43) !important; border-radius: 0px; } ::-webkit-scrollbar-thumb:active { background: rgba(94, 96, 97, 0.43) !important; border-radius: 0px; } */ /*滚动条样式start*/ ::-webkit-scrollbar { width: 10px; height: 20px; } ::-webkit-scrollbar-thumb:hover { background: #dadee8; cursor: pointer; } ::-webkit-scrollbar-thumb { border-radius: 14px; border-style: dashed; border-color: transparent; border-width: 0.1px; background-color: #dadee8; background-clip: padding-box; } ::-webkit-scrollbar-corner { background-color: transparent; } /*滚动条样式end*/ /*滚动条样式end*/ .city-select .layui-unselect { background-color: transparent; border-color: #174FDD; color: #fff; height: 32px; } .city-select .layui-anim { background-color: #06182E !important; max-height: 200px; } .city-select .layui-form-select dl dd.layui-this { background-color: #2F5D6B; color: #8FFFFA; } .city-select .layui-form-select dl dd:hover { background-color: #2F5D6B !important; color: #8FFFFA !important; } .layui-form-select dl dd, .layui-form-select dl dt { color: rgb(178, 178, 178); } .layui-form-select .layui-edge { border-top-color: #fff; } .layui-input::-webkit-input-placeholder, .layui-textarea::-webkit-input-placeholder { color: #fff; } .layui-input::-moz-placeholder, .layui-textarea::-webkit-input-placeholder { color: #fff; } .layui-input::-ms-input-placeholder, .layui-textarea::-webkit-input-placeholder { color: #fff; } /*下拉多选框样式设置 start*/ .xm-input::-webkit-input-placeholder { color: #fff !important; font-size: 14px; } .xm-select-parent .xm-input { background-color: transparent !important; } .xm-select-parent .xm-select { border: 1px solid #174FDD; } .xm-form-selected .xm-select, .xm-form-selected .xm-select:hover { border-color: #D9D9D9 !important; } .xm-select-parent .xm-form-selected dl { background-color: #06182E; } .xm-form-checkbox>span { color: #fff; } .xm-select-parent .xm-form-select dl dd:hover { background-color: #2F5D6B !important; } .xm-select-parent .xm-form-select dl .xm-select-tips:hover { background-color: #fff !important; } .xm-select-parent .xm-form-select dl dd.xm-select-tips span:hover { color: #999; } .xm-select-parent .xm-form-select dl dd span:hover { color: #8FFFFA !important; } .xm-form-checkbox>i { border: 1px solid #009688; } .xm-form-checkbox:hover>i { border-color: #8FFFFA; } .xm-select-parent .xm-form-select dl .xm-select-tips:hover { background-color: #06182E !important; } .xm-select-parent .xm-form-select dl .xm-select-tips { background-color: #06182E !important; } .xm-select-tips .xm-input { background-color: #06182e; color: #fff; } .xm-select-parent dd>.xm-cz-group .xm-cz i { margin-right: 2px; } .xm-select-parent dd .xm-cz:hover { color: #8FFFFA !important; } .xm-select-parent dd>.xm-cz-group { margin-right: 0; } /*下拉多选框样式设置 end*/ #weekRiskDate, #classDate { width: 150px; background-color: transparent; border: 1px solid #174FDD !important; color: #fff !important; cursor: pointer; } .layui-input { color: #595959 !important; height: 36px; font-size: 16px; background-color: transparent; padding: 3px 6px; } #weekRiskDate:hover, #classDate:hover { border: 1px solid #fff !important; } .layui-input:focus { border: 1px solid #174FDD !important; } .laydate-set-ym { color: #fff; } .laydate-footer-btns { color: #fff; } .layui-laydate-footer span { display: inline-block; vertical-align: top; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid #c9c9c9; border-radius: 2px; background-color: transparent !important; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .3s; } /* 周风险、日计划合并 start*/ .main-box-merge { width: 100%; height: 40%; } .plan-history { width: 100%; height: 25%; } .plan-history-title { width: 100%; height: 40px; background: url("../../img/cityHome/module_title.png") no-repeat 0 0 / 100% 100%; } .plan-history-title>p { font-size: 20px; margin: -5px 0 0 6px; } #plan-echarts { width: 100%; height: calc(100% - 40px); } .change-type-btn { width: 7%; height: 32px; position: absolute; left: 18%; top: 8%; } .change-type-btn2 { width: 7%; height: 32px; position: absolute; left: 17%; top: 47%; } .change-type-btn3 { width: 7%; height: 32px; position: absolute; left: 92%; top: 2.6%; } .change-type, .change-type2, .change-type3 { width: 54px; height: 32px; font-size: 16px; line-height: 32px; text-align: center; border: 1px solid #0E3281; cursor: pointer; color: #fff; } .check-p { background-color: #0E3281; } .change-type:nth-of-type(1) { border-right: none; } .change-type:nth-of-type(1) { border-radius: 2px 0 0 2px; } .change-type:nth-of-type(3) { border-radius: 0 2px 2px 0; } .change-type-btn2 .change-type:nth-of-type(2), .change-type-btn3 .change-type:nth-of-type(2) { border-right: none; } /* 周风险、日计划合并 end*/ /* 预警信息 start*/ .early-main-box { height: 29%; } .early-main-box-title { width: 100%; height: 40px; margin-bottom: 10px; background: url("../../img/compreDisplay/early-info.png") no-repeat 0 0 / 100% 100%; } .early-info-list { width: 100%; height: calc(100% - 50px); background: url("../../img/compreDisplay/4.gif") no-repeat 0 0 / 100% 100%; } .early-info-list ul:first-child { width: 100%; height: 60px; font-size: 18px; } .early-info-list ul:first-child { width: 100%; height: 60px; font-size: 18px; } .early-info-list ul:first-child li { width: 100%; height: 30px; } .early-info-list ul:first-child li span { letter-spacing: 2px; } #earlyDealNum { color: #45D991; } #earlyNoDealNum { color: #ED9949; } .early-info-list ul:last-child { width: 100%; height: calc(100% - 60px); overflow-y: auto; font-size: 15px; } .early-info-list ul li { width: 100%; height: 35px; } .early-info-list ul li p { width: 33%; height: 100%; display: flex; align-items: center; justify-content: center; } .early-info-list ul li p:nth-child(2) { width: 17%; } .early-info-list ul li p:nth-child(3) { width: 50%; } table, tbody { display: block; } table thead { display: table; width: 24%; table-layout: fixed; font-size: 16px; height: 40px; display: none; } table thead tr th:nth-child(1), table tbody tr td:nth-child(1), table thead tr th:nth-child(3), table tbody tr td:nth-child(3) { width: 25%; text-align: center; height: 40px; } table thead tr th:nth-child(2), table tbody tr th:nth-child(2) { width: 50%; text-align: center; height: 40px; } tbody tr { display: table; width: 100%; table-layout: fixed; } .layui-table { margin: 0 !important; } .lunbo_div { width: 100%; height: 100%; background-color: transparent; /* position: fixed; */ border-radius: 10px; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } #early-title-box { width: 100%; height: 36px; background-color: #0b285e79; } #early-title-box p { text-align: center; font-size: 16px; } .bm_content { width: 100%; height: calc(100% - 36px); background-color: transparent; margin: 0px 5px 0 5px; border-radius: 3px; font-size: 14px; overflow: hidden; position: relative; } table { table-layout: fixed; } .table>thead>tr>th { /* border-bottom: 1px solid #eeeeee; */ text-align: center; } .table>tbody+tbody { border-top: 0px; font-size: 14px; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .table { table-layout: fixed; } .center { vertical-align: middle; } span.handleData { /* background-color: #D7FCEA; */ color: #45D991; padding: 2px 10px; border-radius: 2px; } span.noHandleData { /* background-color: #FBEADA; */ color: #ED9949; padding: 2px 10px; border-radius: 2px; } /* 预警信息 end */ .bid-pro-select { position: absolute; top: 5%; left: 55%; z-index: 100000; } .layui-form-select{ width: 270px; } .layui-select-title input{ background-color: #305094; color: #fff !important; font-size: 12px; } .layui-form-select dl dd{ font-size: 12px; }