yl-gzh/pages/living/fail.vue

<template>
	<view class="container">
		<uni-icons type="clear" size="60" color="#28d87d" style="margin-top: 5vh;"></uni-icons>
		<text class="title">人脸采集失败</text>

		<view class="line"></view>
		<view class="fontBox">
			<text class="biaoti">温馨提示</text>
			<text class="content">您可以通过以下方式提高通过率</text>
			<text class="content">1.录制时，保持头部居中，光线充足，面部无遮挡</text>
			<text class="content">2.请确保动作连贯完整</text>
		</view>

		<button class="buttonClass" @click="restart">重新录制</button>
		<button class="buttonClass1" @click="quit">退出</button>

	</view>
</template>

<script>
	export default {
		methods: {
			restart() {
				uni.navigateTo({
					url: '/pages/test/index'
				})
			},
			restart() {
				uni.navigateTo({
					url: '/pages/test/index'
				})
			},
			quit() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		},
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		margin-top: 1vh;
		font-size: 24px;
	}

	.fontBox {
		display: flex;
		flex-direction: column;
		width: 80%;
		margin-top: 3vh;

		.biaoti {
			font-weight: 800;
			min-height: 4vh;
		}

		.content {
			font-weight: 400;
			line-height: 4vh;
			font-size: 3vw;
		}
	}

	.line {
		border: 1px solid rgba(204, 204, 204, 1);
		width: 80%;
		margin-top: 8vh;
	}

	.buttonClass {
		margin-top: 5vh;
		width: 80%;
		border-radius: 5.8vw;
		background: #28d87d;
		color: white;
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(40, 216, 125, 0.4);
	}

	.buttonClass1 {
		margin-top: 2vh;
		width: 80%;
		color: rgba(40, 216, 125, 1);
		border-radius: 5.8vw;
		/* background: #28d87d; */
		border: 1px solid rgba(40, 216, 125, 1);
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: center;
		/* box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(40, 216, 125, 0.4); */
	}
</style>