uniapp实现步骤条

用到这个步骤条的时候，看了下uniapp和uview官网的案例，步骤条的组件样式改动不好改，就自己写了一个

<template>
	<view>
		<view class="tab_box">
			<view class="tag">
				<image v-show="value1" src="../../static/安全隐私.png" mode=""></image>
				<text v-show="value1">——</text>

				<view class="tag_num" v-show="value1==false">
					1
				</view>
				<text  style="color: #ccc;" v-show="value1==false">——</text>
			</view>
			<view class="tag">
				<image v-show="value2" src="../../static/安全隐私.png" mode=""></image>
				<text v-show="value2">——</text>
				<view class="tag_num" v-show="value2==false">
					2
				</view>
				<text  style="color: #ccc;" v-show="value2==false">——</text>
			</view>
			<view class="tag">
				<image v-show="value3" src="../../static/安全隐私.png" mode=""></image>
				<text v-show="value3">——</text>
				<view class="tag_num" v-show="value3==false">
					3
				</view>
				<text  style="color: #ccc;" v-show="value3==false">——</text>
			</view>
			<view class="tag">
				<image v-show="value4" src="../../static/安全隐私.png" mode=""></image>
				<text v-show="value4">——</text>
				<view class="tag_num" v-show="value4==false">
					4
				</view>
				<text  style="color: #ccc;" v-show="value4==false">——</text>
			</view>
			<view class="tag">
				<image v-show="value5" src="../../static/安全隐私.png" mode=""></image>
				<view class="tag_num" v-show="value5==false">
					5
				</view>
			</view>
		</view>
         
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
				value1: true,
				value2: true,
				value3: false,
				value4: false,
				value5: false,
				
				
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.tab_box {
		width: 70%;
		display: flex;
		margin: auto;
		margin-top: 40rpx;
	}

	.tag {
		display: flex;
		image {
			width: 50rpx;
			height: 50rpx;
		}

		text {
			position: relative;
			top: 0rpx;
			color: rgb(44, 132, 255);
		}
		
		.tag_num{
			width: 45rpx;
			height: 45rpx;
			text-align: center;
			line-height: 45rpx;
			border-radius: 50%;
			border: 1rpx solid #ccc;
			color: #ccc;
		}
	}
	
</style>