jy-safe-app/components/custom/step-title.vue

<template>
	<view>
		<view class="background"></view>
		<view style="padding-top: 20px;" :class="stepText.length == 5?'step-load':'step-loadaf'">
			<u-steps :current="stepPage" class="stepbox" active-color="#8d95a1" inactive-color="#d9e6f9">
				<u-steps-item :title="stepText[0]">
					<view class="slot-icon-ing" slot="icon" v-if="stepPage === 0">
						<view class="slot-icon-dot"></view>
					</view>
					<view class="slot-icon-ed" slot="icon" v-if="stepPage > 0">
						<u-icon name="checkbox-mark" color="#fff" size="14"></u-icon>
					</view>
				</u-steps-item>
				<view v-for="(item,index) in stepText.slice(1,stepText.length - 1)" :key="index" style="flex: 1;">
					<u-steps-item :title="item">
						<view class="slot-icon-ing" slot="icon" v-if="stepPage === index+1">
							<view class="slot-icon-dot"></view>
						</view>
						<view class="slot-icon-no" slot="icon" v-if="stepPage < index+1">{{index+2}}</view>
						<view class="slot-icon-ed" slot="icon" v-if="stepPage > index+1">
							<u-icon name="checkbox-mark" color="#fff" size="14"></u-icon>
						</view>
					</u-steps-item>
				</view>
				<u-steps-item :title="stepText[stepText.length - 1]">
					<view class="slot-icon-ing" slot="icon" v-if="stepPage === stepText.length - 1">
						<view class="slot-icon-dot"></view>
					</view>
					<view class="slot-icon-no" slot="icon" v-if="stepPage < stepText.length - 1">{{stepText.length}}</view>
				</u-steps-item>
			</u-steps>
		</view>
	</view>

</template>
<script>
	export default {
		props: {
			stepPage: {
				type: Number,
				default: 0
			},
			stepText: {
				type: Array,
				default () {
					return ['基本信息', '作业人员', '确认信息']
				}
			}
		},
	}
</script>
<style scoped>
	.background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #edf1fd;
		z-index: -1;
	}

	.step-load>>>.u-steps-item__wrapper {
		background-color: #edf1fd;
	}

	.step-load>>>.u-text__value--main {
		color: #3d4b70;
		font-weight: bold !important;
	}

	.step-load>>>.u-steps-item__line--row {
		height: 4px;
		width: 50px !important;
		left: 55px !important;
		border-radius: 500px;
	}

	.step-load>>>.u-steps-item__wrapper--row {
		width: 42px;
	}
	.step-loadaf>>>.u-steps-item__wrapper {
		background-color: #edf1fd;
	}
	
	.step-loadaf>>>.u-text__value--main {
		color: #3d4b70;
		font-weight: bold !important;
	}
	
	.step-loadaf>>>.u-steps-item__line--row {
		height: 4px;
		width: 119px !important;
		/* left: 84px !important; */
		border-radius: 500px;
	}
	
	.step-loadaf>>>.u-steps-item__wrapper--row {
		width: 62px;
	}

	.slot-icon-ed {
		width: 24px;
		height: 24px;
		background-color: #3d4b70;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 24px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slot-icon-ing {
		width: 24px;
		height: 24px;
		background-color: #cceaff;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slot-icon-no {
		width: 24px;
		height: 24px;
		background-color: #7785a2;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 24px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slot-icon-dot {
		width: 12px;
		height: 12px;
		background-color: #3695ff;
		border-radius: 100px;
		color: #fff;
		line-height: 10px;
	}
</style>