el-collapse折叠面板带有折叠线效果

网上有用el-timeline时间线组合实现，代码不太适用项目的原有逻辑了
这里直接用el-collapse调整样式实现，下面是可运行的demo和简单的效果图
剩下的就自行调整样式即可

<template>
  <el-collapse>
    <el-collapse-item
      v-for="(item, index) in items"
      :key="index"
      :title="item.title"
      :class="{ 'only-one': items.length === 1 }"
    >
      <div class="collapse-content">{{ item.content }}</div>
    </el-collapse-item>
  </el-collapse>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { title: '第一个折叠项标题', content: '这是第一个折叠项详细内容' },
        { title: '第一个折叠项标题', content: '这是第一个折叠项详细内容' },
        { title: '第一个折叠项标题', content: '这是第一个折叠项详细内容' },
        { title: '第一个折叠项标题', content: '这是第一个折叠项详细内容' },
        { title: '第一个折叠项标题', content: '这是第一个折叠项详细内容' },
        { title: '第一个折叠项标题', content: '这是第一个折叠项详细内容' },
        { title: '第一个折叠项标题', content: '这是第一个折叠项详细内容' }
        // 可以添加更多折叠项数据对象
      ]
    }
  }
}
</script>

<style>
/* 整体的折叠面板容器样式调整 */
.el-collapse {
  border: none; /* 去除默认边框 */
}

/* 每个折叠项头部（包含标题那部分）的样式调整 */
.el-collapse-item__header {
  position: relative;
  padding-left: 30px; /* 为时间线预留左边距空间 */
  border-bottom: none;
}
/* 每个折叠项头部（包含标题那部分）的样式调整 */
.el-collapse-item__content {
  padding: 15px 25px;
}

.only-one .el-collapse-item__header::before {
  display: none !important;
}
/* 时间线的样式（用伪元素实现小圆点和竖线） */
.el-collapse-item__header::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 22px;
  width: 14px;
  height: 1px;
  background-color: #ccc; /* 时间线小圆点颜色 */
}
.el-collapse-item__header::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ccc; /* 竖线颜色 */
}
/* .el-collapse-item:last-child .el-collapse-item__header::before {
  display: none;
} */
/* .el-collapse-item:last-child .el-collapse-item__header::after {
  display: none;
} */
/* 针对第一个折叠项，隐藏头部竖线的顶部超出部分 */
.el-collapse-item:first-child .el-collapse-item__header::after {
  top: 22px !important;
}
/* 针对第一个折叠项，隐藏头部竖线的顶部超出部分 */
.el-collapse-item:last-child .el-collapse-item__header::after {
  bottom: 26px;
}

/* 处理折叠项之间竖线的连接，让其连贯 */
/* .el-collapse-item:not(:last-child).el-collapse-item__header::after {
  bottom: 0;
} */

/* 展开的折叠项内容部分左侧线的样式 */
.el-collapse-item__content {
  position: relative;
  padding-left: 20px; /* 根据需求调整左边距大小 */
}

.el-collapse-item__content::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ccc; /* 展开部分左侧线颜色 */
}

.el-collapse-item:last-child .el-collapse-item__content::before {
  display: none;
}
</style>