/* 容器背景颜色设置为浅灰色，并且高度根据内容自动调整 */
.container {
  background: #f7f7f7;
  height: auto;
}

/* 轮播图及搜索框 */
swiper {
  width: 100%; /* 占满整个宽度 */
  height: 350rpx; /* 高度为350rpx */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

swiper.pic-swiper {
  padding: 10rpx 0; /* 上下内边距 */
  background: #fff; /* 白色背景 */
  height: 422rpx; /* 设置轮播图的高度 */
  .img-box {
    font-size: 0; /* 去除图片间的空白间隙 */
  }

  .banner {
    position: absolute; /* 绝对定位 */
    width: 690rpx; /* 宽度 */
    margin: 0 10rpx; /* 左右外边距 */
    height: 402rpx; /* 高度 */
    border-radius: 8rpx; /* 圆角 */
    display: inline-block; /* 内联块级元素 */
    box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288); /* 添加阴影效果 */
  }
}

swiper-item {
  font-size: 26rpx; /* 文字大小 */
  font-weight: bold; /* 加粗字体 */
}

.wx-swiper-dots {
  margin-bottom: 15rpx; /* 下边距 */
}

.banner-item {
  box-sizing: border-box; /* 盒模型包含内边距和边框 */
}

/* 搜索框固定在顶部 */
.container {
  .bg-sear {
    position: fixed; /* 固定定位 */
    z-index: 999; /* 确保位于其他内容之上 */
    width: 100%; /* 占满整个宽度 */
    line-height: 56rpx; /* 行高 */
    background: #fff; /* 白色背景 */
    padding: 20rpx 0; /* 上下内边距 */
    text-align: center; /* 文本居中 */
    top: 0; /* 顶部位置 */
  }
}

.bg-sear {
  .section {
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 60rpx; /* 高度 */
    background: #fff; /* 白色背景 */
    z-index: 1; /* 层叠顺序 */
    border-radius: 50rpx; /* 圆角 */
    width: 92%; /* 宽度 */
    margin: auto; /* 自动外边距 */
    left: 4%; /* 左侧位置 */
    background: #f7f7f7; /* 浅灰色背景 */
    .placeholder {
      display: block; /* 块级元素 */
      font-size: 24rpx; /* 字体大小 */
      color: #999; /* 颜色 */
    }

    .search-img {
      width: 32rpx; /* 宽度 */
      height: 32rpx; /* 高度 */
      margin-right: 10rpx; /* 右侧外边距 */
    }
  }
}

/* 分类栏目 */
.content {
  background: #fff; /* 白色背景 */
}

.cat-item {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 子元素两端对齐 */
  background: #fff; /* 白色背景 */
  padding-top: 20rpx; /* 上内边距 */
  padding-bottom: 30rpx; /* 下内边距 */
  .item {
    text-align: center; /* 文本居中 */
    width: 25%; /* 宽度 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 列方向排列 */
    margin: auto; /* 自动外边距 */
    align-items: center; /* 子元素垂直居中 */
    image {
      width: 75rpx; /* 宽度 */
      height: 75rpx; /* 高度 */
    }

    text {
      font-size: 26rpx; /* 字体大小 */
      margin-top: 20rpx; /* 上外边距 */
    }
  }
}

/* 消息播放 */
.message-play {
  position: relative; /* 相对定位 */
  height: 90rpx; /* 高度 */
  background: #fff; /* 白色背景 */
  margin: auto; /* 自动外边距 */
  padding: 0 60rpx 0 100rpx; /* 内边距 */
  box-sizing: border-box; /* 盒模型包含内边距和边框 */
  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); /* 添加阴影效果 */
  border: 2rpx solid #fafafa; /* 边框 */
  .hornpng {
    width: 77rpx; /* 宽度 */
    height: 36rpx; /* 高度 */
    position: absolute; /* 绝对定位 */
    left: 20rpx; /* 左侧位置 */
    top: 27rpx; /* 顶部位置 */
    margin-right: 8rpx; /* 右侧外边距 */
  }

  .swiper-cont {
    height: 90rpx; /* 高度 */
    line-height: 90rpx; /* 行高 */
    .items {
      text-overflow: ellipsis; /* 超出文本显示省略号 */
      display: -webkit-box; /* 使用Webkit盒模型 */
      -webkit-line-clamp: 1; /* 限制行数 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      text-align: left; /* 文本左对齐 */
    }
  }
}

.arrow {
  width: 15rpx; /* 宽度 */
  height: 15rpx; /* 高度 */
  border-top: 3rpx solid #686868; /* 上边框 */
  border-right: 3rpx solid #686868; /* 右边框 */
  transform: rotate(45deg); /* 旋转45度形成箭头 */
  position: absolute; /* 绝对定位 */
  right: 30rpx; /* 右侧位置 */
  top: 34rpx; /* 顶部位置 */
}

