.page-live-room {
  justify-content: center;
  overflow: hidden;
  position: relative;
  /* #ifndef APP-PLUS-NVUE */
  box-sizing: border-box;
  /* #endif */
  /* #ifdef H5 */
  position: fixed;
  left: 0;
  top: 0;
  /* #endif */

  // 去除滚动条
  // #ifndef APP-PLUS-NVUE
  .barrage-box ::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		background: transparent;
		color: transparent;
		-webkit-appearance: none;
	}
  // #endif

  .bg-img{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }

  // 直播遮罩
  .live-mask{
    background: rgba(0,0,0,0.9);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    justify-content: center;
    align-items: center;
    .live-con{
      width: 400rpx;
      align-items: center;
      text-align: center;
      &.app{
        transform: translateY(-90rpx);
      }
      &.not-app{
        transform: translateY(-150rpx);
      }
      .live-title{
        font-size: 32rpx;
        color: #fff;
        margin-bottom: 40rpx;
      }
      .live-countdown{
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
      }
      .live-desc{
        font-size: 50rpx;
        color: #fff;
      }
    }
  }

  .fallback-btn{
    width: 22rpx;
    height: 22rpx;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    position: fixed;
    left: 34rpx;
    top: 44rpx;
    z-index: 100;
  }

  // 左上角直播信息
  .live-info-pop{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx;
    background: rgba(0,0,0,0.4);
    border-radius: 60rpx;
    position: fixed;
    left: 84rpx;
    top: 10rpx;
    z-index: 100;
    .shop-icon{
      width: 54rpx;
      height: 54rpx;
      border-radius: 54rpx;
      overflow: hidden;
    }
    .live-info{
      max-width: 125rpx;
      padding: 0 23rpx 0 15rpx;

      .shop-name{
        lines:1;
        overflow: hidden;
        /* #ifndef APP-PLUS-NVUE */
        white-space: nowrap;
        /* #endif */
        text-overflow: ellipsis;
        color: #fff;
        font-size: 26rpx;
      }
      .view-num{
        lines:1;
        overflow: hidden;
        /* #ifndef APP-PLUS-NVUE */
        white-space: nowrap;
        /* #endif */
        text-overflow: ellipsis;
        color: #CBC5C2;
        font-size: 20rpx;
      }
    }
    .follow-btn{
      font-size: 28rpx;
      padding: 8rpx 16rpx;
      background-image:linear-gradient(151deg,#FF5252,#F82020);
      color: #fff;
      border-radius: 30rpx;
      /* #ifndef APP-PLUS-NVUE */
      white-space: nowrap;
      /* #endif */
    }
  }
  .bar-box{
    width: 750rpx;
    /* #ifndef APP-PLUS-NVUE */
    box-sizing: border-box;
    /* #endif */
    padding: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 101;
    .bar-info{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .barrage-box{
        width: 464rpx;
        height: 348rpx;
        border-radius: 24rpx;
        .bgc-img{
          background-image: linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 34rpx);
        }
        .chat-area-line{
          width: 464rpx;
          margin-bottom: 8rpx;
          &.fl-d-row{
            flex-direction: row;
          }
          .msg-detail {
            padding: 6rpx 16rpx;
            border-radius: 24rpx;
            line-height: 42rpx;
            background-color: rgba(0,0,0,0.3);
            flex-direction: row;  
            flex-wrap: wrap;
            .sys-notice{
              color: #666666;
              font-size: 28rpx;
            }
            .username {
              color: #FFB74B;
              font-size: 28rpx;
            }
            
            .gap{
              margin-right: 10rpx;
            }
          
            .content {
              font-size: 28rpx;
              color: #ffffff;
            }
          }
        }
      }
      .explain-prod-pop{
        width: 224rpx;
        border-radius: 8rpx;
        border: 2rpx solid #ffffff;
        background-color: #ffffff;
        position: relative;
        transform: scale(0);
        opacity: 0;
        transition-duration: .3s;
        &.show{
          transform: scale(1);
          opacity: 1;
        }
        .top-flag{
          width: 220rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          top: 8rpx;
          left: 0;
          z-index: 100;
          .live{
            height: 28rpx;
            line-height: 28rpx;
            padding: 0 6rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            background: rgba(0,0,0,0.5);
            border-radius: 4rpx;
            margin-left: 8rpx;
            .living_icon{
              width: 12rpx;
              height: 16rpx;
              margin-right: 8rpx;
              font-size: 0;
            }
            .living_txt{
              font-size: 20rpx;
              color: #ffffff;
            }
          }
          .close{
            width: 19rpx;
            height: 19rpx;
            margin-right: 14rpx;
          }
          
        }
        .prod-img{
          width: 220rpx;
          height: 220rpx;
          overflow: hidden;
          border-radius: 8rpx;
        }
        .prod-name{
          font-size: 20rpx;
          color: #000;
          padding: 8rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          /* #ifdef APP-PLUS */
          lines:2;
          /* #endif */
          /* #ifndef APP-PLUS-NVUE */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-break: anywhere;
          /* #endif */
        }
        .btn-box{
          width: 220rpx;
          height: 46rpx;
          line-height: 46rpx;
          /* #ifndef APP-PLUS-NVUE */
          box-sizing: border-box;
          /* #endif */
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          background: linear-gradient(149deg, #FE3A26, #F81A1A);
          border-radius: 6rpx;
          position: absolute;
          bottom: 4rpx;
          .price-con{
            flex: 1;
            display: flex;
            align-items: center;
            flex-direction: row;
            padding: 0 10rpx;
            overflow: hidden;
            .sign{
              font-weight: 400;
              color: #ffffff;
              font-size: 20rpx;
            }
            .txt{
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              lines:1;
              font-weight: 400;
              color: #ffffff;
              font-size: 28rpx;
            }
          }
          .btn-txt{
            width: 74rpx;
            height: 46rpx;
            line-height: 46rpx;
            font-size: 28rpx;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            border-radius: 16px 0 0 0;
            background-image: linear-gradient(to right, rgba(255,255,255,0.35), rgba(217,217,217,0));
            // background-image: linear-gradient(144deg, #fff, #000);
            font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
          }
        }
      }
    }
    // 输入框及更多商品
    .bar-con{
      display: flex;
      flex-direction: row;
      margin-top: 20rpx;
      .bar-inp{
        flex: 1;
        background: rgba(0,0,0,0.3);
        border-radius: 50px;
        .inp-class{
          padding: 0 26rpx;
          height: 78rpx;
          line-height: 78rpx;
          color: #fff;
          font-size: 28rpx;
        }
      }
      .more-prod-btn{
        width: 78rpx;
        height: 78rpx;
        margin-left: 48rpx;
      }
    }
  }
  // 防止键盘弹起时遮挡输入框
  .inp-box{
    width: 750rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .inp-con{
      flex: 1;
      background: rgba(0,0,0,0.3);
      border-radius: 50px;
      .inp-class{
        padding: 0 26rpx;
        height: 78rpx;
        line-height: 78rpx;
        color: #fff;
        font-size: 28rpx;
      }
    }
    .send-btn{
      padding: 0 32rpx;
      height: 68rpx;
      line-height: 68rpx;
      color: #fff;
      font-size: 28rpx;
      border-radius: 68rpx;
      margin-left: 24rpx;
      background: linear-gradient(149deg, #FE3A26, #F81A1A);
    }
  }
    /* #ifdef H5 */
    .play-icon{
      position: absolute;
      transform: translate(-50%,-50%);
      width: 150rpx;
      height: 150rpx;
      top: 50%;
      left: 50%;
      z-index: 10;
    }
    /* #endif */
}
