vue 时间轴页面 自己的写法 欢迎交流指正

发布于：2024-05-06 ⋅ 阅读:(15) ⋅ 点赞:(0) 

        <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;}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布