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

.my-all-order {
  .status-tab {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  
  .zy-top-tab {
    display: flex;
    height: 100rpx;
    @extend %bgwhite;
    position: relative;
    $margin: 20rpx;
    .tab-item {
      flex: 1;
      font-size: 28rpx;
      text-align: center;
      margin: 0 $margin;
      // background: red
    }
    .tab-text {
      height: 94rpx;
      @extend %flex-center;
      color: $text1;
      transition: color .2s;
    }
    .active {
      color: $maincolor;
    }
    .bottom-border {
      // position: absolute;
      // bottom: 0;
      background: $maincolor;
      height: 6rpx;
      border-radius: 6rpx;
      transition: left .3s,right .2s;
    }
    @for $i from 1 through 4 {
      .four-#{$i} {
        // left: $margin * (2 * $i - 1) + ((750rpx - $margin * 2 * 4) / 4) * ($i - 1);
        // right: $margin * (9 - 2 * $i) + ((750rpx - $margin * 2 * 4) / 4) * (4 - $i);
      }
    }
    @for $i from 1 through 3 {
      .three-#{$i} {
        // left: $margin * (2 * $i - 1) + ((750rpx - $margin * 2 * 3) / 3) * ($i - 1);
        // right: $margin * (7 - 2 * $i) + ((750rpx - $margin * 2 * 3) / 3) * (3 - $i);
      }
    }
    @for $i from 1 through 2 {
      .two-#{$i} {
        // left: $margin * (2 * $i - 1) + ((750rpx - $margin * 2 * 2) / 2) * ($i - 1);
        // right: $margin * (5 - 2 * $i) + ((750rpx - $margin * 2 * 2) / 2) * (2 - $i);
      }
    }
  }


  .content {
    padding-top: 120rpx;
  }
  .order-item {
    // @extend %pd20;
    @extend %bgwhite;
    padding: 40rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    border: 1rpx solid rgba(189, 189, 189, 0.5);
  }
  .no-order {
    margin-top: 200rpx;
  }
}