.page-combine-detail-list {
  width: 100%;
  height: calc(100vh - env(safe-area-inset-bottom));
  overflow: auto;
  background-color: #f2f3f7;

  .roll-area {
    max-height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
    overflow: auto;
    .placeholder-bar {
      height: 100rpx;
    }
  }

  .content-box {
    .single-prod {
      display: flex;
      align-items: center;
      padding: 30rpx;
      background-color: #FFF;
      border-bottom: 3rpx solid #f2f2f2;

      .prod-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        font-size: 0;
      }

      .text-box {
        flex: 1;
        margin-left: 20rpx;
        align-self: flex-start;
        position: relative;
        height: 160rpx;

        .name {
          max-height: 64rpx;
          line-height: 32rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-word;
        }

        .sku {
          margin-top: 10rpx;
          font-size: 20rpx;
          display: flex;
          align-items: center;

          .sku-text {
            color: #999;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            max-width: 70%;
            margin-right: 20rpx;
          }

          .activity-logo {
            margin-top: 4rpx;
            background: #fc1b35;
            color: #fff;
            padding: 4rpx 8rpx;
            border-radius: 6rpx;
            display: inline-block;
            white-space: nowrap;
            margin-right: 20rpx;
          }

          .activity-logo.pick-up {
            margin-right: 0;
          }
        }

        .price-box {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 4rpx;
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          line-height: 1;

          .count {
            color: #999;
            margin-right: 20rpx;
          }
        }
      }
    }
  }

  .bottom-box {
    background-color: #fff;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .number-box {
      padding-right: 20rpx;
      display: flex;

      .minus {
        background: #f2f2f2;
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 50%;
        position: relative;

        &::after {
          position: absolute;
          left: 50%;
          top: 45%;
          display: block;
          transform: translate(-50%, -50%);
          font-size: 26rpx;
          content: "-";
        }
      }

      .plus {
        background: #f2f2f2;
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 50%;
        position: relative;

        &::after {
          position: absolute;
          left: 50%;
          top: 45%;
          display: block;
          transform: translate(-50%, -50%);
          font-size: 28rpx;
          content: "+";
        }
      }

      .limit {
        opacity: 0.7;

        &::after {
          color: #ccc;
        }
      }

      .number {
        width: 70rpx;
        padding: 0 10rpx;
        text-align: center;
      }
    }
  }

  .bottom-bar {
    height: 100rpx;
    width: 100%;
    padding: 20rpx 30rpx 30rpx;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;

    .price-box {
      width: 200rpx;
      margin-right: 30rpx;

      .price {
        padding: 5rpx 0;
        font-weight: 900;

        .big-num {
          font-size: 32rpx;
        }

        .small-num {
          font-size: 24rpx;
        }
      }

      .title {
        font-weight: 550;
        font-size: 28rpx;
      }
    }

    .add-cart {
      background: linear-gradient(135deg, #ffc30d, #ffba0d 69%, #ffc30d);
    }

    .new-buy {
      background: linear-gradient(135deg, #ff1a49, #f1091d 69%, #fc1b35);
    }

    .btn-box {
      height: 70rpx;
      line-height: 70rpx;
      width: 210rpx;
      font-weight: 600;
      font-size: 26rpx;
      margin: 0 0 0 20rpx;
      text-align: center;
      border-radius: 70rpx;
      color: #FFF;
    }

  }
}
