LabCenter/pages/record/handlesteps.vue

<template>
	<!-- 审核状态 -->
	<view class="step">
		<!-- 每个步骤都分三种状态  审核成功--绿色、审核失败--红色、等待审核 -->
		<view class="step-item item-loading">
			<view class="dian dian-loading">
			</view>
			<view class="step-num">
				第一步
			</view>
			<view class="step-name">
				提交申请
			</view>
		
		</view>
		<!-- 待审核 -->
		<view class="step-item item-loading" >
			<view class="dian dian-loading">
			</view>
			<view class="step-num">
				第二步
			</view>
			<view class="step-name">
				信息技术学院审核
			</view>
			
		</view>
	
		<view class="step-item item-loading">
			<view class="dian dian-loading">
			</view>
			<view class="step-num">
				第三步
			</view>
			<view class="step-name">
				实验中心审核
			</view>
			
		</view>
		<view class="step-item item-loading"  style="border-left: solid 2px #fff">
			<view class="dian dian-loading">
			</view>
			<view class="step-num">
				第四步
			</view>
			<view class="step-text">
				审核完成
			</view>
		</view>
		<view class="step-tips">
			<view class="tips-title">
				审核注意事项
			</view>
			<view class="tips-text">
				<u-parse :html="tips"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepDetail: '',
				tips: '',
				time: '',
				apply_name: ''
			}
		},
		onLoad(options) {
		
			this.getTips()
		},
		methods: {
		
			//获取注意事项
			getTips() {
				this.$u.get('/base/setting-key', {
					key: 'TINGTIAOKE_TIPS'
				}).then(res => {
					console.log(res, 'lll')
					this.tips = res.data.value
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.step {
		padding: 20px;

	}

	.step-item {
		padding: 0 20px;
		padding-bottom: 20px;
		border-left: solid 2px #1ee50c;
		position: relative;


	}

	.dian {
		height: 10px;
		width: 10px;
		border-radius: 50%;
		background-color: #1ee50c;
		position: absolute;
		left: -6px;
	}

	.step-num {
		color: rgba(0, 0, 0, 0.65);
		margin-bottom: 8px;
	}

	.step-name {
		color: #000;
		font-weight: bold;
		font-size: 14px;
		margin-bottom: 5px;
	}

	.step-text {
		line-height: 23px;
	}

	.fail {
		color: red;
	}

	.loading {
		color: #1890ff;

	}

	.success {
		color: #13ce66;
	}

	.item-fail {
		border-left: solid 2px red;
	}

	.item-loading {
		border-left: solid 2px #c7cbda;
	}

	.item-success {
		border-left: solid 2px #13ce66;
	}

	.dian-fail {
		background-color: red;
	}

	.dian-loading {
		background-color: #c7cbda;

	}

	.dian-success {
		background-color: #13ce66;
	}

	.step-tips {
		padding-top: 20px;
		// background-color: #13ce66;

	}

	.tips-title {
		font-size: 14px;
		font-weight: 550;
		color: #000;
		font-weight: bold;
		margin-bottom: 10px;

	}

	.tips-text {
		border: solid 1px #e4e4e4;
		background-color: #f8f5fb;
		border-radius: 8px;
		line-height: 22px;
		font-weight: 400;
		padding: 5px;

		rich-text {
			line-height: 23px !important;
		}
	}
</style>