封装一个VUE时间线组件

之前开发网站的时候，有一个品牌历程的展示，拿到UI后，因为前期着急所以时间线直接用的图片，这样做的话后期在后台增加品牌历程的时候，还需要前台更换图片，比较麻烦，所以空闲的时候自己封装了一个。最终效果图如下：

注：当然使用element-ui组件的时间线也可以实现，就是需要自己改样式，比较麻烦。

功能说明：时间线可根据内容多少自适应，只需传入数据即可。

 

 

//时间线组件TimeLine
<template>
    <div class="time-line">
        <div class="section">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <div class="line"></div>
                    <div class="item-wrapper">
                        <div class="circle"></div>
                        <div class="across-line"></div>
                        <div class="item-content">
                            <h6 class="font_18 gray_color">{{item.time}}</h6>
                            <h6 class="font_18 m_b1" style="color: #ffa64c">{{item.title}}</h6>
                            <p class="font_16 justify">{{item.desc}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TimeLine",
        props: {
            list: Array, //页面展示数据
        },
        data() {
            return {

            }
        },
        mounted() {
            // console.log(this.list)
        }
    }
</script>

<style scoped lang="stylus">
    $purple = #850ec2
    $gray = #999999
    $yellow = #F39E48

.section {
    max-width 600px
    margin 40px auto
    padding-left 50%
    li {
        box-sizing border-box
        position relative
        padding-bottom 20px
        .line {
            position absolute
            left 0
            height 100%
            border-left 1px solid $yellow
        }
        .item-wrapper {
            position relative
            .circle {
                width 10px
                height 10px
                border 2px solid $yellow
                background pink
                border-radius 50%
                position absolute
                top 0
                bottom 0
                margin-top auto
                margin-bottom auto
            }
            .across-line {
                width 18.5%
                height 1px
                background $yellow
                position absolute
                top 0
                bottom 0
                margin-top auto
                margin-bottom auto
            }
            .item-content {
                padding 10px 20px
                box-sizing border-box
                border 1px solid $yellow
                border-radius 6px
                p {
                    line-height 1.5
                }
            }

        }
        &:nth-child(odd) {
            .item-wrapper {
                left -100%
                padding-right 25%
                .circle {
                    right -7px
                }
                .across-line {
                    right 7px
                }
            }
        }
        &:nth-child(even) {
            .item-wrapper {
                padding-left 25%
                .circle {
                    left -7px
                }
                .across-line {
                    left 7px
                }
            }
        }
    }
}

</style>

在其他页面使用时间线组件：

//品牌历程页面
<template>
    <div class="container">
        <div class="section2">
            <h1 class="font_36 t_c m_b2">品牌历程</h1>
            <div class="title_english font_18 t_c m_b4">BRAND HISTORY</div>
            <time-line :list="course"></time-line>
        </div>
    </div>
</template>

<script>
    import TimeLine from "../components/TimeLine";  //根据自己的项目路径

    export default {
        name: "CompanyProfile",
        components: {
            TimeLine,
        },
        data() {
            return {
                // course: courseList
                course: [
                    {
                        time: '1989年',
                        title: '创业启点',
                        desc: '公司创始人购房贷款光辉典范给和放大镜看给。',
                    },
                    {
                        time: '1991年',
                        title: '注册建厂',
                        desc: '通过三年经营法国梵蒂冈梵蒂冈梵蒂冈广泛大概”。',
                    },
                    {
                        time: '1995年',
                        title: '扩大规模',
                        desc: '收购占地20亩的电风扇犯得上反对大事发多少大事发多少。',
                    },
                    {
                        time: '1999年',
                        title: '注册商标',
                        desc: '国家工商总局注册电风扇大师傅范德萨多少',
                    },
                    {
                        time: '2001年',
                        title: '成立公司',
                        desc: '企业再次升级蝶变，房贷首付使得否大事发对方是否水电',
                    },
                    {
                        time: '2004年',
                        title: '搬迁扩规',
                        desc: '公司成立后狠抓范德萨范德萨房贷首付使得否',
                    },
                ]
            }
        },
    }
</script>

<style scoped lang="stylus">
    .section2 {
        margin-bottom 100px
    }
</style>