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

        <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.mzph.cn/pingmian/7171.shtml

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

相关文章

理解 C++ 中的 “placement new“ 和 `reinterpret_cast`

概述 在 C 编程中&#xff0c;我们经常会遇到需要进行低级内存操作的情况。在这种情况下&#xff0c;了解和正确使用工具变得至关重要&#xff0c;以确保我们的代码既高效又安全。本文将深入探讨两个在 C 中经常用于低级内存操作的工具&#xff1a;“placement new” 和 reint…

用于图生成的自回归扩散模型 笔记

1 Title Autoregressive Diffusion Model for Graph Generation&#xff08;Lingkai Kong、Jiaming Cui、Haotian Sun、Yuchen Zhuang、B. Aditya Prakash、Chao Zhang&#xff09;【PMLR 2022】 2 Conclusion This study propose an autoregressive diffusion model …

iOS ------ JSONModel源码

一&#xff0c;JSONModel的基本使用 1&#xff0c;基本使用方法 - (instancetype)initWithDictionary:(NSDictionary *)dict error:(NSError **)err; - (instancetype)initWithData:(NSData *)data error:(NSError **)error; - (instancetype)initWithString:(NSString *)str…

Python深度学习基于Tensorflow(3)Tensorflow 构建模型

文章目录 数据导入和数据可视化数据集制作以及预处理模型结构低阶 API 构建模型中阶 API 构建模型高阶 API 构建模型保存和导入模型 这里以实际项目CIFAR-10为例&#xff0c;分别使用低阶&#xff0c;中阶&#xff0c;高阶 API 搭建模型。 这里以CIFAR-10为数据集&#xff0c;C…

9.4.k8s的控制器资源(job控制器,cronjob控制器)

目录 一、job控制器 二、cronjob控制器 一、job控制器 job控制器就是一次性任务的pod控制器&#xff0c;pod完成作业后不会重启&#xff0c;其重启策略是&#xff1a;Never&#xff1b; 简单案例 启动一个pod&#xff0c;执行完成一个事件&#xff0c;然后pod关闭&#xff1b;…

初识指针(2)<C语言>

前言 前文介绍完了一些指针基本概念&#xff0c;下面介绍一下&#xff0c;const关键字、指针的运算、野指针的成因以及避免&#xff0c;assert函数等。 目录 const&#xff08;常属性&#xff09; 变量的常属性 指针的常属性 指针的运算 ①指针 -整数 ②指针-指针 ③指针与…

Enhanced-Rtmp支持H265

Enhanced-Rtmp支持H265 千呼万唤使出来&#xff0c;rtmp/flv算是有统一支持H265的国际版本。本文介绍一下&#xff1a; 现存rtmp/flv支持H265的方式;Enhanced-Rtmp协议如何支持H265;ffmpeg/obs/srs/media-server各个开源的实现;国内方案与国外方案的兼容性问题; 1. rtmp/flv…

安卓内存机制

目录 前言一、内存 LowMemoryKiller二、常用的内存调优分析命令&#xff1a; 前言 安卓内存知识&#xff0c;不定期更新… 一、内存 LowMemoryKiller Android的设计理念之一&#xff0c;便是应用程序退出,但进程还会继续存在系统以便再次启动时提高响应时间. 这样的设计会带…

初识JDBC

1、JDBC是什么&#xff1f; Java DataBase Connectivity(Java语言连接数据库) 2、JDBC的本质是什么&#xff1f; JDBC是SUN公司制定的一套接口(interface) java.sql.*;(这个包下有很多接口) 接口都有调用者和实现者。 面向接口调用、面向接口写实现类&#xff0c;这都属于…

mysql的导入与导出

mysql表的导入与导出 导出 直接在命令行中输入&#xff08;注意不需要进入mysql&#xff09; mysqldump -u root -p my_database > C:/Users/xxx/Desktop/all.sql然后他会要求你输入数据库的密码 导入 同样也是直接在命令行中输入 mysql -u root -p my_database < …

JAVA安装linux环境安装maven

