如何去除最后一个边框线样式
<template>
<div style="width: 320px">
<ul>
<li v-for="item in activities" :key="item.index">
<div class="timeline">
<div class="time">{{ item.timestamp }}</div>
<div class="line"></div>
<div class="content">{{ item.content }}</div>
</div>
</li>
</ul>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const activities = reactive([
{
content: "xx社区任职社区工作人员",
timestamp: "2018.05",
},
{
content: "xx社区任职社区工作人员",
timestamp: "2016.06",
},
{
content: "离职",
timestamp: "2020.12",
},
{
content: "xx社区任职社区工作人员",
timestamp: "2022.11",
},
]);
return { activities };
},
};
</script>
<style>
ul {
list-style: none;
}
.timeline {
width: 320px;
display: flex;
justify-content: flex-start;
}
.content{
margin-left: 80px;
}
.line {
height: 70px;
border-left: 1px solid #bfbfbf;
margin-top: 25px;
margin-bottom: 5px;
position: relative;
left: -32px;
}
.line:last-of-type {
border: none;
height: 0;
}
</style>