html, body { padding: 0; word-break: break-all; } section { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 15px 15px 0 15px; overflow: auto; box-sizing: border-box; } .layui-header{ line-height: 60px; font-size: 16px; } .layui-title{ position: absolute; left: 200px; right: 0; top: 0; height: 100%; color: #fff; padding: 0 15px; box-sizing: border-box; } #searchForm input { height: 30px; line-height: 28px; } #searchForm .layui-input-suffix, #searchForm .layui-input-prefix { line-height: 30px; padding: 0; } #addUserForm { padding: 15px 15px 0 15px; } #addUserForm .layui-form-item:last-child { margin-bottom: 0; } #addUserForm .layui-textarea { min-height: 80px; padding: 9px 10px; resize: none; } .layui-form-label { width: 140px; } .layui-input-block { margin-left: 170px; } .layui-btn-sm { line-height: 28px; } .layui-btn-xs { line-height: 20px; } .layui-btn-container { height: 30px; } .layui-layer-btn > a[class^=layui-layer-btn] { line-height: 28px; } .layui-table-page { margin-bottom: 0; } section.server-info { display: flex; } section.server-info .text-info, section.server-info .chart-info { flex: 1; } section.server-info .text-row { display: flex; font-size: 14px; line-height: 40px; } section.server-info .text-row .text-col { flex: 1; } section.server-info .text-row .text-col:first-child { color: #99a9bf; } section.server-info .chart-info { display: flex; flex-direction: column; } section.server-info .chart-info > .chart-traffic, section.server-info .chart-info > .chart-count { display: flex; justify-content: center; } section.server-info .chart-info > .chart-count { margin-top: 30px; } section.server-info .chart-info #trafficChart, section.server-info .chart-info #countChart { width: 400px; height: 250px; }