page {
  background: #f7f7f7;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.main {
  background-color: $color_bg_one;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  .context {
    flex: 1 1 auto;
    height: 100%;
    overflow-y: scroll;
  }
  .orderProcess {
    font-size: 28px;
  }
  .orderInfoTop {
    font-size: 28px;
    color: $color_font_one;
  }
  .customerTop {
    color: #333333;
    font-size: 28px;
  }
  .customerBottom {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    color: #343434;
    font-size: 28px;
  }

  .colorCardTop {
    font-size: 28px;
  }
  .colorCardBottom {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    overflow: hidden;
    margin-bottom: 24px;
    .leftCont {
      width: 134px;
      height: 134px;
      border-radius: 8px;
      margin-right: 24px;
    }
    .rightCont {
      flex: 1 1 auto;
      overflow: hidden;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      &__top {
        font-size: 28px;
        @include common_ellipsis(1);
      }
      &__bottom {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        width: 100%;
      }
      &__container {
        display: flex;
        flex-flow: row nowrap;
      }
      &__left {
        flex: 1 1 auto;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
      }
      &__right {
        font-size: 28px;
      }
    }
  }
  .paymentMethod {
    text-align: right;
    font-size: 28px;
    color: #f64861;
  }
}
.address_box {
  display: flex;
  .address_box_left {
    margin-right: 24px;
    .cirle {
      border-radius: 50%;
      width: 64px;
      height: 64px;
      background: #4a7fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .address_box_right {
    flex: 1 1 auto;
    .address {
      height: 78px;
      font-size: 28px;
      font-weight: 500;
      @include common_ellipsis(2);
      color: #000000;
      margin-right: 41px;
      display: flex;
      align-items: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /*这里设置几行*/
      overflow: hidden;
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .reatName {
        font-size: 28px;
        font-weight: 500;
        color: #337fff;
        margin-right: 32px;
      }
      .leftbottom {
        display: flex;
        align-items: center;
        .name {
          line-height: 34px;
          width: 84px;
          height: 34px;
          @include common_ellipsis();
          font-size: 28px;
          font-weight: 400;
          color: #343434;
          margin-right: 16px;
        }

        .phone {
          height: 34px;
          font-size: 28px;
          font-weight: 400;
          color: #343434;
        }
      }
    }
  }
}

.bottomBar {
  position: relative;
  z-index: 99;
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
  flex: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 24px;
  background-color: white;
  padding-bottom: calc(20px + constant(safe-area-inset-bottom));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.bottomBar__button {
  font-size: 28px;
}
.remark {
  font-size: 28px;
  color: #9b9b9b;
}

.step-title {
  display: flex;
  flex-flow: row nowrap;
  font-size: 28px;
  align-items: center;
}
.step-status {
  font-weight: 550;
  color: #393939;
  margin-right: 40px;
}
.attachment{
  display: flex;
  flex-flow: row nowrap;
  .step-url-container {
    margin-right: 16px;
    width: 128px;
    height: 128px;
  }
  .step-url {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
