section { height: 100%; width: calc((100% - 975px) / 2); display: flex; flex-direction: column; justify-content: space-between; } section>.site_1, section>.site_2 { height: calc((100% - 40px) / 3); width: 100%; } section>.site_2 { background-image: url(../image/Slice\ 6.png); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; position: relative; } section>.bg28 { background-image: url(../image/Slice\ 28.png); } section>.bg17 { background-image: url(../image/Slice\ 17.png); } .site_2>.site_label { width: 200px; height: 30px; text-align: center; line-height: 30px; position: relative; top: 0; left: 50%; transform: translateX(-50%); color: #00FFFF; font-size: .2rem; background-image: url(../image/Slice\ 5.png); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .site_2>.site_main { width: 100%; height: calc(100% - 30px); padding: 16px 20px; overflow: hidden; } #project_app section>.site_2 { background-image: url(../image/img1/04.png); } #project_app section>.site_3 { background-image: url(../image/Slice\ 13.png); } #project_app section>.site_2>.site_label { background-image: none; height: 26px; line-height: 26px; font-size: 14px; } .default-img { background-position: center; background-repeat: no-repeat; background-size: 100%; } /* !人员统计 */ .rytj { display: flex; flex-direction: row; justify-content: space-around; } .rytj>.box { display: flex; width: 257px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .rytj>.box>.label { height: 84px; width: 84px; background-image: url(../image/img1/Slice\ 41.png); text-align: center; line-height: 84px; color: #00FFFF; font-size: 22px; } .rytj>.box>span { font-size: 16px; color: #63CAFF; padding: 4px 0 18px; } .rytj>.box>.number { width: 100%; line-height: 52px; text-align: center; height: 52px; background-image: url(../image/img1/Slice\ 40.png); color: #00FFFF; font-size: 20px; } /* !安全教育培训人数数据 */ .jy { display: flex; flex-direction: row; background-image: url(../image/img1/Slice\ 42.png), url(../image/img1/Slice\ 42.png); background-position: 33% center, 66% center; background-repeat: no-repeat; background-size: .0125rem 80%; } .jy>.box { height: 100%; width: 33%; /* border: .0125rem solid red; */ padding-left: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .jy>.box>span { color: #63CAFF; font-size: 18px; } .jy>.box>p { display: flex; flex-direction: row; justify-content: flex-start; } .jy>.box>p>span { margin-top: 20px; text-align: center; line-height: 56px; font-size: 40px; color: #ffffff; height: 56px; width: 40px; background-color: #113776; margin-right: 6px; font-family: '微软雅黑'; } /* !隐患排查治理数据 */ .yh { display: flex; flex-direction: row; align-items: center; justify-content: center; } .yh>.box { height: 100%; width: 50%; display: flex; flex-direction: row } .yh>.box>.dot { width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .yh>.box>.dot>.item { height: 70px; width: 210px; position: relative; background-image: url(../image/img1/Slice\ 43.png); } .yh>.box>.dot>.item>.label { position: absolute; top: -10px; left: 0; right: 0; font-size: 16px; height: 20px; width: 100%; line-height: 20px; text-align: center; color: #1AB1FF; } .yh>.box>.dot>.item>.value { color: #12CDA2; font-size: 26px; text-align: center; height: 70px; width: 100%; line-height: 70px; ; } /* 风险分级 */ .fx { display: flex; flex-direction: row; } .fx>.box { height: 100%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; /* flex-wrap: wrap; */ } .fx>.box>div { display: flex; flex-direction: row; justify-content: center; align-items: center; } .fx>.box>div>.dot { height: 84px; width: 150px; background: rgba(3, 39, 109, 0.1); border: .0125rem solid #0A2E6E; display: flex; flex-direction: column; justify-content: center; align-items: center; } .fx>.box>div>.dot>p { font-size: .175rem; font-weight: 400; color: #63CAFF; } .fx>.box>div>.dot>span { font-size: .3rem; font-weight: 400; color: #E9E931; } /* HSE检查待处理事项 */ .db { overflow: hidden; overflow-y: scroll !important; } .db::-webkit-scrollbar{ display: none; } .db>.scroll_y>.row>span{ margin-right: .125rem; display: inline-block; } .db>.scroll_y>.row { font-size: .175rem; font-family: Microsoft YaHei; font-weight: 400; color: #63CAFF; padding: .125rem 0; } .db>.scroll_y>.row:nth-child(2n-1){ background: #10457B; } /* 质量培训 */ #project_app main .site_4>.site_2{ height: 100%; background-image: url(../image/img1/04.png); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; background-color: #1466A5; } #project_app main .site_4>.site_2>.site_label{ background-image: none; } .site_4{ height: calc((100% - 40px) / 3); display: flex; flex-direction: row; justify-content: space-between; } .zhl { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 0 .375rem .375rem .5rem; } .site_2 .zl_z{ display: flex; flex-direction: column; } .zhl>.label { color: #00D1EB; font-size: .175rem; padding: .075rem .25rem; background-position: center; background-repeat: no-repeat; background-size: 100%; } .zhl:nth-child(1)>.label { background-image: url('../image/Slice\ 29.png'); } .zhl:nth-child(2)>.label { background-image: url('../image/Slice\ 31.png'); } .zhl>.value { color: #62CAFE; font-size: .3rem; text-align: center; padding: .1rem 0; width: 1.875rem; background-image: url(../image/Slice\ 30.png); background-position: center; background-repeat: no-repeat; background-size: 100%; } /* 计量器具数据 */ .jl { height: 100%; width: 100%; display: flex; flex-direction: row; justify-content: space-between; background-image: url(../image/Slice\ 32.png); background-repeat: no-repeat; background-position: center; background-size: .0125rem 90%; } .jl>.jlbox { height: 100%; width: 45%; display: flex; flex-direction: column; justify-content: center; } .jl>.jlbox>.label { width: 100%; font-size: .175rem; padding: .1875rem 0; color: #EFEFF1; } .jl>.jlbox>.value { padding: .1875rem 0; text-align: right; width: 100%; font-size: .275rem; color: #ffffff; border-bottom: .0125rem solid #183870; } .jl>.jlbox>.value>span { color: #4C9CCE; padding-left: .125rem; } /* 质量控制点数据 */ .kzd{ display: flex; flex-direction: row; justify-content: space-around; } .kzd>.box{ width: 1.75rem; height: 2.75rem; background-image: url(../image/img1/Slice\ 46.png); } .kzd>.box>.label{ height: 1.7rem; width: 100%; font-size: .275rem; color: #ffffff; text-align: center; line-height: 1.7rem; } .kzd>.box>.number{ margin-top: .25rem; font-size: .375rem; color: #05FCE2; text-align: center; line-height: .75rem; height: .75rem; } .bg47{ background-image: url(../image//img1/Slice\ 47.png) !important; } /* 周计划 */ .zjh{ display: flex; flex-direction: row; } .zjh>div{ height: 100%; width: 25%; } img{ height: 100%; width: 100%; } /* 物资管理 */ .table { width: 100%; height: 100%; overflow: hidden; } .table>.thead { width: 100%; background-color: #0D3367; font-size: .175rem; font-weight: 400; color: #A4E1FF; } .table>.tbody { width: 100%; height: calc(100% - .35rem); overflow: hidden; overflow-y: scroll; } .table>.tbody::-webkit-scrollbar { display: none; } .table>.thead>.row { display: flex; flex-direction: row; padding: .075rem; } .table>.thead>.row>span { width: 25%; text-align: center; } .table>.tbody>.row { display: flex; flex-direction: row; padding: .125rem .1rem; } .table>.tbody>.row:nth-child(2n){ background-color: rgba(16, 69, 123, .2); } .table>.tbody>.row>span { width: 25%; text-align: center; font-size: .175rem; font-weight: 400; color: #A4E1FF; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 设备管理 */ .jcz{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .jcz>.box{ height: 3.25rem; width: 2.1875rem; background-image: url(../image/img1/Slice\ 51.png); } .jcz>.box>.label{ text-align: center; margin-top: .875rem; font-size: .2rem; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; } .jcz>.box>.number{ margin-top: .625rem; text-align: center; font-size: .5rem; font-family: Microsoft YaHei; font-weight: 400; color: #12CDA2; }