Vue 三种带文字分割线实现方式

第一种

利用::before 和 ::after实现

   <div class="not_has_more">
    常用品牌
   div>

 .not_has_more {
    margin: 40px 0;
    line-height: 50px;
    text-align: center;
    position: relative;
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(140, 142, 165, 1);
    line-height: 33px;
    &::after,
    &::before {
      position: absolute;
      width: 54px;
      height: 0.5px;
      background: #dadada;
      content: '';
      top: 15px;
    }
    &::after {
      left: 28%;
    }
    &::before {
      right: 28%;
    }
  }

第二种

利用 background和flex叠加实现

 <div class="divider_self">
 <div class="txt">常用品牌div>
 div>

  .divider_self {
    margin: 36px auto 35px;
    width: 324px;
    background-color: #e6e6e6;
    height:.7px;
    position: relative;
    @include flex;
    .txt {
      width: 144px;
      height: 24px;
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8c8ea5;
      line-height: 24px;
      background-color: #ffffff;
      text-align: center;
    }
  }

第三种

使用第三方UI库 vant的组件

      <Divider class="divider_cp"> 常用品牌 Divider>

 .divider_cp {
    margin: 24px auto 25px;
    width: 324px;
    background: #ffffff;
    border-radius: 24px;
    border-color: #e6e6e6;
    padding: 0 16px;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8c8ea5;
    line-height: 24px;
  }