@import '@/assets/bundle.scss';

.order-status {
  padding: 80rpx;
  .zy-step {
    color: $text1;
    &-item {
      font-size: 32rpx;
      display: flex;
    }
    &-head {
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
      flex: none;
    }
    &-line {
      width: 2rpx;
      flex: 1;
      position: absolute;
      top: 22rpx;
      height: 100%;
      background: $border1;
    }
    &-icon {
      width: 40rpx;
      height: 40rpx;
      // background: $border1;
      // border-radius: 50%;
      position: absolute;
      top: 4rpx;
      @extend %flex-center;
      .dot {
        width: 14rpx;
        height: 14rpx;
        background-color: $border1;
        border-radius: 50%;
      }
      .first-dot {
        width: 16rpx;
        height: 16rpx;
        padding: 5rpx;
        border: 4rpx solid $maincolor;
        background-color: $maincolor;
        background-clip: content-box;
      }
    }
    &-main {
      flex: 1;
      margin-left: 50rpx;
      padding-bottom: 50rpx;
    }
    &-title {
      @extend %flex-between;
    }
    .left {
      font-size: 34rpx;
      font-weight: 400;
    }
    .first-left {
      color: $maincolor;
    }
    .right {
      font-size: 24rpx;
      color: $text3;
    }
    &-des {
      color: $text3;
      font-size: 24rpx;
    }
  }
}