vue css 链式布局模式

<div class="pp-wrap">      
          <div class="pp-left">
            <!--跳活动反思-->
            <div class="even-box" v-for="(item,index) in trackingPtoPLeftList" :key="index" @click="jumpReview(item)">
              <div class="to-box">Play{{ index ? index * 2 + 2 : 2 }}</div>
              <div class="play-cont">
                <div class="play-title">{{ item.activityName }}</div>
                <div class="play-time">{{ item.timeRange }}</div>
                <div class="play-txt">{{ item.activityNotes }}</div>
              </div>
              <div class="play-bot">
                <div class="d1">活动分享:<span>{{ item.shareClass }}</span>({{ item.shareClassCount }})</div>
                <div class="d2">活动教研:<span>{{ item.teacherNames }}({{ item.teacherCount }})</span></div>
              </div>
              <!--右侧的箭头-->
              <el-image :src="require(`@/assets/images/arrow_left_bot.png`)" style="position: absolute; top: 42px; right: -101px; width:100px; height:107px"></el-image>
              <el-image :src="require(`@/assets/images/arrow_right_bot.png`)" style="position: absolute; top: 149px; right: -101px; width:100px; height:107px"></el-image>
            </div>
          </div>
          <div class="pp-center">
            <div class="middle-box">
              <div class="other-box">
                <div class="other-box-head">              
                  <span class="s1">游戏缘起</span>
                  <span class="s2">{{ form.createTime }}</span>              
                </div>
                <div class="other-cont">
                  {{ form.origin }}
                </div>
              </div>       
            </div>
            <!--跳活动分享-->
            <div class="middle-box" v-for="(item,index) in trackingPtoPList" :key="index" @click="jumpShare(item)">
              <div class="to-box">to</div>  
              <div class="mid-cont">     
                <div class="m1">幼儿：{{ item.kidBehavior }}</div>
                <div class="m2">教师引导：{{ item.teacherBehavior }}</div>
              </div>
            </div>
          </div>
          <div class="pp-right">
            <!--跳活动反思-->
            <div class="odd-box" v-for="(item,index) in trackingPtoPRightList" :key="index" @click="jumpReview(item)">
              <div class="to-box">Play{{ index ? index * 2 + 1 : 1 }}</div>
              <div class="play-cont">
                <div class="play-title">{{ item.activityName }}</div>
                <div class="play-time">{{ item.timeRange }}</div>
                <div class="play-txt">{{ item.activityNotes }}</div>
              </div>
              <div class="play-bot">
                <div class="d1">活动分享:<span>{{ item.shareClass }}</span>({{ item.shareClassCount }})</div>
                <div class="d2">活动教研:<span>{{ item.teacherNames }}</span>({{ item.teacherCount }})</div>
              </div>
              <!--左侧的箭头-->
              <el-image :src="require(`@/assets/images/arrow_right_bot.png`)" style="position: absolute; top: 53px; left:-101px; width:100px; height:107px"></el-image>
              <el-image :src="require(`@/assets/images/arrow_left_bot.png`)" style="position: absolute; top: 160px; left: -101px; width:100px; height:107px"></el-image>
            </div>
          </div>
        </div>


.pp-right{ padding-top: 36px;}
.pp-wrap{ margin-top: 20px; display: flex; width: 1595px;}
.pp-left{ padding-top: 260px;}
.even-box,.odd-box{ position: relative; margin-bottom: 60px; width: 408px; height: 384px; background: #f7f7f7; border: 1px solid #797979; border-radius: 20px;}
.middle-box{ position: relative; margin: 0 100px; width: 579px; height: 185px; border: 1px solid #797979; border-radius: 20px;}
.middle-box{ margin-bottom: 37px; background: #f7f7f7;}
.to-box{ margin: 7px 0 0 8px; display: flex; justify-content: center; align-items: center; width: 106px; height: 56px; font-size: 26px; font-weight: bold; border: 1px solid #797979; border-radius: 28px;}
.other-box{ padding: 20px;}
.other-box-head{ display: flex; align-items: baseline;}
.other-box-head .s1{ max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 28px; font-weight: bold;}
.other-box-head .s2{ margin-left: 20px; font-size: 16px; color: #999;}
.other-cont{ margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px;}
.mid-cont div{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mid-cont{ margin-top: 30px; padding: 0 20px; font-size: 20px;}
.play-bot span{ max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.play-bot .d1,.play-bot .d2{ display: flex;}
.play-bot .d2{ margin-top: 10px;}
.play-bot{ padding: 20px; box-sizing: border-box; font-size: 18px;}
.play-txt{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.play-txt{ margin-top: 20px; font-size: 18px;}
.play-time{ margin-top: 15px; font-size: 16px; color: #999;}
.play-title{ font-size: 28px; font-weight: bold;}
.play-cont{ padding: 10px 20px 0 20px; height: 210px; box-sizing: border-box; border-bottom: 1px solid #797979;}

箭头两个 大小都是100*107