.page-order-detail {
  font-size: 24rpx;
  background: #f2f3f7;
  min-height: calc(100vh - (126rpx + env(safe-area-inset-bottom)));
  padding-bottom: 126rpx;
  padding-bottom: calc(126rpx + env(safe-area-inset-bottom));

  /* 订单状态 */
  .status-box {
    position: relative;
    height: 170rpx;
    padding: 0 30rpx 10rpx;
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: -10rpx;
    .bg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 0;
    }
    .text {
      position: relative;
      font-family: PingFangSC-Medium, tahoma;
      flex: 1;
    }
    .status {
      font-size: 32rpx;
      font-weight: 600;
    }
    .des {
      margin-top: 10rpx;
      .time {
        margin: 0 2rpx;
      }
    }
    .icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 0;
      margin-right: 90rpx;
      position: relative;
    }
  }

  /* 物流 */
  .logistics-box {
    background: #fff;
    padding: 30rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30rpx;
    position: relative;
    .icon {
      width: 24rpx;
      height: 24rpx;
      font-size: 0;
      margin-top: 6rpx;
    }
    .text-arrow {
      flex: 1;
      line-height: 36rpx;
      margin-left: 20rpx;
      padding-right: 24rpx;
      &::after {
        width: 10rpx;
        height: 10rpx;
        top: 45%;
      }
    }
  }

  /* 自提订单提货信息（二维码、门店、提货码等） */
  .delivery-certificate {
    background: #fff;
    padding: 30rpx;
    border-radius: 10rpx;
    position: relative;
    .shop-info {
      border-bottom: 1rpx dashed #E1E1E1;
      &::v-deep.store-item {
        margin: 0;
        padding: 0;
        padding-bottom: 24rpx;
      }
    }
  }

  /* 提货码 */
  .delivery-certificate {
    .code {
      padding-top: 80rpx;
      display: flex;
      justify-content: center;
      .qr-code {
        width: 250rpx;
        height: 250rpx;
        padding-right: 33rpx;
      }
    }
  }

  /* 提货人信息 */
  .delivery-certificate {
    .consignee-info {
      margin-top: 50rpx;
      .info {
        display: flex;
        font-size: 28rpx;
        color: #5B5B5B;
        line-height: 33rpx;
        margin-bottom: 16rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .i-label {
          width: 120rpx;
          min-width: 120rpx;
          text-align: justify;
          text-align-last: justify;
          margin-right: 16rpx;
        }
        .station-code {
          font-weight: normal;
          color: #333333;
          font-weight: 600;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;
          .code-text {
            display: flex;
          }
          .copy {
            width: 62rpx;
            height: 32rpx;
            background: #FFEEEC;
            border-radius: 60rpx;
            font-size: 20rpx;
            color: #F81A1A;
            text-align: center;
            margin-left: 16rpx;
            -webkit-text-size-adjust: none;
          }
          .used {
            color: #999999;
            font-size: 24rpx;
            font-weight: normal;
          }
          .be-use {
            color: #333333;
            font-size: 24rpx;
            font-weight: normal;
          }
        }
        .writtenOff {
          .code-text {
            color: #999999;
            text-decoration: line-through;
          }
        }
      }
    }
  }

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

  .order-info.voucher-code-con {
    .item-box {
      .item {
        align-items: center;
      }
    }
  }

  /* / 券码（虚拟商品） */
  .address-box {
    .icon {
      width: 24rpx;
      height: 24rpx;
      font-size: 0;
    }
    .text-box {
      flex: 1;
      margin-left: 20rpx;
      margin-right: 44rpx;
      .user {
        display: flex;
        align-items: flex-start;
        line-height: 24rpx;
        font-weight: 600;
        .name {
          margin-right: 20rpx;
        }
      }
      .address {
        color: #999;
        margin-top: 16rpx;
        width: 680rpx;
        word-break: break-word;
      }
    }
  }

  /* 订单信息 */
  .prods-box {
    background: #fff;
    border-radius: 10rpx;
    margin-top: 30rpx;
    padding: 30rpx;
    .shop {
      display: flex;
      align-items: center;
      .icon {
        width: 24rpx;
        height: 24rpx;
        font-size: 0;
      }
      .name {
        font-weight: 600;
        margin-left: 10rpx;
        max-width: 90%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        word-break: break-word;
      }
    }
    .prod-item {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f2f3f7;
      &:last-child {
        box-shadow: none;
        border-bottom: 0;
      }
      .info {
        display: flex;
        .prod-img {
          width: 160rpx;
          height: 160rpx;
          border-radius: 10rpx;
          overflow: hidden;
          font-size: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .text-box {
          flex: 1;
          margin-left: 20rpx;
          align-self: flex-start;
          position: relative;
          height: 160rpx;
          .name {
            max-height: 64rpx;
            line-height: 32rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
          }
          .sku {
            margin-top: 10rpx;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            .sku-text {
              color: #999;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-word;
              max-width: 50%;
            }
            .activity-logo {
              margin-top: 4rpx;
              background: #fc1b35;
              color: #fff;
              padding: 4rpx 8rpx;
              border-radius: 6rpx;
              width: auto;
              margin-right: 10rpx;
              white-space: nowrap;
            }
          }
          .price-box {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 4rpx;
            display: flex;
            align-items: baseline;
            line-height: 1;
            .price {
              color: #333;
              margin-right: 30rpx;
              .big {
                font-size: 24rpx;
              }
            }
            .count {
              color: #999;
              margin-right: 10rpx;
            }
          }
        }
      }
      .action {
        display: flex;
        margin-left: auto;
        .btn {
          padding: 10rpx 26rpx;
          border: 2rpx solid #ddd;
          border-radius: 60rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
  .order-info {
    background: #fff;
    border-radius: 10rpx;
    margin-top: 30rpx;
    padding: 2rpx 30rpx 32rpx;
    .item-box {
      padding-bottom: 20rpx;
      box-shadow: 0 6rpx 6rpx rgba(0,0,0,.01);
      &:last-child {
        padding-bottom: 0;
        box-shadow: none;
      }
      .item {
        padding-top: 30rpx;
        display: flex;
        align-items: flex-start;
        line-height: 32rpx;
        .text {
          flex: 1;
          font-weight: 600;
          margin-left: 30rpx;
          word-break: break-word;
          .virtual-item {
            display: flex;
            margin-top: 12rpx;
            line-height: 1.5em;
            &:first-of-type {
              margin-top: 0;
            }
          }
        }
        .msg-text {
          display: grid;
          line-height: 1.5em;
        }
        .virtual {
          line-break: anywhere;
        }
        .virtual.virt-1 {
          width: 44%;
          margin-right: 20rpx;
        }
        .virtual.virt-2 {
          flex: 1;
        }
        .copy {
          padding: 0 14rpx;
          font-size: 20rpx;
          background: #f3f3f3;
          margin-left: 30rpx;
          border-radius: 40rpx;
        }
        .price {
          flex: 1;
          justify-content: flex-end;
          color: #333;
          font-weight: 600;
        }
        .price.weak {
          font-weight: 400;
          color: #666;
        }
      }
      .item.order-price {
        .price {
          color: #fc1b35;
          .price-text {
            font-weight: 400;
            font-family: -apple-system,Helvetica,sans-serif;
            color: #333;
          }
          .score-apart {
            padding-left: 6rpx;
            font-size: 26rpx;
          }
        }
      }
    }
  }

  /* 底部 */
  .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);
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    .del-order {
      font-weight: 600;
    }
    .btn-box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      .btn {
        padding: 10rpx 26rpx;
        border: 2rpx solid #ddd;
        border-radius: 60rpx;
        margin-left: 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
      .btn.btn-r {
        background: #fc1b35;
        color: #fff;
        border: 0;
      }
    }
    .operation-box {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
    .more-btn {
      margin-left: 20rpx;
    }
  }

  .prods-box {
    .prod-item {
      .info {
        .text-box {
          .sku {
            .presale-logo {
              display: flex;
              align-items: center;
              margin-top: 4rpx;
              white-space: nowrap;
              flex: 1;
              .activity-logo {
                margin-top: 0;
              }
            }
          }
        }
      }
      .presale-steps {
        &::v-deep.uni-steps {
          .uni-steps__column-text {
            border-bottom-style: none;
            margin-bottom: 20px;
            flex-direction: row;
            justify-content: space-between;
            border-bottom-style: none;
            margin-bottom: 10px;
            flex-direction: row;
            justify-content: space-between;
          }
        }
        &::v-deep {
          .uni-steps {
            .uni-steps-active {
              .uni-steps__column-desc {
                color: #000 !important;
              }
            }
          }
        }
      }
    }
  }

  image {
    width: 100%;
    height: 100%;
  }
}

.order-detail {
}

/* / 全部留言（虚拟商品） */
.order-msg {
  .msg-item {
    .item.all-msg {
      position: relative;
      .item-txt {
        word-break: break-word;
        display: grid;
      }
      .item-txt.pd {
        padding-right: 32rpx;
      }
    }
  }
}
.more-msg {
  position: relative;
  right: 4px;
  top: 7px;
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid #666;
  border-width: 1px 1px 0 0;
  content: " ";
  font-size: 0;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}

/* 查看留言弹窗 */
.popup-hide {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  .con-tit {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 30rpx;
    .sure {
      font-size: 0;
      width: 32rpx;
      height: 32rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .tit-text {
      flex: 1;
      text-align: center;
    }
  }
  .virtual-goods-msg-pop {
    height: auto;
    .con-tit {
      .tit-text {
        text-align: left;
      }
    }
    .msg-pop-con {
      .msg-list {
        padding: 20rpx 30rpx;
        margin-bottom: 140rpx;
      }
      .msg-item {
        display: flex;
        margin-bottom: 30rpx;
      }
      .item-con {
        font-size: 24rpx;
        word-wrap: break-word;
        word-break: break-word;
      }
      .item-con.weak {
        color: #999999;
        margin-right: 20rpx;
        width: 180rpx;
        min-width: 180rpx;
      }
      .pop-foot {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 0 20rpx;
        margin-bottom: 30rpx;
        margin-top: 20rpx;
        box-sizing: border-box;
        background: #fff;
        .foot-btn {
          font-size: 26rpx;
          color: #fff;
          width: 100%;
          background: #E43130;
          border-radius: 140rpx;
          padding: 20rpx 0;
          box-sizing: border-box;
        }
      }
    }
  }
}
.popup-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10rpx 10rpx 0 0;
}
.close {
  color: #666;
  font-size: 32rpx;
  &::before {
    content: "\2715";
  }
}

/* / 全部留言（虚拟商品） */

/* 券码（虚拟商品） */
.order-info.voucher-code-con {
  padding-top: 32rpx;
  .item-box.voucher-code-list {
    max-height: 470rpx;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20rpx 10rpx 20rpx 0;
    .item {
      padding-top: 0;
    }
  }
  .item-box.tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    margin-bottom: 10rpx;
    box-shadow: none;
    .item {
      width: auto;
      &:not(:last-child) {
        margin-bottom: 0;
      }
    }
    .record {
      display: flex;
      align-items: center;
      color: #5b5b5b;
      .text-arrow::after {
        width: 12rpx;
        height: 12rpx;
        border-color: #5b5b5b;
      }
    }
  }
  .item-box {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0;
      &:not(:last-child) {
        margin-bottom: 16rpx;
      }
      .item-left {
        flex: 1;
        flex-wrap: wrap;
        padding-right: 14rpx;
        box-sizing: border-box;
        .txt.flex-item {
          display: flex;
          .lf {
            white-space: nowrap;
            line-height: 1.5em;
          }
          .rg {
            line-height: 1.5em;
          }
        }
      }
      .item-right {
        display: block;
        width: 44rpx;
        height: 44rpx;
        margin-right: 18rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .txt {
        &:not(:last-child) {
          margin-bottom: 10rpx;
        }
      }
      .txt.strong {
        font-weight: bold;
      }
      .txt.weak {
        color: #999;
      }
      .tips {
        color: #999;
      }
      .copy-btn2 {
        background: #F7F8FA;
        padding: 4rpx 20rpx;
        border-radius: 60rpx;
        font-size: 24rpx;
      }
    }
    .item.used {
      .tips {
        margin-right: 8rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
      .code-row {
        .code {
          text-decoration: line-through;
          color: #999;
        }
      }
    }
  }
}

.more-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750rpx;
  margin: auto;
  z-index: 210;
}
.more-popup-mask {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255,-0.1);
}
.more-box {
  position: absolute;
  bottom: 85rpx;
  bottom: calc(85rpx + constant(safe-area-inset-bottom));
  bottom: calc(85rpx + env(safe-area-inset-bottom));
  max-height: 150rpx;
  border-radius: 8rpx;
  left: 54rpx;
  width: 147rpx;
  padding: 10rpx 0;
  background: #FFFFFF;
  z-index: 2202;
  line-height: 50rpx;
  box-shadow: 0px 0px 30rpx #cdd0db;
  text-align: center;
  border-bottom-left-radius: 0rpx;
  .more-box-item {
    text-align: center;
  }
  &:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 20rpx solid #FFFFFF;
    border-right: 20rpx solid transparent;
    position: absolute;
    bottom: -10rpx;
    left: 0;
  }
}

/* 赠品 */
.prod-item {
  .gift-prods {
    margin: 20rpx 0 20rpx 174rpx;
    .gift-item {
      display: inline-block;
      width: 100%;
      color: #333;
      &:not(:last-child) {
        margin-bottom: 12rpx;
      }
      .name {
        display: inline-block;
        vertical-align: middle;
        padding-right: 10rpx;
        width: 85%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .num {
        display: inline-block;
        vertical-align: middle;
        padding-right: 10rpx;
      }
      &::after {
        content: '';
        display: inline-block;
        width: 12rpx;
        height: 12rpx;
        border-top: 2rpx solid #333333;
        border-right: 2rpx solid #333333;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        vertical-align: middle;
      }
    }
  }
}

