这两条竖线如何实现？我自己写的，总感觉怪怪的

代码：

<!-- 5、“守时守约”等服务说明内容:包括图和文字 -->

<view class="state">

  <view class="state-punctual">

    <image class="punctual-img" src="../../resources/punctual-icon.png"/>

    <text class="punctual-text">守时守约</text>

  </view>

  <view class="state-paid">

    <image class="paid-img" src="../../resources/paid-icon.png"/>

    <text class="paid-text">丢损必赔</text>

  </view>

  <view class="state-guarantee">

    <image class="guarantee-img" src="../../resources/guarantee-icon.png"/>

    <text class="guarantee-text">急速官方保证</text>

  </view>

</view>

css:

/* “守时守约”等服务说明内容:包括图和文字 */

.state{

  display: flex;

}

.state-punctual{

  margin:0 71rpx;

}

.punctual-img,.paid-img,.guarantee-img{

  width: 20rpx;

  height: 26rpx;

  margin-right: 19rpx;

}

.punctual-text,.paid-text,.guarantee-text{

  font-size: 24rpx;

  color: #999999;

}

.state-paid{

  margin-right: 39rpx;

  border-left: 5rpx solid #999999;

  border-right:5rpx solid #999999;

}

.paid-img{

  margin-left: 45rpx;

}

.paid-text{

  margin-right: 42rpx;

}

实现效果：