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

news2024/5/18 18:39:10

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1642224.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据存储-SD卡存储

手机自带内存较小&#xff0c;不适合存储大量数据&#xff0c;一般&#xff0c;大量数据都会采用外部存储&#xff0c;如&#xff1a;服务器存储、SD卡存储、数据库存储等。 本文讲解在SD卡上存储数据&#xff0c;并实现对数据的读和写。 整体思路&#xff1a;静态权限声明、动…

第五篇:通信脉络:探索计算机外设与总线体系的精髓

通信脉络&#xff1a;探索计算机外设与总线体系的精髓 1 引言 在这个技术日新月异的时代&#xff0c;理解计算机系统的基本构成要素 —— 总线和外设 —— 对于每个从事技术工作的人来说都是至关重要的。这些组件不仅是计算机通信的基石&#xff0c;也直接影响着系统的性能、效…

非对称齿轮的跨棒距算的对不对

前面有一期咱们聊了非对称齿轮《》&#xff0c;非对称齿轮的齿厚测量一般都为跨棒距。最近研究了下计算方法&#xff0c;对计算结果的正确性做了下验证。 在MATLAB中编制了相关的计算程序&#xff1a; 齿轮的模数4&#xff0c;左侧分度圆压力角25&#xff0c;右侧分度圆压力角…

CARIS12如何设置kmall船型文件?

最近我们对船上多波束EM2040D的采集软件进行了升级&#xff0c;从SIS4.3升级至SIS5。当使用CARIS11/12处理kmall数据时&#xff0c;发现往返横切海底线性目标时有10-20m错位。 ​编辑​ 我们开始怀疑SIS5采集的设置有问题&#xff0c;似乎跟时间延迟有关系。但是改了如下图两…

JAVA系列 小白入门参考资料 接口

目录 接口 接口的概念 语法 接口使用 接口实现用例 接口特性 实现多个接口和实现用例 接口间的继承 接口 接口的概念 在现实生活中&#xff0c;接口的例子比比皆是&#xff0c;比如&#xff1a;笔记本上的 USB 口&#xff0c;电源插座等。 电脑的 USB 口上&am…

初学python记录:力扣1235. 规划兼职工作

题目&#xff1a; 你打算利用空闲时间来做兼职工作赚些零花钱。 这里有 n 份兼职工作&#xff0c;每份工作预计从 startTime[i] 开始到 endTime[i] 结束&#xff0c;报酬为 profit[i]。 给你一份兼职工作表&#xff0c;包含开始时间 startTime&#xff0c;结束时间 endTime …

水仙花数问题

问题描述&#xff1a; 求出0&#xff5e;100000之间的所有“水仙花数”并输出。 “水仙花数”是指一个n位数&#xff0c;其各位数字的n次方之和确好等于该数本身&#xff0c;如:153&#xff1d;1^3&#xff0b;5^3&#xff0b;3^3&#xff0c;则153是一个“水仙花数”。 #in…

对链表进行插入排序(详细解析)

对链表进行插入排序&#xff08;详解&#xff09; 题目&#xff1a; 对链表进行插入排序 给定单个链表的头 head &#xff0c;使用 插入排序 对链表进行排序&#xff0c;并返回 排序后链表的头 。 插入排序 算法的步骤: 插入排序是迭代的&#xff0c;每次只移动一个元素&a…

CUDA和显卡驱动

1.安装显卡驱动 https://www.nvidia.com/download/index.aspx?langen-us 由于我的显卡是RTX4060&#xff0c;因此先选择RTX40系列&#xff0c;然后选择RTX4060&#xff0c;进行安装 2.查看显卡对应的CUDA CUDA安装地址&#xff1a;https://developer.nvidia.com/cuda-toolk…

数据库(MySQL)—— 事务

数据库&#xff08;MySQL&#xff09;—— 事务 什么是事务事务操作未控制事务测试异常情况 控制事务一查看/设置事务提交方式&#xff1a;提交事务回滚事务 控制事务二开启事务提交事务回滚事务 并发事务问题脏读&#xff08;Dirty Read&#xff09;不可重复读&#xff08;Non…

