html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #fff; font-family: 'Microsoft YaHei'; } .layout { display: flex; align-items: center; justify-content: start; box-sizing: border-box; } .model-title { width: 100%; height: 40px; } .model-title p:nth-child(1) { width: 14px; height: 8px; border: 1px solid #2F82FB; background-color: #2F82FB; border-radius: 14px 14px 0 0; -webkit-transform: rotate(90deg); margin: 2px 0 0 -3px; -webkit-border-radius: 14px 14px 0 0; -moz-border-radius: 14px 14px 0 0; -ms-border-radius: 14px 14px 0 0; -o-border-radius: 14px 14px 0 0; } .model-title p:nth-child(2), .model-title p:nth-child(3) { color: #262626; font-size: 18px; margin: 0 0 0 3px; } .content { width: 100%; height: calc(100% - 60px); display: flex; justify-content: space-between; align-items: center; } /*left-box 样式设置start*/ .left-box { width: 20%; height: 98%; padding: 0 1% 1% 1%; box-sizing: border-box; } .search-form { width: 100%; height: 48px; margin-bottom: 10px; } .date-box { width: 100%; height: calc(100% - 48px); display: flex; flex-direction: column; overflow-y: auto; padding: 0 2% 0 0; } .date-box p { width: 100%; height: 50px; font-size: 16px; color: #262626; margin-bottom: 10px; line-height: 50px; letter-spacing: 1px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid #bdbdbd; display: flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; } .date-box p:hover, .date-box p:focus { border: 1px solid rgb(47, 130, 251); color: rgb(47, 130, 251); box-sizing: border-box; } .p-checked { border: 1px solid rgb(47, 130, 251) !important; color: rgb(47, 130, 251) !important; } /*left-box 样式设置end*/ /*right-box 样式设置start*/ .right-box { width: 76%; height: 98%; padding: 0 1% 1% 1%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: start; align-items: center; } .btn-box { width: 100%; height: 48px; display: flex; justify-content: right; } .btn { width: 88px; height: 40px; cursor: pointer; font-size: 16px; color: #262626; } .daily-box { width: 84%; height: calc(100% - 48px); overflow-y: auto; box-sizing: border-box; margin-right: 14%; color: #262626; font-size: 18px; letter-spacing: 2px; font-family: SimSun; padding: 0% 7%; } .daily-title, .daily-date { width: 100%; height: 36px; line-height: 36px; font-size: 18.7px; letter-spacing: 2px; font-weight: bold; display: flex; align-items: center; justify-content: center; } hr { margin: 5px 0; border-bottom: 4px solid #ff0000 !important; } .module-title { width: 100%; font-weight: bold; text-indent: 36px; /*首行缩进*/ line-height: 36px; /*字体间距*/ } .module-content { width: 100%; text-indent: 36px; /*首行缩进*/ line-height: 36px; /*字体间距*/ } .general-voi-box { width: 95%; padding: 10px 2.5%; } .general-voi { width: 100%; table-layout: fixed; text-align: center; border-collapse: collapse; border-spacing: 1px; box-sizing: border-box; margin-bottom: 20px; } .general-voi tr td { height: 50px; box-sizing: border-box; border: 1px solid #262626; padding: 10px 20px; } .general-voi:last-child { margin-bottom: 0; } .data-table { width: 98%; margin: 0 1%; word-break: break-all; text-align: center; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; } .data-table tbody { display: block; } .data-table thead, .data-table tbody tr { display: table; width: 100%; table-layout: fixed; } .data-table tbody tr td, .data-table thead tr td { height: 48px; font-size: 18px; color: #262626; border: 1px solid #262626; } .data-table thead tr td, .data-table tbody tr td { border-bottom: 0; } .data-table tbody tr:last-of-type td { border-bottom: 1px solid #262626; } .one-cell tbody tr td, .one-cell thead tr td { width: 19%; } .one-cell thead tr td:nth-of-type(1), .one-cell tbody tr td:nth-of-type(1), .two-cell thead tr td:nth-of-type(1), .two-cell tbody tr td:nth-of-type(1), .three-cell thead tr td:nth-of-type(1), .three-cell tbody tr td:nth-of-type(1) { width: 5%; } .two-cell tbody tr td, .two-cell thead tr td { width: 15%; } .two-cell thead tr td:nth-of-type(2), .two-cell tbody tr td:nth-of-type(2) { width: 35%; } .three-cell tbody tr td, .three-cell thead tr td { width: 20%; } .three-cell thead tr td:nth-of-type(2), .three-cell tbody tr td:nth-of-type(2) { width: 55%; } .four-cell tbody tr td, .four-cell thead tr td { width: 20%; } .four-cell thead tr td:nth-of-type(2), .four-cell tbody tr td:nth-of-type(2) { width: 35%; } .voi-echarts-box { width: 95%; margin: 10px 2.5%; height: 400px; } #voi-echarts{ width: 920px; height: 400px; } .module-end { width: 80%; height: 40px; font-weight: bold; display: flex; align-content: center; justify-content: space-between; } .module-end p:first-child { text-indent: 36px; } /*right-box 样式设置start*/ .layui-form-item, .layui-inline { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; margin-bottom: 0; } .layui-form-item .layui-inline { margin-bottom: 0; margin-right: 0; } .layui-form-item .layui-input-inline { float: left; width: 160px; margin-right: 0; } .layui-input { color: #262626 !important; border: 1px solid #262626 !important; height: 32px; font-size: 16px; } .layui-input:hover { border: 1px solid #262626 !important; } .layui-input:focus { border: 1px solid #262626 !important; } .layui-form-label { font-size: 18px; color: #262626; } .layui-form-mid { margin-right: 0; } /*表格公共样式 end*/ /*滚动条样式start*/ ::-webkit-scrollbar { width: 30px; height: 30px; } ::-webkit-scrollbar-thumb:hover { background: #dadee8; cursor: pointer; } ::-webkit-scrollbar-thumb { border-radius: 14px; border-style: dashed; border-color: transparent; border-width: 10px; background-color: #dadee8; background-clip: padding-box; } ::-webkit-scrollbar-corner { background-color: transparent; } /*滚动条样式end*/