linux安装java 下载java8,地址为&#xff1a; https://www.oracle.com/cn/java/technologies/downloads/#java8&#xff0c;下载后缀为tar.gz的解压 tar -zxvf jdk-8u381-linux-x64.tar.gz移动 mv jdk1.8.0_381/ /usr/local/环境变量 export JAVA_HOME/usr/local/jdk1.8.0_38…

【Osek网络管理测试】[TG3_TC6]等待总线睡眠状态_2

&#x1f64b;‍♂️ 【Osek网络管理测试】系列&#x1f481;‍♂️点击跳转 文章目录 1.环境搭建2.测试目的3.测试步骤4.预期结果5.测试结果 1.环境搭建 硬件&#xff1a;VN1630 软件&#xff1a;CANoe 2.测试目的 验证DUT在满足进入等待睡眠状态的条件时是否进入该状态 …

17 内核开发-内核内部内联汇编学习

​ 17 内核开发-内核内部内联汇编学习 课程简介&#xff1a; Linux内核开发入门是一门旨在帮助学习者从最基本的知识开始学习Linux内核开发的入门课程。该课程旨在为对Linux内核开发感兴趣的初学者提供一个扎实的基础&#xff0c;让他们能够理解和参与到Linux内核的开发过程中…

英伟达推出视觉语言模型:VILA

NVIDIA和MIT的研究人员推出了一种新的视觉语言模型(VLM)预训练框架&#xff0c;名为VILA。这个框架旨在通过有效的嵌入对齐和动态神经网络架构&#xff0c;改进语言模型的视觉和文本的学习能力。VILA通过在大规模数据集如Coy0-700m上进行预训练&#xff0c;采用基于LLaVA模型的…

VBA编程之条件语句

上一篇我们讲述了条件语句以及分支。文章的最后用到了逻辑运算符“And“那么今天我们来聊一聊逻辑运算符和Select……Case结构。 在学习前我们先来了解一下&#xff0c;在生活中我们经常说”这个包括那个“&#xff0c;”你或者他“&#xff0c;”不是“等等。而这里”包括“和…

面对对象之封装

Python面向对象之封装 【一】什么是封装&#xff0c;为什么要封装 封装就是指&#xff0c;把数据与功能都整合到一起 就是将某些地方隐藏起来&#xff0c;在程序外部看不到&#xff0c;其他程序无法调用 封装最主要的原因就是为了保护隐私&#xff0c;将不想让用户看到的功能…

esp32+mqtt协议+paltformio+vscode+微信小程序+温湿度检测

花费两天时间完成了这个项目&#xff08;不完全是&#xff0c;属于是在resnet模型训练和温湿度检测两头跑......模型跑不出来&#xff0c;又是第一次从头到尾独立玩硬件&#xff0c;属于是焦头烂额了......&#xff0c;完成这个项目后&#xff0c;我的第一反应是写个csdn&#…

[每日AI·0506]巴菲特谈 AI,李飞飞创业,苹果或将推出 AI 功能,ChatGPT 版搜索引擎

AI 资讯 苹果或将推出 AI 功能&#xff0c;随 iPhone 发布2024 年巴菲特股东大会&#xff0c;巴菲特将 AI 类比为核技术 巴菲特股东大会 5 万字实录消息称 OpenAI 将于 5 月 9 日发布 ChatGPT 版搜索引擎路透社消息&#xff0c;斯坦福大学 AI 领军人物李飞飞打造“空间智能”创…

切比雪夫滤波器

切比雪夫滤波器&#xff0c;也被称为车比雪夫滤波器&#xff0c;是一种在通带或阻带上频率响应幅度等波纹波动的滤波器。它基于切比雪夫多项式的理论&#xff0c;并且是以俄罗斯数学家巴夫尼提列波维其切比雪夫&#xff08;Пафнутий Лвович Чебышёв&#…

论文辅助笔记:Tempo 之 model.py

0 导入库 import math from dataclasses import dataclass, asdictimport torch import torch.nn as nnfrom src.modules.transformer import Block from src.modules.prompt import Prompt from src.modules.utils import (FlattenHead,PoolingHead,RevIN, )1TEMPOConfig 1.…