/* 每日上新 */
.title {
  position: relative; /* 相对定位 */
  height: 64rpx; /* 高度 */
  line-height: 64rpx; /* 行高 */
  font-size: 32rpx; /* 字体大小 */
  padding: 40rpx 0 10rpx 30rpx; /* 内边距 */
  color: #333; /* 颜色 */
  background: #fff; /* 白色背景 */
  .more-prod-cont {
    color: #999; /* 颜色 */
    display: inline-block; /* 内联块级元素 */
    text-align: right; /* 文本右对齐 */
    .more {
      position: absolute; /* 绝对定位 */
      right: 30rpx; /* 右侧位置 */
      top: 48rpx; /* 顶部位置 */
      color: #666; /* 颜色 */
      font-size: 24rpx; /* 字体大小 */
      padding: 0 20rpx; /* 内边距 */
      height: 44rpx; /* 高度 */
      line-height: 44rpx; /* 行高 */
    }

    .arrow {
      top: 58rpx; /* 顶部位置 */
      right: 30rpx; /* 右侧位置 */
      border-top: 2rpx solid #666; /* 上边框 */
      border-right: 2rpx solid #666; /* 右边框 */
    }
  }
}

.up-to-date {
  .title {
    color: #fff; /* 颜色 */
    background: none; /* 无背景 */
    .more-prod-cont {
      .more {
        position: absolute; /* 绝对定位 */
        right: 30rpx; /* 右侧位置 */
        top: 48rpx; /* 顶部位置 */
        color: #fff; /* 颜色 */
        font-size: 24rpx; /* 字体大小 */
        background: #65addf; /* 背景颜色 */
        border-radius: 30rpx; /* 圆角 */
        padding: 0 30rpx; /* 内边距 */
        height: 44rpx; /* 高度 */
        line-height: 44rpx; /* 行高 */
      }
    }
  }

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABxCAYAAACkwXoWAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAZBJREFUeJzt1DEBwCAAwLAxYfhEGXJABkcTBb065trnAwj6XwcAvGKAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGRdKykDj9OUNYkAAAAASUVORK5CYII=");
  background-position: top; /* 背景图像位置 */
  background-size: 100% 332rpx; /* 背景图像大小 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  background-color: #fff; /* 白色背景 */
  .item-cont {
    margin: auto; /* 自动外边距 */
    height: auto; /* 自动高度 */
    width: calc(100% - 40rpx); /* 宽度计算 */
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 换行 */
    &::before {
      clear: both; /* 清除浮动 */
      height: 0; /* 高度 */
      overflow: hidden; /* 隐藏溢出 */
    }

    .prod-item {
      border-radius: 10rpx; /* 圆角 */
      width: 220rpx; /* 宽度 */
      background: #fff; /* 白色背景 */
      display: inline-block; /* 内联块级元素 */
      margin: 0 8rpx; /* 左右边距 */
      margin-bottom: 20rpx; /* 下边距 */
      box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2); /* 添加阴影效果 */
      .imagecont {
        width: 100%; /* 占满整个宽度 */
        font-size: 0; /* 去除图片间的空白间隙 */
        width: 220rpx; /* 宽度 */
        height: 220rpx; /* 高度 */
        .prodimg {
          width: 220rpx; /* 宽度 */
          height: 220rpx; /* 高度 */
          vertical-align: middle; /* 垂直居中 */
          border-top-left-radius: 10rpx; /* 左上圆角 */
          border-top-right-radius: 10rpx; /* 右上圆角 */
          font-size: 0; /* 去除图片间的空白间隙 */
        }
      }

      .prod-text {
        font-size: 28rpx; /* 字体大小 */
        overflow: hidden; /* 隐藏溢出 */
        margin: 10rpx 0; /* 上下外边距 */
        height: 75rpx; /* 高度 */
        display: -webkit-box; /* 使用Webkit盒模型 */
        word-break: break-all; /* 单词换行 */
        display: -webkit-box; /* 使用Webkit盒模型 */
        -webkit-line-clamp: 2; /* 限制行数 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        color: #000; /* 颜色 */
        padding: 0 10rpx; /* 内边距 */
      }

      .prod-price {
        font-size: 25rpx; /* 字体大小 */
        color: #eb2444; /* 颜色 */
        font-family: Arial; /* 字体 */
        padding: 0 10rpx; /* 内边距 */
      }
    }
  }
}

.hotsale-item-cont {
  padding-bottom: 20rpx; /* 下内边距 */
  background: #fff; /* 白色背景 */
}

.more.prod-price {
  position: absolute; /* 绝对定位 */
  bottom: 20rpx; /* 底部位置 */
}

