封裝一個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>