<style scoped lang="scss" >
/* 定义全局容器 */
.container {
  position: absolute; /* 绝对定位，相对于最近的非static祖先元素 */
  width: 100%; /* 宽度占满整个父容器 */
  height: 100%; /* 高度占满整个父容器 */
  background-color: #f4f4f4; /* 背景颜色为浅灰色 */
  color: #333; /* 默认文本颜色为深灰色 */
}

/* 订单标题栏 */
.order-tit {
  position: fixed; /* 固定定位，不随页面滚动而移动 */
  top: 0; /* 紧贴页面顶部 */
  display: flex; /* 使用弹性布局 */
  justify-content: space-around; /* 子元素在主轴上均匀分布 */
  z-index: 999; /* 设置堆叠顺序，确保标题栏位于最上层 */
  width: 100%; /* 宽度占满整个屏幕 */
  height: 100rpx; /* 高度为100个rpx（根据设备宽度自适应） */
  line-height: 100rpx; /* 行高与高度一致，使文本垂直居中 */
  background-color: #fff; /* 背景颜色为白色 */
  border-bottom: 2rpx solid #f4f4f4; /* 下边框为浅灰色细线 */
  text {
    display: block; /* 将文本块级化 */
    font-size: 28rpx; /* 字体大小 */
    color: #999; /* 文本颜色为浅灰色 */
    width: 100rpx; /* 每个文本项宽度 */
    text-align: center; /* 文本水平居中 */
  }

  text.on { /* 当前选中的文本样式 */
    border-bottom: 4rpx solid #eb2444; /* 底部有红色细线 */
    color: #eb2444; /* 文本颜色为红色 */
  }
}

/* 主内容区 */
.main {
  padding-top: 15rpx; /* 上内边距，避免被固定标题栏遮挡 */
}

/* 商品项目 */
.prod-item {
  background-color: #fff; /* 背景颜色为白色 */
  margin-top: 15rpx; /* 上外边距，与上方元素间隔 */
  font-size: 28rpx; /* 默认字体大小 */

  .item-cont {
    .prod-pic {
      image {
        width: 180rpx;
        height: 180rpx;
        width: 100%;
        height: 100%;
      }

      font-size: 0; /* 去除图片之间的空白 */
      display: inline-block; /* 内联块状显示 */
      width: 160rpx;
      height: 160rpx;
      overflow: hidden; /* 超出部分隐藏 */
      background: #fff; /* 背景颜色为白色 */
      margin-right: 16rpx; /* 右侧外边距，与文字部分间隔 */
    }

    .categories {
      white-space: nowrap; /* 强制在同一行内显示 */
    }

    display: flex; /* 使用弹性布局 */
    align-items: center; /* 交叉轴上居中对齐 */
    padding: 20rpx 30rpx; /* 内边距 */
    border-radius: 10rpx; /* 圆角 */
    background: #fafafa; /* 背景颜色 */

    .prod-info {
      margin-left: 10rpx; /* 左侧内边距 */
      font-size: 28rpx; /* 字体大小 */
      width: 100%; /* 宽度占满剩余空间 */
      position: relative; /* 相对定位 */
      height: 160rpx; /* 高度 */
      flex: 1; /* 占用剩余空间 */

      .prodname {
        font-size: 28rpx; /* 字体大小 */
        line-height: 36rpx; /* 行高 */
        max-height: 86rpx; /* 最大高度 */
        overflow: hidden; /* 超出部分隐藏 */
        display: -webkit-box; /* WebKit浏览器兼容 */
        -webkit-line-clamp: 2; /* 限制显示两行 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        text-overflow: ellipsis; /* 超出部分以省略号表示 */
        word-break: break-all; /* 允许在单词内部换行 */
      }

      .prod-info-cont {
        color: #999; /* 文本颜色为浅灰色 */
        line-height: 40rpx; /* 行高 */
        margin-top: 10rpx; /* 上外边距 */
        font-size: 22rpx; /* 字体大小 */
        overflow: hidden; /* 超出部分隐藏 */
        display: -webkit-box; /* WebKit浏览器兼容 */
        -webkit-line-clamp: 1; /* 限制显示一行 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        text-overflow: ellipsis; /* 超出部分以省略号表示 */
        word-break: break-all; /* 允许在单词内部换行 */
      }
    }
  }

  .order-num {
    padding: 20rpx 30rpx; /* 内边距 */
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 子元素在主轴上两端对齐 */
    font-size: 28rpx; /* 字体大小 */

    .clear-btn {
      width: 32rpx;
      height: 32rpx;
      font-size: 0; /* 去除按钮内的空白 */
      vertical-align: top; /* 顶部对齐 */
      margin-left: 42rpx; /* 左侧外边距 */
      position: relative; /* 相对定位 */

      &::after {
        content: " ";
        display: block;
        position: absolute;
        left: -10rpx;
        top: 0rpx;
        width: 1px;
        height: 32rpx;
        background: #ddd; /* 背景色为浅灰色 */
      }

      .clear-list-btn {
        width: 100%;
        height: 100%;
        vertical-align: middle; /* 中间对齐 */
      }
    }
  }

  .total-num {
    text-align: right; /* 文本右对齐 */
    padding: 20rpx 30rpx; /* 内边距 */
    font-size: 28rpx; /* 字体大小 */

    .prodprice {
      display: inline-block; /* 内联块状显示 */
      color: #333; /* 文本颜色为深灰色 */
    }

    .prodcount {
      margin-right: 20rpx; /* 右侧外边距 */
    }
  }

  .price-nums {
    .prodprice {
      color: #333; /* 文本颜色为深灰色 */
      position: absolute; /* 绝对定位 */
      bottom: 0; /* 紧贴底部 */
    }

    .prodcount {
      position: absolute; /* 绝对定位 */
      bottom: 5rpx; /* 紧贴底部并留出一些间距 */
      right: 0; /* 紧贴右侧 */
      color: #999; /* 文本颜色为浅灰色 */
      font-family: verdana; /* 字体家族 */
    }
  }

  .prod-foot {
    border-top: 2rpx solid #e6e6e6; /* 顶部边框 */

    .total {
      font-size: 25rpx; /* 字体大小 */
      margin-bottom: 20rpx; /* 下外边距 */
      padding-bottom: 20rpx; /* 下内边距 */
      border-bottom: 2rpx solid #e9eaec; /* 底部边框 */
    }

    .btn {
      display: flex; /* 使用弹性布局 */
      align-items: center; /* 交叉轴上居中对齐 */
      justify-content: flex-end; /* 主轴上右对齐 */
    }
  }
}