/* 商城热卖 */
.hot-sale {
  .prod-items {
    width: 345rpx; /* 宽度 */
    display: inline-block; /* 内联块级元素 */
    background: #fff; /* 白色背景 */
    padding-bottom: 20rpx; /* 下内边距 */
    box-sizing: border-box; /* 盒模型包含内边距和边框 */
    box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2); /* 添加阴影效果 */
    &:nth-child(2n-1) {
      margin: 20rpx 10rpx 10rpx 20rpx; /* 奇数项的外边距 */
    }

    &:nth-child(2n) {
      margin: 20rpx 20rpx 10rpx 10rpx; /* 偶数项的外边距 */
    }
  }
}

.prod-items {
  .hot-imagecont {
    width: 341rpx; /* 宽度 */
    height: 341rpx; /* 高度 */
    .hotsaleimg {
      width: 341rpx; /* 宽度 */
      height: 341rpx; /* 高度 */
    }

    font-size: 0; /* 去除图片间的空白间隙 */
    text-align: center; /* 文本居中 */
  }

  .hot-text {
    .hotprod-text {
      font-size: 28rpx; /* 字体大小 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏溢出 */
      text-overflow: ellipsis; /* 超出文本显示省略号 */
    }

    margin-top: 20rpx; /* 上外边距 */
    padding: 0 10rpx; /* 内边距 */
    .prod-info {
      font-size: 22rpx; /* 字体大小 */
      color: #999; /* 颜色 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏溢出 */
      text-overflow: ellipsis; /* 超出文本显示省略号 */
    }

    .prod-text-info {
      position: relative; /* 相对定位 */
      height: 70rpx; /* 高度 */
      line-height: 70rpx; /* 行高 */
      font-family: Arial; /* 字体 */
      .hotprod-price {
        display: inline; /* 内联元素 */
        font-size: 26rpx; /* 字体大小 */
        color: #eb2444; /* 颜色 */
      }

      .basket-img {
        width: 50rpx; /* 宽度 */
        height: 50rpx; /* 高度 */
        position: absolute; /* 绝对定位 */
        right: 0; /* 右侧位置 */
        bottom: 7rpx; /* 底部位置 */
        padding: 8rpx; /* 内边距 */
      }
    }
  }
}

.more-prod {
  .prod-text-right {
    .prod-info {
      font-size: 22rpx; /* 字体大小 */
      color: #999; /* 颜色 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏溢出 */
      text-overflow: ellipsis; /* 超出文本显示省略号 */
    }
  }
}

.singal-price {
  display: inline; /* 内联元素 */
  font-size: 20rpx; /* 字体大小 */
  text-decoration: line-through; /* 删除线 */
  color: #777; /* 颜色 */
  margin-left: 15rpx; /* 左边距 */
}

/* 更多宝贝 */
.more-prod {
  background: #fff; /* 白色背景 */
  .prod-show {
    .show-item {
      .more-prod-pic {
        width: 250rpx; /* 宽度 */
        height: 250rpx; /* 高度 */
        .more-pic {
          max-width: 100%; /* 最大宽度 */
          max-height: 100%; /* 最大高度 */
        }
      }

      position: relative; /* 相对定位 */
      display: flex; /* 弹性布局 */
      padding: 20rpx; /* 内边距 */
      justify-content: flex-start; /* 子元素左对齐 */
      border-top: 2rpx solid #f4f4f4; /* 上边框 */
      .prod-text-right {
        margin-left: 30rpx; /* 左边距 */
        width: 72%; /* 宽度 */
        padding-bottom: 10rpx; /* 下内边距 */
        display: flex; /* 弹性布局 */
        flex-direction: column; /* 列方向排列 */
        justify-content: center; /* 子元素垂直居中 */
        .go-to-buy {
          font-size: 26rpx; /* 字体大小 */
          background: #fff2f5; /* 背景颜色 */
          color: #eb2444; /* 颜色 */
          border-radius: 50rpx; /* 圆角 */
          text-align: center; /* 文本居中 */
          padding: 12rpx 20rpx; /* 内边距 */
          position: absolute; /* 绝对定位 */
          right: 20rpx; /* 右侧位置 */
          bottom: 20rpx; /* 底部位置 */
        }

        .prod-text.more {
          margin: 0; /* 外边距 */
          font-size: 28rpx; /* 字体大小 */
          overflow: hidden; /* 隐藏溢出 */
          margin-bottom: 20rpx; /* 下外边距 */
          display: -webkit-box; /* 使用Webkit盒模型 */
          word-break: break-all; /* 单词换行 */
          display: -webkit-box; /* 使用Webkit盒模型 */
          -webkit-line-clamp: 2; /* 限制行数 */
          -webkit-box-orient: vertical; /* 垂直排列 */
        }

        .more.prod-price {
          font-size: 28rpx; /* 字体大小 */
          font-family: arial; /* 字体 */
        }
      }
    }
  }
}

.b-cart {
  margin-top: 30rpx; /* 上外边距 */
  .basket-img {
    width: 50rpx; /* 宽度 */
    height: 50rpx; /* 高度 */
    position: absolute; /* 绝对定位 */
    right: 46rpx; /* 右侧位置 */
    padding: 8rpx; /* 内边距 */
  }
}
