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

最新推荐文章于 2024-07-18 15:27:00 发布
最新推荐文章于 2024-07-18 15:27:00 发布
阅读量393 收藏
点赞数 3
分类专栏： vue css 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27806371/article/details/138349932
版权
vue 同时被 2 个专栏收录
44 篇文章 0 订阅
订阅专栏
css
13 篇文章 0 订阅
订阅专栏
文章描述了一个使用IT技术支持的幼儿活动过程，包括游戏调整、观察记录（含文本和图片信息）、以及每轮游戏的结束统计。活动管理者可以追踪并分析参与者的表现和游戏时间。
摘要由CSDN通过智能技术生成 

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

木毅01
关注
专栏目录
Vue2时间轴组件（TimeLine/分页、自动顺序播放、暂停、换肤功能、时间选择，鼠标快速滑动）
挣钱花388的博客
09-13 719
项目背景是 一天的时间轴 10分钟为一间隔 一天被划分成144个节点 一页面12个节点light天亮模式dark黑夜模式。
Vue之时间轴组件
weixin_30500473的博客
02-13 6094
github地址：https://github.com/SunshineMibai/vue-timeline 实现思路及步骤： 页面分为四个部分 1、左侧时间 2、中间圆点 3、右侧内容 4、虚线部分 最外层div,relative布局,方便子元素计算尺寸 左侧时间固定宽度，显示时间（本demo:100px）,之后absolute绝对定位（left:0） 中间圆点ab...
Vue2时间轴（横向）
Mr Dear的博客
04-08 1万+
支持初始选中年份和时间轴数据手动传入，自适应均匀排列，每个元素周围分配相同的空间
【前端基础】CSS样式+Vue中绘制时间轴
警警的博客
05-10 977
是相同的选择器，用于向下穿透组件的边界，使得在子组件中能够修改其内部元素的样式。它们可以用于在父组件中修改子组件的样式，但是这种选择器在最新版本的 Vue.js 中已经被废弃，不推荐使用。这些都是深度选择器，用于修改子组件的样式。它们主要用于解决作用域样式和组件样式之间的冲突问题。是 Vue.js 2.6.0 版本引入的新选择器，用于取代已经废弃的。它们具有相同的功能，都用于穿透子组件的边界，修改子组件内部元素的样式。在 Vue.js 中，
Vue2时间轴（Timeline）
Mr Dear的博客
10-15 1万+
自定义设置时间轴的宽度（width）和描述文本
Vue3时间轴（Timeline）
Mr Dear的博客
04-18 7920
垂直展示的时间流信息组件，支持：自定义样式；使用虚线；使用右侧或左侧或中间时间轴；功能丰富，简单易用😁😁
Vue时间轴
Ninewu的博客
03-07 584
之前有这样子的需求没有用第三方插件于是自己写一个简单的时间轴。
vue 时间轴 vue3
最新发布
weixin_71574589的博客
07-18 1006
vue 时间轴 vue3
vue 时间线组件（时间轴组件）
热门推荐
qq_32886245的博客
10-09 2万+
效果 vue-时间线组件（时间轴组件）代码 <template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"> <div class="out-circle">
前端学习笔记____Vue2+Vue3全家桶
weixin_55181759的博客
08-09 7289
前端学习笔记____Vue2+Vue3全家桶前言第一部分 VUE基础一、Vue简介1. Vue是什么?2. Vue发展历史3. Vue的特点二、初识Vue1. Vue模板语法2. 数据绑定▲单向数据绑定v-bind▲ 双向数据绑定v-model3. el与data的两种写法▲ el的两种写法▲ data的两种写法4. MVVM模型5.数据代理6. 事件处理▲ 事件处理v-on▲ 事件修饰符▲ 键盘事件key7. 计算属性computed与监视(侦听)属性watch▲ 计算属性－computed▲ 监视(侦听
VUE-任务进程（时间轴）
10-09
公司提出一个需求，要求写一个任务进程组件用于监控工作时间内任务完成情况。包括任务状态，任务起止时间，当前时间线，任务是否延迟开始。 压缩包中不包含node_modules,请下载后自行安装相关插件
vuecutetimeline一个可爱的Vuejs时间轴组件
08-09
vue-cute-timeline：一个可爱的Vue.js时间轴组件
vue-timeLine.vue
08-18
利用vue-element的步骤组件el-steps实现横向时间轴，实现点击时间轴的时间节点动态的加载订单数据列表进行展示
vue横向树结构_基于vue.js实现树形表格的封装
weixin_39521835的博客
12-19 1241
基于vue.js实现树形表格的封装(vue-tree-table)前言由于公司产品(基于vue.js)需要，要实现一个树形表格的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个，还望大家多多指教。主要技术点：vue子组件的递归实现及相关样式的实现树形表格实现效果图(Demo)主要代码index.vue页面实现业务逻辑代码，比如树表格上面的一些操作按钮的...
vue 左右循环滑动_VUE中鼠标滚轮使div左右滚动的方法详解
weixin_39839478的博客
12-19 1660
前言技术点： addEventListener/attachEvent(传递参数)功能描述： 鼠标停在div中，若div有x轴滚动条，则鼠标滚轮控制x轴滚动条横向滚动一、单个实现1.定义变量data () {return {domObj: null}}2.编写方法绑定事件scrollFunction () {this.domObj = document.getElementById('ceshi'...
综合架构web服务之nginx详解
embelfe_segge的博客
03-07 900
文章目录 nginx 服务配置详细介绍 关于作者 前言 一、nginx web 入门简介 1.1 什么是nginx 1.2 常见的网站服务 1.3 nginx 网站服务特点 1.4 网站页面访问原理 二、nginx 服务部署安装 2.1实验环境 2.2 YUM 安装 2.3 源码编译安装 2.4 nginx重要文件目录结构 2.5 虚拟主机介绍及配置 2.5.1利用nginx服务搭建一个网站(www) 2.5.2 location介绍、location 访问控制及 优雅404显示 2.
Java Web从入门到实战
m0_67393342的博客
07-30 2249
操作系统：管理计算机硬件与软件资源的计算机程序，同时也是计算机系统的内核与基石。主流操作系统Linux发展历程Linux特点Linux与其它操作系统的区别Linux发行商和常见发行版先安装虚拟机，再安装CentosVmware简介Vmware下载：https://www.vmware.com/cn.htmlCentOS镜像下载：https://www.centos.org/download/ 高速下载地址简介：SecureCRT是一款支持SSH（SSH1和SSH2）的终端仿真程序，简单地说是Windows下
Vue 实现时间轴
博观而约取，厚积而薄发。
09-01 2930
<template> <div class="container"> <div class="coin"> <div class="xs_one"></div> <div class="coinAll" v-for="(item,index) in list" :key="index" :class="{one:index==0}"> <span :class="{two:(ind.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值