<template>
	<div class="steps">
		<div class="steps_start" :class="v1==1?'public1':'public0'">
			<div class="steps_start_lin">
				<div class="steps_start_lin1">
					<i :class="v1==0?'el-icon-close':'el-icon-check'"></i>
				</div>
				<div class="steps_start_lin2"></div>
			</div>
			<div class="steps_start_tit">
				实施方案
			</div>
			<div class="steps_start_txt">
				2022-12-15 15:30:00
			</div>
		</div>
		<div class="steps_process" :class="v2==1?'public1':'public0'">
			<div class="steps_start_lin">
				<div class="steps_start_lin1">
					<i :class="v2==0?'el-icon-close':'el-icon-check'"></i>
				</div>
				<div class="steps_start_lin2">
					
				</div>
			</div>
			<div class="steps_start_tit">
				数据采集
			</div>
			<div class="steps_start_txt">
				2022-12-15 15:30:00
			</div>
		</div>
		<div class="steps_process" :class="v2==1?'public1':'public0'">
			<div class="steps_start_lin">
				<div class="steps_start_lin1">
					<i :class="v2==0?'el-icon-close':'el-icon-check'"></i>
				</div>
				<div class="steps_start_lin2">
					
				</div>
			</div>
			<div class="steps_start_tit">
				报告编写
			</div>
			<div class="steps_start_txt">
				2022-12-15 15:30:00
			</div>
		</div>
		<div class="steps_end" :class="v3==1?'public1':'public0'">
			<div class="steps_start_lin">
				<div class="steps_start_lin1">
					<i :class="v3==0?'el-icon-close':'el-icon-check'"></i>
				</div>
			</div>
			<div class="steps_start_tit">
				交付审核
			</div>
			<div class="steps_start_txt">
				2022-12-15 15:30:00
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				v1:1,
				v2:1,
				v3:0,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.steps{
		color: #000;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		.public0{
			.steps_start_lin{
				display: flex;
				align-items: center;
				.steps_start_lin1{
					width: 14px;
					height: 14px;
					border-radius: 50%;
					background: #ccc;
					color: #fff;
					padding: 2px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
				}
				.steps_start_lin2{
					flex: 1;
					height: 2px;
					background: #ccc;
				}
			}
			.steps_start_tit{
				font-size: 14px;
				color: #ccc;
				line-height: 30px;
			}
			.steps_start_txt{
				font-size: 12px;
				color: #ccc;
				padding-right:50px;
			}
		}
		.public1{
			color: #409EFF;
			.steps_start_lin{
				display: flex;
				align-items: center;
				.steps_start_lin1{
					width: 14px;
					height: 14px;
					border-radius: 50%;
					background: #409EFF;
					color: #fff;
					padding: 2px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
				}
				.steps_start_lin2{
					flex: 1;
					height: 2px;
					background: #409EFF;
				}
			}
			.steps_start_tit{
				font-size: 14px;
				line-height: 30px;
			}
			.steps_start_txt{
				font-size: 12px;
				padding-right:50px;
			}
		}
	}
</style>