css竖向流程条(自适应)

1.png

css部分

<style type="text/css">
    *{margin: 0;padding: 0;}
    p{font-size: 14px;}
    li{list-style: none;padding: 10px 20px;border-left: 2px solid #999;position: relative;}
    li:before{content: "";width: 10px;height: 10px;display: block;background: lightblue;position: absolute;left: 0;top: 0;margin-left: -6px;border-radius: 50%;}
    ul{width: 300px;margin: 0 auto;}
</style>

html部分

<div id="app">
    <ul>
        <li v-for="item in myData"><p v-text="item"></p></li>
    </ul>
</div>  

js部分

var vm = new Vue({
    data: {
        myData: [
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
            '我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条'
        ]
    }
}).$mount('#app')