page {
  background: #f2f3f7;
}

.order-detail {
  padding-bottom: calc(126rpx + env(safe-area-inset-bottom));
}

/* 订单状态 */
.order-detail .status-box {
  position: relative;
  height: 170rpx;
  padding: 0 30rpx 10rpx;
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: -10rpx;
}

.order-detail .status-box .bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0;
}

.order-detail .status-box .text {
  position: relative;
  font-family: PingFangSC-Medium, tahoma;
  flex: 1;
}

.order-detail .status-box .status {
  font-size: 32rpx;
  font-weight: 600;
}

.order-detail .status-box .des {
  margin-top: 10rpx;
}

.order-detail .status-box .des .time {
  margin: 0 2rpx;
}

.order-detail .status-box .icon {
  width: 100rpx;
  height: 100rpx;
  font-size: 0;
  margin-right: 90rpx;
}

/* 物流 */
.order-detail .logistics-box {
  background: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
  position: relative;
}

.order-detail .logistics-box .icon {
  width: 24rpx;
  height: 24rpx;
  font-size: 0;
  margin-top: 6rpx;
}

.order-detail .logistics-box .text-arrow {
  flex: 1;
  line-height: 36rpx;
  margin-left: 20rpx;
  padding-right: 24rpx;
}

.order-detail .logistics-box .text-arrow::after {
  width: 10rpx;
  height: 10rpx;
  top: 45%;
}

/* 地址 */
.order-detail .address-box {
  background: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.order-detail .address-box .icon {
  width: 24rpx;
  height: 24rpx;
  font-size: 0;
}

.order-detail .address-box .text-box {
  flex: 1;
  margin-left: 20rpx;
  margin-right: 44rpx;
}

.order-detail .address-box .text-box .user {
  display: flex;
  align-items: flex-start;
  line-height: 24rpx;
  font-weight: 600;
}

.order-detail .address-box .text-box .user .name {
  margin-right: 20rpx;
}

.order-detail .address-box .text-box .address {
  color: #999;
  margin-top: 16rpx;
}

/* 自提地址 */
.order-detail .delivery-certificate {
  background: #fff;
  padding: 0 30rpx 30rpx;
  border-radius: 10rpx;
}

.order-detail .delivery-certificate .tit {
  font-weight: 600;
  padding: 30rpx 0;
}

.order-detail .delivery-certificate .address {
  display: flex;
}

.order-detail .delivery-certificate .address .text {
  flex: 1;
  color: #999;
}

.order-detail .delivery-certificate .address .icon-box {
  display: flex;
  align-items: center;
  margin-right: -30rpx;
}

.order-detail .delivery-certificate .address .icon-box .icon {
  width: 24rpx;
  height: 24rpx;
  font-size: 0;
  padding: 0 30rpx;
}

.order-detail .delivery-certificate .address .icon-box .icon.bl {
  border-left: 2rpx solid #eee;
}

.order-detail .delivery-certificate .code-box {
  margin-top: 30rpx;
  padding: 30rpx;
  box-shadow: 0 0 8rpx rgba(0, 0, 0, .07);
  display: flex;
  align-items: center;
  border-radius: 10rpx;
}

.order-detail .delivery-certificate .code-det {
  position: relative;
}

.order-detail .delivery-certificate .code-det::after {
  position: absolute;
  right: 40rpx;
  top: 50%;
  display: block;
  width: 10rpx;
  height: 10rpx;
  content: " ";
  font-size: 0;
  border-top: 2rpx solid #333;
  border-right: 2rpx solid #333;
  transform: rotate(45deg) translateY(-50%);
}

.order-detail .delivery-certificate .code-box.no-code {
  padding: 0;
  box-shadow: none;
}

.order-detail .delivery-certificate .code-box .code {
  width: 144rpx;
  height: 144rpx;
  font-size: 0;
  margin-right: 20rpx;
}

.order-detail .delivery-certificate .code-box .text-box {
  flex: 1;
}

.order-detail .delivery-certificate .code-box .text-box .item {
  display: flex;
  line-height: 48rpx;
}

.order-detail .delivery-certificate .code-box .text-box .item .i-lable {
  color: #999;
  text-align: justify;
  width: 140rpx;
  height: 48rpx;
  overflow: hidden;
}

.order-detail .delivery-certificate .code-box .text-box .item .i-lable::after {
  content: " ";
  display: inline-block;
  padding-left: 100%;
}

.order-detail .delivery-certificate .code-box .text-box .item .fw {
  font-weight: 600;
}

.order-detail .delivery-certificate .code-box .text-box .item .i-text {
  flex: 1;
}

/* 商品 */
.order-detail .prods-box {
  background: #fff;
  border-radius: 10rpx;
  margin-top: 30rpx;
  padding: 30rpx;
}

.order-detail .prods-box .shop {
  display: flex;
  align-items: center;
}

.order-detail .prods-box .shop .icon {
  width: 24rpx;
  height: 24rpx;
  font-size: 0;
}

.order-detail .prods-box .shop .name {
  font-weight: 600;
  margin-left: 10rpx;
}

.order-detail .prods-box .prod-item {
  padding: 30rpx 0;
  box-shadow: 0 6rpx 6rpx rgba(0,0,0,.01);
}

.order-detail .prods-box .prod-item:last-child {
  box-shadow: none;
  padding-bottom: 0;
}

.order-detail .prods-box .prod-item .info {
  display: flex;
}

.order-detail .prods-box .prod-item .info .prod-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  overflow: hidden;
  font-size: 0;
}

