@import '@/assets/bundle.scss';

.banner-tamplate1 {
  min-height: 100vh;
  .content {
    background:#f4f4f4;
  }
  .content-item {}
  .img-wrapper {
    .small-banner {
      width: 750rpx;
      // height: auto;
    }
  }
  .skus-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .sku-cell {
      flex: 1;
      width: 230rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      border: 1rpx solid $border2;
      padding: 20rpx 10rpx;
      margin: 20rpx 10rpx;
      background:#fff;
      border-radius: 15rpx;
    }
    .sku-img {
      position: relative;
    }
    .img {
      width: 210rpx;
      height: 210rpx;
    }
    .no-sale {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 200rpx;
      height: 200rpx;
      @extend %no-sale;
      @extend %bg-no-repeat-center;
      @extend %bg-size-100;
    }
    .sku-name {
      font-size: 28rpx;
      // color: $text2;
      margin-top: 10rpx;
      line-height: 1.2;
      text-align: justify;
      height: 3rem;
    }
  }
  .good-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .price {
    display: flex;
    align-items: baseline;
  }
  .cur-price {
    font-size: 28rpx;
    color: $strong;
    font-weight: 700;;
    &:before {
      content: "￥";
      font-size: 24rpx;
    }
  }
  .ori-price {
    font-size: 20rpx;
    color: $gray;
    margin-left: 10rpx;
    text-decoration: line-through;
    &:before {
      content: "￥";
    }
  }
  .act-type-wrapper {
    height: 20rpx;
    overflow: hidden;
  }
  .act-type {
    @extend %act-type-text;
  }
  .act-icon {
    margin-top: 4rpx;
    @extend %flex-center;
  }
}