单侧竖向时间轴，高度自适应
<template> <div class="eltimeline"> <div class="time-line-only"> <div v-for="(item,index) in data" :key="index" class="time-line-only-div"> <p class="p6"></p> <p class="p7" v-if="index+1 !=data.length"></p> <p class="p8"> <span class="spanl"> {{item.time}} {{item.desc}} </span> </p> </div> </div> </div> </template> <script> export default { data() { return { data:[] } }, } </script> <style lang='less' scoped> .eltimeline{ width:100%; min-height: 240px; padding:10px; .time-line-only{ width:100%; margin:0 auto; } .time-line-only-div{ position: relative; min-height: 60px; padding-bottom: 10px; .p6{ position: relative; left:5%; width:15px; top:25px; border-radius: 50%; z-index:10; height: 15px; border:1px solid #5cb85c; background: #fff; } .p7{ position: absolute; left:calc(5% + 7px); top:25px; bottom:0; z-index:1; height: 100%; border-left:1px solid #5cb85c; } .p8{ position: relative; left:calc(5% + 15px); border-radius: 10px; height: auto; width:calc(90% - 20px); margin-left:20px; .spanl{ width:100%; font-size: 14px; min-height: 30px; line-height: 30px; display: inline-block; vertical-align: top; word-break: break-all; overflow: hidden; padding:5px; } } } } </style>双侧竖向时间轴，高度自适应
<template> <div class="time-line"> <div class="time-line-div" v-for="(item,index) in data" :key="index"> <p class="p1"> <span class="spanj"> {{item.time}}<br/>{{item.name}} </span> </p> <p class="p2"></p> <p class="p3" v-if="index+1 != data.length"></p> <p class="p4"> <span class="spanh"> <strong class="txtstyle">点赞</strong>{{item.text}} </span> <span class="spank"> 位置：{{item.address}} 来源：{{item.source}} </span> </p> </div> </div> </template> <script> export default { data() { return { data:[] } }, } </script> <style lang="less" scoped> .time-line{ width:100%; margin:0 auto; } .time-line-div{ position: relative; min-height: 85px; padding:20px 0; } .p1{ position: relative; left:0; width:120px; font-size: 0px; margin-right:20px; text-align: right; display: inline-block; vertical-align: top; .spanj{ width:100%; font-size: 14px; height: auto; line-height: 20px; color:#5cb85c; display: inline-block; vertical-align: top; padding-top:10px; } } .p2{ position: relative; width:15px; height: 15px; top:20px; border-radius: 50%; z-index:10; border:1px solid #5cb85c; background: #fff; display: inline-block; vertical-align: top; } .p3{ position: absolute; left:147px; top:40px; z-index:1; height: 100%; border-left:1px solid #5cb85c; display: inline-block; vertical-align: top; } .p4{ position: relative; border-radius: 10px; height: auto; width:calc(100%-181px); margin-left:20px; display: inline-block; vertical-align: top; cursor: pointer; .spanh{ display: inline-block; vertical-align: top; width:100%; font-size: 14px; height: auto; line-height: 30px; .txtstyle{ background:#befddb; color:#02bc55; border:1px solid #02bc55; margin-right:10px; padding-left:5px; padding-right: 5px; border-radius: 5px; } } .spank{ width:100%; font-size: 14px; height: 30px; line-height: 30px; display: inline-block; vertical-align: top; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color:#888; } } </style>