rongzidanbao-ui/components/toptab/stepbar.vue

<template>
  <view class="stepbar" :class="fixeda?'sfixed':''">
	  <block v-for="(ite,idx) in steps" :key="idx">
		  <view class="steps" :class="ite.status==stepval?'act':''">
		  	<image :src="fillf" class="img" v-if="ite.status<stepval"></image>
		  	<image :src="fillin" class="img" v-else-if="ite.status==stepval"></image>
			<image :src="filln" class="img" v-else></image>
		  	<view class="tit">{{ite.tit}}</view>
			<image :src="line" class="line"></image>
		  </view>
	  </block>
  </view>
</template>

<script>
//fixeda   固定
  export default {
	props:{
		steps: {
			type: Array,
			default () {
				return []
			}
		},
		stepval:{
			type: [Number,String],
			default () {
				return 0
			}
		},
		fixeda:{
			type: Boolean,
			default () {
				return false
			}
		}
	},
	components:{
		
	},
	data(){
		return{
			fillin:require("@/work/static/images/busin/stepb.png"),//填写
			fillf:require("@/work/static/images/busin/stepa.png"), //完成
			filln:require("@/work/static/images/busin/stepc.png"),//未填
			// stepa:require('@/work/static/images/busin/stepa.png'),
			// stepb:require('@/work/static/images/busin/stepb.png'),
			// stepc:require('@/work/static/images/busin/stepc.png'),
			line:require('@/work/static/images/busin/line.png'),
		}
	},
	onLoad: function() {
	},
	methods:{
		getDetail(e){
			this.$emit('getDetail')
		} 
	},
	
  }
</script>

<style lang="scss" scoped>
.sfixed{position: fixed;left: 0;right: 0;top: 0;z-index: 4;}
.stepbar{background: #ffffff;display: flex;align-items: center;padding: 30rpx 0rpx 26rpx;flex: 0 0 auto;
	.steps{display: flex;flex-direction: column;flex: 1;align-items: center;position: relative;
		.img{width: 32rpx;height: 32rpx;margin-bottom: 20rpx;}
		.tit{font-size: 24rpx;font-weight: 500;color: #666666;}
		.line{position: absolute;width:70rpx;top: 4rpx;height:20rpx;right:0;margin-right: -34rpx;}
		&:last-of-type{.line{display: none;}}
		&.act{
			.tit{color: #00A9F0;}
		}
	}

}
</style>