rongzidanbao-ui/work/pages/prove/face.vue

<template>
	<view class="rzbox">
		<view class="facea">
			<image :src="faceimg" class="faceimg"></image>
			<view class="faceb">
				<view class="factip">请保持不动</view>
			</view>
			
		</view>
		<view class="facetip">面容认证仅能由<text>林涵宇</text>本人完成</view>
		<view class="flexcc">
			<view class="flexccc facetips">
				<image :src="ftipa"></image>
				<view>避免遮挡</view>
			</view>
			<view class="flexccc facetips">
				<image :src="ftipb"></image>
				<view>光线充足</view>
			</view>
			<view class="flexccc facetips">
				<image :src="ftipc"></image>
				<view>正对手机</view>
			</view>
		</view>
		<view class="phobox">
			<view>请把脸移入框内并保持不动</view>
			<image :src="phoimg"></image>
		</view>
		<view class="rzbtn" @click="getSumit">提交</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {uploadmore} from '@/utils/common.js'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				faceimg:require('@/work/static/images/prove/faceimg.png'),
				phoimg:require('@/work/static/images/prove/phoimg.png'),
				ftipa:require('@/work/static/images/prove/ftipa.png'),
				ftipb:require('@/work/static/images/prove/ftipb.png'),
				ftipc:require('@/work/static/images/prove/ftipc.png'),
				user:{
					
				}
			}
		},
		methods:{
			checkPermi, checkRole,
			getSumit(){
				this.$tab.navigateTo("/work/pages/prove/addqy")
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background:#ffffff;
}
.rzbox{padding: 78rpx 34rpx 76rpx;}
// 面容
.facea{width: 100%;margin:0 auto 16rpx;position: relative;width: 450rpx;height: 450rpx;
	image{width: 450rpx;height: 450rpx;display:block;margin: 0 auto;}
	.faceb{
		width: 376rpx;height: 376rpx;border-radius: 50%;position: absolute;top: 36rpx;left: 36rpx;border-radius: 50%;background-color: red;
		overflow: hidden;
		.factip{font-weight: bold;text-align: center;position: absolute;left: 0;top: 0;right: 0;height: 72rpx;line-height: 72rpx;
		font-size: 24rpx;color: #FFFFFF;background-color: rgba(0, 0, 0, 0.5);}
	}
	
}
.facetip{text-align: center;font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 78rpx;
	text{color: $com-cd3;font-weight: 500;padding: 0 4rpx;}
}
.facetips{width: 214rpx;
	image{width: 100rpx;height: 100rpx;margin-bottom: 14rpx;}
	view{font-weight: 500;font-size: 24rpx;color: #B0B0B0;}
}
.phobox{display: flex;flex-direction: column;align-items: center;margin-top: 200rpx;margin-bottom: 92rpx;
	view{font-weight: 500;font-size: 26rpx;color: #00A9F0;margin-bottom: 34rpx;}
	image{width: 72rpx;height: 116rpx;}
}
</style>