<div class="flow-content">
<div class="content-item">
<div class="item-num">1</div>
<div class="item-hr">
<img src="/resources/img-ocd/line-spa-icon.png" alt="Hoolinks">
</div>
<div class="itme-text">标题1</div>
</div>
<div class="content-item">
<div class="item-num">2</div>
<div class="item-hr">
<img src="/resources/img-ocd/line-spa-icon.png" alt="Hoolinks">
</div>
<div class="itme-text">标题1</div>
</div>
<div class="content-item">
<div class="item-num">3</div>
<div class="item-hr">
<img src="/resources/img-ocd/line-spa-icon.png" alt="Hoolinks">
</div>
<div class="itme-text">标题1</div>
</div>
<div class="content-item">
<div class="item-num">4</div>
<div class="item-hr">
<img src="/resources/img-ocd/line-spa-icon.png" alt="Hoolinks">
</div>
<div class="itme-text">标题1</div>
</div>
<div class="content-item">
<div class="item-num">5</div>
<div class="item-hr">
<img src="/resources/img-ocd/line-spa-icon.png" alt="Hoolinks">
</div>
<div class="itme-text">标题1</div>
</div>
<div class="content-item">
<div class="item-num">6</div>
<div class="item-hr">
<img src="/resources/img-ocd/line-spa-icon.png" alt="Hoolinks">
</div>
<div class="itme-text">标题1</div>
</div>
</div>
.flow-content {
display: flex;
margin: 0 6%;
width: 88%;
margin-top: 50px;
justify-content: center;
align-items: center;
}
.content-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.item-num {
width: 46px;
height: 50px;
text-align: center;
line-height: 50px;
background:url(../img-ocd/spa-bg.png) center center no-repeat;
color: #fff;
font-size: 24px;
margin-bottom: 10px;
}
.item-icon {
margin-left: 2px;
margin-bottom: 15px;
}
.itme-text {
width: 100%;
text-align: center;
color: #333;
font-size: 16px;
letter-spacing: 1px;
}
.item-hr {
width: 100%;
height: 3px;
background: #4353af;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
}