Web_TracerMethodology/components/lxh-steps/lxh-steps.vue

<template>
	<view class="lxh-steps">
		<view class="lxh-steps-top">
			<view class="item" v-for="(item, index) in options" 
				:style="{flex: index === 0 ? 'none' : 1}" 
				:class="{active: active === index, over: active > index}"
				:key="index">
				<view class="line" v-if="index !== 0"></view>
				<view class="content">
					<view class="content-top">
						<image v-if="active > index" 
							src="../../static/creatingSituations/steps-over.png"></image>
						<view v-else>{{ index + 1 }}</view>
					</view>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<component class="lxh-steps-content" 
			v-bind:is="options[active].component"></component>
	</view>
</template>

<script>
	export default {
		props: ['options', 'active']
	}
</script>

<style lang="less">
	.lxh-steps {
		display: flex;
		flex-direction: column;
		flex: 1;
		.lxh-steps-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 37.5rpx 25rpx 50rpx 25rpx;
			
			.item {
				display: flex;
				flex: 1;
				flex-direction: row;
				justify-content: flex-end;
				font-size: 17.5rpx;
				line-height: 26.25rpx;
				color: #B8BFCC;
				
				.content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 0 18.75rpx;
					min-width: 37.5rpx;
					
					text {
						white-space: nowrap;
					}
					.content-top {
						margin-bottom: 10rpx;
						width: 37.5rpx;
						height: 37.5rpx;
						line-height: 37.5rpx;
						text-align: center;
						
						view {
							border-radius: 50%;
							color: #fff;
							background-color: #B8BECC;
						}
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
				.line {
					margin-top: 18.12rpx;
					height: 1.25rpx;
					width: 100%;
					background-color: #B8BECC;
				}
				&.active {
					color: #3377FF;
					.content .content-top view {
						background-color: #3377FF;
					}
					.line {
						background-color: #3377FF;
					}
				}
				&.over {
					color: #292C33;
					.line {
						background-color: #3377FF;
					}
				}
			}
		}
		.lxh-steps-content {
			width: 100%;
			height: 100%;
		}
	}
</style>