vue-cute-timeline插件使用

news2024/9/22 22:29:29

效果 (内容覆盖的有些丑,别在意哈,重点是时间线的展示)element也有类似的时间线,但是不能使用类似这样的图片 所以就采用了vue-cute-timeline插件

 使用方法(可自行百度)

安装:npm install vue-cute-timeline --save

引入

import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline';

// import 'vue-cute-timeline/dist/index.css';

但是我这里引入他默认的样式后,样式展示错误,所以我没有引用默认样式 自己调整了下,也达到了自己想要的效果

上样式代码

.timeline{
  position:relative;
  list-style:none;
  font-family:PingFangSC-light,Avenir,Helvetica,Arial,Hiragino Sans GB,Microsoft YaHei,sans-serif;
  -webkit-font-smoothing:antialiased;
  margin:10px 20px
}
.timeline:after{
  position: absolute;
  content: '';
  left: 23px;
  top: 16px;
  width: 2px;
  z-index: 0;
  height: 100%;
  background-color: #094986;
}
/deep/ .timeline-others{
  position: relative;
}
.time-icon{
    position: absolute;
    left: -26px;
    z-index: 1;
    top: 5px;
}
.timeline-title{
  height: 30px;
  line-height: 30px;
  color: #6afec3 !important;
}
.timeline-item{
  height: 240px;
  line-height: initial;
}

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

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

相关文章

服务器防止漏洞扫描解决方案

1、定期更新操作系统与应用程序 为了修复可能存在的漏洞和安全问题,建议定期对服务器的操作系统与应用程序进行更新。特别是对于那些常常成为黑客攻击目标的应用程序,比如WordPress等,更新是不可或缺的。通过更新,不仅可以增强服…

管理执行系统-亿发MES智能制造系统赋能制造企业信息化,实现工业现代化

在制造技术领域,质量控制信息集成建设需要健全的管理体系,加强全过程管理。虽然管理执行系统 (MES) 背后的理论思维已经取得了重大进展,但在软件应用集成和分析能力方面仍有改进的空间。本文将探讨MES系统如何赋能制造企业信息化,…

Linux内核源码下载

参考文章:https://blog.csdn.net/m0_49328056/article/details/121669035 一、git命令下载 1、进入官网:https://www.kernel.org/ mainline(主线版本)、stable(稳定版本)、longterm(长期演进版…

DAY41:贪心算法(十)监控二叉树

文章目录 968.监控二叉树思路遍历顺序空节点处理情况列举 最开始的写法debug测试:travelsal的输出多了1 修改版二叉树注意点时间复杂度总结 968.监控二叉树 给定一个二叉树,我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及…

SpringBoot多模块项目整合JPA,解决被依赖模块Dao层无法注入的问题

DAO层: 报错: 解决办法:被依赖模块的DefaultConfig类加上如下注解,问题即解决 ComponentScan(basePackages "com.fdw.study.*") Configuration EnableJpaRepositories(value "com.fdw.study.dao") EntityS…

Linux0.11内核源码解析-read_write.c

目录 sys_lseek read write read_write.c主要是实现文件系统调用read(),write()和lseek()三个功能 read和write函数分别是调用file_dev.c/pipe.c/block_dev.c/char_dev.c实现相对应的函数 sys_lseek lseek实现系统调用将对文件句柄对应文件结果体中的当前读写指针进行修改&…

matplot 显示文本

import matplotlib.pyplot as plt# 绘制一些数据 x_data [1, 2, 3, 5] y_data [2, 4, 8, 10] plt.plot(x_data, y_data,o,markersize 20)# 添加文本注释 text [a,b,c,d] for i in range(4):plt.text(x_data[i], y_data[i],text[i], fontdict{family: serif, size: 16, col…

leetcode极速复习版-第五章栈与队列

目录 栈与队列 理论基础 232.用栈实现队列 225. 用队列实现栈 20. 有效的括号 1047. 删除字符串中的所有相邻重复项 150. 逆波兰表达式求值 239.滑动窗口最大值 347.前 K 个高频元素 栈与队列 理论基础 队列是先进先出,栈是先进后出。 232.用栈实现队列 使用栈实现队…

动态路由,微信小程序绑定

