时间线
记录曾经需求实现的软件更新时间线demo,代码稀烂,仅为记录
GitHub项目Demo地址:https://github.com/Beingyo/vue-test-template/tree/main/src/page/timeLine
示例:
代码:
<!--版本更新-->
<template>
<div>
<div class="update-body">
<div v-for="year in data.year">
<div v-if="year.status" class="update-year">
{{ year.date }}
</div>
<div class="update-flex">
<div class="update-flex-left">
{{ year.time }}
</div>
<div class="update-flex-center">
<div class="vertical-hr"/>
</div>
<div class="update-flex-right">
<div class="update-content">
<div class="arrow-under"/>
<div class="arrow-top"/>
<div class="update-content-font">
<div v-for="content in year.content">
<span>{{ content.text }}</span>
</div>
<h3>具体使用方法可参考文档 <span style="color: #d7b759" v-html="year.url"/></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="update-bottom">
<div class="update-flex">
<div class="update-flex-left">
XX月XX日
</div>
<div class="update-flex-center">
<div class="vertical-hr"/>
</div>
<div class="update-flex-right">
<div class="update-content">
<div class="arrow-under"/>
<div class="arrow-top"/>
<div class="update-content-font">
<h3>企士宝隆重正式上线!</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
data: {
year: [
{
status: 1,
date: '2020',
time: '05月07日',
content: [
{ text: '1.XXXXXXXX' },
{ text: '2.XXXXXXXXXXXXX' },
{ text: '3.XXXXXXXX' },
{ text: '4.XXXXX' }
],
url: '<a href="https://www.baidu.com">2020-05-07更新详解</a>'
},
{
status: 0,
date: '2020',
time: '05月02日',
content: [
{ text: '1.XXXXXXXX' },
{ text: '2.XXXXXXXXXXXXX' },
{ text: '3.XXXXXXXX' }
],
url: '<a href="https://www.baidu.com">2020-05-02更新详解</a>'
},
{
status: 0,
date: '2020',
time: '04月15日',
content: [
{ text: '1.选项类字段支持颜色设置' },
{ text: '2.表单填写复用上次提交内容优化' }
],
url: '<a href="https://www.baidu.com">2020-04-15更新详解</a>'
},
{
status: 1,
date: '2019',
time: '11月05日',
content: [
{ text: '1.XXXXXXXX' },
{ text: '2.XXXXXXXXXXXX' }
],
url: '<a href="https://www.baidu.com">2019-11-05更新详解</a>'
},
{
status: 0,
date: '2019',
time: '10月20日',
content: [
{ text: '1.XXXXXXXX' }
],
url: '<a href="https://www.baidu.com">2019-10-20更新详解</a>'
},
{
status: 0,
date: '2019',
time: '10月01日',
content: [
{ text: '1.XXXXXXXX' },
{ text: '2.XXXXXXXXXXXX' },
{ text: '3.XXXXXXXXXXXXXXXX' },
{ text: '4.XXXXXXXX' }
],
url: '<a href="https://www.baidu.com">2019-10-01更新详解</a>'
}
]
}
}
}
}
</script>
<style scoped lang="scss">
.update-body {
width: 1000px;
margin: 0 auto;
padding-top: 30px;
.update-year {
width: 96px;
height: 96px;
border-radius: 100%;
background: -webkit-gradient(linear, left top, right bottom, from(#78ca5a), to(#c6ebac));
line-height: 96px;
text-align: center;
font-size: 28px;
margin-left: 58px;
color: #fafafa
}
}
.update-flex {
width: 100%;
display: flex;
.update-flex-left {
width: 119px;
height: 50px;
font-size: 20px;
margin: 70px 0 0 0;
}
.update-flex-center {
width: 1px;
border: 1px solid #cccccc;
.vertical-hr {
height: 9px;
width: 9px;
background-color: #78ca5a;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 5px #c6ebac;
margin: 80px 0 0 -5px;
}
}
.update-flex-right {
width: 100%;
.arrow-under {
width: 0;
height: 0;
border: 12px solid;
border-color: transparent #cccccc transparent transparent;
position: absolute;
right: 100%;
top: 30px;
}
.arrow-top {
width: 0;
height: 0;
border: 8px solid;
border-color: transparent #ffffff transparent transparent;
position: absolute;
right: 100%;
top: 34px
}
.update-content {
position: relative;
margin: 20px auto;
margin-top: 40px;
margin-left: 30px;
padding: 10px 0 0 20px;
width: 850px;
line-height: 38px;
font-family: sans-serif;
border: 3px solid #cccccc;
border-radius: 10px;
.update-content-font {
font-size: 16px;
color: black;
letter-spacing: 1px;
}
}
}
}
.update-bottom {
width: 1000px;
margin: 0 auto;
.update-flex {
.update-flex-center {
height: 90px;
}
.update-flex-right {
margin-top: 14px;
.update-content {
margin-bottom: 80px;
}
.arrow-under {
top: 18px
}
.arrow-top {
top: 22px
}
}
}
}
</style>
注:本文可分享可转发,转发请注明出自bug源