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

%fixed {
  position: fixed;
  z-index: 500;
}

.shop-good {
  // 70 + 20
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  .top {
    padding: 0 20rpx;
    height: 90rpx;
    background: white;
  }
  .flex-content {
    display: flex;
  }
  .left {
    flex: none;
    top: 90rpx;
    width: 150rpx;
    height: 100%;
    background: #f5f5f5;
  }
  .right {
    flex: auto;
    height: 100%;
    overflow: hidden;
    background: white;
  }
  .top2 {
    background: white;
    width: 100%;
    height: 81rpx;
    border-bottom: 1rpx solid #eee;
    box-sizing: border-box;
  }
  .pick-cat2 {
    @extend %fixed;
    left: 150rpx;
    top: 169rpx;
    right: 0;
    bottom: 0;
    display: flex;
    flex-flow: column;
    .pick-cat2-top {
      flex: none;
      width: 100%;
      border-bottom: 1rpx solid #eee;
    }
    .pick-cat2-mask {
      flex: 100%;
      width: 100%;
      background: rgba(white, .5);
    }
  }
  .goods-wrapper {
    /* #ifndef H5 */
    height: calc(100vh - 170rpx);
    /* #endif */
    /* #ifdef H5 */
    height: calc(100vh - 370rpx);
    /* #endif */
    overflow: hidden;
    //position: relative;
  }
  .content {
    // position: relative;
    /* #ifndef H5 */
    height: calc(100vh - 170rpx);
    /* #endif */
    /* #ifdef H5 */
    height: calc(100vh - 370rpx);
    /* #endif */
    overflow: hidden;
    // -webkit-overflow-scrolling: touch;
    // scroll-behavior:smooth;
    top: -100rpx;
    // z-index: 1;
  }
  .scroll-view {
    padding: 0 20rpx;
    /* #ifndef H5 */
    height: calc(100vh - 160rpx);
    /* #endif */
    /* #ifdef H5 */
    height: calc(100vh - 360rpx);
    /* #endif */
    box-sizing: border-box;
    overflow-y: auto;
    //position: absolute;
    z-index: 2;
    transition: transform .1s linear;
    // -webkit-overflow-scrolling: touch;
    // scroll-behavior: smooth;
    background: white;
  }
  .release-bottom {
    height: 50rpx;
    font-size: 28rpx;
    color: $text3;
    text-align: center;
    // @extend %flex-center;
    // align-items: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: white;
  }
  .release-top {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    color: $text3;
    text-align: center;
  }
  .blank-div {
    height: 50vh;
  }
  // 没有商品
  .no-goods {
    padding-top: 10vh;
  }
}

/* #ifdef MP-KUAISHOU */
.btn-toShopCar {
  background-color: rgba(black, .6);
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  z-index: 10;
  @extend %flex-center;
}
.icon-shopcar {
  @extend %icon-shopcar-white;
  @extend %bg-no-repeat-center;
  width: 100rpx;
  height: 100rpx;
  background-size: 50rpx;
  border-radius: 50%;
}
.fixed-box1 {
  pointer-events: none; // 这里是重点，盒子可穿透操作
  width: 100vw;
  height: 90vh;
  position: fixed;
  top: 100rpx;
  left: 0;
  z-index: 100000;
}
.fixed-button {
    opacity: 1;
    // background: #ccc;
    border-radius: 100%;
  pointer-events: auto;
  // width: max-content;
  // height: auto;
    width: 120rpx;
    height: 120rpx;
  overflow: hidden;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 20rpx;
  // top: 85vh;
    .imger{
        width: 52px;
        height: 52px;
        overflow: none;
    }
}
/* #endif */