zhihuixiaoyuan2-ui/mine/components/popup/stepbar.vue

<template>
  <view class="stepbar" :class="fixeda?'sfixed':''">
	  <block v-for="(ite,idx) in steps" :key="idx">
		  <view class="steps" :class="ite.status>0?'act':''" v-if="reservatType!=2&&ite.val==2||ite.val!=2">
		  	<!-- <image :src="filln" class="img" v-if="ite.status==0"></image>
		  	<image :src="fillin" class="img" v-if="ite.status==1"></image>
		  	<image :src="fillf" class="img" v-if="ite.status==2"></image> -->
			<view class="txt">{{idx+1}}</view>
		  	<view class="tit">{{ite.tit}}</view>
		  	<view class="line"></view>
		  </view>
	  </block>
  </view>
</template>

<script>
//fixeda   固定
  export default {
	props:{
		steps: {
			type: Array,
			default () {
				return []
			}
		},
		fixeda:{
			type: Boolean,
			default () {
				return false
			}
		},
		reservatType:{
			type: [Number,String],
			default () {
				return 1
			}
		}
	},
	components:{
		
	},
	data(){
		return{
			// fillin:require("@/static/images/order/come/fillin.png"),//填写
			// fillf:require("@/static/images/order/come/fillf.png"), //完成
			// filln:require("@/static/images/order/come/filln.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: 10;}
.stepbar{background: #ffffff;display: flex;align-items: center;padding: 26rpx 0rpx;flex: 0 0 auto;
	.steps{display: flex;flex-direction: column;flex: 1;align-items: center;position: relative;
		.img{width: 46rpx;height: 46rpx;margin-bottom: 14rpx;}
		.txt{font-weight: bold;font-size: 20rpx;color: #999999;width: 30rpx;height: 30rpx;background: #F0F1F6;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx;}
		.tit{font-size: 24rpx;font-weight: bold;color: #CDCDCD;

		}
		.line{position: absolute;width: 60%;border-bottom: 2rpx dashed #CCCACA;top: 14rpx;right: 0;transform: translateX(50%);}
		&:last-of-type{.line{display: none;}}
		&.act{
			.txt{background: #4775EA;color: #ffffff;}
			.line{border-color: #4775EA;}
			.tit{color: #4775EA;}
		}
	}

}
</style>