样子如下图所示：
上代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<style>
.timeline-list{
margin: 0;
font-size: 14px;
list-style: none;
}
.timeline-item:last-child .timeline-item_tail {
display: none;
}
.timeline-item{
position: relative;
padding-bottom: 20px;
}
.timeline-item_tail{
position: absolute;
left: 4px;
height: 100%;
border-left: 2px solid #e4e7ed;
}
.timeline-item_node{
position: absolute;
background-color: #e4e7ed;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
left: -2px;
width: 9px;
height: 9px;
background: #fff;
border:3px solid #2395FF
}
.timeline-item_wrapper{
position: relative;
padding-left: 20px;
top: 0px;
}
.timeline-item_timestamp{
margin-bottom: 8px;
padding-top: 0px;
color: #242424;
line-height: 1;
font-weight: 700;
font-size: 13px;
}
.delclass{
color: #0379FB;
font-weight: normal;
cursor: pointer;
}
.delclass:hover{
color: #2395FF;
}
.tbox{
padding:10px;
}
.tbox-content{
background:rgba(246,246,246,1);
padding: 10px;
width: 600px;
height: 90px;
}
.pannel{
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
}
.pannel-header{
padding: 20px;
}
.pannel-body{
padding: 20px;
}
.pannel.shadow{
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.config{
background:rgba(252,252,252,1);
padding: 20px;
margin-bottom: 15px;
position: relative;
}
.delItem{
position: absolute;
font-size: 17px;
color: #333;
top: -8px;
right: -5px;
cursor: pointer;
}
.config-content{
margin-top: 15px;
}
.imgLabel{
width: 80px;
color: #999;
}
.imgList{
margin-left: 80px;
padding: 10px;
background: rgba(246,246,246,1);
}
</style>
<ul class="timeline-list">
<li class="timeline-item">
<div class="timeline-item_tail"></div>
<div class="timeline-item_node"></div>
<div class="timeline-item_wrapper">
<div class="timeline-item_timestamp">
工程管理部
</div>
<div class="timeline-item_content">
<div class="tbox">
<div class="tbox-title">
<span class="index">1、</span>
<span class="text">施工计划A区1-4层混凝土，完成30%。</span>
</div>
<div class="tbox-content">
</div>
</div>
<div class="tbox">
<div class="tbox-title">
<span class="index">2、</span>
<span class="text">施工计划A区1-4层混凝土，完成30%。</span>
</div>
<div class="tbox-content">
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item_tail"></div>
<div class="timeline-item_node"></div>
<div class="timeline-item_wrapper">
<div class="timeline-item_timestamp">
工程管理部
</div>
<div class="timeline-item_content">
<div class="tbox">
<div class="tbox-title">
<span class="index">1、</span>
<span class="text">施工计划A区1-4层混凝土，完成30%。</span>
</div>
<div class="tbox-content">
</div>
</div>
<div class="tbox">
<div class="tbox-title">
<span class="index">2、</span>
<span class="text">施工计划A区1-4层混凝土，完成30%。</span>
</div>
<div class="tbox-content">
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item_tail"></div>
<div class="timeline-item_node"></div>
<div class="timeline-item_wrapper">
<div class="timeline-item_timestamp">
工程管理部
</div>
<div class="timeline-item_content">
<div class="tbox">
<div class="tbox-title">
<span class="index">1、</span>
<span class="text">施工计划A区1-4层混凝土，完成30%。</span>
</div>
<div class="tbox-content">
</div>
</div>
<div class="tbox">
<div class="tbox-title">
<span class="index">2、</span>
<span class="text">施工计划A区1-4层混凝土，完成30%。</span>
</div>
<div class="tbox-content">
</div>
</div>
</div>
</div>
</li>
</ul>
<script>
</script>
</body>
</html>
