html结构如下:
<view style="margin-bottom:0rpx;display: inline-flex;align-items: flex-start;">
<text class="Advance-payment-l">金额</text>
<text class="Advance-payment-r">{{item.deposit}}元</text>
</view>
css样式如下:
.Advance-payment-l,
.Advance-payment-r {
color: #FF4732;
font-size: 16rpx;
font-style: normal;
font-weight: 400;
line-height: normal;
border-radius: 2rpx 0rpx 0rpx 2rpx;
border-top: 1rpx solid #FF4732;
border-left: 1rpx solid #FF4732;
border-bottom: 1rpx solid #FF4732;
padding: 0rpx 4rpx;
box-sizing: border-box;
border-right: 1rpx dashed #F46;
background: rgba(255, 71, 50, 0.10);
overflow: hidden;
}
.Advance-payment-r {
border-top: 1rpx solid #FF4732;
border-left: none;
border-bottom: 1rpx solid #FF4732;
border-right: 1rpx solid #FF4732;
background: #fff;
border-radius: 0rpx 2rpx 2rpx 0rpx;
}