拐弯的时间线

<div ref="myElement"
              class="stepOut"
              :class="windowWidth <= 1024 ? 'stepOutSmall' : ''"
            >
              <ul>
                <li
                  class="stepItem"
                  v-for="(stepItem, index) in stepInfo"
                  :key="index"
                  :class="[
                    windowWidth <= 1024?  
                    Math.floor(index / 3) % 2 == 0? 'stepItemLeftStart': 'stepItemBrother'
                    : Math.floor(index / 6) % 2 == 0 ? 'stepItemLeftStart' : 'stepItemBrother'
                  ]"
                >
                  <!-- 模拟步骤条连接线，动态显示 一行最多展示6个，如果超过六个，连线则为圆弧状，如果是1024尺寸，则一行最多展示为3个
                  如果此步骤能不能整除6/3或者此步骤index+1除以6/3的余数可以整除2的话，显示之前（前提：当从左往右的时，判断当前步骤的索引是否大于步骤的长度来决定显示，当为从右往左时，则判断当前索引是否大于步骤的长度来决定显示） -->
                  <div
                    v-if="( windowWidth <= 1024
                    ? (index + 1) % 3 != 0 || ((index + 1) / 3) % 2 == 0
                    : (index + 1) % 6 != 0 || ((index + 1) / 6) % 2 == 0 ) && index!=stepInfo.length-1"
                    class="line"
                  ></div>
                  <!-- 圆弧线 如果可以整除6/3则为当前行的最后一个，显示为弧线 -->
                  <div
                    v-if="(windowWidth <= 1024? index != 0 && (index + 1) % 3 == 0: index != 0 && (index + 1) % 6 == 0) && index + 1 != stepInfo.length"
                    :class="['lineCircle',
                      windowWidth <= 1024
                      ? ((index + 1) / 3) % 2 == 0
                        ? 'lineCircleLeft'
                        : ''
                      : ((index + 1) / 6) % 2 == 0
                      ? 'lineCircleLeft'
                      : ''
                    ]"
                  ></div>
                  <div class="stepItemInner">
                    <div class="stepItemInner_content">
                      <img
                        class="step_bg"
                        :src="stepItem.status==1?require('../../../../../assets/images/odr/progress_bg1.png'):
                        stepItem.status==2?require('../../../../../assets/images/odr/progress_bg2.png'):
                        stepItem.status==3?require('../../../../../assets/images/odr/progress_bg3.png'):
                        require('../../../../../assets/images/odr/progress_bg4.png')"
                        alt=""
                      />
                      <!-- 时间  -->
                      <p class="stepTime">{{ stepItem.time }}</p>
                      <!-- 步骤名称  -->
                      <p class="stepStatus" :style="{color:stepItem.status==1?'#FF9900':stepItem.status==2?'#5398F7':stepItem.status==3?'#6C87EA':'#00C242'}">{{ stepItem.title }}</p>
                      <!-- 步骤描述  -->
                      <p class="statusDesc" v-html="stepItem.description"></p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

.stepOut {
    width:100%;
    display: flex;
    justify-content: center;
    margin-top:32px;
    ul{
      width:1000px;
    }
    &.stepOutSmall {
      // height:  137px;
      .stepItem {
        width: 160px;
        height: 137px;
        float: left;
        font-family: 'PingFangSC-Regular';
        font-size: 14px;
        text-align: center;
        position: relative;
        .lineCircle {
          // left: 55%;
          left:160px;
          top: 12px;
          position: absolute;
          display: block;
          border-left-color: white;
          border-left-width: 0px;
          width:77%;
          border-color: white white white white;
          border-left-style: hidden;
          border-left: none;
          border-top: 8px solid #f5f5f5;
          border-right: 8px solid #f5f5f5;
          border-bottom: 8px solid #f5f5f5;
          border-bottom: 8px solid #f5f5f5;
          border-left: 0px solid #c0c4cc;
          // height: 102%;
          border-radius: 0px 80px 80px 0px;
        }
        &:nth-child(n + 6) {
          float: inherit !important;
          right: inherit;
        }
        &:nth-child(n + 3) {
          float: right !important;
          right: 8%;
        }
        &.stepItemLeftStart {
          float: left !important;
          right: 0;
          + .stepItemBrother {
            .line {
              display: none;
            }
          }
        }
        .lineCircleLeft {
          left: -38%;
          width: 86%;
          border-top: 8px solid #f5f5f5;
          border-right: 0 solid #c0c4cc;
          border-bottom: 8px solid #f5f5f5;
          border-bottom: 8px solid #f5f5f5;
          border-left: 8px solid #f5f5f5;
          border-radius: 80px 0px 0px 80px;
          height:146px;
        }
        .line {
          position: absolute;
          top: 12px;
          left: 74.5%;
          border-bottom: 8px solid #f5f5f5;
          width: 160px;
          z-index: 111;
        }
      }
    }
    .stepItem {
      width: 160px;
      height: 137px;
      float: left;
      font-family: 'PingFangSC-Regular';
      font-size: 14px;
      text-align: center;
      position: relative;
      .stepItemInner {
        position: absolute;
        width: 120px;
        height: 91px;
        top: 8px;
        // left: 55%;
        z-index: 112;
        .stepItemInner_content {
          position: relative;
          width: 100%;
          height: 100%;
          .step_bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          .stepTime {
            position: absolute;
            top: -21px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            color: #999999;
          }
          .stepStatus {
            position: absolute;
            top: 26px;
            left: 12px;
            font-size: 12px;
            color: #ff9900;
          }
          .statusDesc {
            position: absolute;
            top: 49px;
            left: 12px;
            font-size: 12px;
            color: #333333;
          }
        }
      }
      .lineCircle {
        left: 38%;
        top: 12px;
        position: absolute;
        display: block;
        border-left-color: white;
        border-left-width: 0px;
        width: 77%;
        border-color: white white white white;
        border-left-style: hidden;
        border-left: none;
        border-top: 8px solid #f5f5f5;
        border-right: 8px solid #f5f5f5;
        border-bottom: 8px solid #f5f5f5;
        border-bottom: 8px solid #f5f5f5;
        border-left: 0px solid #c0c4cc;
        height: 146px;
        border-radius: 0px 80px 80px 0px;
      }
      &:nth-child(n + 6) {
        float: right !important;
        right: 2%;
      }
      &.stepItemLeftStart {
        float: left !important;
        right: 0;
        + .stepItemBrother {
          .line {
            display: none;
          }
        }
      }
      .lineCircleLeft {
        left: -38%;
        width: 86%;
        border-top: 8px solid #f5f5f5;
        border-right: 0 solid #c0c4cc;
        border-bottom: 8px solid #f5f5f5;
        border-bottom: 8px solid #f5f5f5;
        border-left: 8px solid #f5f5f5;
        border-radius: 80px 0px 0px 80px;
        height:146px;
      }
      .line {
        position: absolute;
        top: 12px;
        // left: 74.5%;
        left:58px;
        border-bottom: 8px solid #f5f5f5;
        width:160px;
        z-index: 111;
      }
    }
  }