效果图

image.png

image.png

代码截图

页面

模拟数据

css样式

代码

<template>
    <div id="app" class="main">
        <div class="section">
            <div class="ul">
                <div class="li flex-row" v-for="(item,index) in dataList" :key="index">
                    <span class="pointer"></span>
                    <span class="line" v-if="index < dataList.length - 1"></span>
                    <div class="flex-colum infor">
                        <span class="fs_28 c_1a">{{item.title}}</span>
                        <span class="fs_24 c_98" :class="item.img == ''?'date1':'date2'">{{item.date}}</span>
                        <img class="img" :src="item.img" alt="">
                        <div class="imgicon" v-if="item.img">
                            <img src="@images/icon.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'app',
    data () {
        return {
            dataList:[{
                id:1,
                title:'一个签到拜访',
                date:'2017.02.22 08: 05: 2',
                img:'http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png'
            },{
                id:1,
                title:'客户下单 鲁花福花大米 数量11 金额150元金额150元金额150元金额150元金额150元',
                date:'2017.02.22 08: 05: 2',
                img:'http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071002.png'
            },{
                id:1,
                title:'送货',
                date:'2017.02.22 08: 05: 2',
                img:''
            },{
                id:1,
                title:'首款 1000元',
                date:'2017.02.22 08: 05: 2',
                img:''
            }]
        }
    }
}
</script>
<style lang="stylus" scoped>
.main
    padding .75rem 1rem
    .section
        background #fff
        padding 3rem 1rem
        border-radius .5rem
        .ul
            .li
                position relative
                .pointer
                    width .65rem
                    min-width .65rem
                    height .65rem
                    background #FEB402
                    border-radius 50%
                    overflow hidden
                    border .3rem solid #FFEFC7
                    margin-top .1rem
                    z-index 10
                .line
                    position absolute
                    top 1rem
                    left .475rem
                    width .1rem
                    height 100%
                    background #CBCBCB
                .infor
                    line-height 1.8rem
                    margin-left 1rem
                    .img
                        width 45%
                        height auto
                        margin-bottom 1.5rem
                    .imgicon
                        position absolute
                        bottom 2rem
                        left 39%
                        img
                            width 2.5rem
                            height 2.5rem
                    .date1
                        margin-bottom 3.5rem
                    .date2
                        margin-bottom 1.5rem

</style>