/* 定义容器的基本样式 */
.container {
  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
}

/* 订单详情的样式 */
.order-detail {
  margin-bottom: 120rpx; /* 设置底部外边距，确保与其他元素有足够的间距 */
  padding-bottom: 160rpx; /* 设置底部内边距，用于留出足够的空间 */

  .delivery-addr { /* 配送地址部分的样式 */
    padding: 20rpx 30rpx; /* 设置上下左右内边距 */
    background: #fff; /* 设置背景颜色为白色 */

    .user-info { /* 用户信息的样式 */
      line-height: 48rpx; /* 设置行高 */
      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
      word-break: break-all; /* 在任何字符间断开 */
      overflow: hidden; /* 超出内容隐藏 */
      text-overflow: ellipsis; /* 超出内容以省略号显示 */
      display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
      -webkit-line-clamp: 1; /* 限制文本行数为1 */
      -webkit-box-orient: vertical; /* 盒子的方向是垂直的 */

      .item { /* 用户信息项的样式 */
        font-size: 28rpx; /* 设置字体大小 */
        margin-right: 30rpx; /* 设置右边距 */
        vertical-align: top; /* 垂直对齐方式为顶部 */
        display: inline-block; /* 作为行内块级元素显示 */
      }
    }

    .addr { /* 地址的样式 */
      font-size: 26rpx; /* 设置字体大小 */
      line-height: 36rpx; /* 设置行高 */
      color: #999; /* 设置字体颜色为浅灰色 */
      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
    }
  }
}

/* 商品项的样式 */
.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: block; /* 作为块级元素显示 */
      width: 160rpx;
      height: 160rpx;
      overflow: hidden; /* 超出内容隐藏 */
      background: #fff; /* 设置背景颜色为白色 */
      margin-right: 16rpx; /* 设置右边距 */
    }

    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 30rpx; /* 设置内边距 */
    border-top: 2rpx solid #f1f1f1; /* 设置上边框 */

    .prod-info { /* 商品信息的样式 */
      margin-left: 10rpx; /* 设置左边距 */
      font-size: 28rpx; /* 设置字体大小 */
      width: 100%; /* 设置宽度为100% */
      position: relative; /* 设置相对定位 */
      height: 80px;
      flex: 1; /* 占据剩余空间 */

      .prodname { /* 商品名称的样式 */
        font-size: 28rpx; /* 设置字体大小 */
        line-height: 40rpx; /* 设置行高 */
        max-height: 86rpx; /* 设置最大高度 */
        overflow: hidden; /* 超出内容隐藏 */
        display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
        -webkit-line-clamp: 1; /* 限制文本行数为1 */
        -webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
        text-overflow: ellipsis; /* 超出内容以省略号显示 */
        word-break: break-all; /* 在任何字符间断开 */
      }

      .prod-info-cont { /* 商品信息内容的样式 */
        position: relative; /* 设置相对定位 */
        color: #999; /* 设置字体颜色为浅灰色 */
        margin-top: 10rpx; /* 设置上边距 */
        font-size: 24rpx; /* 设置字体大小 */

        .info-item { /* 信息项的样式 */
          color: #999; /* 设置字体颜色为浅灰色 */
          height: 28rpx; /* 设置高度 */
          margin-top: 10rpx; /* 设置上边距 */
          font-size: 24rpx; /* 设置字体大小 */
          overflow: hidden; /* 超出内容隐藏 */
          display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
          -webkit-line-clamp: 1; /* 限制文本行数为1 */
          -webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
          text-overflow: ellipsis; /* 超出内容以省略号显示 */
          word-break: break-all; /* 在任何字符间断开 */
          width: 70%; /* 设置宽度 */
        }

        .number { /* 数量的样式 */
          float: left; /* 向左浮动 */
          margin-right: 20rpx; /* 设置右边距 */
        }
      }
    }
  }

  .price-nums { /* 价格和数量的样式 */
    margin-top: 30rpx; /* 设置上边距 */

    .prodprice { /* 商品价格的样式 */
      color: #333; /* 设置字体颜色 */
      height: 50rpx; /* 设置高度 */
      line-height: 50rpx; /* 设置行高 */
      font-size: 24rpx; /* 设置字体大小 */
      float: left; /* 向左浮动 */
    }

    .btn-box { /* 按钮容器的样式 */
      float: right; /* 向右浮动 */
      text-align: right; /* 文本右对齐 */

      .btn { /* 按钮的样式 */
        padding: 6rpx 30rpx; /* 设置内边距 */
        line-height: 36rpx; /* 设置行高 */
        margin-left: 20rpx; /* 设置左边距 */
        font-size: 24rpx; /* 设置字体大小 */
        display: inline-block; /* 作为行内块级元素显示 */
        border: 2rpx solid #e4e4e4; /* 设置边框 */
        border-radius: 50rpx; /* 设置圆角 */
      }
    }
  }
}

