公司优势介绍项目备份

ck1987

　　一 html



<div class="di-special-des" v-if="isService">
本产品由乐车邦提供<br>
客服电话:<a href="tel:4006-300-111">4006-300-111</a>(9:00-20:00)
</div>
<div class="di-pros-intro" v-else>
<div class="di-title">
<h4>1000万车主选择乐车邦</h4>
</div>
<ul class="flex-wrap">
<li class="flex di-icon-wrap">
<div class="di-icon-item di-iconfont-discount"></div>
<div class="di-txt font-xs">总价3-6折</div>
</li>
<li class="flex">
<div class="di-icon-item di-iconfont-guarantee"></div>
<div class="di-txt font-xs">原厂保障</div>
</li>
<li class="flex">
<div class="di-icon-item di-iconfont-noworry"></div>
<div class="di-txt font-xs">保修无忧</div>
</li>
<li class="flex">
<div class="di-icon-item di-iconfont-exchange"></div>
<div class="di-txt font-xs">随时可退</div>
</li>
</ul>
</div>
　　二 css



/* 优势介绍 */
.di-pros-intro {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0 0.6rem;
color: #666;
text-align: center;
margin-top: .6rem;
}
.di-pros-intro::after {
content: '';
position: absolute;
background: #ccc;
height: 1px;
left: .7rem;
right: .7rem;
top:0.1rem;
}
.di-title{
margin-bottom: .1rem;
}
.di-pros-intro h4 {
display: inline-block;
height:0.2rem;
line-height:0.2rem;
padding: 0 0.1rem;
background: #efeff4;
position: relative;
z-index: 1;
}
.di-pros-intro h4::before, .di-pros-intro h4::after {
content: '';
position: absolute;
width:0.05rem;
height:0.05rem;
background: #ccc;
-webkit-border-radius:50%;
border-radius:50%;
top:40%;
}
.di-pros-intro h4::before {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
.di-pros-intro h4::after {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
.di-icon-wrap{
text-align: center;
}
.di-icon-item{
height: 0.45rem;
width: 0.45rem;
line-height: 0.45rem;
-webkit-border-radius:50%;
border-radius:50%;
background-color: #d4f0ff;
margin:0 auto;
}
.di-iconfont-discount::after{
font-family: 'iconfont';
content: "\e625";
font-size: 0.3rem;
color: #fff;
}
.di-iconfont-guarantee::after{
font-family: 'iconfont';
content: "\e622";
font-size: 0.3rem;
color: #fff;
}
.di-iconfont-noworry::after{
font-family: 'iconfont';
content: "\e623";
font-size: 0.3rem;
color: #fff;
}
.di-iconfont-exchange::after{
font-family: 'iconfont';
content: "\e624";
font-size: 0.3rem;
color: #fff;
}
.di-txt{
margin-top: 0.05rem;
}