.mainContentR{ float:left; width:467px; height:100%; box-sizing: border-box; border:1px solid #5397F0; border-radius:2px; display:none; } .mainContentR_sInfo>p{ width: 100%; height: 37px; line-height: 32px; background: url("../image/bar.png") center center no-repeat; text-align: center; } .mainContentR_t{ height: calc(100% - 337px); } .mainContentR_t_box{ height:calc(100% - 37px); } .mainContentR_t_box>div:nth-child(1){ height:220px; } .mainContentR_t_box>div:nth-child(2){ height:calc(100% - 220px); } .mainContentR_t_box>div>p{ height:37px; line-height:30px; background: url(../image/title.png) center center no-repeat; padding:0 20px; } .mainContentR_t>p>span:last-child{ float:right; font-size:12px; } .schoolBaseInfo, .policeBaseInfo{ width:calc(100% - 20px); height:calc(100% - 57px); margin:10px; font-size:12px; box-sizing: border-box; border:1px solid #5397F0; border-radius: 2px; padding:0 5px; } .sb_bInfo>div, .sb_Device>div{ display: flex; flex:1; height:23px; } .schoolInfoGrade{ line-height:12px; font-size:14px; font-weight: bold; } .sb_bInfo>div>p, .sb_Device>div>p{ width:45%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right:5%; height:23px; line-height:23px; } .sb_Device>div>p{ width:25%; } .sb_grade>div>p{ float:left; margin-right:10px; line-height:23px; } .sb_grade>div>p>img{ float:left; margin:5px 5px 0 0; } .policeBaseInfo>.sb_bInfo>div{ height:30px; line-height:30px; } .mainContentR_b{ height:300px; } .mainContentR_t>p, .mainContentR_b>p{ padding:0 0 0 20px; } .policeInfoTableBox{ width:100%; height:calc(100% - 30px); overflow-y:auto ; } .policeInfoTableBox .layui-table th, .policeInfoTableBox .layui-table td{ font-size:12px !important; color:#fff !important; } .videoMonitor{ padding:10px; width:calc(100% - 20px); height:calc(100% - 57px); } .videoMonitor>div{ width:220px; height:120px; float:left; position:relative; background:#204071; box-sizing: border-box; border:1px solid #5397F0; } .videoMonitor>div:nth-child(2){ margin-left:5px; } .videoMonitor>div:nth-child(3){ margin:5px 5px 0 0; } .videoMonitor>div:nth-child(4){ margin-top:5px; } .videoMonitor>div>div{ position:absolute; width:100%; height:100%; } .videoMonitor>div>div>div{ width:100%; height:100%; background: url("../image/right-video.png") 0 0 no-repeat; } .videoMonitor>div>p{ width:100%; position:absolute; height:30px; line-height:30px; bottom:0; background: rgba(23,69,173,.5); padding:0 10px; font-size:12px; } .videoMonitor>div>iframe{ width:100% !important; height:100% !important; } .videoMonitor>div>.videoPlay>iframe{ width:100%; height:100%; }