.body-box {
  height: 940px;
  .left-content, .rigth-content {
    width: 400px;
    height: 100%;
  }
  // 左边样式
  .left-content {
    .rank-wrapper {
      .rank-radio {
        margin-top: 15px;
      }
      .rank-list {
        margin-top: 15px;
      }
    }
    .data-wrapper {
      margin-top: 20px;
      height: 100%;
      .slider-process-wrapper {
        height: 40px;
        display: flex;
        padding: 30px 0 10px;
        margin: 10px 0;
        position: relative;
        align-items: center;
        i {
          display: inline-block;
          width: 30px;
          height: 30px;
        }
        .lade-icon {
          background: url('~@/assets/matchActivity/lade.png') no-repeat;
        }
        .fale-icon {
          background: url('~@/assets/matchActivity/fale.png') no-repeat;
        }
        .slider-process-content {
          height: 16px;
          padding: 2px;
          flex: 1;
          display: flex;
          align-items: center;
          background: rgba(255,255,255,0.19);
          border-radius: 10px;
          .num {
            position: absolute;
            top: 0;
          }
          .slider-process-left {
            height: 12px;
            width: 66.7%;
            background: #00ffff;
            border-radius: 10px;
            text-align: center;
          }
          .slider-process-right {
            height: 12px;
            width: 33.3%;
            background: #d241ef;
            border-radius: 10px;
            text-align: center;
          }
        }
      }
      .distribute-center-text {
        width: 190px;
        text-align: center;
        font-size: 12px;
      }
      .data-distribute {
        .line-0 {
          top: 30px;
        }
        .line-1 {
          top: 100px;
        }
        .line-2 {
          top: 152px;
        }
        .line-3 {
          bottom: 58px;
        }
        .line-4 {
          bottom: 14px;
        }
        .distribute-left-content {
          position: relative;
          .distribute-img {
            display: inline-block;
            height: 100%;
            width: 263px;
            background: url('~@/assets/matchActivity/distribute.png') 100% 100% no-repeat;
          }
          .distribute-process-item {
            position: absolute;
            left: 0;
          }
        }
        .distribute-right-content {
          font-size: 12px;
          width: 150px;
          position: relative;
          .distribute-data-item {
            position: absolute;
          }
        }
      }
    }
  }
  // 中间样式
  .middle {
    flex: 1;
    padding: 0 20px;
    .middle-top {
      height: 70px;
      .match-num-item {
        flex: 1;
        height: 100%;
        .match-icon {
          width: 66px;
          margin-right: 10px;
        }
        .text {
          height: 70px;
          min-width: 100px;
          font-size: 22px;
          font-family: PingFang SC, PingFang SC-Bold;
          margin-right: 10px;
          text-align: center;
          line-height: normal;
        }
        .number-content {
          width: 100%;
          height: 100%;
          flex: 1;
          .num {
            display: inline-block;
            font-size: 40px;
            font-family: DIN, DIN-Bold;
          }
          .unit {
            margin-left: 5px;
            font-size: 20px;
            font-family: PingFang SC, PingFang SC-Bold;
          }
        }
      }
      .total-num-icon {
        background: url('~@/assets/matchActivity/matchTotal.png') 100% 100% no-repeat;
      }
      .server-num-icon {
        background: url('~@/assets/matchActivity/matchServer.png') 100% 100% no-repeat;
      }
    }
    .middle-bottom {
      padding: 0 100px;
      .sign-title {
        text-align: center;
        margin: 10px 0;
        height: 40px;
        line-height: 40px;
        .sign-title-text {
          display: inline-block;
          width: 200px;
          text-shadow: 0px 0px 6px 0px rgba(172,241,255,0.70); 
          background: linear-gradient(90deg,rgba(8,94,236,0.00) 0%, rgba(8,94,236,0.00) 0%, rgba(8,94,236,0.49) 100%, rgba(8,94,236,0.25) 100%, rgba(8,94,236,0.00) 100%);
        }
      }
      .sign-in-wrapper {
        background: url('~@/assets/matchActivity/signInBg.png') 100% 100% no-repeat;
        background-position: bottom left;
        .sign-in-content {
          height: 100%;
          flex: 1;
          width: 100%;
          .img-label {
            flex: 1;
            margin: 100px 0 0 10px;
            .label-item {
              height: 80px;
              .color-block {
                display: inline-block;
                height: 20px;
                width: 20px;
              }
              .label-text {
                font-size: 18px;
                margin: 0 10px;
                flex: 1;
              }
              .label-unit {
                font-size: 28px;
                width: 60px;
              }
            }
          }
        }
      }
      .active-rank-list {
        margin-top: 10px;
      }
    }
  }
  // 右边样式
  .rigth-content {
    .rank-radio {
      margin: 10px 0;
    }
    .city-active-wrapper {
      margin-top: 20px;
      .rank-list {
        margin-top: 10px;
      }
    }
  }
}
