小程序 手风琴折叠面板样式问题？

Question

类似于上面的
问题：1.找了个组件现在已经做出来这样的效果了 但是左边的样式 线条怎么去做呢？这个很头疼呢 是自己写左侧连框线？那怎么变化呀
2.要求一键展开 全部展开 一键收回保留第一个

我附上 代码片段：https://developers.weixin.qq.com/s/day52rmx7HvI

Answer 1

左边的线和内容块分块，和快递查询那种效果一样

<style>
    

.expressdetail{padding-left:15px}
.expressdetail li{list-style:none;padding:0;position:relative;border-left:dotted 1px #ccc;padding-left:30px;padding-bottom:15px}
.expressdetail li b{position:absolute;left:-15px;width:30px;height:30px;top:-2px;text-align:center;line-height:22px;border-radius:50%;border:solid 1px #ccc;background:#fff;font-weight:normal;font-size:13px}
.expressdetail li.end,.expressdetail li.start{color:#d86528}
.expressdetail li.end b,.expressdetail li.start b{background:#fcf0d6;line-height:25px}
.expressdetail li:last-of-type{border-left:0}
.expressdetail li.nofinish{color:#999}
.expressdetail li.nofinish b{background:#999;color:#fff}
</style>
<ul class="expressdetail mt20">
    <li class="end"><b>收</b>[收货地址]广西桂林市七星区合鑫大楼7楼<br><br>xxx　xxxx</li>
    <li class="start"><b>︿</b>【代收点】您的快件已签收，签收人在【桂林叠彩南二里店(已签收签收人凭取货码签收)】领取。<br><br>2021-04-20 14:27:11</li>
    <li><b>︿</b>【桂林市】已到达 广西桂林公司九华分部<br><br>2021-04-19 16:08:02</li>
    <li class="start"><b>发</b>【上海市】上海嘉定区马陆北公司古漪园服务部-林世华(13601982668) 已揽收<br><br>2021-04-17 19:23:16</li>
</ul>