/* 容器样式 */
.container {
  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
  min-height: 100vh; /* 最小高度为视口高度，确保内容不满屏时也有足够的空间 */
  padding: 7px; /* 内边距，给容器内的元素留出一定的空间 */
}

/* 固定在顶部的线条 */
.line-fix {
  width: 100%; /* 线条宽度为100%，覆盖整个屏幕宽度 */
  height: 2rpx; /* 线条高度为2rpx（响应式单位），非常细的一条线 */
  background: #e1e1e1; /* 线条颜色为浅灰色 */
  position: fixed; /* 将线条固定在页面顶部，不会随页面滚动而移动 */
  top: 0; /* 线条距离页面顶部0像素 */
}

/* 标题背景样式 */
.tit-background {
  width: 100%; /* 背景宽度为100%，覆盖整个屏幕宽度 */
  height: 20rpx; /* 背景高度为20rpx（响应式单位） */
  background: #f4f4f4; /* 背景颜色为浅灰色 */
}

/* 商品列表样式 */
.prod-list {
  display: flex; /* 使用弹性布局，使子元素可以灵活排列 */
  flex-wrap: wrap; /* 允许子元素换行显示 */
  justify-content: space-between; /* 子元素之间均匀分布，两端对齐 */
}

/* 深度选择器，用于修改子组件的样式 */
:deep(.prod-items) {
  display: inline-block; /* 将商品项设置为行内块级元素，允许在同一行中显示多个商品 */
  width: 345rpx !important; /* 设置商品项的宽度为345rpx，并使用!important确保优先级 */
  &:nth-child(2n) { /* 对于每第二个商品项 */
    margin-left: 30rpx; /* 左边距为30rpx，使第二列的商品与第一列保持一定间距 */
  }
}

/* 空状态提示样式 */
.empty {
  display: block; /* 将空状态提示设置为块级元素 */
  width: 100%; /* 提示宽度为100%，覆盖整个父容器 */
  font-size: 26rpx; /* 字体大小为26rpx（响应式单位） */
  color: #999; /* 文字颜色为浅灰色 */
  margin-top: 20vh; /* 上边距为视口高度的20%，将提示居中显示 */
  text-align: center; /* 文字水平居中 */
}
