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: 21.25%; background: url(../../img/alarmMge/select.png) no-repeat 0 0 / 100% 100%; height: 99%; box-sizing: border-box; } #right-box,#right-table-box,#no-data-box { width: 75.85%; height: 99%; /*background: url(../../img/alarmMge/dataAnalysis.png) no-repeat 0 0 / 100% 100%;*/ /*box-sizing: border-box;*/ } #echarts-box { width: 100%; height: 100%; } #report-box { width: 35%; height: 90%; overflow-y: auto; } #one-echarts { width: 100%; height: 100%; } .ul-box { width: 100%; height: 100%; padding: 10% 0 0 0; box-sizing: border-box; } .ul-box li { width: 96%; margin: 0 2%; height: 40px; margin-bottom: 10px; font-size: 16px; cursor: pointer; } .check { background: url(../../img/alarmMge/bright.png) no-repeat 0 0 / 100% 100%; } .nocheck { background: url(../../img/alarmMge/dark.png) no-repeat 0 0 / 100% 100%; } #report-box table { width: 96%; height: 100%; margin: 0 2%; table-layout: fixed; text-align: center; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; } #report-box table tr td { width: 50%; height: 50px; font-size: 16px; border: 1px solid #34b9aa; } #report-box table thead{ height: 100px; } #report-box table tbody{ height: calc(100% - 100px); overflow-y: auto; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track-piece { background-color: #0d2225; -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:vertical { height: 5px; background-color: #0d2225; -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: #0d2225; -webkit-border-radius: 6px; }