uniapp 自定义uni-steps组件

效果图如下图所示：

<view class="logistics-info  p-3 mt-3">
    <view class="detail mb-3 pl-3" :class="{'active': 0 ==index}"
        v-for="(item, index) in lists" :key="index">
        <view>
            <view class="font-size-left-11" :class="{'text-default': 0 !== index}">
                {{ item.remark }}
            </view>
            <view class="font-size-left-11" :class="{'text-default': 0 !== index}">
                {{ item.datetime }}
            </view>
        </view>
    </view>
</view>

 export default {
     data(){
         return {
             list: [{
                    remark: '111快件派送',
                    datetime: '2-20 18:16',
                },
                {
                    remark: '快件已经离开广州番禺区',
                    datetime: '2-19 18:16',
                },
                {
                    remark: '大石营业部的 周杰伦 快递员已揽件',
                    datetime: '2-20 18:16',
                },
                {
                    remark: '111快件派送',
                    datetime: '2-20 18:16',
                },
                {
                    remark: '快件已经离开广州番禺区',
                    datetime: '2-19 18:16',
                },
                {
                    remark: '大石营业部的 周杰伦 快递员已揽件',
                    datetime: '2-20 18:16',
                }
            ]
         }
     }
 }

logistics-info
{
    position: relative;
    background-color: #fff;

    &::before {
        width: 2rpx;
        height: calc(100% - 70px);
        background-color: #f1f1f1;
        content: '';
        display: block;
        position: absolute;
        left: 20rpx;
        top: 35rpx;
    }

    .detail,
    .active {
        position: relative;

        &::before {
            width: 12rpx;
            height: 12rpx;
            border-radius: 12rpx;
            background-color: #fff;
            content: '';
            display: block;
            position: absolute;
            left: -6rpx;
            top: 15rpx;
            border: 1rpx solid #dddddd;
        }
    }

    .active {
        &::before {
            background-color: #fb404d;
            box-shadow: 0 0 5rpx 5rpx #FFDFE1;
        }
    }
}