/* 订单消息的样式 */
.order-msg {
  background: #fff; /* 设置背景颜色为白色 */
  margin-top: 15rpx; /* 设置上边距 */
  font-size: 28rpx; /* 设置字体大小 */

  .msg-item { /* 消息项的样式 */
    padding: 20rpx; /* 设置内边距 */
    border-top: 2rpx solid #f1f1f1; /* 设置上边框 */

    &:first-child { /* 第一个消息项没有上边框 */
      border: 0;
    }

    .item { /* 消息项内部的样式 */
      display: flex; /* 使用弹性布局 */
      padding: 10rpx 0; /* 设置上下内边距 */
      align-items: center; /* 垂直居中对齐 */
      box-sizing: border-box; /* 设置盒模型 */

      .item-tit { /* 项目标题的样式 */
        min-width: 140rpx; /* 设置最小宽度 */
        color: #999; /* 设置字体颜色为浅灰色 */
        line-height: 48rpx; /* 设置行高 */
      }

      .item-txt { /* 项目文本的样式 */
        flex: 1; /* 占据剩余空间 */
        line-height: 48rpx; /* 设置行高 */
      }

      .item-txt.remarks { /* 备注文本的样式 */
        max-width: 600rpx; /* 设置最大宽度 */
        white-space: nowrap; /* 不允许换行 */
        overflow: hidden; /* 超出内容隐藏 */
        text-overflow: ellipsis; /* 超出内容以省略号显示 */
      }

      .copy-btn { /* 复制按钮的样式 */
        display: block; /* 作为块级元素显示 */
        margin-left: 20rpx; /* 设置左边距 */
        border: 2rpx solid #e4e4e4; /* 设置边框 */
        padding: 6rpx 24rpx; /* 设置内边距 */
        border-radius: 50rpx; /* 设置圆角 */
        font-size: 24rpx; /* 设置字体大小 */
        line-height: 28rpx; /* 设置行高 */
      }

      .item-txt.price { /* 价格文本的样式 */
        text-align: right; /* 文本右对齐 */
      }
    }

    .item.payment { /* 支付信息的样式 */
      border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
      color: #eb2444; /* 设置字体颜色为红色 */
      padding-top: 30rpx; /* 设置上边距 */
    }
  }
}

/* 订单详情页脚的样式 */
.order-detail-footer {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 固定在页面底部 */
  width: 100%; /* 设置宽度为100% */
  max-width: 750rpx; /* 设置最大宽度 */
  background: #fff; /* 设置背景颜色为白色 */
  margin: auto; /* 水平居中 */
  display: flex; /* 使用弹性布局 */
  padding: 22rpx 0; /* 设置上下内边距 */
  font-size: 26rpx; /* 设置字体大小 */
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); /* 设置阴影效果 */

  .dele-order { /* 删除订单按钮的样式 */
    margin-left: 20rpx; /* 设置左边距 */
    line-height: 60rpx; /* 设置行高 */
    display: block; /* 作为块级元素显示 */
    margin-right: 20rpx; /* 设置右边距 */
    width: 150rpx; /* 设置宽度 */
    text-align: center; /* 文本居中 */
  }

  .footer-box { /* 页脚容器的样式 */
    flex: 1; /* 占据剩余空间 */
    text-align: right; /* 文本右对齐 */
    line-height: 60rpx; /* 设置行高 */

    .buy-again { /* 再次购买按钮的样式 */
      font-size: 26rpx; /* 设置字体大小 */
      color: #fff; /* 设置字体颜色为白色 */
      background: #eb2444; /* 设置背景颜色为红色 */
      border-radius: 50rpx; /* 设置圆角 */
      padding: 10rpx 20rpx; /* 设置内边距 */
      margin-right: 20rpx; /* 设置右边距 */
    }

    .apply-service { /* 申请服务按钮的样式 */
      font-size: 26rpx; /* 设置字体大小 */
      border-radius: 50rpx; /* 设置圆角 */
      padding: 10rpx 20rpx; /* 设置内边距 */
      border: 1px solid #e4e4e4; /* 设置边框 */
      margin-right: 20rpx; /* 设置右边距 */
    }
  }
}

/* 清除浮动的样式 */
.clearfix {
  &:after { /* 使用伪元素清除浮动 */
    content: " ";
    display: table; /* 创建一个新的格式化上下文 */
    clear: both; /* 清除所有浮动 */
  }
}

/* 订单状态的样式 */
.order-state {
  height: 70rpx; /* 设置高度 */
  line-height: 70rpx; /* 设置行高 */
  text-align: right; /* 文本右对齐 */
  margin-right: 20rpx; /* 设置右边距 */

  .order-sts { /* 订单状态文本的样式 */
    color: #eb2444; /* 设置字体颜色为红色 */
    font-size: 28rpx; /* 设置字体大小 */
  }

  .order-sts.gray { /* 灰色状态文本的样式 */
    color: #999; /* 设置字体颜色为浅灰色 */
    height: 32rpx; /* 设置高度 */
    line-height: 32rpx; /* 设置行高 */
  }

  .order-sts.normal { /* 正常状态文本的样式 */
    color: #333; /* 设置字体颜色为深灰色 */
  }
}
