圆点加横线 分割线 标题线 CSS

  <view class='title'>
    <view class='hrLineLeft'>
      <view class='line'></view>
      <view class='circle'></view>
    </view>
    <view class='centerText'>标题名称</view>
    <view class='hrLineRight'>
      <view class='circle'></view>
      <view class='line'></view>
    </view>
  </view>

.hrLineLeft{
  display:flex;
  align-items:center;
}

.hrLineLeft .line{
  width: 115rpx;
  height: 3rpx;
  background: #3474cf;
}

.hrLineLeft .circle{
  width: 10rpx;
  height: 10rpx;
  background: #3474cf;
  border-radius: 50%;
}
 
.hrLineRight .line{
  width: 115rpx;
  height: 3rpx;
  background: #3474cf;
}

.hrLineRight .circle{
  width: 10rpx;
  height: 10rpx;
  background: #3474cf;
  border-radius: 50%;
}

.hrLineRight{
  display:flex;
  align-items:center;
}

.title{
  display: flex;
  justify-content: center;
}

.centerText{
  color: #3474cf;
  font-size: 32rpx;
  padding: 0 0.75rem;
}