@keyframes showCard {
  0% {
    transform: translate3d(0, 0, -2400rpx) scale(0) rotateY(-720deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0);
  }
}
.popup-fudai-cards {
  text-align: center;
  color: #ffffff;
  .fudai-title {
    display: flex;
    margin: 0 auto;
    text-align: center;
    flex-direction: column;
    align-items: center;
    .fudai-title-text {
      font-family: ysbth, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB,
        Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei,
        WenQuanYi Micro Hei, sans-serif;
      font-size: 48rpx;
      background: linear-gradient(to right, #de7a58, #e31c66);
      -webkit-background-clip: text;
      color: transparent;
      display: inline-block;
    }
    .fudai-title-cd {
      box-sizing: border-box;
      padding: 0 36rpx;
      height: 52rpx;
      line-height: 48rpx;
      border-radius: 54rpx 54rpx 54rpx 54rpx;
      opacity: 1;
      border: 2rpx solid #4efbff;
      font-size: 30rpx;
      font-family: ysbth;
      color: #4efbff;
      margin-top: 12rpx;
      .fudai-title-time {
        margin-left: 36rpx;
      }
    }
  }
  .fudai-cards {
    margin-top: 14rpx;
    display: flex;
    height: 760rpx;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    perspective: 1200rpx;
    transform-style: preserve-3d;
    padding-bottom: 46rpx;
    overflow-y: auto;
    overflow-x: hidden;
    .card-item {
      box-sizing: border-box;
      width: 560rpx;
      height: 760rpx;
      background: no-repeat center top;
      background-size: 100% auto;
      padding: 132rpx 98rpx 0;
      position: relative;
      animation: showCard 1s ease-in-out both;

      &.checked {
        &::before {
          content: "";
          position: absolute;
          width: 71%;
          height: 50%;
          background: no-repeat center top;
          background-size: 100% auto;
          left: 50%;
          top: 45%;
          transform: translate(-50%, 0);
          z-index: 0;
        }
        &::after {
          content: "";
          position: absolute;
          width: 93rpx;
          height: 98rpx;
          background: url(@/assets/detail/card-checked.png) no-repeat center;
          background-size: contain;
          right: 82rpx;
          top: 82rpx;
          z-index: 10;
        }

        &.card-item-SP {
          &::before {
            background-image: url(@/assets/detail/card-checked-SP.png);
          }
        }
        &.card-item-SSR {
          &::before {
            background-image: url(@/assets/detail/card-checked-SSR.png);
            top: 50%;
          }
        }
        &.card-item-SR {
          &::before {
            background-image: url(@/assets/detail/card-checked-SR.png);
          }
        }
        &.card-item-N {
          &::before {
            background-image: url(@/assets/detail/card-checked-N.png);
          }
        }
        &.card-item-R {
          &::before {
            background-image: url(@/assets/detail/card-checked-R.png);
          }
        }
      }

      &.card-item-SP {
        background-image: url(@/assets/detail/card-SP.png);
        .label {
          width: 72rpx;
        }
      }
      &.card-item-SSR {
        background-image: url(@/assets/detail/card-SSR.png);
        .label {
          width: 112rpx;
        }
      }
      &.card-item-SR {
        background-image: url(@/assets/detail/card-SR.png);
        .label {
          width: 74rpx;
        }
      }
      &.card-item-N {
        background-image: url(@/assets/detail/card-N.png);
        .label {
          width: 38rpx;
        }
      }
      &.card-item-R {
        background-image: url(@/assets/detail/card-R.png);
        .label {
          width: 36rpx;
        }
      }
      &:nth-child(1) {
        animation-delay: 0;
      }
      &:nth-child(2) {
        animation-delay: 0.1s;
      }
      &:nth-child(3) {
        animation-delay: 0.2s;
      }
      &:nth-child(4) {
        animation-delay: 0.3s;
      }
      &:nth-child(5) {
        animation-delay: 0.4s;
      }
      &:nth-child(6) {
        animation-delay: 0.5s;
      }
      &:nth-child(7) {
        animation-delay: 0.6s;
      }
      &:nth-child(8) {
        animation-delay: 0.7s;
      }
      &:nth-child(9) {
        animation-delay: 0.8s;
      }
      &:nth-child(10) {
        animation-delay: 0.9s;
      }
      .label {
        position: absolute;
        left: 112rpx;
        top: 116rpx;
        height: 36rpx;
        z-index: 10;
      }
      .label-text {
        font-size: 68rpx;
        font-family: ysbth;
        color: #4efbff;
        line-height: 80rpx;
        position: absolute;
        top: 96rpx;
        left: 110rpx;
        z-index: 10;
      }
      .sku-num {
        font-size: 52rpx;
        font-family: ysbth;
        color: #4efbff;
        line-height: 70rpx;
        -webkit-text-stroke: 2rpx #1a3c48;
        text-stroke: 2rpx #1a3c48;
        position: absolute;
        top: 440rpx;
        right: 130rpx;
        z-index: 10;
        .big {
          font-size: 60rpx;
        }
      }
      .sku-img {
        position: relative;
        width: 364rpx;
        height: 364rpx;
        display: block;
        margin: 0 auto;
        z-index: 9;
      }
      .sku-name {
        position: relative;
        display: block;
        margin: 24rpx auto 0;
        width: 336rpx;
        height: 112rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #ffffff;
        line-height: 56rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        z-index: 9;
      }
      .sku-price {
        position: relative;
        margin-top: 70rpx;
        display: block;
        width: 100%;
        text-align: center;
        height: 56rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 56rpx;
        z-index: 9;
      }
      &.card-item-small {
        width: 280rpx;
        height: 380rpx;
        padding: 66rpx 49rpx 0;
        margin: 0 -22rpx;
        &.card-item-SP {
          .label {
            width: 36rpx;
          }
        }
        &.card-item-SSR {
          .label {
            width: 56rpx;
          }
        }
        &.card-item-SR {
          .label {
            width: 37rpx;
          }
        }
        &.card-item-N {
          .label {
            width: 19rpx;
          }
        }
        &.card-item-R {
          .label {
            width: 18rpx;
          }
        }
        &.checked {
          &::after {
            width: 42rpx;
            height: 42rpx;
            right: 40rpx;
            top: 41rpx;
          }
        }
        .label {
          left: 56rpx;
          top: 58rpx;
          height: 18rpx;
        }
        .label-text {
          font-size: 34rpx;
          line-height: 40rpx;
          top: 48rpx;
          left: 55rpx;
        }
        .sku-num {
          font-size: 36rpx;
          line-height: 35rpx;
          top: 220rpx;
          right: 65rpx;
          .big {
            font-size: 44rpx;
          }
        }
        .sku-img {
          width: 182rpx;
          height: 182rpx;
        }
        .sku-name {
          margin: 12rpx auto 0;
          width: 168rpx;
          height: 56rpx;
          font-size: 20rpx;
          font-weight: 600;
          line-height: 28rpx;
        }
        .sku-price {
          margin-top: 36rpx;
          height: 28rpx;
          font-size: 20rpx;
          font-weight: 500;
          line-height: 28rpx;
        }
      }
    }
  }
  .fudai-tips {
    font-size: 24rpx;
    font-weight: 500;
    line-height: 34rpx;
    margin-top: 40rpx;
    .img {
      display: inline-block;
      border-radius: 100%;
      width: 32rpx;
      height: 32rpx;
      margin: 0 4rpx;
      vertical-align: middle;
    }
    .text {
      display: inline;
    }
  }
  .fudai-btns {
    margin-top: 52rpx;
    display: flex;
    justify-content: center;
    .fudai-btn {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: url(@/assets/detail/card-btn.png) no-repeat center;
      background-size: contain;
      font-weight: 500;
      width: 222rpx;
      height: 80rpx;
      font-size: 32rpx;
      margin: 0 38rpx;
      color: #292d3b;
      border-radius: 0;
      overflow: hidden;

      &::after {
        display: none;
      }
      &.fudai-btn-border {
        background-image: url(@/assets/detail/card-btn-2.png);
        color: #4efbff;
      }
      .btntext-1 {
        font-size: 32rpx;
        line-height: 1;
      }
      .btntext-2 {
        font-size: 24rpx;
        line-height: 1;
        margin-top: 4rpx;
      }
    }
  }
}