■登录成功之后添加动态路由 ●登录的时候会获取到它的菜单配置■动态路由 | Vue Router <view wx:for"{{list}}">{{index}}--- {{item.name}} </view><view wx:for"{{list}}" wx:for-item "ttt" wx:for-index"num"&…

第二节 给SpringBootAdmin的server端加入spring security安全控制

前言 本来想用一节就写完SpringBootAdmin的&#xff0c;但随着研究的深入发现一节应该是不够的&#xff0c;网上的资料也不会非常系统&#xff0c;官网的例子有些已经好几年没更新了&#xff0c;所以接下来还是系统性的来写下吧 第一节 完成基础配置&#xff0c;暴露所有端点…

Qt-->QQ登陆界面图形化界面

#include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);this->setFixedSize(640,520);//设置窗口标题this->setWindowTitle("QQ&qu…

勒索病毒危害,企业该如何预防勒索病毒

勒索病毒是一种恶意软件&#xff0c;它会对企业内的计算机系统或数据进行加密或锁定&#xff0c;并要求企业支付赎金以解锁或解密。 勒索病毒危害&#xff1a; 数据丢失&#xff1a;勒索病毒可以加密您的文件、照片、视频和其他重要数据&#xff0c;使其无法访问或恢复。如果…

解决centos7和主机win11不能互传文件复制粘贴;及CentOS7最小安装版 VMware Tools安装

linux.iso 中的文件已经加载到 /mnt/cdrom 目录下了。在 /mnt/cdrom 中找到加载出来的文件并拷贝到 /tmp目录下&#xff0c;进行解压。解压好后从中找到 vmware-install.pl&#xff0c;这是vmware tools的安装文件&#xff0c;执行此文件开始安装 ./vmware-install.pl 一路Ente…

宏基因组碳循环高分分析思路,你值得拥有!

碳是生命物质中的主要元素之一&#xff0c;是有机质的重要组成部分。地球上主要有四大碳库&#xff0c;即大气碳库&#xff0c;海洋碳库、陆地生态系统碳库和岩石圈碳库。碳循环&#xff0c;是指碳元素在自然界的循环状态&#xff0c;大气中的二氧化碳&#xff08;CO2&#xff…

Shamir秘密共享

目录 Shamir秘密共享 秘密共享的概念 问题1: 问题2: 秘密分割门限方案的定义 Shamir秘密共享方案 组成 构造思路 构造 计算f(x) 例1 例2 二、GMW方案 Shamir秘密共享 秘密共享的概念 问题1: 保险柜中存放有10个人的共有财产&#xff0c;要从保险柜中取出物品&am…

【Python编程系列】5、变量

作用 变量用来存储数据: a = 10使用规则 python作为解释型,属于弱类型和动态型语言。它不需要强制声明变量的数据类型,因为它不需要编译。一般要编译的语言需要明确所有的东西,只有这样才能编译成二进制文件。 由于不需要声明数据类型,那么在声明变量时会一并赋值: …

什么是serialVersionUID?为什么要使用它?

目录 一、什么是serialVersionUID二、创建一个serialVersionUID三、使用 serialVersionUID3.1 序列化实例程序3.2 反序列化实例程序3.3 serialVersionUID不同的情况下进行序列话和反序列化3.4 能不能不提供serialVersionUID&#xff1f; 一、什么是serialVersionUID SerialVer…

Dubbo hystrix 熔断降级 详细示例 多服务 公共api

目录 介绍 demo-api pom 目录 代码api provider 服务提供者 目录 pom 服务实现代码 启动代码 配置 日志 consumer 消费者 目录 pom 调用service接口 调用serviceImpl类 ctr 配置 页面调用熔断效果 相关文章 介绍 因为网上和官网拷贝的文档发现有很多版本…

axios拦截器和token

axios拦截器 ​​ 在请求或响应被 then 或 catch 处理前拦截它们。 // 添加请求拦截器 axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应…

阿里云国际站代理商:阿里巴巴的阿里云到底是做什么用的,怎么我们普通人不理解,也不知道是怎么样一种服务?

阿里巴巴的阿里云到底是做什么用的&#xff0c;怎么我们普通人不理解&#xff0c;也不知道是怎么样一种服务&#xff1f;   阿里巴巴的阿里云&#xff0c;不只是一个名字——打通理解的迷宫   面对朝日逐极而生的科技天光&#xff0c;阿里巴巴如一座灯塔引领者我们向前。然…