.official-account {
  width: 100vw;
  height: 100vh;
  background-color: #f3f4f8;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: #f6f7fa;
  background-image: url("../../assets/official-account/background.png");
  background-repeat: no-repeat;
  background-size: 100% auto;

  .wrap {
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    padding: 0 32rpx 80rpx;

    .title-content {
      display: flex;
      flex-direction: column;
      padding: 0 16rpx;

      .follow-content {
        display: flex;
        align-items: center;

        .checkbox {
          width: 40rpx;
          height: 40rpx;
        }

        .text {
          margin-left: 8rpx;
          font-size: 30rpx;
          color: #fff;
        }
      }

      .get-services {
        margin: 8rpx 0 40rpx;
        font-size: 68rpx;
        font-weight: bold;
        color: #fff;
      }
    }

    .white-content {
      height: 1016rpx;
      border-radius: 40rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .qrCode {
        margin-top: 100rpx;
        width: 484rpx;
        height: 484rpx;
      }

      .text {
        margin-top: 32rpx;
        color: #14172f;
        font-size: 32rpx;
        font-weight: 600;
      }

      .line-content {
        margin-top: 40rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;

        &::before {
          content: "";
          background-color: #f6f7fa;
          position: absolute;
          top: 50%;
          width: 28rpx;
          transform: translate3d(-14rpx, -50%, 0);
          left: 0;
          height: 28rpx;
          border-radius: 50%;
        }

        &::after {
          content: "";
          background-color: #f6f7fa;
          position: absolute;
          top: 50%;
          width: 28rpx;
          transform: translate3d(14rpx, -50%, 0);
          right: 0;
          height: 28rpx;
          border-radius: 50%;
        }

        .line {
          width: 70%;
          height: 4rpx;
          background-image: linear-gradient(to right, #e4e6e7 50%, #fff 50%);
          background-size: 20rpx 2rpx;
          background-repeat: repeat-x;
        }
      }

      .tip-content {
        margin-top: 48rpx;

        .top-content {
          display: flex;
          align-items: center;

          .icon {
            width: 40rpx;
            height: 40rpx;
          }

          .tip-text {
            font-size: 32rpx;
            color: #505371;
            margin: 0 8rpx;
          }
        }

        .bonus-content {
          margin-top: 32rpx;
          display: flex;
          justify-content: center;

          .bonus-box {
            .bonus-item {
              margin-bottom: 24rpx;
              display: flex;
              align-items: center;

              .bonus-icon {
                margin-right: 4rpx;
                width: 28rpx;
                height: 28rpx;
              }

              .bonus-text {
                font-size: 24rpx;
                color: #6a7491;
              }
            }
          }
        }
      }
    }
  }
}
