<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
)
