@import '@/assets/styles/variables.module.scss'; #container { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; .el-table { border: 1px solid $mainColor2; } .three { margin: 0 10px 10px 10px; } .topBox { margin: 5px; display: flex; justify-content: space-around; .Annualperformance { width: 50%; // background: yellow; display: flex; flex-flow: row wrap; // justify-content: center; .bag_z { width: 460px; height: 90px; // background: #3afff8; margin: 5px; display: flex; justify-content: space-around; align-items: center; .time, .defen { flex-direction: column; color: #fff; font-size: 18px; font-weight: 500; font-family: YouSheBiaoTiHei; } } .astic_border { background: url('@/assets/newImgs/HMScreen/aimage.png') no-repeat !important; background-size: 100% 100%; // border-bottom: 1px solid red; } } .achievements { width: 50%; display: flex; flex-flow: row wrap; // background: blue; .bag_a { width: 460px; height: 90px; background: #004565; margin: 5px; // display: flex; // justify-content: space-around; // align-items: center; border-radius: 6px; background-size: 100% 100% !important; .conttop { width: 98%; display: flex; height: 30px; justify-content: space-between; margin-top: 10px; // background: #3afff8; } .dfFlxa { margin-top: 15px; display: flex; justify-content: space-between; } .span { display: inline-flex; width: 27px; height: 12px; margin-left: 10px; background: url('@/assets/newImgs/HMScreen/bt_img.png') no-repeat; background-size: 100% 100%; } .name { color: #ffffff; font-family: YouSheBiaoTiHei; font-size: 19px; font-style: normal; font-weight: 500; margin: -1px 10px; } .total { color: #3afff8; font-family: PangMenZhengDao; font-size: 24px; font-style: normal; font-weight: 600; } .fz { color: #ffffff; font-family: Source Han Sans CN; font-size: 14px; margin-left: 15px; } } } } .top { height: calc(100% - 444px); margin: 10px; // margin: 5px; .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: #004565; font-size: 20px; font-weight: 700; } } .total { color: #3afff8; font-size: 32px; } .center { height: calc(100% - 45px); margin: 0px 10px; .astic { flex: 1; height: 100%; margin: 0 10px; display: flex; flex-direction: column; padding: 0 20px; background: #004565; border-radius: 4px; .cont { flex: 1; align-items: center; .span { display: inline-flex; width: 4px; height: 18px; flex-shrink: 0; border-radius: 2px; background: #0f69ff; } .name { color: #c6c6c6; font-family: Source Han Sans CN; font-size: 18px; font-style: normal; font-weight: 500; margin: -1px 10px; } .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: 28.8vh; width: 98%; background: #004565; .left { display: flex; background: #004565; padding: 0 20px; margin: 0 10px; overflow: hidden; .nnfzbz { position: relative; flex: 1; } .otherzb { max-width: 30vw; } .span { display: inline-flex; width: 27px; height: 12px; margin-left: 10px; background: url('@/assets/newImgs/HMScreen/bt_img.png') no-repeat; background-size: 100% 100%; } .tittle { color: #fff; font-size: 14px; font-style: normal; font-weight: 500; display: inline-block; margin: 0 10px; .racal { display: inline-block; width: 7px; height: 7px; margin-bottom: 1px; flex-shrink: 0; background: #3afff8; border-radius: 50%; } } .dbqk, .dbqkCenter { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 5px 0 -10px 0; .dffz { color: #fff; font-family: Source Han Sans CN; font-size: 14px; margin: 3px 0; } .dffzqk { color: #3afff8; opacity: 0.9; font-family: Source Han Sans CN; font-size: 14px; margin: 10px 0; } } } .right { padding: 15px 0 0 15px; } .flexClass { margin: 0 10px 0 0; } } .foot { overflow: hidden; display: flex; margin: 0 10px; .right, .right2 { width: 400px; } .left { flex: 1; } .left, .right, .right2 { background: #004565; padding: 0 10px; 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: 27px; height: 12px; // margin-left: 10px; background: url('@/assets/newImgs/HMScreen/bt_img.png') no-repeat; background-size: 100% 100%; } .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: 1px; flex-shrink: 0; background: #3afff8; border-radius: 50%; } .df { display: inline-block; width: 372px; text-align: center; span { color: #3afff8; } } .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 { .footTable { margin: 10px 0 0 10px; overflow: hidden; width: 500px; height: 240px; } } } } .flex { display: flex; } .flex_center { display: flex; align-items: center; justify-content: space-between; } .dashbord { height: 258px; 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 { // margin: auto; width: 70%; } :deep(.el-table .el-table__header-wrapper th) { background-color: #005cba !important; }