11

components/step-bar/index.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="stepBarWrap">
+		<view class="stepBarContent" v-for="(item, index) in stepList" :key="index" >
+			<view class="number" :class="{'activeNum':active >= index}">{{index+1}}</view>
+			<view :class="{'active':active >= index}" style="color: #979797;margin-top: 20rpx;">{{item}}</view>
+			<view class="br" v-if="index > 0" :class="{'activeBr': active>=index}"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data (){
+			return {
+			}
+		},
+		props: {
+			stepList: {
+				type: Array,
+				default: []
+			},
+			active: 0
+		},
+		methods:{
+		}
+	}
+</script>
+
+<style>
+	.stepBarWrap{
+		display: flex;
+		justify-content: space-between;
+		padding: 0 15px;
+	}
+	.stepBarContent{
+		flex:1;
+		display: flex;
+		flex-flow: column;
+		align-items: center;
+		position: relative;
+		font-size: 14px;
+	}
+	.stepBarContent .number{
+		width:60rpx;
+		height: 60rpx;
+		line-height: 30px;
+		border-radius: 50%;
+		text-align: center;
+		color: #FFFFFF;
+		background-color: #97979747;
+	}
+	.stepBarContent .br{
+		width: 40%;
+		height:2px;
+		background-color: #979797;
+		position: absolute;
+		top: 28%;
+		left: -20%;
+	}
+	.active{
+		color: #1C66FF !important;
+	}
+	.activeNum{
+		background-color: #1C66FF !important;
+	}
+	.activeBr{
+		background-color: #1C66FF !important;
+	}
+</style>