.right-grid{ grid-template-columns: 750px auto; grid-template-rows: 1fr; } .right-grid .right-grid-r1{ grid-template-columns: 1fr; grid-template-rows: 240px 400px 200px auto; } .right-grid .right-grid-r2{ grid-template-columns: 1fr; grid-template-rows: 412px auto; } .right-grid .right-grid-r2-top{ grid-template-columns: 508px auto; grid-template-rows: 1fr; } .right-grid .right-grid-r2-bottom{ grid-template-columns: 358px auto; grid-template-rows: 1fr; } .charts-mclist-area{ width: 100%; height:calc(100% - 2em); position:relative; } #charts-mclist{ list-style: none; padding: 0; margin: 0; height:100%; white-space: nowrap; display: inline-block; } #charts-mclist li{ display: inline-block; width:244px; height:150px; } .chart-area{ height:100%; } .lengred-tabs{ display:flex; align-items:center; justify-content:center; width:100%; height:2em; font-size:0.8em; color:#ccf5f9 } .lend-items{ display:flex; align-items:center; justify-content:center; margin-right:10px; cursor:pointer; } .doc-tip{ width:10px; height:10px; border-radius:50%; margin-right:5px; } .pzs-tip{ background-color:#f09954; } .mfs-tip{ background-color:#e62963; } .czl-tip{ background-color:#6b2db2; } .ttl-tip{ background-color:#3422b4; } .xsl-tip{ background-color:#e75e66; } .unable{ background-color:#ccc; } #chart-container1,#chart-container2,#chart-container3,#chart-container4{ height:50%; width:50%; } .chart-none-title{ height:100%; flex:1; display:flex; flex-direction:column; } .chart-new-title{ height:1.6em; font-size:0.6em; color:#ccf5f9; line-height:1.6em; padding-left:0.6em; } #chart-wdsdaq,#chart-ph,#chart-nh{ width:100%; height:calc(100% - 1.6em); } .build-wrapper{ width:100%; height:100%; overflow:hidden; /* padding:2px; */ } ul.build-container{ height: 100%; white-space: nowrap; display: inline-block; padding:2px; } ul.build-container>li{ padding:0 11px; height: 100%; display: inline-block; } .single ul>li.active>.build-contain:before{ content:''; height:100%; width:100%; position:absolute; left:-2px; top:-2px; border: 2px solid #0efcfe; } ul.build-container>li>.build-contain{ cursor: pointer; height: 100%; width: 225px; flex-direction: column; border: 0.5px solid #6076ae; border-top: 2px solid #6076ae; position: relative; } ul.build-container>li .leftbar{ width: 65px; padding-top: 6%; height: 100%; float: left; } li .leftbar>.row-num{ padding: 0 20px 0px; font-size: 1em; text-align: center; word-wrap: break-word; word-break: break-all; white-space: normal; line-height: 1.2em; color:#ccf5f9; } ul.build-container>li .cont{ height: 100%; width: calc(100% - 65px); display: flex; float:left; flex-direction: column; flex: 1; justify-content: space-around; font-size: 1.2em; align-items: center; padding:5px 0; } ul.build-container>li .cont>.cont-item{ width: 100%; display: flex; align-items: center; justify-content: flex-start; color:#ccf5f9; font-size:0.8em; } li .cont>.cont-item>img{ width:20px; margin-right:10px; } li .cont>.cont-item>.cont-value{ font-size:1em; color:#3996dc; margin-left:10px; } li .cont>.cont-item>.cont-status_t{ font-size:1em; color:#37b13d; margin-left:10px; } li .cont>.cont-item>.cont-status_f{ font-size:1em; color:#c83428; margin-left:10px; } .single{ height:100%; width:100%; position:relative; } .video-box{ height:50%; width:50%; padding:5px; } .video-box>.video-title{ text-align:center; line-height:2em; margin-bottom:0.8em; font-size:0.8em; color:#ccf5f9; } .video-box>.video-container{ width:100%; height:calc(100% - 1.8em); } .video-container video{ height:100%; width:100%; } #chart-sbgz,#chart-bjlx{ height:40%; width:50%; } #chart-bjfx,#chart-sbgzphb{ height:60%; width:50%; } .chart-left,.map-right{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; } .map-right,.map-data{ width:50%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; } .chart-left>.chartyxzt{ height:40%; width:100%; } .chart-left>.warning-count{ height:20%; width:100%; } .chart-left>.warning-count-msglist{ height:40%; width:100%; } .chart-left>.chartyxzt>.chart-title{ font-size:0.8em; color:#ccf5f9; text-align:center; height:2em; line-height:2em; } .chart-left>.warning-count>.warning-count-title{ font-size:0.8em; color:#ccf5f9; text-align:center; height:2em; line-height:2em; } #chart-yxzt{ height:calc(100% - 2em); width:100%; } .chart-left>.warning-count>.warning-count-list{ height:calc(100% - 2em); width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; } .chart-left>.warning-count>.warning-count-list>.warning-count-item{ width:50%; margin-bottom:20px; display:flex; align-items:center; justify-content:flex-start; padding-left:44px; } .warning-count-item>img{ width:24px; } .chart-left>.warning-count>.warning-count-list>.warning-count-item>.warning-count-name{ display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:0.6em; color:#ccf5f9; margin-left:10px; } .map-right>.map-right-title{ display:flex; align-items:center; justify-content:center; height:2em; color:#ccf5f9; font-size:0.8em; } .map-right>.map-right-data{ width:100%; display:flex; align-items:center; justify-content:space-around; height:3em; font-size:0.8em; color:#ccf5f9; } .map-right>.map-right-data>.map-right-item{ flex:1; display:flex; align-items:center; } .map-right>.map-right-data>.map-right-item:first-child{ justify-content:flex-end; padding-right:1.5em; } .map-right>.map-right-data>.map-right-item:last-child{ justify-content:flex-start; padding-left:1.5em; } .map-right>.map-right-data .map-right-value{ color:#17b45e; margin:0 5px; } #map-right-container{ height:calc(100% - 3em); width:100%; padding:5px; border:1px solid #3996dc; border-radius:4px; } #map-right-container .amap-icon img{ width:15px; } .amap-overlay-text-container .warning-word{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .mcjc-top{ height:55%; width:100%; } #chart-psssjc{ height:45%; width:100%; } .mcjc-top{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; } .mcjc-top>.mcjc-top-title{ line-height:2em; color:#ccf5f9; font-size:0.8em; } .mcjc-top>.mcjc-top-datetime{ display:flex; align-items:center; justify-content:center; height:2em; font-size:0.8em; color:#ccf5f9; } .mcjc-top>.mcjc-top-datalist{ display:flex; align-items:center; justify-content:center; } .mcjc-top>.mcjc-top-datalist>.mcjc-top-item,.mcjc-top>.mcjc-top-datalist>.mcjc-top-status,.mcjc-top>.mcjc-top-datalist>.mcjc-top-style{ display:flex; align-items:center; justify-content:center; flex-direction:column; } .mcjc-top>.mcjc-top-datalist>.mcjc-top-status{ margin: 0 20px; } .mcjc-top-item>.mcjc-top-itemname{ font-size:0.8em; color:#ccf5f9; line-height:1.8em; } .mcjc-top-status>.mcjc-top-statusvalue{ font-size:0.8em; line-height:1.8em; color:#17b45e; } .mcjc-top-status>.mcjc-top-statusvalue.leave{ color:#dbb244; } .mcjc-top-style>.mcjc-top-stylevalue{ font-size:0.8em; line-height:1.8em; color:#17b45e; } .mcjc-top-style>.mcjc-top-stylevalue.stop{ color:#c83428; } .mcjc-top-style>.mcjc-top-stylevalue.waiting{ color:#dbb244; } .mcjc-top-count{ display:flex; align-items:center; justify-content:space-around; width:100%; } .mcjc-top-count>.mcjc-top-count-part{ width:25%; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#ccf5f9; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-value{ color:#3996dc; font-size:1.2em; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-line{ width:100%; height:1px; background-color:#449ba4; margin:6px 0; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-name{ font-size:0.6em; } .warning-count-msglist{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 10px; } .warning-count-msglist-container{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; width:100%; height:50%; } .warning-count-msglist-container>.warning-count-msglist-title{ font-size:0.8em; height:1.6em; color:#ccf5f9; padding-left:0.5em; } .warning-count-msglist-container .warning-count-msglist-box{ border:1px solid #3e68c0; height:calc(100% - 2.4em); width:100%; overflow:hidden; } .warning-count-msglist-box>.warning-count-msglist-item{ width:100%; display:flex; align-items:center; justify-content:flex-start; font-size:0.6em; height:1.6em; color:#ccf5f9; border-bottom:1px solid #3e68c0; } .warning-count-msglist-box>.warning-count-msglist-item>.type{ width:17%; } .warning-count-msglist-box>.warning-count-msglist-item>.warning-count-msglist-content{ width:83%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .content-container>.map-top{ width:100%; height:60%; display:flex; justify-content:space-between; align-items:center; } .content-container>.map-bottom{ width:100%; height:40%; display:flex; justify-content:space-around; align-items:center; } .content-container>.map-bottom>.map-bottom-chart{ width:33%; height:100%; } #fwcl:hover{ cursor:pointer } /* .right-grid-r2-bottom .bottom-box{ width:20%; height:100%; } .right-grid-r2-bottom .bottom-box .box-msg{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }*/