page {
  background: linear-gradient(180deg, #f9f9f9 0%, #f9f9f9 100%);
}
.page {
  min-height: 100vh;
  position: relative;
  padding-bottom: 100rpx;
  .bg {
    background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%);
    height: 776rpx;
    border-radius: 0 0 100rpx 100rpx;
  }
  .page-container {
    position: absolute;
    left: 0;
    width: 100%;
    .badge {
      margin: 0 auto;
      display: block;
      width: 166rpx;
      height: 166rpx;
      border-radius: 50%;
    }
    .status {
      margin-top: 16rpx;
      font-size: 40rpx;
      color: #fff;
      font-weight: bold;
      text-align: center;
    }
    .tip {
      margin-top: 16rpx;
      font-size: 32rpx;
      color: #fff;
      text-align: center;
    }
    .price {
      margin: 10rpx auto 0;
      font-size: 56rpx;
      color: #f5ad1d;
      display: flex;
      justify-content: center;
      align-items: baseline;
      font-weight: bold;
      .sub {
        font-size: 36rpx;
        color: #484848;
      }
    }
    .container {
      position: relative;
      margin: 64rpx 40rpx 0;
      width: calc(100% - 80rpx);

      .c-content {
        padding: 40rpx;
        position: relative;
        top: 20rpx;
        left: 20rpx;
        width: calc(100% - 40rpx);
        background: #fff;
        box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);
        border-radius: 24rpx;
        box-sizing: border-box;
        .banner {
          width: 100%;
          height: 294rpx;
          border-radius: 24rpx;
        }
        .c-title {
          margin-top: 34rpx;
          font-size: 40rpx;
          color: #333333;
          line-height: 1.4;
          white-space: pre-line;
          font-weight: bold;
        }
        .date {
          margin-top: 16rpx;
          font-size: 32rpx;
          color: rgba(173, 172, 178, 1);
          .icon {
            margin-right: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
        .btn {
          margin-top: 64rpx;
          height: 88rpx;
          border-radius: 48rpx;
          text-align: center;
          font-size: 32rpx;
          color: rgba(185, 130, 255, 1);
          box-sizing: border-box;
          border: 1px solid rgba(185, 130, 255, 1);
          background-color: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          &.btn2 {
            margin-top: 32rpx;
            border: none;
            background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%);
            color: #fff;
          }
        }
      }
    }
    .footer {
      padding-top: 106rpx;
      .btn {
        margin: 0 auto 24rpx;
        width: 440rpx;
        height: 96rpx;
        background: #e04775;
        border-radius: 48rpx;
        line-height: 96rpx;
        text-align: center;
        font-size: 32rpx;
        color: #ffffff;
        box-sizing: border-box;
      }
      .btn1 {
        border: 2rpx solid #e04775;
        background-color: transparent;
        color: #e04775;
      }
      .btn2 {
        background-color: transparent;
        color: #e04775;
      }
    }
  }
}