<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">查看详细&gt;</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">查看更多&gt;</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">查看更多&gt;</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">数据详情&gt;</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">查看更多&gt;</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">数据详情&gt;</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;}