公司优势介绍项目备份

一 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;
   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;
  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;
   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;
}