/* 
.prod-items 类用于设置商品相关元素的样式
宽度占比为43%，背景颜色为白色，底部外边距为40rpx，并且使用了盒模型为 border-box（使元素的宽高包含内边距和边框）
*/
.prod-items {
  width: 43%;
  background: #fff;
  margin-bottom: 40rpx;
  box-sizing: border-box;
  /* 
 .hot-imagecont 类用于设置包含商品图片元素的容器样式
  给这个容器设置了圆角、文本居中以及将字体大小设为0（通常用于去除图片下方的空白间隙等情况）
  */
 .hot-imagecont {
    border-radius: 8rpx;
    text-align: center;
    font-size: 0;
  }
 .hot-text {
    margin-top: 20rpx;
    /* 
   .prod-info 类用于设置商品相关信息文本的样式，比如字体大小、颜色、内边距以及距离顶部的外边距等
    */
   .prod-info {
      font-size: 20rpx;
      color: #777;
      padding: 0 20rpx;
      margin-top: 8rpx;
    }
    /* 
   .prod-text-info 类用于设置商品文本信息所在元素的整体样式，定义了高度、行高、字体族等基本样式属性
    并且内部还有针对价格等更具体样式的嵌套类
    */
   .prod-text-info {
      position: relative;
      height: 50rpx;
      line-height: 70rpx;
      font-family: Arial;
      /* 
     .price 类用于设置商品价格文本的颜色，将其设置为特定的红色（#eb2444），同时设置了左边的内边距
      */
     .price {
        color: #eb2444;
        padding-left: 20rpx;
      }
    }
  }
}
/* 
prod 伪类选择器，用于根据元素的顺序来区分不同的商品元素，分别设置不同的内边距样式
:nth-child(2n-1) 表示奇数项的商品元素
*/
prod {
  &:nth-child(2n-1) {
   .prod-items {
      padding: 20rpx 10rpx 10rpx 20rpx;
    }
  }
  /* 
  :nth-child(2n) 表示偶数项的商品元素
  对偶数项的商品元素中的.prod-items 类设置相应的内边距样式
  */
  &:nth-child(2n) {
   .prod-items {
      padding: 20rpx 20rpx 10rpx 10rpx;
    }
  }
}
/* 
.hot-imagecont 类下的.hotsaleimg 类用于设置商品图片本身的样式，使其宽度占满父元素，高度为345rpx
*/
.hot-imagecont {
 .hotsaleimg {
    width: 100%;
    height: 345rpx;
  }
}
/* 
.hot-text 类下的.hotprod-text 类用于设置商品标题等主要文本的样式
设置了高度、字体大小、文本的换行显示方式（超出2行显示省略号等）、文本颜色等样式
*/
.hot-text {
 .hotprod-text {
    height: 76rpx;
    font-size: 28rpx;
    display: -webkit-box;
    word-break: break-all;
    padding: 0 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
  }
}
/* 
.deadline-price 类用于设置特定价格相关文本的字体大小以及右边的外边距样式
*/
.deadline-price {
  font-size: 22rpx;
  margin-right: 5rpx;
}
