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

.shop-car {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

     /* #ifdef MP-ALIPAY */
    //  overflow: hidden;
    border:1rpx solid #eee;
     /* #endif */
  .no-shopcar {
    /* #ifndef MP-WEIXIN || MP-ALIPAY || APP */
    margin-top: 20vh;
    /* #endif */
    @extend %flex-center;
    flex-flow: column;
    .btn-toGoods {
      @extend %btn-linearGradient;
      margin-top: 40rpx;
    }
  }

  .shop-car-bottom-bar {
    position: fixed;
    /* #ifndef H5 */
    bottom: 0;
    /* #endif */

    /* #ifdef H5 */
    // bottom: 100rpx;
    /* #endif */

    left: 0;
    right: 0;
    box-sizing: border-box;
    border-top: 1rpx solid $border1;
    @extend %bgwhite;
    z-index: 10;
    .all-pick {
      @extend %flex-between;
      @extend %pdlr;
      height: 70rpx;
      .pick-count {
        font-size: 30rpx;
        color: $text1;
      }
    }
    .total {
      @extend %flex-between;
      padding-left: 20rpx;
    }
    .price {
      @extend %flex-center;
    }
    .btn-clear-shopCar {
      @extend %flex-left;
      .icon-delete {
        @extend %bg-no-repeat-center;
        @extend %icon-clearAll;
        @extend %bg-size-100;
        width: 30rpx;
        height: 30rpx;
        
      }
      .icon-text {
        font-size: 28rpx;
        color: $text3;
      }
    }
    .total-price {
      font-size: 28rpx;
      @extend %flex-center;
      margin-right: 20rpx;
      .total-text {
        margin-right: 10rpx;
        color: $text1;
      }
      .total-val {
        font-size: 40rpx;
        color: $danger;
        font-weight: 600;
        display: flex;
        flex-direction: column;
      }
    }
    .preferential {
      color: #ccc;
      font-size: 22rpx;
    }
    .btn-payment {
      @extend %btn-linearGradient;
      height: 80rpx;
      font-size: 32rpx;
      width: 240rpx;
      border-radius: 0;
    }
    .btn-disabled {
      opacity: 0.5;
    }
    .waybillSLG {
      font-size: 26rpx;
      @extend %flex-center;
      color: $maincolor;
      height: 40rpx;
      
    }
  }
  .goods-content {
    // @extend %bgwhite;
    background-color: #eee;
  }
  // .note{
  //   width: 100vw !important;
  //   position: fixed;
  //   top:160rpx;
  //   left:0;
  //   z-index: 999;
  //   border-bottom: 2rpx solid rgba(207, 205, 205, 0.5);
  // }
}

// 推荐商品
.recommend{
  margin-top: 60rpx;
  // border: 1rpx solid red;
  &-line{
    // border: 1rpx solid red;
    color: #d4d4d4;
  }
  &-top{
    padding:10rpx;
    display: flex;
    justify-content: center;
    // border:1rpx solid red;
  }
  &-icon{
    margin:0 20rpx;
    display: flex;
  }
  &-img{
    margin-top:4rpx;
    // img{
    //   width:20px;
    //   height:20px;
    // }
  }
  .good{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding:10rpx;
    margin-top:20rpx;
    background-color: #f4f4f4;

    // display: flex;
    // flex-direction: column;
    // flex-wrap:wrap;
    // align-content: space-around;
    // height:5026px;
    // background-color: #f4f4f4;
  }
  .good-item {
    width:340rpx;
    margin-bottom: 10rpx;
    border-radius: 40rpx;
  }
}
.placeholder-box{
  height: 154rpx;
  background-color: #eee;
}




// .car-group {
//   // margin-top:270rpx;
//   // margin-top: 200rpx;
//   margin-top: 160rpx;
//   overflow-y: auto;
//   // margin-bottom: 200rpx;
//   // margin-bottom: 100rpx;
 
//   @extend %pdlr;
//   .store-info {
//     @extend %flex-between;
//     font-size: 28rpx;
//     color: $text1;
//     height: 100rpx;
//     border-bottom: 1rpx solid $border2;
//     // padding-left: 100rpx;
//   }
//   .store-name {
//     flex: 1;
//     @extend %oneline;
//   }
//   .store-mobile {
//     flex: none;
//   }
//   .skuName-cell {
//     @extend %flex-left;
//     border-bottom: 1rpx solid $border2;
//   }
//   .flex-auto {
//     @extend %flex-auto;
//   }
//   .skuName-cell:last-child{
//     margin-bottom: 194rpx;
//   }
// }

.good-cell-big {
  @extend %pd20;
  @extend %bgwhite;
  box-sizing: border-box;
  box-shadow: 0 0 4rpx rgba($border1, 1);
  border-radius: 10rpx;
  .good-img {
    width: 300rpx;
    height: 300rpx;
    .good-img-size{
        width: 100%;
        height: 100%;
    }
  }
  .good-name {
    font-size: 28rpx;
    margin-top: 20rpx;
    color: $text1;
    // height: 4em;
    overflow: hidden;
    text-align: justify;
    line-height: 1.2;
    
  }
  .good-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btn-wait{
    flex: 1;
    text-align: right;
  }
  .btn-self{
    color: #fff;
    background-color: rgba(78, 179, 49, 0.6);
  }
  .countTime-wrap{
    height: 17rpx;
    width: 100%;
    margin-bottom: 5rpx;
  }
  .countTime{
    color: #E6A23C;
    font-size: 26rpx;
  }
  .stock-and-waitPirce{
    display: flex;
  }
  .price {
    display: flex;
    align-items: baseline;
    .unit{
      font-size:28rpx;
      color:$strong;
    }
  }
  .ori-price {
    font-size: 20rpx;
    color: $gray;
    margin-left: 10rpx;
    text-decoration: line-through;
    &:before {
      content: "￥";
    }
  }
  .act-type-wrapper {
    height: 20rpx;
    overflow: hidden;
  }
  .act-type {
    @extend %act-type-text;
  }
  .check-detail{
    font-size:28rpx;
    color:rgba(78, 179, 49, 0.6);
  }
  .handle-shopcar {
    margin-top: 20rpx;
    height: 50rpx;
  }
  .add-cart{
    height: 60rpx;
    line-height: 60rpx;
    font-size:30rpx;
    background:#81be4e;
    color:#fff;
    text-align:center;
    border-radius:20rpx;
    margin-top:10rpx;
  }
}
// #ifdef MP-KUAISHOU
.viewDetail{
  // border:1px solid red;
  text-align: center;
  background: rgba(78, 179, 49, 0.8);
  border-radius: 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  color:#fff;
}
// #endif

.red {
  flex: 1;
  color: #fe6263;
  margin: 10rpx 0;
  font-size: 28rpx;
}
.gray {
  flex: 1;
  color: #999;
  margin: 10rpx 0;
  font-size: 28rpx;
}
.priceStyle{
  color: rgb(149, 209,131);
  font-size: 25rpx;
  margin-bottom:10rpx;
}
.priceColor{
  color:$strong;
}


// .good-price {
//     font-size: 32rpx;
//     color: $strong;
//     font-weight: 500;
//     // &:before {
//     //   content: "￥";
//     //   font-size: 28rpx;
//     // }
    
//     &-font{
//       font-size: 38rpx;
//       &:after{
//         // content: ".";
//         font-size: 28rpx;
//         padding:0 5rpx;
//     }
//     }
// }