#jiXIaoKaoHe { display: flex; flex-direction: column; width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding-left: 20px; background: #011430; .center, .three { margin: 10px 0; } .top { height: 8.6vh; .astic { flex: 1; height: 100%; justify-content: space-around; align-items: center; margin: 0 5px; padding: 0 10px; border-radius: 6px; background-size: 100% 100% !important; } .astic_border { border-bottom: 3px solid #108ee9; } .flexClass { margin: 0 10px 0 0; flex: 0 0 auto; width: 15%; justify-content: center; } .time, .defen { flex-direction: column; color: #fff; font-size: 18px; font-weight: 500; } .khtime { margin-top: 5px; color: #fff; font-size: 14px; font-weight: 400; } .year_one { color: #fff; font-size: 20px; font-weight: 700; } } .total { color: #0F69FF; font-size: 32px; } .center { height: 12vh; .astic { flex: 1; height: 100%; margin: 0 10px; display: flex; flex-direction: column; padding: 0 3px; border-radius: 4px; justify-content: space-around; .cont { flex: 1; align-items: center; background-size: 100% 100%; .span { display: inline-flex; width: 4px; height: 18px; flex-shrink: 0; border-radius: 2px; background: #0F69FF; } .name { color: #fff; font-family: Source Han Sans CN; font-size: 18px; font-style: normal; font-weight: 500; margin: -1px 37px; } .total { color: #0F69FF; font-family: PangMenZhengDao; font-size: 24px; font-style: normal; font-weight: 600; } .fz { color: #fff; font-family: Source Han Sans CN; font-size: 14px; } } .top { display: flex; height: 30px; justify-content: space-between; } } .flexClass { margin: 0 10px 0 0; } } .three { height: 32.8vh; width: 100%; ::-webkit-scrollbar { width: 0; height: 8px; border-radius: 2px } ; .left { display: flex; padding: 0 30px; margin: 0 10px; .nnfzbz { position: relative; flex: 1; } .otherzb { max-width: 30vw; } .span { display: inline-flex; width: 4px; height: 18px; flex-shrink: 0; border-radius: 2px; background: #0F69FF; } .tittle { color: #fff; font-size: 14px; font-style: normal; font-weight: 500; display: inline-block; margin: 0 10px; // background: red; .racal { display: inline-block; width: 7px; height: 7px; margin-bottom: 4px; flex-shrink: 0; background: #4285F4; border-radius: 50%; } } .dbqk, .dbqkCenter { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 10px 0; .dffz { color: #fff; font-family: Source Han Sans CN; font-size: 14px; margin: 3px 0; } .dffzqk { color: #30DC7F; opacity: 0.9; font-family: Source Han Sans CN; font-size: 14px; margin: -7px 0 23px 0; } } } .right { padding: 15px 0 0 15px; } .flexClass { margin: 0 10px 0 0; } } .foot { height: 28.9vh; overflow: hidden; display: flex; margin-bottom: -10px; .left, .right { flex: 1; padding: 0 30px; margin-right: 10px; .bzqk { width: 52px; height: 20px; display: inline-block; float: right; stroke-width: 1px; text-align: center; font-size: 14px; } .dw { color: #fff; font-family: Source Han Sans CN; font-size: 14px; margin-top: 5px; } .span { display: inline-flex; width: 4px; height: 18px; flex-shrink: 0; border-radius: 2px; background: #0F69FF; } .tittle { color: #fff; font-family: Source Han Sans CN; font-size: 16px; font-style: normal; font-weight: 500; display: inline-block; margin: 0 10px; .racal { display: inline-block; width: 7px; height: 7px; margin-bottom: 3px; flex-shrink: 0; background: #4285F4; border-radius: 50%; } .df { display: inline-block; width: 372px; text-align: right; span { color: #30DC7F; } } .gs { color: #fff; font-family: Source Han Sans CN; font-size: 12px; margin-left: 3px; } } .tittle_foot { flex-direction: row; width: 95%; justify-content: space-between; } } .flexClass { margin: 0 10px 0 0; } .left { flex: 0 0 41.8vw; .footTable { height: 100%; margin: 15px -22px 0 20px; overflow-y: scroll el-table { width: 100%; padding: 0; margin: 0; } } } } } .flex { display: flex; } .flex_center { display: flex; align-items: center; justify-content: space-between; } .dashbord { height: 218px; border-right: 1.5px dashed #4285F4; position: absolute; top: 40px; left: 5px; } .jsgcgl { display: flex; flex-direction: column; align-items: center; position: relative; } .dfFlx{ display: flex; justify-content: space-between; } .progress{ width:82%; } .ccjx{ width: 99.8%;height:40px; background-image: url('bt1.png'); background-size: 100% 100%; line-height: 40px; text-indent: 2.4%; font-size: 16px; font-weight: bold; } .zjjx{ background-image: url('bt1.png'); background-size: 100% 100%; font-weight: bold; }