html, body { width: 100%; height: 100%; margin: 0; padding: 0; color: #fff; font-family: 'Alibaba PuHuiTi R'; } .text-left { text-align: left; } .text-right { text-align: right; } #main-box { width: 100%; height: 100%; overflow: hidden; justify-content: space-evenly; } /* .layout { display: flex; align-items: center; justify-content: center; } */ .layout { display: flex; align-items: center; justify-content: start; box-sizing: border-box; } #left-box, #center-box, #right-box { height: 100%; } #center-box { width: 40%; position: relative; } .multiselect { position: absolute; top: 5%; right: 10%; display: flex; flex-direction: column; gap: 10px; padding: 15px; background: url("../image/Rectangle107.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; } .bid-pro-select { position: absolute; top: 5%; left: 55%; z-index: 100000; } #echarts-map { height: 100%; } #map { height: 100%; } .switch-btn { width: 15%; height: 5%; position: absolute; top: 5%; background: url("../image/Rectangle107.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; z-index: 9999; } .map-p { color: #000; font-weight: normal; margin-bottom: 10px; font-size: 16px; font-family: 'Alibaba PuHuiTi R'; } #left-box { padding-left: 15px; } #right-box { padding-right: 15px; } #left-box, #right-box { width: 30%; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } #pro-desc p { /*首行缩进*/ text-indent: 36px; /*字体间距*/ line-height: 36px; font-size: 16px; letter-spacing: 1px; } #engineering-statistic { box-sizing: border-box; width: 100%; height: 25%; background: url("../image/gctj.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; padding: 8% 3% 3% 3%; } #engineering-statistic-bg { box-sizing: border-box; height: 100%; background: url("../image/Group497.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; display: flex; } .engineering-statistic-item { display: flex; align-items: center; justify-content: center; width: 33.33%; height: 100%; flex-direction: column; } .engineering-statistic-item:first-of-type>div, .engineering-statistic-item:last-of-type>div { display: flex; height: 50%; width: 100%; align-items: center; } .engineering-statistic-item>div>div { width: 100%; } .engineering-statistic-item__left>p:first-of-type, .engineering-statistic-item__right>p:first-of-type { font-size: 14px; } .engineering-statistic-item__left>p:last-of-type, .engineering-statistic-item__right>p:last-of-type { font-size: 20px; } .engineering-statistic-item__left { padding-left: 15px; } .engineering-statistic-item__right { padding-right: 15px; } #quality-ranking { box-sizing: border-box; width: 100%; height: 28%; background: url("../image/sgzlpm.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; padding: 8% 3% 3% 3%; } #environment-analysis { box-sizing: border-box; width: 100%; height: 16%; background: url("../image/hjjcfx.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; padding: 10% 3% 4% 3%; display: flex; gap: 3%; } .environment-analysis-item { width: 33.33%; height: 100%; display: flex; } .environment-analysis-item>div:last-of-type { width: 25px; height: inherit; writing-mode: vertical-rl; text-orientation: mixed; display: flex; justify-content: center; } .environment-analysis-item>div:first-of-type { flex: 1; height: inherit; display: flex; flex-direction: column; justify-content: center; text-align: right; } .environment-analysis-item>div:first-of-type>p { line-height: 25px; font-size: 14px; text-align: left; padding-left: 55%; } #environment-analysis-1 { background: url("../image/kqzl.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; } #environment-analysis-2 { background: url("../image/zssp.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; } #environment-analysis-3 { background: url("../image/hcnd.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; } #device-status { box-sizing: border-box; width: 100%; height: 31%; background: url("../image/sbzt.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; justify-content: space-between; } /*右侧*/ #safety-analysis { box-sizing: border-box; width: 100%; height: 31%; background: url("../image/gcaqyhfx.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; justify-content: space-between; } #efficiency-analysis { box-sizing: border-box; width: 100%; height: 31%; background: url("../image/xlfx.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; justify-content: space-between; } #resource-rate { box-sizing: border-box; width: 100%; height: 17%; background: url("../image/zylyjnysy.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; display: flex; } .resource-rate-item { width: 33.33%; height: 100%; /*padding-top: 8%;*/ box-sizing: border-box; } #alarm-reminder { box-sizing: border-box; width: 100%; height: 21%; background: url("../image/gjtx.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; justify-content: space-between; } #device-status { padding-top: 8%; box-sizing: border-box; } .device-status-text { line-height: 20px; padding-left: 3%; } .device-status-text>p { display: inline-block; font-size: 16px; } #device-status-chart { height: calc(100% - 20px); } /*工程质量排名图标*/ .quality-ranking { padding-left: 30px !important; background-repeat: no-repeat; background-size: 24px 24px; /* 根据你的图标尺寸调整 */ background-position: left center; line-height: 1.5; /* 根据需要调整行高 */ } .quality-ranking-1 { background-image: url('../image/1.png'); /* 替换 'icon.png' 为你的图标文件路径 */ } .quality-ranking-2 { background-image: url('../image/2.png'); /* 替换 'icon.png' 为你的图标文件路径 */ } .quality-ranking-3 { background-image: url('../image/3.png'); /* 替换 'icon.png' 为你的图标文件路径 */ } .layui-form-select { width: 270px; } .layui-form-select .layui-input { color: #fff; background-color: #1b6b64; } .layui-form-selected dl { background-color: #1b6b64; } .layui-form-select dl dd.layui-this { background-color: transparent; } .layui-form-select dl dd:hover { color: #16b777; background-color: transparent; } .layui-form-select dl dd.layui-disabled { background-color: transparent; } input::-webkit-input-placeholder { color: rgb(153, 152, 152) !important; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: rgb(191, 191, 191) !important; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: rgb(191, 191, 191) !important; } input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgb(191, 191, 191) !important; } #quality-ranking-title,#alarm-reminder-title { width: 100%; height: 40px; margin-bottom: 10px; background-color: rgba(52, 231, 254, 0.1); color: #8BFFFF; } #alarm-reminder-title{ justify-content: space-around; } #quality-ranking-table { width: 100%; height: calc(100% - 50px); } #quality-ranking-title p:first-of-type { width: 10%; } #quality-ranking-title p:nth-of-type(2) { width: 35%; } #quality-ranking-title p:nth-of-type(3) { width: 25%; } #quality-ranking-title p:nth-of-type(4) { width: 15%; } #quality-ranking-title p:last-of-type { width: 15%; } #alarm-reminder-table { width: 100%; height: calc(100% - 50px); }