/* 容器样式 */
.container {
  width: 100%; /* 设置容器宽度为100% */
  background: #f4f4f4; /* 设置背景颜色 */
  min-height: calc(100vh - 118rpx); /* 设置最小高度为视窗高度减去底部导航栏高度 */
}

/* 产品列表样式 */
.prod-list {
  padding-bottom: 118rpx; /* 底部填充以防止内容被固定底部遮挡 */
  width: 100%; /* 设置宽度为100% */
  /* 单个产品块样式 */
  .prod-block {
    background: #fff; /* 背景颜色 */
    margin-top: 15rpx; /* 上边距 */
    /* 折扣提示样式 */
    .discount-tips {
      padding: 20rpx 0 20rpx 20rpx; /* 内边距 */
      border-bottom: 2rpx solid #f4f4f4; /* 下边框 */
      height: 40rpx; /* 高度 */
      line-height: 40rpx; /* 行高 */
      /* 文字块样式 */
      .text-block {
        padding: 3rpx 5rpx; /* 内边距 */
        border-radius: 8rpx; /* 圆角 */
        font-size: 22rpx; /* 字体大小 */
        color: #eb2444; /* 文字颜色 */
        border: 2rpx solid #eb2444; /* 边框 */
      }
      /* 文字列表样式 */
      .text-list {
        font-size: 24rpx; /* 字体大小 */
        margin-left: 10rpx; /* 左边距 */
      }
    }
  }
  /* 产品项样式 */
  .item {
    background: #fff; /* 背景颜色 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 20rpx; /* 内边距 */
    /* 产品信息样式 */
    .prodinfo {
      position: relative; /* 相对定位 */
      color: #999; /* 文字颜色 */
      width: 100%; /* 宽度 */
      /* 底线伪元素 */
      &::after {
        content: ''; /* 伪元素内容为空 */
        background-color: #f4f4f4; /* 背景颜色 */
        left: 0; /* 左偏移 */
        height: 1px; /* 高度 */
        transform-origin: 50% 100% 0; /* 变换原点 */
        bottom: -20rpx; /* 底部偏移 */
        position: absolute; /* 绝对定位 */
        display: block; /* 显示为块级元素 */
        width: 642rpx; /* 宽度 */
        padding-left: 20rpx; /* 左内边距 */
      }
      /* 最后一个子元素去除底线 */
      &:last-child {
        &::after {
          height: 0; /* 高度设为0 */
        }
      }
      /* 图片容器 */
      .pic {
        text-align: center; /* 文本居中 */
        width: 180rpx; /* 宽度 */
        height: 180rpx; /* 高度 */
        line-height: 180rpx; /* 行高 */
        font-size: 0; /* 字体大小 */
      }
    }
    /* 状态样式 */
    .staus {
      text-align: center; /* 文本居中 */
      background: rgb(196, 192, 192); /* 背景颜色 */
      font-size: 20rpx; /* 字体大小 */
      width: 50rpx; /* 宽度 */
      color: #fff; /* 文字颜色 */
    }
    /* 操作选项样式 */
    .opt {
      font-size: 28rpx; /* 字体大小 */
      margin-left: 20rpx; /* 左边距 */
      width: 100%; /* 宽度 */
    }
    /* 图片样式 */
    .pic {
      image {
        max-width: 100%; /* 最大宽度 */
        max-height: 100%; /* 最大高度 */
        vertical-align: middle; /* 垂直对齐 */
      }
    }
  }
  /* 失效产品样式 */
  .lose-efficacy {
    .discount-tips {
      padding: 20rpx 0; /* 内边距 */
      border-bottom: 2rpx solid #ddd; /* 下边框 */
      height: 50rpx; /* 高度 */
      line-height: 50rpx; /* 行高 */
      margin-left: 20rpx; /* 左边距 */
      /* 文字列表样式 */
      .text-list {
        font-size: 30rpx; /* 字体大小 */
        margin-left: 10rpx; /* 左边距 */
      }
    }
  }
}