小红书流量机制解析

小红书流量机制解析 前言 大家好&#xff0c;我自2020年5月起&#xff0c;开始专注于小红书平台&#xff0c;帮助品牌商家在小红书上经营。在这段时间里&#xff0c;我深入研究了小红书的流量机制&#xff0c;并结合自己的实践经验&#xff0c;为大家带来了这份全网最硬核的小…

【面试经典 150 | 字典树】实现 Trie (前缀树)

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;前缀树 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等内容进行回…

复旦微JFM7VX690计算后IO接口模块,用于雷达信号处理、数据处理等需要高速密集计算的应用场景

计算后IO接口模块 1 介绍 1.1 产品概述 计算后IO接口模块主要由复旦微JFM7VX690型FPGA、国产以太网收发器YT8521、国产BMC芯片GD32F450、国产CPLD芯片EF2L45BG256B、国产内存颗粒等主要芯片组成&#xff0c;采用标准6U VPX尺寸设计。 本计算后IO接口模块主要用于雷达信号处…

实习与就业|基于Springboot+vue的实习与就业管理系统(源码+数据库+文档)

实习与就业目录 基于Springbootvue的实习与就业管理系统 一、前言 二、系统设计 三、系统功能设计 管理员登录 就业管理 企业公告信息管理 企业公告类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主…

SDB2F5 首鼎1.2MHz 输入5V 输出28V 100mA升压DC-DC转换器

SDB2F5是一款固定频率&#xff0c;内部的软启动有很小脉冲电流可延长电池寿命。SDB2F5最低输入电压为2.5V&#xff0c;在输入电压为5V的时候可升压到28V 100mA。SDB2F5在轻负载时自动转成脉冲频率调制模式。SDB2F5有欠压锁定&#xff0c;限流和热过载保护。 特点&#xff1a; …

链舞算法谱---链表经典题剖析

前言&#xff1a;探究链表算法的奥秘&#xff0c;解锁编程新世界&#xff01; 欢迎来到我的链表算法博客&#xff0c;这将是您深入了解链表算法&#xff0c;提升编程技能的绝佳机会。链表作为数据结构的重要成员之一&#xff0c;其动态性和灵活性在实现某些功能上发挥不可替代的…

深入理解 Java 并发:AbstractQueuedSynchronizer 源码分析

序言 在多线程编程中&#xff0c;同步机制是保障线程安全和协调线程之间操作顺序的重要手段。AQS 作为 Java 中同步机制的基础框架&#xff0c;为开发者提供了一个灵活且高效的同步工具。本文将通过对 AQS 源码的分析&#xff0c;解读 AQS 的核心实现原理&#xff0c;并深入探…

同步互斥问题模型

目录 一. 生产者-消费者问题二. 多生产者-多消费者问题三. 吸烟者问题四. 读者-写者问题五. 哲学家进餐问题 \quad 一. 生产者-消费者问题 \quad 问题分析 \quad 如何实现 \quad \quad V操作不会导致进程阻塞&#xff0c;因此两个v操作顺序可以交换。 \quad 二. 多生产者-多消费…

前端 -- 基础 表单标签 - 表单元素 < Select > < textarea >

在表单域中可以定义各种表单元素&#xff0c;这些表单元素就是允许用户在表单中输入或者选择的内容控件。 在之前&#xff0c;我们就讲过 表单元素 分了 三类来讲 &#xff1a; 1 input 输入表单元素 2 select 下拉表单元素 3 textarea 文本域元素 input 表单元素 我们…

AGI要闻:斯坦福李飞飞首次创业,瞄准“空间智能”;OpenAI下周发布搜索产品挑战谷歌;新的开源 AI 眼镜来了|钛媒体AGI | 最新快讯

多方消息证实&#xff0c;OpenAI将会在北京时间5月10日&#xff08;周五&#xff09;凌晨2点公布搜索引擎新产品消息。 斯坦福大学首位红杉讲席教授 李飞飞 通用人工智能&#xff08;AGI&#xff09;领域又公布了一系列重磅消息。 5月4日凌晨&#xff0c;据路透社&#xff0c…