先来样子
<div class="content-right">
<div class="cont" v-for="item in detail.record" :key="item.id">
<div class="rightOne">
<div class="rightIcon"></div>
<div class="rightDate">{{ item.createTime }}</div>
</div>
<div class="rightOne">
<div class="rightTwo">{{ item.user }},{{ item.time }}</div>
</div>
</div>
</div>
-------------------------- css样式 ------------------------------------
.content-right {
width: 250px;
height: 300px;
overflow-y:scroll;
margin: 20px;
.rightOne {
display: flex;
font-size: 16px;
.rightIcon {
width: 10px;
height: 10px;
background-color: #dda429;
border-radius: 50%;
margin-top: 3px;
}
.rightDate {
margin: 0 15px;
}
.rightTwo {
width: 200px;
margin: 20px 25px;
}
}
.cont {
width: 100%;
// overflow: hidden; // 可能没用,没试
overflow-x: hidden; // 可能没用,没试
overflow-y: auto; // 可能没用,没试
-webkit-overflow-scrolling: touch;
position: relative;
}
.cont::before {
content: "";
width: 0;
display: block;
position: absolute;
top: 15px;
left: 4px;
bottom: 0px;
border-radius: 10px;
border: 1px solid orange;
}
.cont:last-child::before {
display: none;
}
}
使用 elementUI
<div class="right">
<el-timeline :reverse="true">
<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
activities: [{
content: '活动按期开始',
timestamp: '2018-04-15'
}, {
content: '通过审核',
timestamp: '2018-04-13'
}, {
content: '创建成功',
timestamp: '2018-04-11'
},
{
content: '活动按期开始',
timestamp: '2018-04-15'
}, {
content: '通过审核',
timestamp: '2018-04-13'
}, {
content: '创建成功',
timestamp: '2018-04-11'
}],
.right {
width: 30%;
height: 270px;
padding: 10px 0 0 10px;
overflow-y:scroll;
}