Web_TracerMethodology/components/tm-steps/tm-steps.vue

<template>
	<view class="tm-steps">
		<view class="tm-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/steps-over.png"></image>
						<view v-else>{{ index + 1 }}</view>
					</view>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="component-wrap">
			<component v-bind:is="options[active].component"></component>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 步骤条
	 * 参数说明：
	 * options：{
		 * title: '显示的文字'，
		 * component: '内容组件（传组件对象或者全局注册过的组件名）'
		}
	 * active：当前进度，从0开始
	 */
	export default {
		props: ['options', 'active']
	}
</script>

<style lang="less">
	.tm-steps {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		
		.tm-steps-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 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;
					}
				}
			}
		}
		.component-wrap {
			width: 100%;
			height: calc(100% - 160rpx);
		}
	}
</style>