.body-box {
  .left-wrapper, .right-wrapper {
    width: 460px;
  }
  .left-wrapper {
    .instructor-type-wrapper {
      .instructor-type-top-wrapper {
        margin-bottom: 10px;
      }
      .instructor-type-content {
        height: 250px;
      }
    }
    .instructor-rank-wrapper {
      margin-top: 10px;
      .instructor-rank-radio-wrapper {
        margin: 10px 0;
      }
    }
    .lesson-time-wrapper {
      margin-top: 10px;
      .lesson-time-radio-wrapper {
        margin: 10px 0;
      }
    }
  }
  .middle {
    flex: 1;
    padding: 0 20px;
    .structor-date-wrapper {
      height: 145px;
      padding: 0 26px;
      .date-item-content {
        flex: 1;
        background: url('~@/assets/boxBorder.png') 100% 100% no-repeat;
        padding: 20px;
        &:nth-child(2) {
          margin: 0 10px;
        }
        .date-top-con {
          .icon-content {
            display: flex;
            width: 39px;
            height: 39px;
            line-height: 39px;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            border: 1px solid rgba(255,255,255,0.24);
            i {
              width: 24px;
              height: 24px;
              background-size: 100% 100%;
              &.document {
                background-image: url('~@/assets/sportFacilities/order_icon.png') ;
              }
              &.lesson {
                background-image: url('~@/assets/sportFacilities/serve_icon.png');
              }
              &.guide {
                background-image: url('~@/assets/sportFacilities/guide.png');
              }
            }
          }
          .date--top-text {
            flex: 1;
            margin-left: 20px;
            .num {
              color: #d4d739;
              font-size: 20px;
              .unit {
                margin-left: 5px;
                color: rgba(255,255,255,0.70);
                font-size: 12px;
              }
            }
            .title {
              font-size: 14px;
            }
          }
        }
        .date-bottom-con {
          .bottom-item {
            flex: 1;
            text-align: center;
            line-height: 15px;
            .tip {
              color: rgba(255,255,255,0.50);
              font-size: 14px;
              margin-top: 5px;
            }
          }
        }
      }
    }
    .structor-process-wrapper {
      .wrapper-desc {
        margin: 10px 0;
        text-align: center;
        line-height: 34px;
        background-image: url('~@/assets/contentTop/contentTopNoAngle.png');
        background-size: 100% 100%;
      }
      .user-process-content {
        flex: 1;
        padding: 0 10px;
        .user-process-left {
          width: 285px;
        }
        .user-process-center {
          position: relative;
          flex: 1;
          display: flex;
          align-items: center;
          .siteNum {
            position: absolute;
            text-align: center;
            width: 100%;
            top: 100px;
            word-spacing: -25px;
            .num {
              font-size: 96px;
              line-height: 110px;
            }
            .unit {
              font-size: 40px;
            }
            .desc {
              font-size: 24px;
            }
          }
        }
        .age-process-cont {
          height: 240px;
        }
        .sex-process-cont {
          flex: 1;
          margin-top: 20px;
          > div {
            flex: 1;
            padding: 10px 0;
          }
          .sex-box {
            border: 2px solid;
            border-radius: 40px;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 5px;
            .icon {
              display: inline-block;
              width: 63px;
              height: 63px;
              border: 2px solid;
              border-radius: 50%;
              background-position: center center;
              background-repeat: no-repeat;
            }
            .process-date {
              margin-left: 15px;
              display: flex;
              align-items: center;
              .sex-text {
                font-size: 22px;
                margin-right: 10px;
                color: #FFFFFF;
              }
              .num {
                font-size: 32px;
              }
            }
          }
          .fale-box {
            border-color: rgba(0,255,255,0.40);
            background: rgba(0,255,255,0.20);
            .icon {
              background-color: linear-gradient(180deg,#034364, #02527b 100%);
              border-color: rgba(0,255,255,0.40);
              background-image: url('~@/assets/socialInstructor/peopleMale.png');
            }
            .num {
              color: #00ffff;
            }
          }
          .woman-box {
            background: rgba(255,59,164,0.20);
            border-color: rgba(255,59,164,0.40);
            .icon {
              border-color: rgba(255,59,164,0.40);
              background-image: url('~@/assets/socialInstructor/peopleWoman.png');
              background-color: linear-gradient(180deg,#69043a, #980855 100%);
            }
            .num {
              color: #ff3ba4;
            }
          }
        }
      }
    }
    .train-wrapper {
      flex: 1;
      margin-top: 10px;
      .train-top-wrapper {
        margin-bottom: 10px;
      }
      .train-content {
        flex: 1;
        padding: 20px 20px 12px;
        background: linear-gradient(178deg,rgba(8,94,236,0.72) 0%, rgba(8,94,236,0.72) 0%, rgba(8,94,236,0.00) 100%);
        border: 1px solid rgba(255,255,255,0.40);
        .train-box {
          height: 100%;
          .train-left {
            width: 200px;
            height: 100%;
            margin-right: 10px;
            .train-item {
              flex: 1;
              align-items: center;
              padding: 10px;
              background: rgba(255,255,255,0.10);
              border: 1px solid rgba(255,255,255,0.23);
              &:first-child {
                margin-bottom: 20px;
              }
              .icon-box {
                width: 45px;
                height: 45px;
                border: 1px solid rgba(255,255,255,0.30);
                border-radius: 2px;
                margin-right: 10px;
                &.icon-online {
                  background: url('~@/assets/socialInstructor/online.png') center center no-repeat;
                }
                &.icon-offline {
                  background: url('~@/assets/socialInstructor/offline.png') center center no-repeat;
                }
              }
              .train-text {
                .text {
                  font-size: 16px;
                }
                .num {
                  font-size: 24px;
                  color: #00ffff;
                  margin: 5px 0;
                }
                .status {
                  font-size: 12px;
                  .icon-shang {
                    font-size: 12px;
                    color: rgb(241, 174, 41);
                  }
                  .icon-xiangxia3 {
                    font-size: 12px;
                    color: rgb(241, 174, 41);
                  }
                }
              }
            }
          }
          .train-right {
            flex: 1;
          }
        }
      }
    }
  }
  .right-wrapper {
    .rank-wrapper {
      .rank-content {
        margin-top: 10px;
      }
    }
    .perform-wrapper {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      .perform-top-wrapper {
        display: flex;
        width: 100%;
        height: 100px;
        img {
          width: 75px;
          height: 75px;
          margin-right: 20px;
        }
        .perform-text-content {
          flex: 1;
          width: 50%;
          padding: 0 1%;
          display: flex;
          flex-direction: column;
          .perform-title {
            margin: 0 0 15px 0;
            padding: 0 0 5px 0;
            line-height: 36px;
            font-size: 20px;
            color: #fff;
            border-bottom: 1px solid;
            border-image: linear-gradient(90deg, rgba(68, 137, 253, 0.80), rgba(68, 137, 253, 0.00) 100%) 2 2;
            position: relative;
            &::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 65px;
							height: 4px;
							background-color: #4489FD;
						}
          }
          .perform-num {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 32px;
            .perform-unit {
              font-size: 20px;
              margin-left: 5px;
            }
          }
        }
      }
      .perform-content {
        margin-top: 10px;
        .list {
					width: 100%;
					.listTitle {
						width: 100%;
						height: 50px;
						padding-right: 10px;
						display: flex;
						align-items: center;
						background: rgba(19, 35, 83, 0.87);
						border: 1px solid;
						border-image: linear-gradient(105deg, rgba(0, 99, 255, 0.00) 0%, #9ab6e3 100%, rgba(4, 75, 189, 0.00) 100%) 1 1;

						.titleItem:first-child {
							width: 150px;
						}

						.titleItem:last-child {
							flex: 1;
							padding-right: 20px;
						}
					}
					.titleItem {
						text-align: center;
						line-height: 40px;
					}
					.listTable {
						padding-right: 20px;
						margin-top: 10px;
						height: 150px;
						display: flex;
						flex-direction: column;
						overflow-y: scroll;
						>div {
							display: flex;
							align-items: center;
							.titleItem:first-child {
								width: 150px;
							}
							.titleItem:last-child {
								flex: 1;
								display: flex;
								align-items: center;
								span{
									width:80px;
								}
							}
						}
					}
					.listTable::-webkit-scrollbar {
						width: 3px;
					}
					.listTable::-webkit-scrollbar-thumb {
						background-color: #85ACE9;
					}
					.listTable::-webkit-scrollbar-track {
						background-color: #020927;
					}
				}
      }
    }
  }
}