效果图如下:
代码如下
<template>
<div class="data-wrap">
<div class="item">
<span>
<i>92</i>件<br/>
发明专利
</span>
</div>
<div class="item">
<span>
<i>92</i>件<br/>
发明专利
</span>
</div>
<div class="item">
<span>
<i>92</i>件<br/>
发明专利
</span>
</div>
<div class="item">
<span>
<i>92</i>件<br/>
发明专利
</span>
</div>
<div class="item">
<span>
<i>92</i>件<br/>
发明专利
</span>
</div>
<div class="item">
<span>
<i>92</i>件<br/>
发明专利
</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.data-wrap{
width: 100%;
margin-bottom: 20px;
height: 120px;
background: #e7e7ef;
display: flex;
.item{
width: 100%;
height: 100%;
display: flex;
align-items: center;
span{
width: 100%;
text-align: center;
border-right: 1px solid #000;
i {
font-size: 30px;
color: purple;
}
}
&:last-child span{
border: none;
}
}
}
</style>