uni-app 实现中间标题左右渐变分割线

<view class="title-split">
    <view></view>
    <text>猜你喜欢</text>
    <view></view>
</view>

.title-split {
    margin: 48rpx 0 28rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
        color: #161616;
        font-weight: 500;
        font-size: 30rpx;
        padding: 0 24rpx;
    }
    view {
        width: 98rpx;
        height: 4rpx;
        border-radius: 3rpx;
        &:first-of-type {
            background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%);
        }
        &:last-of-type {
            background: linear-gradient(90deg, #333333 0%, rgba(98, 98, 98, 0) 100%);
        }
    }
}

效果：