classroom-music-activation/miniprogram/pages/select-goods/index.less

/* pages/select-goods/index.wxss */
.container {
  position: relative;
  height: 100vh;
  width: 100%;
  background: #F5F6F7;
}

.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 376rpx;
  background: linear-gradient(180deg, #FDEC00 0%, #FAD400 100%);
  width: 100%;
}

.goods-section {
  .popup-container {
    // position: fixed;
    // bottom: 0;
    // left: 0;
    // right: 0;
    // z-index: 10;
    width: 100%;
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    // padding: 40rpx 0 0;
    box-sizing: border-box;
    // flex: 1;
    max-height: 86vh;

    .popup-scroll {
      overflow-x: hidden;
      overflow-y: scroll;
      border-radius: 32rpx 32rpx 0rpx 0rpx;
      flex: 1 auto;
    }

    .top-vip-img {
      width: 100%;
    }

    .goodsInfo {
      padding: 0 40rpx 48rpx;
    }
  }


  .product-section {
    display: flex;
    padding-bottom: 60rpx;

    .product-img {
      width: 160rpx;
      height: 160rpx;
      flex-shrink: 0;
      margin-right: 32rpx;
      border-radius: 6px;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .product-left {
      display: flex;
      align-items: flex-start;

      .currentPrice {
        font-weight: bold;
        color: #FE2451;
        font-family: DINAlternate, DINAlternate;

        .stuff {
          padding-right: 2rpx;
          font-size: 36rpx;
        }

        .priceZ {
          font-size: 60rpx;
        }

        .priceF {
          font-size: 36rpx;
        }
      }

      .originPrice {
        padding-left: 16rpx;
        font-size: 32rpx;
        color: #AAAAAA;
        line-height: 44rpx;
        text-decoration: line-through;
        padding-top: 32rpx;
      }
    }
  }

  .goodsInfo {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 90rpx;

    .desc {
      font-weight: 600;
      font-size: 30rpx;
      color: #000000;
      line-height: 40rpx;
      display: flex;
      align-items: center;

      .iconBefore {
        width: 18rpx;
        height: 28rpx;
        margin-right: 8rpx;
      }

      text {
        padding-left: 8rpx;
        font-size: 28rpx;
        color: #AAAAAA;
        line-height: 40rpx;
      }
    }

    .goodsList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .goodsItem {
      background: rgba(255, 255, 255, 0.7);
      border-radius: 12rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.7);
      padding: 10rpx;
      margin-right: 16rpx;
      font-weight: 600;
      font-size: 24rpx;
      color: #131415;
      position: relative;
      margin-top: 24rpx;
      display: flex;
      align-items: center;

      &.selected {
        border: 4rpx solid #FE4600;
      }

      &.nosale {
        background: #F4F4F5;
        color: #B1B1B1;
      }

      .goodImg {
        flex-shrink: 1;
        width: 64rpx;
        height: 64rpx;
        margin-right: 10rpx;
      }

      .infos {
        .name {
          line-height: 28rpx;
        }

        .price {
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          font-size: 24rpx;
          color: #FE4600;
        }
      }

      .nosale {
        position: absolute;
        top: -20rpx;
        right: -16rpx;
        width: 56rpx;
        height: 28rpx;
        display: block;
        z-index: 1;
      }
    }
  }



  button {
    width: 100%;
    line-height: 88rpx;
    background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%);
    border-radius: 44rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    padding-top: 0;
    padding-bottom: 0;
  }
}