.components-live-prod-list{
  flex: 1;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  &.show{
    z-index: 101;
  }
  .modals-cancel {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .live-prod-box{
    // 标题
    .live-prod-title{
      font-size: 32rpx;
      font-weight: bold;
      padding: 0 24rpx;
      height: 93rpx;
      line-height: 93rpx;
    }
    // 商品列表
    .scroll-box{
      /* #ifndef APP-PLUS */
      box-sizing: border-box;
      padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
      /* #endif */
    
      .prod-item{
        width: 750rpx;
        display: flex;
        flex-direction: row;
        padding: 0 24rpx;
        margin-bottom: 16rpx;
        .prod-img-box{
          width: 220rpx;
          height: 220rpx;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          overflow: hidden;
          position: relative;
          .prod-inx{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 99999999;
            width: 46rpx;
            height: 28rpx;
            font-size: 20rpx;
            background: rgba(0,0,0,0.5);
            border-radius: 12rpx 0 12rpx 0;
            color: #fff;
            text-align: center;
          }
          .prod-live{
            width: 220rpx;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 100;
            background: rgba(255,53,54,0.8);
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 36rpx;
            line-height: 36rpx;
            border-radius: 0 0 12rpx 12rpx;
            overflow: hidden;
            .live-icon{
              width: 12rpx;
              height: 16rpx;
              margin-right: 8rpx;
            }
            .live-txt{
              font-size: 20rpx;
              color: #fff;
            }
          }
        }
        .prod-info{
          flex: 1;
          display: flex;
          margin-left: 24rpx;
          position: relative;
          overflow: hidden;
          .prod-name-sign-box{
            flex-wrap: wrap;
          }
          .prod-name-sign{
            margin-bottom: 8rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            /* #ifndef APP-PLUS */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-break: anywhere;
            /* #endif */
            /* #ifdef APP-PLUS */
            display: flex;
            // height: 56rpx;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;
            /* #endif */
            .sign{
              padding: 0 5rpx;
              height: 28rpx;
              line-height: 28rpx;
              background: linear-gradient(106deg, #FF3636, #F81A1A);
              color: #ffffff;
              font-size: 20rpx;
              margin-right: 10rpx;
              /* #ifndef APP-PLUS-NVUE */
              white-space: nowrap;
              /* #endif */
            }
            .name{
              flex: 1;
              font-size: 28rpx;
              color: #333333;
              lines: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              font-family: PingFang SC-Regular, PingFang SC;
            }
          }
          // 活动标识
          .act-box{
            display: flex;
            flex-direction: row;
            align-items: center;
            overflow: hidden;
            .act-item{
              // #ifdef APP-PLUS
              max-width: 144rpx;
              // #endif
              lines: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              padding: 0 8rpx;
              line-height: 28rpx;
              font-size: 20rpx;
              /* #ifndef APP-PLUS-NVUE */
              white-space: nowrap;
              /* #endif */
              border: 1px solid #F81A1A;
              color: #F81A1A;
              margin-left: 8rpx;
              flex-wrap: nowrap;
              &:first-child{
                margin-left: 0;
              }
            }
          }
          // 按钮及价格信息
          .prod-bar{
            /* #ifndef APP-PLUS */
            width: 100%;
            /* #endif */
            /* #ifdef APP-PLUS */
            width: 450rpx;
            /* #endif */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            position: absolute;
            bottom: 0;
            left: 0;
            .prod-pri{
              flex: 1;
              flex-direction: row;
              align-items: center;
              overflow: hidden;
              .small{
                font-size: 24rpx;
                color: #F81A1A;
              }
              .cur-pri{
                max-width: 150rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                /* #ifndef APP-PLUS */
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                line-break: anywhere;
                /* #endif */
                /* #ifdef APP-PLUS */
                flex-direction: row;
                /* #endif */
                align-items: flex-end;
                margin-right: 8rpx;

                &.cur-pri-w{
                  max-width: 300rpx;
                }
                
                .big{
                  font-size: 32rpx;
                  color: #F81A1A;
                }
              }
              .old-pri{
                width: 150rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 24rpx;
                text-decoration: line-through;
                color: #999;
              }
            }
            // 讲解按钮及抢购按钮
            .btn-box{
              height: 56rpx;
              line-height: 56rpx;
              padding: 0 20rpx;
              background: linear-gradient(90deg, #FF4225, #FF333A);
              border-radius: 60px;
              display: flex;
              flex-direction: row;
              align-items: center;
              .btn-end{
                width: 26rpx;
                height: 26rpx;
                margin-right: 8rpx;
              }
              .btn-play{
                width: 16rpx;
                height: 20rpx;
                margin-right: 12rpx;
              }
              .btn-txt{
                font-size: 28rpx;
                color: #ffffff;
              }
            }
          }
        }
      }
      .list-tips-box{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .empty-img{
          width: 200rpx;
          height: 200rpx;
          margin-top: 20rpx;
        }
        .empty-txt{
          font-size: 28rpx;
          margin-top: 18rpx;
          color: #999999;
        }
      }
    }
  }
}

