横向上下交错时间线列表布局

更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

分享一个横向上下交错时间线列表布局

完整代码

<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>

demo地址：https://codepen.io/seven77/pen/dyXPBPX

欢迎关注的我的个人公众号【搴芳拾梦】