年月展示时间轴组件
<template>
<div>
<Timeline
:title="title"
:data-list="dataList"
:show-weather="showWeather">
</Timeline>
</div>
</template>
<script>
import Timeline from '@/components/Timeline'
export default {
name: 'timeline',
components: {
Timeline
},
data() {
return {
title: '时间轴',
showWeather: true,
dataList: [
{
year: '2021',
date: '2021/09/10',
weather: '晴天☀️',
body: [
{
month: '9月',
children: [
{
title: 'oauth'
},
{
title: '设计原则'
}
]
},
{
month: '8月',
children: [
{
title: 'guacamole'
},
{
title: 'java netty websocket'
},
{
title: 'python websocket'
},
{
title: 'git lfs文件'
}
]
},
{
month: '7月',
children: [
{
title: 'java springboot spring.factories作用'
},
{
title: '数据库建模 : 概念模型 , 逻辑模型和物理模型'
},
{
title: '数据中应不应使用外键'
},
{
title: '学习杂谈'
}
]
},
{
month: '5月',
children: [
{
title: 'Django时区设置问题'
}
]
},
{
month: '2月',
children: [
{
title: 'Typescript Install'
},
{
title: 'Django_Celery'
}
]
},
{
month: '1月',
children: [
{
title: 'Anaconda In Docker with CodeServer'
}
]
},
]
},
{
year: '2020',
date: '2021/09/12',
weather: '阴天☁️',
body: [
{
month: '10月',
children: [
{
title: 'What is k8s'
}
]
},
{
month: '9月',
children: [
{
title: 'jmockit'
}
]
},
{
month: '8月',
children: [
{
title: 'java并发编程'
},
{
title: 'add colorful'
}
]
},
{
month: '7月',
children: [
{
title: 'Elastic Mapping Field DataType'
},
{
title: '阿里巴巴高级算法专家威视：组建技术团队的一些思考'
},
{
title: 'ElasticSearch Mapping'
}
]
}
]
},
{
year: '2019',
date: '2021/09/13',
weather: '雨天☔️',
body: [
{
month: '12月',
children: [
{
title: 'ChatBot对话管理'
}
]
},
{
month: '9月',
children: [
{
title: 'ubuntu20 network config'
},
{
title: 'file share'
}
]
}
]
},
{
year: '2018',
date: '2021/09/15',
weather: '下雪❄️',
body: [
{
month: '11月',
children: [
{
title: 'mysql关键字'
}
]
},
{
month: '9月',
children: [
{
title: 'docker安装'
}
]
}
]
}
]
}
}
}
</script>
<style lang="scss" scoped>
</style>
Timeline时间轴组件：
<template>
<div class="timeline-wrap">
<div class="timeline-header">
<span>{{ title }}</span>
</div>
<div class="timeline-item" v-for="(item,index) in dataList" :key="index">
<div class="item-version">
<span>{{ item.year }}</span>
</div>
<!-- <div class="timeline-item-time">
<code>{{ item.date }}</code>
<span class="item-weather" v-if="showWeather">{{ item.weather }}</span>
</div> -->
<div class="timeline-item-content">
<div v-for="(subItem,subIndex) in item.body" :key="subIndex">
<span class="subItem-title">{{ subItem.month }}</span>
<div class="subItem-children">
<span v-for="(threeItem,threeIndex) in subItem.children" :key="threeIndex">{{ threeItem.title }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Timeline',
data(){
return {
}
},
props: {
title: {
type: String
},
showWeather: {
type: Boolean
},
dataList: {
type: Array
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/timeline.scss";
</style>
Timeline时间轴样式：
$base-color: #84b9e5;
.timeline-wrap {
padding: 20px 40px;
.timeline-header {
padding-bottom: 16px;
span {
font-size: 18px;
font-weight: bold;
}
}
.timeline-item {
padding: 0px 10px 20px 20px;
border-left: 1px solid $base-color;
line-height: 1;
position: relative;
&::before {
content: '';
display: inline-block;
6px;
height: 6px;
position: absolute;
left: -4px;
top: 0px;
border: 1px solid $base-color;
border-radius: 50%;
background: #fff;
background: $base-color;
}
.item-version {
font-size: 24px;
font-weight: bold;
margin-bottom: 0.6em;
}
.timeline-item-time {
margin-bottom: 12px;
200px;
display: flex;
justify-content: space-between;
align-items: center;
code {
margin: 0 1px;
padding: .2em .4em;
font-size: .9em;
background: #f2f4f5;
border: 1px solid #f0f0f0;
border-radius: 3px
}
.item-weather {
font-size: 14px;
}
}
.timeline-item-content {
font-size: 14px;
.subItem-title {
padding: 8px 0 8px 0;
display: block;
color: #000;
font-size: 16px;
font-weight: bold;
// margin-left: 12px;
}
.subItem-children {
line-height: 1;
text-indent: 1em;
padding: 7px 0 0 7px;
span {
display: block;
position: relative;
margin-bottom: 8px;
text-indent: 2em;
line-height: 1.2;
cursor: pointer;
text-decoration: underline;
&::before {
content: '';
display: inline-block;
5px;
height: 5px;
position: absolute;
left: 14px;
top: 4px;
border: 1px solid $base-color;
border-radius: 50%;
background: #fff;
}
&:hover {
color: $base-color;
}
}
}
}
}
}
日志更新时间轴组件
效果如下：
具体代码在github仓库里：https://github.com/Ritusan/color-library