/* 订单状态 */
.order-state {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 交叉轴上居中对齐 */
  font-size: 24rpx; /* 字体大小 */

  .order-sts.red {
    color: #eb2444; /* 文本颜色为红色 */
  }

  .order-sts.gray {
    color: #999; /* 文本颜色为浅灰色 */
  }
}

/* 其他按钮悬停效果 */
.other-button-hover {
  background-color: blue; /* 悬停时背景颜色为蓝色 */
}

/* 按钮悬停效果 */
.button-hover {
  background-color: red; /* 悬停时背景颜色为红色 */
  background-color: blue; /* 悬停时背景颜色为蓝色（后一个覆盖前一个） */
}

/* 按钮样式 */
.button {
  margin-top: 20rpx; /* 上外边距 */
  margin-bottom: 20rpx; /* 下外边距 */
  margin-left: 10px; /* 左外边距 */
  font-size: 26rpx; /* 字体大小 */
  background: #fff; /* 背景颜色为白色 */
  padding: 10rpx 30rpx; /* 内边距 */
  border-radius: 80rpx; /* 圆角 */
  border: 2rpx solid #e1e1e1; /* 边框 */

  &:last-child {
    margin-right: 10rpx; /* 最后一个子元素的右外边距 */
  }
}

/* 警告按钮样式 */
.button.warn {
  color: #eb2444; /* 文本颜色为红色 */
  border-color: #eb2444; /* 边框颜色为红色 */
}

/* 空状态样式 */
.empty {
  font-size: 24rpx; /* 字体大小 */
  margin-top: 100rpx; /* 上外边距 */
  text-align: center; /* 文本居中 */
  color: #999; /* 文本颜色为浅灰色 */
  height: 300rpx; /* 高度 */
  line-height: 300rpx; /* 行高与高度一致，使文本垂直居中 */
}

</style >
