<template>
	<view class="process_more">
		<!-- 步骤条 -->
		<view class="set-2" :key="index" v-for="(item,index) in stepsData">
			<view class="lef_name flex_clumn">
				<text class="text">{{item.key}}</text>	
			</view>
			<view class="cen_img">
				<view 
					class="left_line_up" 
					:class="index==stepsData.length-1?'active':''"
				></view>
				<view v-if='index!=stepsData.length-1' class="left_line_down"></view>
			</view>
			<view class="rig_name flex_clumn">
				<text class="text">{{item.value}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			stepsData:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.process_more{
		// border: 1rpx solid red;
		.set-2 {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			.lef_name{
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 27rpx;
				color: #888888;
				// border: 1rpx solid red;
				font-weight: bold;
				.text{
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					font-family: PingFangSC-Ultralight,ans-serif;
				}
			}
			.rig_name{
				height: 40rpx;
				color: #888888;
				line-height: 40rpx;
				margin-left: 50rpx;
				// border: 1rpx solid red;
				font-size: 28rpx;
				.text{
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
				}
			}
			.cen_img{
				width: 50rpx;
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.left_line_up{
					width: 20rpx;
					height: 20rpx;
					border: 2rpx solid #707070;
					// box-shadow: #919191 0px 0px 5px; 
					border-radius: 50%;
				}
				.active{
					background-color: #3476FE;
				}
				.left_line_down{
					height: 50rpx;
					margin-top: 10rpx;
					width: 3rpx;
					background-color: #bdbdbd;
				}
			}
			.flex_clumn{
				display: flex;
				flex-direction: column;
			}
			
		}
	}
</style>


