时间轴
前端小菜-贺俊兰 2020-08-19 vuepress
# 时间轴样式
# 效果
点击查看时间轴效果
# 配置
先参考vuepress-theme-reco文档时间轴配置
# 添加导航按钮
module.exports = {
theme: 'reco', // 主题
themeConfig: {
nav: [
{ text: 'TimeLine', link: '/timeline/', icon: 'reco-date' } //导航栏添加时间轴按钮
]
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 添加时间
---
title: 标题
date: 要添加的时间
categories:
- 分类
tags:
- 标签
---
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 样式
.timeline-content
width calc(100% - 20px)
left 20px
max-width 600px
margin 30px auto 0 auto
padding-bottom 50px
.year-wrapper
li
margin-top 10px
border 0 !important
padding 2.5px !important
.title
color #fff !important
padding 10px 20px 10px 20px !important
background-image: -webkit-gradient(linear,left 0,right 0,from(#e66465),to(#9198e5))
border-radius 50px
display block
width 100%
transition all 1s
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.date
position absolute
left -60px
top 10px
&:before
left 42px !important
top 12px !important
transition all 1s
&:hover
.title
transform translateX(20px)
.date
color #ea5455 !important
&:before
transform scale(2.5)
background #ea5455 !important
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45