body.console { overflow: auto; } .echarts { width: 100%; height: 300px; padding: 0 15px; } .barChartPay { width: 100%; height: 300px; } .emptyCircle { width: 35%; height: 200px; float: left; margin-top: 32px; } #emptyCircleB { margin-top: 50px; } .partAll { background-color: #fff; } .partWrap { // overflow: auto; height: auto; background: #f5f5f5; min-width: 1185px; ul { padding: 0 40px; } .partLi { float: left; margin: 15px 0; width: 20%; height: 100px; overflow: hidden; .partIn { height: 100px; box-sizing: border-box; border-radius: 3px; padding: 10px 15px; border: 1px solid #E2E5EF; margin: 0 6px; } p { padding-bottom: 10px; color: #51649C; } .top { margin-bottom: 12px; } .btm { padding-bottom: 4px; img { float: left; width: 40px; } span { float: right; font-size: 28px; color: #51649C; } } } .title { font-size: 16px; font-weight: bold; border-bottom: 1px solid #E2E5EF; height: 36px; line-height: 36px; padding-left: 15px; } } .swiperWrap { width: 300px; border: 1px solid #ccc; } .grayLine { height: 10px; background-color: #f5f5f5; } .partTitleT { height: 44px; } .partTitle { position: absolute; top: 0; right: 0; width: 100%; box-sizing: border-box; background-color: #fff; z-index: 20; height: 44px; line-height: 44px; padding-left: 15px; font-size: 14px; font-weight: bold; letter-spacing: 1px; p { display: inline-block; font-size: 16px; span { font-size: 16px; } } .dateDetail { font-size: 12px; color: #777777; margin-right: 30px; font-weight: normal; } .monthYear { float: right; margin-right: 20px; border: 1px solid #5A8EEE; height: 28px; line-height: 28px; border-radius: 4px; overflow: hidden; cursor: pointer; margin-top: 7px; span { width: 48px; height: 28px; line-height: 28px; display: inline-block; text-align: center; font-weight: normal; } .mon { background-color: #5A8EEE; color: #fff; } .year { color: #5A8EEE; } } } .partTitles { height: 44px; line-height: 44px; padding-left: 10px; margin-right: 0; } .pubEchart { width: 100%; display: inline-block; margin-bottom: 10px; background-color: #fff; border-top: 10px solid #f5f5f5; } .pubEchartB { width: 55%; display: inline-block; margin-bottom: 10px; background-color: #fff; border-top: 10px solid #f5f5f5; border-left: 10px solid #f5f5f5; box-sizing: border-box; } .paymoney { box-sizing: border-box; position: relative; } .dept { box-sizing: border-box; } .circle { height: 304px; width: 100%; display: inline-block; background-color: #fff; box-sizing: border-box; position: relative; } .circleB { height: 350px; width: 45%; display: inline-block; background-color: #fff; box-sizing: border-box; position: relative; } .btmWrap { width: 100%; overflow: hidden; } .explainPan { width: 60%; float: right; position: absolute; top: 50%; right: 0; padding-right: 30px; box-sizing: border-box; max-height: 250px; overflow: auto; table { width: 100%; } .explainLi { height: 30px; line-height: 30px; span { display: inline-block; } .tip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: red; margin-right: 10px; } .deptName { color: #777; p { width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smp { width: 100px; } } .deptNum { color: #333; font-size: 16px; font-weight: bold; padding-right: 10px; width: 40px; text-align: right; } .percent { color: #777; width: 40px; } } } .part01 { width: 28%; background-color: #fff; border-right: 10px solid #f5f5f5; box-sizing: border-box; ul { padding: 40px 20px; border-bottom: 10px solid #f5f5f5; li { float: left; width: 33.33%; border-left: 3px solid #F2637B; height: 72px; box-sizing: border-box; padding-left: 12px; &.li02 { border-left: 3px solid #37CBCB; } &.li03 { border-left: 3px solid #FAD336; } } } .defect { background-color: #fff; height: 452px; overflow: hidden; .list { padding: 15px 5px; width: 100%; box-sizing: border-box; overflow: auto; height: 405px; } .thead { td { color: #51649C; } } .qtable { width: 100%; overflow: auto; } td { padding: 7px 10px; i { width: 17px; height: 17px; line-height: 17px; border-radius: 8px; background-color: #999; color: #fff; display: inline-block; text-align: center; font-size: 12px; } } tr { border-bottom: 1px solid #f5f5f5; box-sizing: border-box; } .td01 { width: 30px; } .td02 { } .td03 { width: 40px; } .td04 { width: 40px; } } } .part02{ border-right: 10px solid #f5f5f5; box-sizing: border-box; width: 39%; background-color: #fff; .bingli { padding: 20px; li { float: left; width: 23%; text-align: center; } .fst { // border-right: 1px solid #E2E5EF; box-sizing: border-box; width: 30%; } } .bingliLis { border-top: 1px solid #E2E5EF; padding: 20px 30px; p { text-align: center; font-weight: bold; font-size: 16px; padding-bottom: 2px; } } .panPartPub { width: 33.33%; height: 130px; float: left; position: relative; p { text-align: center; font-size: 12px; font-weight: normal; width: 100px; position: absolute; bottom: 0; left: 50%; margin-left: -50px; } .fen { width: 100px; height: 100px; position: absolute; left: 50%; margin-left: -50px; } } } .part03 { width: 33%; background-color: #fff; box-sizing: border-box; .barChartLine { box-sizing: border-box; width: 100%; height: 300px; } .barChartLineBox { border-bottom: 10px solid #f5f5f5; // width: 100%; padding-left: 15px; } } .partTitlePub { height: 44px; line-height: 44px; padding: 0 15px; box-sizing: border-box; border-bottom: 1px solid #E2E5EF; font-weight: bold; font-size: 16px; .name { float: left; font-size: 16px; } .personNum { float: right; color: #51649C; } } .numShow { font-size: 28px; display: inline-block; height: 36px; line-height: 40px; font-weight: bold; } .explainNum { margin-top: 8px; } .toggleSlide { cursor: pointer; position: absolute; right: 10px; top: 4px; p { width: 100px; height: 26px; line-height: 28px; border: 1px solid #E2E5EF; padding-right: 20px; padding-left: 10px; position: relative; font-size: 14px; border-radius: 4px; img { width: 10px; position: absolute; right: 10px; top: 12px; } } ul { display: none; background-color: #fff; position: absolute; top: 27px; right: 0; border: 1px solid #E2E5EF; z-index: 100; padding: 0; width: 130px; li { height: 30px; line-height: 30px; padding: 0 10px; &:hover { background-color: #EEF4FF; } } } }