#jiXIaoKaoHe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding-left: 20px; // padding-top: 20px; background: #011430; // background: url(@/assets/images/Sponge_screen/jxkh/绩效管理bg2.png)no-repeat; .bg1 { height: 38px; line-height: 36px; width: 100%; background: url(@/assets/images/Sponge_screen/jxkh/标题-1.png) no-repeat; background-size: 100% 100%; } .bg { height: 38px; line-height: 38px; width: 98%; background: url(@/assets/images/Sponge_screen/jxkh/标题.png) no-repeat; background-size: 100% 100%; } .box-bottom { height: calc(100% - 38px); width: 100%; display: flex; } .general-title { position: relative; color: #A4BFD9; font-size: 18px; font-style: normal; font-weight: 500; display: inline-block; font-family: Source Han Sans CN-Medium, Source Han Sans CN; margin: 0 8px; .racal { display: inline-block; width: 7px; height: 7px; margin-left: 18px; margin-bottom: 4px; flex-shrink: 0; background: #4285F4; border-radius: 50%; } } .box-bottom-second { display: inline-block; // padding-top: 17px; // padding-left: 42px; .compliance { width: 52px; height: 20px; text-align: center; font-size: 12px; font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-weight: 400; color: #30DC7F; background: rgba(72, 227, 143, 0.12); border-radius: 10px 10px 10px 10px; opacity: 1; border: 1px solid #30DC7F; } .score { width: 62px; height: 42px; padding-top: 4px; font-size: 14px; font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-weight: 400; color: #A4BFD9; line-height: 16px; .score-num { font-size: 12px; color: #30DC7F; text-align: center; font-size: 400; font-family: Source Han Sans CN-Regular, Source Han Sans CN; } } } .general-title { position: relative; color: #A4BFD9; font-size: 18px; padding-top: 20px; font-style: normal; font-weight: 500; display: inline-block; font-family: Source Han Sans CN-Medium, Source Han Sans CN; margin: 0 10px; .racal { display: inline-block; width: 7px; height: 7px; margin-left: 18px; margin-bottom: 4px; flex-shrink: 0; background: #4285F4; border-radius: 50%; } } .flex5 { width: calc(100% / 9 * 5); .left-item { width: 18%; } } .flex1 { width: calc(100% / 10 * 2); .left-item { width: 100%; } } .flex3 { width: calc(100% / 10 * 3); .left-item { width: 33%; } } .jx { color: #FFF; font-size: 18px; padding-left: 41px; font-family: Source Han Sans CN-Bold, Source Han Sans CN; } #heard { display: flex; justify-content: space-around; align-items: center; padding-top: 20px; // width: 1000px; // height: 80px; // background: #ccc; .ndkh { display: flex; width: 286px; height: 80px; background: url(@/assets/images/Sponge_screen/jxkh/年度绩效考核得分.png) no-repeat; background-size: contain; margin-right: 20px; } .one0 { background: url(@/assets/images/Sponge_screen/jxkh/one.png)no-repeat !important; background-size: 100% 100%; } .one1 { background: url(@/assets/images/Sponge_screen/jxkh/two.png)no-repeat !important; background-size: 100% 100%; } .one2 { background: url(@/assets/images/Sponge_screen/jxkh/three.png)no-repeat !important; background-size: 100% 100%; } .one0click { background: url(@/assets/images/Sponge_screen/jxkh/one-click.png)no-repeat !important; background-size: 100% 100%; } .one1click { background: url(@/assets/images/Sponge_screen/jxkh/two-click.png)no-repeat !important; background-size: 100% 100%; } .one2click { background: url(@/assets/images/Sponge_screen/jxkh/three-click.png)no-repeat !important; background-size: 100% 100%; } .rqndkh { width: 508px; height: 80px; margin-right: 20px; background: url(@/assets/images/Sponge_screen/jxkh/2024.png)no-repeat; background-size: 100% 100%; } .rqndkhactives { background: url(@/assets/images/Sponge_screen/jxkh/2023.png)no-repeat !important; } } .time, .defen { color: #47A2FF; font-size: 14px; font-weight: 400; font-family: Source Han Sans CN-Regular; } .time { padding: 12px 65px 12px 194px; .year { flex-direction: column; color: #fff; font-size: 18px; font-weight: 500; font-family: Source Han Sans CN-Medium; } .khtime { padding-top: 7px; font-weight: 400; font-family: Source Han Sans CN-Regular, Source Han Sans CN; ; } } .defen { .total { padding-top: 7px; color: #fff; font-size: 32px; font-family: PangMenZhengDao-Regular, PangMenZhengDao; } .fenshu { font-size: 14px; padding-bottom: 12px; align-items: center; font-weight: 400; } } #center { display: flex; } .astic { flex: 1; margin-top: 20px; padding-right: 20px; // background-color: pink; .cont { position: relative; flex: 1; height: 38px; align-items: center; .fz { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 400; color: #47A2FF; font-family: Source Han Sans CN-Regular, Source Han Sans CN; .fz-num { margin-left: 8px; font-size: 24px; font-weight: 400; font-family: PangMenZhengDao-Regular, PangMenZhengDao; color: #FFF; } } } .jzt { justify-content: space-around; margin-top: 27px; font-size: 14px; color: #47A2FF; .jdt { display: flex; width: 306px; height: 8px; } } } #three { display: flex; width: 100%; height: 41%; padding-top: 20px; .left { width: 75%; .left-item { flex: 1; .one { width: 100%; height: 100%; padding-top: 10px; } .left-item-title { height: 27px; } } .dbqk{ width: 600px; display: flex; margin-left: 120px; justify-content: space-between; // background: red; } .left-item-echarts { flex-direction: column; display: flex; height: calc(100% - 37px); } } .zjjx { width: 24%; margin-left: 1%; .zjjx-body { height: calc(100% - 48px); padding: 30px 50px; font-size: 16px; font-family: Source Han Sans CN-Medium, Source Han Sans CN; font-weight: 500; color: #A4BFD9; } } } #foot { display: flex; .gljx { width: 1350px; } .jsgc-left { position: relative; color: #A4BFD9; font-size: 18px; font-style: normal; font-weight: 500; display: inline-block; font-family: Source Han Sans CN-Medium, Source Han Sans CN; margin: 0 10px; .racal { display: inline-block; width: 7px; height: 7px; margin-left: 18px; margin-bottom: 4px; flex-shrink: 0; background: #4285F4; border-radius: 50%; } .complete { width: 52px; height: 20px; font-size: 14px; color: #30DC7F; text-align: center; background: rgba(72, 227, 143, 0.12); border-radius: 10px 10px 10px 10px; opacity: 1; border: 1px solid #30DC7F; position: absolute; top: 0; right: -260px; } } .xms { display: flex; justify-content: space-around; .xms-num { font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-size: 12px; font-weight: 400; color: #A2C1EE; } .xms-score { padding-top: 4px; font-size: 14px; font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-weight: 400; color: #A4BFD9; line-height: 16px; padding-left: 90px; } } .left { flex: 76; .left-item { flex: 1; .one, .two, .three { width: 100%; height: 100%; padding-top: 10px; } .left-item-title { height: 27px; } .left-item-echarts { height: calc(100% - 37px); } } } .qzmyd { flex: 24; margin-left: 1%; } .zjjx { height: 216px; margin-top: 10px; margin-left: 58px; // width: 24%; // margin-left: 1%; .zjjx-body { height: calc(100% - 58px); font-size: 16px; font-family: Source Han Sans CN-Medium, Source Han Sans CN; font-weight: 500; color: #A4BFD9; } } } } ::v-deep .el-progress-bar__inner { border-radius: 0; } ::v-deep .el-progress-bar__outer { border-radius: 0; } ::v-deep .el-table__header { font-size: 16px; font-family: Source Han Sans CN-Medium, Source Han Sans CN; font-weight: 500; color: #A4BFD9; }