taro_chat_ai/src/moduleB/pages/comicActivity/index.less

.mine {
  padding: 48px 20px;
  // min-height: 100vh;
  background-color: #041129;

  .before-painting {
    padding: 0 20px;
  }

  .title {
    width: 100%;
    display: flex;
    justify-content: center;

    .title-img {
      width: 500px;
      height: 120px;
    }
  }

  .banner {
    position: relative;
    margin-top: 60px;

    .banner-content {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 730px;

      .content-img {
        width: 100%;
        height: 100%;
      }
      .album_swiper_video{
        width: 100%;
        height: 100%;
      }

      .delete {
        position: absolute;
        right: -20px;
        top: -20px;
        width: 40px;
        height: 40px;
      }
    }


    .banner-tips {
      margin-top: 20px;
      text-align: center;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FDFDFD;
      line-height: 40px;
    }
  }

  .step {
    margin-top: 60px;
    width: 100%;
    display: flex;
    justify-content: center;

    .step-img {
      width: 536px;
      height: 76px;
    }
  }

  .update {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .update-button-more{
      width: 206px;
      height: 94px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2C2C2C;
      border-radius: 46px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FDFDFD;
    }

    .update-button {
      width: 418px;
      height: 94px;
      background: linear-gradient(90deg, #0F83FE, #01FBCD);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      border-radius: 46px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FDFDFD;

    }

    .update-button:active {
      opacity: 0.5;
    }
  }

  .tip-img {
    margin-top: 54px;
    width: 100%;
    display: flex;
    justify-content: center;

    .ps-image {
      width: 566px;
      height: 194px;
    }
  }

  .after-painting {
    padding: 0 60px;

    .result-banner {
      position: relative;
      margin-top: 20px;

      .result-banner-content {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 440px;

        .result-content-img {
          width: 100%;
          min-height: 440px;
        }

        .delete {
          position: absolute;
          right: -20px;
          top: -20px;
          width: 40px;
          height: 40px;
        }
      }

      .banner-tips {
        margin-top: 20px;
        text-align: center;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FDFDFD;
        line-height: 40px;
      }
    }

    .after-tips {
      margin-top: 60px;
      text-align: center;
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
    }

    .result-update {
      margin-top: 40px;

      .result-recharge-button {
        background: linear-gradient(90deg, #C367DE, #3342FF);
        border-radius: 46px;
        width: 100%;
        height: 94px;
        display: flex;
        align-items: center;
        justify-content: center;

        .result-recharge-button-content {

          .result-recharge-button-top {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: bold;
            text-align: center;
            color: #FFFFFF;
            line-height: 40px;
          }

          .result-recharge-button-bottom {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            text-align: center;
            color: rgba(255, 255, 255, .7);
            line-height: 40px;
          }
        }

      }

      .result-update-button {
        margin-top: 38px;
        border-radius: 46px;
        width: 100%;
        height: 94px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FDFDFD;
        border: 2px solid #FFFFFF;

        .result-update-img {
          width: 52px;
          height: 52px;
          display: block;
          margin-right: 10px;
        }
      }

      .result-update-button:active {
        opacity: 0.5;
      }
    }
  }

  /* 定义动画 */
  @keyframes shrink {

    0%,
    100% {
      transform: translateY(0) scale(1);
    }

    50% {
      transform: translateY(0px) scale(0.95);
    }
  }

  /* 应用动画 */
  .update-active {
    animation: shrink 1.2s ease-in-out infinite;
  }
}