html, body { width: 100%; height: 100%; margin: 0; padding: 0; color: #fff; font-family: 'Alibaba PuHuiTi R'; } #main-box { width: 100%; height: 100%; justify-content: space-evenly; } .layout { display: flex; align-items: center; justify-content: center; } #left-box { width: 67%; height: 100%; padding-top: 0.85%; box-sizing: border-box; } #person-place-situation { width: 100%; height: 100%; box-sizing: border-box; background: url("../../img/constrDisplay/back-1.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; flex-direction: column; justify-content: space-between; } .title { width: 100%; height: 40px; align-items: start; font-size: 16px; letter-spacing: 1px; padding: 5px 0 0 30px; box-sizing: border-box; justify-content: space-between; } #person-box { width: 100%; height: calc(100% - 40px); flex-direction: column; justify-content: space-between; } #person-type-title { width: 100%; height: 50px; justify-content: end; } #work-box { width: 100%; height: calc(100% - 40px); flex-direction: column; } .type-title { margin: 0 15px; font-size: 14px; } .type-title:nth-child(1)>p:nth-child(1) { width: 10px; height: 10px; margin: 0 5px; background-color: #FF312A; } .type-title:nth-child(2)>p:nth-child(1) { width: 10px; height: 10px; margin: 0 5px; background-color: #2BEEC0; } .type-title:nth-child(3)>p:nth-child(1) { width: 10px; height: 10px; margin: 0 5px; background-color: #fff; } #img-box { width: 100%; height: 49%; } .table-box { width: 100%; height: 49%; } .layui-flow-more { width: 100%; } #ID-flow-demo { width: 100%; height: 100%; justify-content: start; align-items: start; flex-wrap: wrap; overflow-y: auto; } .img-info { width: 12%; height: 210px; margin: 1% 2.3%; } .imgData img { width: 90%; height: 86%; margin: 7% 5%; } .imgData { width: 100%; height: 70%; background-position: center center !important; } .imgData2 { width: 100%; height: 15%; } .imgData2>p { margin: 0 10px; font-size: 15px; } .img-color1 { color: #FF312A; } .img-color2 { color: #2BEEC0; } .img-color3 { color: #fff; } #work-content-box { width: 100%; height: 36%; } #main-risk-box { width: 100%; height: 26%; } #yesterday-content-box { width: 100%; height: 36%; } .child-title { width: 100%; height: 36px; background: url("../../img/constrDisplay/back-title.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; font-size: 16px; letter-spacing: 1px; } .content-info { width: 100%; height: calc(100% - 36px); } .content-info>div { width: 100%; height: 90%; padding: 5px 15px; letter-spacing: 1px; font-size: 15px; box-sizing: border-box; } #right-box { width: 30%; height: 100%; flex-direction: column; justify-content: space-between; padding-top: 0.85%; box-sizing: border-box; } #work-situation { width: 100%; height: 100%; background: url("../../img/constrDisplay/back-2.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; justify-content: space-between; flex-direction: column; } img { image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ } .layui-form-select dl { background-color: #144e49; } .layui-table-cell { line-height: 20px; word-break: break-all; } .layui-table-cell { height: auto !important; white-space: normal !important; padding: 5px 12px !important; } /* 图片样式 */ .layui-table img { max-width: 100%; max-height: 100px; display: block; margin: 0 auto; } body .my-skin.child-skin { background: url("../../img/video/child-back.png") no-repeat 0 0/100% 100% transparent; }