<div class="first-box">
<!--贯穿线-->
<div class="vertical-line-wrap">
<div class="vertical-line"></div>
<div class="vertical-line-arrow"></div>
</div>
<!--开始-->
<div class="white-box">
<div class="timeline-box">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
活动开始
</div>
<div class="timeline-cont">
<div class="timeline-cont-lef" style="border-bottom: 0;">
<div class="d1">游戏调整：音频设置、灯光设置、结束机制游戏调整：音频设置、灯光设置、结束机制游戏调整：音频设置、灯光设置、结束机制游戏调整：音频设置、灯光设置、结束机制游戏调整：音频设置、灯光设置、结束机制游戏调整：音频设置、灯光设置、结束机制游戏调整：音频设置、灯光设置、结束机制游戏调整：音频设置、灯光设置、结束机制</div>
</div>
<div class="timeline-cont-rig" @click="openAdjustment = true">
查看详细>
</div>
</div>
</div>
</div>
</div>
<div class="white-box gray-box">
<!--开始-->
<div class="timeline-box" style="padding-bottom: 0;">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
第一轮开始
</div>
</div>
</div>
<!--观察记录-->
<div class="timeline-box" style="padding-bottom: 0;">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
观察记录
</div>
<div class="timeline-cont">
<div class="timeline-cont-lef">
<div class="observe-record">
<div class="observe-record-lef">观察对象：</div>
<div class="observe-record-rig">
<!--文本类型-->
<div class="o1">打一班 01-李一一</div>
<!--图片类型-->
<div class="o2">
<!--无图-->
</div>
</div>
</div>
<div class="observe-record">
<div class="observe-record-lef">观察对象：</div>
<div class="observe-record-rig">
<!--文本类型-->
<div class="o1">肢动作明显反映提升，敏捷力明显提升</div>
<!--图片类型-->
<div class="o2">
<!--无图-->
</div>
</div>
</div>
</div>
<div class="timeline-cont-rig" @click="openObserve = true">
查看更多>
</div>
</div>
</div>
</div>
<!--观察记录-->
<div class="timeline-box">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
观察记录
</div>
<div class="timeline-cont">
<div class="timeline-cont-lef">
<div class="observe-record">
<div class="observe-record-lef">观察对象：</div>
<div class="observe-record-rig">
<!--文本类型-->
<div class="o1">打一班 01-李一一</div>
<!--图片类型-->
<div class="o2">
<!--无图-->
</div>
</div>
</div>
<div class="observe-record">
<div class="observe-record-lef">观察对象：</div>
<div class="observe-record-rig">
<!--文本类型-->
<div class="o1">那里只有风在呢呢喃喃</div>
<!--图片类型-->
<div class="o2">
<el-image :src="require(`@/assets/images/login-background.jpg`)" fit="cover" style="margin-right: 10px; width: 160px; height: 100px"></el-image>
<el-image :src="require(`@/assets/images/login-background.jpg`)" fit="cover" style="margin-right: 10px; width: 160px; height: 100px"></el-image>
</div>
</div>
</div>
</div>
<div class="timeline-cont-rig" @click="openObserve = true">
查看更多>
</div>
</div>
</div>
</div>
<!--结束-->
<div class="timeline-box">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
第1轮结束
</div>
<div class="timeline-cont">
<div class="timeline-cont-lef" style="border-bottom: 0;">
<div class="d1">参与幼儿：12人</div>
<div class="d1">游戏时间：12分21秒</div>
</div>
<div class="timeline-cont-rig" @click="openStatistics = true">
数据详情>
</div>
</div>
</div>
</div>
</div>
<div class="white-box gray-box">
<!--开始-->
<div class="timeline-box" style="padding-bottom: 0;">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
第2轮开始
</div>
</div>
</div>
<!--观察记录-->
<div class="timeline-box">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
观察记录
</div>
<div class="timeline-cont">
<div class="timeline-cont-lef">
<div class="observe-record">
<div class="observe-record-lef">观察对象：</div>
<div class="observe-record-rig">
<!--文本类型-->
<div class="o1">打一班 01-李一一</div>
<!--图片类型-->
<div class="o2">
<!--无图-->
</div>
</div>
</div>
<div class="observe-record">
<div class="observe-record-lef">观察对象：</div>
<div class="observe-record-rig">
<!--文本类型-->
<div class="o1">那里只有风在呢呢喃喃</div>
<!--图片类型-->
<div class="o2">
<el-image :src="require(`@/assets/images/login-background.jpg`)" fit="cover" style="margin-right: 10px; width: 160px; height: 100px"></el-image>
<el-image :src="require(`@/assets/images/login-background.jpg`)" fit="cover" style="margin-right: 10px; width: 160px; height: 100px"></el-image>
</div>
</div>
</div>
</div>
<div class="timeline-cont-rig" @click="openObserve = true">
查看更多>
</div>
</div>
</div>
</div>
<!--结束-->
<div class="timeline-box">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
第2轮结束
</div>
<div class="timeline-cont">
<div class="timeline-cont-lef" style="border-bottom: 0;">
<div class="d1">参与幼儿：12人</div>
<div class="d1">游戏时间：12分21秒</div>
</div>
<div class="timeline-cont-rig" @click="openStatistics = true">
数据详情>
</div>
</div>
</div>
</div>
</div>
<!--结束-->
<div class="white-box">
<div class="timeline-box">
<div class="timeline-lef">10:02</div>
<div class="timeline-rig">
<div class="timeline-title">
<div class="icon-circle"></div>
活动结束
</div>
</div>
</div>
</div>
</div>
.observe-structure-rig .s1{ position: absolute; margin-top: 3px;}
.observe-structure-rig{ margin-left: 10px; flex: 1;}
.observe-structure{ margin-bottom: 10px; display: flex;}
.student-list-rig{ padding: 0 20px 0 10px; flex: 1;}
.observe-student-list{ margin-bottom: 10px; display: flex; align-items: center;}
.observe-student{ margin-bottom: 10px; display: flex; flex-wrap: wrap;}
.justment-table >>> .el-table th.gutter{display: table-cell!important;}/*优化表头对不齐*/
.observe-record-rig .o1{ margin-bottom: 5px;}
.observe-record{ margin-top: 5px; display: flex;}
.observe-record-rig{ flex: 1;}
.timeline-box{ padding: 30px 20px 30px 0; display: flex;}
.white-box.gray-box{ margin-bottom: 10px; background: #f2f2f2; border-radius: 20px;}
.timeline-cont-rig{ margin-left: 20px; text-decoration: underline; color: #ffb81c; cursor: pointer;}
.timeline-cont-lef{ padding-bottom: 10px; flex: 1; border-bottom: 1px solid #d7d7d7;}
.timeline-cont{ margin-top: 10px; display: flex; align-items: flex-end;}
.timeline-title .d1{ position: relative; color:#333;}
.icon-circle{ position: absolute; top: 3px; left: -31px; z-index: 3; width: 20px; height: 20px; background: #fff; border: 4px solid #7d7d7d; border-radius: 50%;}
.timeline-title{ position: relative; z-index: 2; font-size: 18px; font-weight: bold;}
.app-container{ font-size: 14px;}
.timeline-lef{ padding-top: 3px; width: 100px; text-align: center; font-size: 18px; color:#333; font-weight: bold;}
.timeline-rig{ margin-left: 30px; flex: 1;}
.vertical-line-wrap{ position: absolute; top: 0; left: 100px; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 20px; height: 100%;}
.vertical-line{ width: 6px; height: 100%; background: #d7d7d7;}
.vertical-line-arrow{ border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #d7d7d7;}
.first-box{ padding-bottom: 50px; position: relative; width: 667px;}