/* 产品信息样式 */
.prodinfo {
  display: flex; /* 使用弹性布局 */
  margin-left: 20rpx; /* 左边距 */
  /* 操作选项样式 */
  .opt {
    .prod-name {
      color: #333; /* 文字颜色 */
      max-height: 72rpx; /* 最大高度 */
      line-height: 36rpx; /* 行高 */
      display: -webkit-box; /* WebKit行盒模型 */
      word-break: break-all; /* 允许单词内断行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 溢出用省略号表示 */
      -webkit-line-clamp: 2; /* 限制行数 */
      -webkit-box-orient: vertical; /* 竖向排列 */
    }
    /* 产品信息文本样式 */
    .prod-info-text {
      color: #999; /* 文字颜色 */
      display: inline-block; /* 显示为行内块 */
      -webkit-line-clamp: 1; /* 限制行数 */
      height: 48rpx; /* 高度 */
      line-height: 48rpx; /* 行高 */
      background: #f9f9f9; /* 背景颜色 */
      padding: 0 10rpx; /* 内边距 */
      border-radius: 4rpx; /* 圆角 */
      margin: 10rpx 0 0rpx 0; /* 外边距 */
      overflow: hidden; /* 隐藏溢出内容 */
      font-size: 24rpx; /* 字体大小 */
      position: relative; /* 相对定位 */
      font-family: arial; /* 字体系列 */
    }
    /* 空的产品信息文本样式 */
    .prod-info-text.empty-n {
      padding: 0; /* 内边距 */
    }
    /* 价格和数量样式 */
    .price-count {
      display: flex; /* 使用弹性布局 */
      align-items: center; /* 垂直居中对齐 */
      justify-content: space-between; /* 两端对齐 */
      /* 价格样式 */
      .price {
        color: #eb2444; /* 文字颜色 */
      }
    }
  }
}

/* 产品信息文本伪元素样式 */
.prod-info-text {
  &:before {
    border-top: 5px solid #aaa; /* 上边框 */
  }

  &:after {
    border-top: 5px solid #f9f9f9; /* 上边框 */
    top: 9px; /* 顶部偏移 */
  }
}

/* 失效产品样式 */
.lose-efficacy {
  .prodinfo {
    .opt {
      .price-count {
        .price {
          color: #999; /* 文字颜色 */
        }
      }
    }
  }

  margin-top: 20rpx; /* 上边距 */
  background: #fff; /* 背景颜色 */
  /* 产品项样式 */
  .item {
    background: #f8f8f9; /* 背景颜色 */
  }
  /* 折扣提示样式 */
  .discount-tips {
    .empty-prod {
      color: #777; /* 文字颜色 */
      font-size: 26rpx; /* 字体大小 */
      border: 2rpx solid #999; /* 边框 */
      padding: 0 10rpx; /* 内边距 */
      border-radius: 8rpx; /* 圆角 */
      float: right; /* 向右浮动 */
      margin-right: 20rpx; /* 右边距 */
    }
  }
}

/* 数量选择器样式 */
.m-numSelector {
  .minus,
  .plus {
    float: left; /* 向左浮动 */
    box-sizing: border-box; /* 盒模型 */
    height: 56rpx; /* 高度 */
    border: 2rpx solid #d9d9d9; /* 边框 */
    position: relative; /* 相对定位 */
    width: 56rpx; /* 宽度 */
    &::before,
    &::after {
      position: absolute; /* 绝对定位 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto; /* 自动外边距 */
      content: ' '; /* 伪元素内容为空 */
      width: 22rpx; /* 宽度 */
      height: 3rpx; /* 高度 */
      background-color: #7f7f7f; /* 背景颜色 */
    }
  }
  /* 减号按钮样式 */
  .minus {
    border-right: 0; /* 右边框 */
    border-top-left-radius: 4rpx; /* 左上圆角 */
    border-bottom-left-radius: 4rpx; /* 左下圆角 */
  }
  /* 输入框样式 */
  input {
    float: left; /* 向左浮动 */
    box-sizing: border-box; /* 盒模型 */
    height: 56rpx; /* 高度 */
    border: 2rpx solid #d9d9d9; /* 边框 */
    width: 56rpx; /* 宽度 */
    text-align: center; /* 文本居中 */
    color: #333; /* 文字颜色 */
  }
  /* 加号按钮样式 */
  .plus {
    border-left: 0; /* 左边框 */
    border-top-right-radius: 4rpx; /* 右上圆角 */
    border-bottom-right-radius: 4rpx; /* 右下圆角 */
    &::after {
      transform: rotate(90deg); /* 旋转90度 */
    }
  }

  float: right; /* 向右浮动 */
  /* 非禁用状态下的交互样式 */
  &:not(.disabled) {
    .minus,
    .plus {
      &:not(.disabled) {
        &:active {
          background-color: #f4f4f4; /* 激活时背景颜色 */
        }
      }
    }
  }
}

