uniApp 实现步骤（进度）条

说明根据传递过来的show显示步骤

<template>
    <view>
        <view class="tl-steps">
            <view class="tl-dot tl-black">
                <uni-icons type="shop" size="20" color="#fff"></uni-icons>
            </view>
            <view class="tl-line-active"></view>
            <view :class="show > 0 ? 'tl-line-active':'tl-line'"></view>
            <view class="tl-dot" :class="show >0 ? 'tl-black':'tl-gray'">
                <uni-icons type="person" size="20" color="#fff"></uni-icons>
            </view>
            <view :class="show > 0 ? 'tl-line-active':'tl-line'"></view>
            <view :class="show > 1 ? 'tl-line-active':'tl-line'"></view>
            <view class="tl-dot" :class="show == 2?'tl-black':'tl-gray'">
                <uni-icons type="gear" size="20" color="#fff"></uni-icons>
            </view>
            <view :class="show == 2 ? 'tl-line-active':'tl-line'"></view>
            <view class="tl-line"></view>
            <view class="tl-dot" :class="show == 3?'tl-black':'tl-gray'">
                <uni-icons type="checkbox" size="20" color="#fff"></uni-icons>
            </view>
        </view>
        <view class="tl-steps">
            <text class="tl-text tl-text-active">店铺信息</text>
            <text class="tl-text" :class="show > 0 ?'tl-text-active':'tl-text-color'">实名认证</text>
            <text class="tl-text" :class="show == 2 ?'tl-text-active':'tl-text-color'">店铺认证</text>
            <text class="tl-text tl-text-color">提交审核</text>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            show: Number
        },
        data() {
            return {}
        }
    }
</script>

<style lang="scss">
    .tl-steps {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
    }

    .tl-text {
        width: 25%;
        text-align: center;
        font-size: 28rpx;
    }

    .tl-dot {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tl-line {
        width: 60rpx;
        border: 2rpx solid #C6CCE6;
    }

    .tl-line-active {
        width: 60rpx;
        border: 2rpx solid #202D3B;
    }

    .tl-text-color {
        color: #C6CCE6;
    }

    .tl-text-active {
        color: #202D3B;
    }

    .tl-black {
        background: #202D3B !important;
    }

    .tl-gray {
        background: #C6CCE6;
        ;
    }
</style>