.order-detail .prods-box .prod-item .info .text-box {
  flex: 1;
  margin-left: 20rpx;
  align-self: flex-start;
  position: relative;
  height: 160rpx;
}

.order-detail .prods-box .prod-item .info .text-box .name {
  max-height: 64rpx;
  line-height: 32rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-detail .prods-box .prod-item .info .text-box .sku {
  margin-top: 10rpx;
  color: #999;
  font-size: 20rpx;
}

.order-detail .prods-box .prod-item .info .text-box .price-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4rpx;
  display: flex;  
  align-items: baseline;
  line-height: 1;
}

.order-detail .prods-box .prod-item .info .text-box .price-box .price {
  color: #333;
  margin-right: 30rpx;
}

.order-detail .prods-box .prod-item .info .text-box .price-box .price .big {
  font-size: 24rpx;
}

.order-detail .prods-box .prod-item .info .text-box .price-box .count {
  color: #999;
  margin-right: 10rpx;
}

.order-detail .prods-box .prod-item .action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
}

.order-detail .prods-box .prod-item .action .btn {
  padding: 10rpx 26rpx;
  border: 2rpx solid #ddd;
  border-radius: 60rpx;
  margin-left: 20rpx;
}

/* 订单信息 */
.order-detail .order-info {
  background: #fff;
  border-radius: 10rpx;
  margin-top: 30rpx;
  padding: 2rpx 30rpx 32rpx;
}

.order-detail .order-info .item-box {
  padding-bottom: 30rpx;
  box-shadow: 0 6rpx 6rpx rgba(0,0,0,.01);
}

.order-detail .order-info .item-box:last-child {
  padding-bottom: 0;
  box-shadow: none;
}

.order-detail .order-info .item-box .item {
  padding-top: 30rpx;
  display: flex;
  align-items: flex-start;
  line-height: 32rpx;
}

.order-detail .order-info .item-box .item .text {
  font-weight: 600;
  margin-left: 30rpx;
}

.order-detail .order-info .item-box .item .copy {
  padding: 0 14rpx;
  font-size: 20rpx;
  background: #f3f3f3;
  margin-left: 30rpx;
  border-radius: 40rpx;
}

.order-detail .order-info .item-box .item .price {
  flex: 1;
  justify-content: flex-end;
  color: #333;
  font-weight: 600;
}

.order-detail .order-info .item-box .item.order-price .price {
  color: #fc1b35;
}

.order-detail .order-info .item-box .item.order-price .price .price-text {
  font-weight: 400;
  font-family: -apple-system,Helvetica,sans-serif;
  color: #333;
}

/* 底部 */
.order-detail .foot-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750rpx;
  margin: auto;
  background: #fff;
  border-radius: 10rpx 10rpx 0 0;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  box-shadow: 0 -6rpx 6rpx rgba(0,0,0,.01);
}

.order-detail .foot-box .del-order {
  font-weight: 600;
}

.order-detail .foot-box .btn-box {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.order-detail .foot-box .btn-box .btn {
  padding: 10rpx 26rpx;
  border: 2rpx solid #ddd;
  border-radius: 60rpx;
  margin-left: 20rpx;
  line-height: 36rpx;
  box-sizing: border-box;
}

.order-detail .foot-box .btn-box .btn.btn-r {
  background: #fc1b35;
  color: #fff;
  border: 0;
}