用到这个步骤条的时候,看了下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>