/* 深层选择器用于复选框样式 */
:deep(checkbox) {
  .uni-checkbox-input,
  .wx-checkbox-input {
    border-radius: 50%; /* 圆形 */
    width: 35rpx; /* 宽度 */
    height: 35rpx; /* 高度 */
  }
  /* 选中状态下的复选框样式 */
  .wx-checkbox-input.wx-checkbox-input-checked {
    background: #eb2444; /* 背景颜色 */
    border-color: #eb2444; /* 边框颜色 */
    &::before {
      text-align: center; /* 文本居中 */
      font-size: 22rpx; /* 字体大小 */
      color: #fff; /* 文字颜色 */
      background: transparent; /* 透明背景 */
      transform: translate(-50%, -50%) scale(1); /* 居中缩放 */
      -webkit-transform: translate(-50%, -50%) scale(1); /* WebKit浏览器居中缩放 */
    }
  }
}

/* 空状态样式 */
.empty {
  font-size: 26rpx; /* 字体大小 */
  color: #aaa; /* 文字颜色 */
  padding-top: 200rpx; /* 上内边距 */
  /* 文字样式 */
  .txt {
    text-align: center; /* 文本居中 */
    margin-top: 30rpx; /* 上边距 */
  }
  /* 图片样式 */
  .img {
    margin-top: 80rpx; /* 上边距 */
    text-align: center; /* 文本居中 */
    image {
      width: 80rpx; /* 宽度 */
      height: 80rpx; /* 高度 */
    }
  }
}

/* 价格和数量样式 */
.price-count {
  .disable-price {
    color: #999; /* 文字颜色 */
  }
}

/* 购物车底部栏样式 */
.cart-footer {
  position: fixed; /* 固定定位 */
  bottom: calc(90rpx + env(safe-area-inset-bottom)); /* 底部距离 */
  left: 0; /* 左偏移 */
  width: 100%; /* 宽度 */
  display: flex; /* 使用弹性布局 */
  flex-direction: row nowrap; /* 行内不换行 */
  height: 98rpx; /* 高度 */
  border-top: 2rpx solid #f4f4f4; /* 上边框 */
  z-index: 999; /* 层叠顺序 */
  /* 按钮样式 */
  .btn {
    position: relative; /* 相对定位 */
    display: flex; /* 使用弹性布局 */
    flex-grow: 1; /* 弹性增长 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 0; /* 宽度 */
    background-color: #fafafa; /* 背景颜色 */
    background: rgba(255,255,255,0.95); /* 半透明背景 */
    font-size: 28rpx; /* 字体大小 */
    /* 总金额消息样式 */
    .total-msg {
      font-size: 20rpx; /* 字体大小 */
    }
  }
  /* 总价按钮样式 */
  .btn.total {
    display: flex; /* 使用弹性布局 */
    flex-flow: column; /* 列方向 */
    align-items: flex-start; /* 左对齐 */
    width: 300rpx; /* 宽度 */
    /* 价格样式 */
    .price {
      color: #eb2444; /* 文字颜色 */
      font-size: 30rpx; /* 字体大小 */
    }
  }
  /* 删除按钮样式 */
  .btn.del {
    color: #eb2444; /* 文字颜色 */
    width: 70rpx; /* 宽度 */
    font-size: 22rpx; /* 字体大小 */
    text-align: left; /* 文本左对齐 */
    display: block; /* 显示为块级元素 */
    line-height: 102rpx; /* 行高 */
  }
  /* 全选按钮样式 */
  .btn.all {
    width: 150rpx; /* 宽度 */
    font-size: 26rpx; /* 字体大小 */
    /* 标签样式 */
    label {
      display: flex; /* 使用弹性布局 */
      flex-grow: 1; /* 弹性增长 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }
  }
  /* 结算按钮样式 */
  .btn.settle {
    width: 200rpx; /* 宽度 */
    background: #eb2444; /* 背景颜色 */
    color: #fff; /* 文字颜色 */
  }
}
