拐弯的时间线

先看效果图

不想多说，直接上代码

<template>
  <div class="info">
    <div><p class="name">{
  { data.name }}：</p>
      <p>{
  { data.idCard }}</p></div>
    <div><p class="name">家庭住址：</p>
      <p>{
  { data.resideAddress }}</p></div>
  </div>
  <div ref="myElement"
       class="stepOut"
       :class="windowWidth <= 828 ? 'stepOutSmall' : ''"
  >
    <ul>
      <li
        v-if="data.chainDTOS && data.chainDTOS.length >0"
        class="stepItem"
        v-for="(stepItem, index) in data.chainDTOS"
        :key="index"
        :class="[
                    windowWidth <= 828?
                    Math.floor(index / 4) % 2 == 0? 'stepItemLeftStart': 'stepItemBrother'
                    : Math.floor(index / 2) % 2 == 0 ? 'stepItemLeftStart' : 'stepItemBrother'
                  ]"
      >
        <div
          v-if="( windowWidth <= 828
                    ? (index + 1) % 4 != 0 || ((index + 1) / 4) % 2 == 0
                    : (index + 1) % 2 != 0 || ((index + 1) / 2) % 2 == 0 )"
          class="line"
        ></div>
        <div
          v-if="(windowWidth <= 828? index != 0 && (index + 1) % 4 == 0: index != 0 && (index + 1) % 2 == 0) && index + 1 != data.chainDTOS.length"
          :class="['lineCircle',
                      windowWidth <= 828
                      ? ((index + 1) / 4) % 2 == 0
                        ? 'lineCircleLeft'
                        : ''
                      : ((index + 1) / 2) % 2 == 0
                      ? 'lineCircleLeft'
                      : ''
                    ]"
        ></div>