Para obtener más artículos, siga mi blog personal: https://seven777777.github.io/myblog/
Comparta un diseño de lista de línea de tiempo escalonada horizontalmente
código completo
<template>
<div class="timelineBox-wrap">
<div class="timelineBox" id="box">
<div class="timeline-up">
<div
:class="['timePoint',{'special':point.index == -1}]"
v-for="(point,index) in showData"
:key="index">
<ul class="list" v-if="(index+1)%2 == 0 && point.list && point.list.length">
<li
class="listItem"
:style="{'width':listWidth + 'px'}"
v-for="(item,idx) in point.list"
:key="idx">
{
{item}}
</li>
</ul>
</div>
</div>
<div class="timeline">
<div
class="timePoint"
:class="{'special': point.index == 1}"
v-for="(point,index) in showData"
:key="index">
<div class="point"></div>
<span class="yearlabel">{
{point.sYear}}</span>
</div>
</div>
<div class="timeline-down">
<div
class="timePoint"
:class="{'special': point.index == 1}"
v-for="(point,index) in showData"
:key="index">
<ul class="list" v-if="(index+1)%2 != 0 && point.list && point.list.length">
<li
class="listItem"
:style="{'width':listWidth + 'px'}"
v-for="(item,idx) in point.list"
:key="idx">
{
{item}}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
listWidth:130,
showData:[
{
"sYear":2006,
"list":[
"太湖高尔夫山庄"
],
"index":-1
},
{
"sYear":2008,
"list":[
"新湖仙林翠谷"
],
"index":-1
},
{
"sYear":2009,
"list":[
"中粮本源"
],
"index":-1
},
{
"sYear":2010,
"list":[
"纳尼亚小镇",
"万泽太湖庄园",
"德懋堂"
],
"index":-1
},
{
"sYear":2011,
"list":[
"绿城朱家尖东沙度假村"
],
"index":-1
},
{
"sYear":2012,
"list":[
"东滩花园",
"恒大海上威尼斯"
],
"index":-1
},
{
"sYear":2013,
"list":[
"太湖香树湾",
"绿地太平湖",
"龙玺太湖湾",
"淀湖鹿鸣九里"
],
"index":-1
},
{
"sYear":2014,
"list":[
"中海太平观止",
"九月洋房",
"华鼎月亮湾",
"芳甸",
"双溪源璞境"
],
"index":-1
},
{
"sYear":2015,
"list":[
"港中旅和乐小镇",
"绿地长岛",
"玄元南山郡",
"龙湾湖畔",
"鸿泰乐颐小镇",
"荣盛金盆湾",
"尚格陌上花开"
],
"index":-1
},
{
"sYear":2016,
"list":[
"御园半岛",
"崇明三湘森林海尚",
"恒润太湖壹号",
"华都龙山庄园",
"绿城春风十里",
"绿城龙王溪",
"绿都山与墅"
],
"index":-1
},
{
"sYear":2017,
"list":[
"绿城观云小镇",
"恒大香湖左岸",
"安吉清华园",
"千岛湖嘉苑",
"越剧小镇",
"扬州玥珑湖",
"蓝城郡安里",
"雅居乐山湖城",
"银润蓝城天使小镇",
"荣盛·浦溪水镇",
"莲花小镇",
"国瑞瀛台"
],
"index":-1
},
{
"sYear":2018,
"list":[
"华侨城翡翠天域",
"碧桂园·泷悦",
"碧桂园十里芳华",
"富力·湖滨悦居",
"云水江南",
"崇明岛大爱城"
],
"index":1
},
{
"sYear":2019,
"list":[
"远洋桃花岛",
"天泽湖景庄园",
"恒大御海天下",
"丝绸小镇",
"蓝城风荷九里"
],
"index":-1
},
{
"sYear":2020,
"list":[
"杭州桃李春风"
],
"index":-1
}
]
};
},
mounted() {
let _this = this
_this.setWidth()
window.addEventListener('resize', function() {
_this.setWidth()
})
},
methods: {
setWidth(){
this.mainWidth = document.getElementById('box').clientWidth - 100
let listWidth = 110
let len = this.showData.length
let n = Math.ceil(len / 2)
// 减去一些边距
listWidth = (this.mainWidth - 20) / n -10
this.listWidth = listWidth
}
}
};
</script>
<style lang="scss">
*{
box-sizing: border-box;
padding:0;
margin:0;
}
body {
background-color: #21222e;
}
.timelineBox-wrap{
width:80%;
margin:0 auto;
padding:20px;
}
.timelineBox {
position: relative;
.timeline {
width: 100%;
height: 2px;
background-color: #34475f;
position: relative;
padding: 0 15px 0 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 10;
&::after {
content: '';
width: 0;
height: 0;
border-color: transparent transparent #33455c #33455c;
border-style: solid;
border-width: 5px 10px;
position: absolute;
right: 1px;
bottom: 2px;
}
}
.list {
width: 110px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.listItem {
width: 100%;
line-height: 1.5;
border-radius: 4px;
background-color: rgba(0, 145, 230, 0.5);
border: 1px solid #476b8f;
color: #ffffff;
font-size: 13px;
text-align: center;
padding: 0 5px;
}
&:before {
content: '';
width: 1px;
height: 44px;
background-color: #33455c;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
.timePoint {
width: 8px;
height: auto;
position: relative;
.point {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #d89931;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
&.special {
.point {
width: 12px;
height: 12px;
background-color: #ff4f12;
}
}
.yearlabel {
position: absolute;
color: #c5c7cc;
font-size: 12px;
top: 15px;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(2n) {
.yearlabel {
top: -25px;
}
}
}
.timeline-up,
.timeline-down {
padding: 0 15px 0 10px;
display: flex;
justify-content: space-around;
.timePoint {
display: flex;
justify-content: center;
.listItem {
width: 110px;
max-width: 180px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.timeline-up {
padding-bottom: 44px;
.list {
flex-direction: column-reverse;
.listItem {
margin-top: 8px;
}
&:before {
bottom: -44px;
}
}
}
.timeline-down {
padding-top: 44px;
.list {
.listItem {
margin-bottom: 8px;
}
&:before {
top: -44px;
z-index: 0;
}
}
}
}
</style>
Dirección de demostración: https://codepen.io/seven77/pen/dyXPBPX
