.wrap {
  width: 745px;
  height: 100%;
  border-radius: 40px;
  background: linear-gradient(
    180deg,
    rgba(27, 50, 89, 0.3),
    rgba(27, 50, 89, 0.3) 100%
  );
  padding: 25px 35px;
  .top {
    margin-bottom: 15px;
    .title {
      font-family: DingTalk JinBuTi;
      font-size: 40px;
      color: #e4edff;
    }
  }

  .cardSection {
    .left {
      width: 181px;
      height: 126px;
      border-radius: 10px;
      background: rgba(58, 126, 188, 0.2);
      text-align: center;
      padding-top: 15px;
      :global {
        .ant-statistic-content-value {
          background: linear-gradient(
            180deg,
            rgb(170, 255, 246),
            rgb(37, 187, 255)
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          font-weight: 700;
          line-height: normal;
          font-size: 50px;
          font-family: D-DIN;
        }
      }
      .unit {
        font-size: 20px;
        font-weight: 400;
        color: #bccee9;
        line-height: normal;
      }
      .name {
        font-size: 18px;
        font-weight: 700;
        color: #bccee9;
      }
    }
    .right {
      flex: 1;
      .card {
        height: 57px;
        background: rgba(58, 126, 188, 0.2);
        padding: 0 20px;
        border-radius: 10px;
        .name {
          font-size: 18px;
          font-weight: 700;
          color: #bccee9;
        }
        .unit {
          font-size: 20px;
          font-weight: 400;
          color: #bccee9;
        }
        :global {
          .ant-statistic-content-value {
            background: linear-gradient(
              180deg,
              rgb(170, 255, 246),
              rgb(37, 187, 255)
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
            line-height: normal;
            font-size: 30px;
            font-family: D-DIN;
          }
        }
      }
    }
  }

  .chartsSection {
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #add8ff;
      margin-bottom: 20px;
    }
  }

  .bottom {
    width: 677px;
    height: 104px;
    border-radius: 20px;
    background: rgba(58, 126, 188, 0.2);
    padding: 0 50px 0 23px;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #e4edff;
    }
    .unit {
      font-size: 20px;
      font-weight: 400;
      color: #bccee9;
    }
    .left {
      width: 50px;
      white-space: word-wrap;
      font-size: 22px;
      font-weight: 400;
      color: #fff;
      font-family: DingTalk JinBuTi;
    }
    .middle {
      flex: 1;
      .rateName {
        font-size: 18px;
        font-weight: 400;
        color: #D9D9D9;
        margin-right: 10px;
      }
      .num {
        font-size: 20px;
        font-weight: 700;
      }
    }
    :global {
      .ant-statistic-content-value {
        background: linear-gradient(
          180deg,
          rgb(170, 255, 246),
          rgb(37, 187, 255)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        line-height: normal;
        font-size: 30px;
        font-family: D-DIN;
      }
    }
  }
}
