blindDate/pages/my/authentication.vue

<template>
	<view class="lf-w-100 lf-h-100">
		<view class="authen-top">
			<view class="lf-color-white"><u-icon name="integral-fill lf-m-r-15 lf-font-38"></u-icon>尚未实名认证</view>
			<view class="lf-font-28 lf-color-white">无法使用：发布动态，查看高级资料等进阶功能</view>
		</view>
		<view class="lf-row-between lf-p-l-32 lf-p-r-32 lf-m-b-30">
			<view class="authen-btn lf-font-32" @click="$url('/pages/my/memberDetails')">预览主页</view>
			<view class="authen-btn lf-font-32 pink-btn" @click="$url('/pages/my/uploadInfo')">马上认证</view>
		</view>
		<view class="lf-color-777 lf-font-24 lf-row-center" style="margin-bottom: 60rpx;">
			已有医生、银行、教师、外贸、IT等单身完成认证
		</view>
		<view class="lf-p-l-32 lf-p-r-32" style="margin-bottom: 50rpx;">
			<view class="lf-color-222 lf-font-32 lf-m-b-20 authen-title lf-p-l-20">为什么要实名认证</view>
			<view class="lf-color-777 lf-font-28">
				为给大家创建一个真实安全的优质的脱单环境，确保会员真诚相亲，每个都是人工审核
			</view>
		</view>
		<view class="lf-p-l-32 lf-p-r-32">
			<view class="lf-color-222 lf-font-32 lf-m-b-20 authen-title lf-p-l-20">100%隐私安全</view>
			<view class="lf-color-777 lf-font-28">
				认证信息仅用于官方审核，自动添加图片水印
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.authen-top {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 686rpx;
		height: 185rpx;
		background: #E21196;
		border-radius: 10rpx;
		margin: 30rpx auto;
	}
	.authen-btn {
		width: 333rpx;
		height: 100rpx;
		border-radius: 10rpx;
		border: 1rpx solid #555555;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #555555;
	}
	
	.pink-btn {
		color: #E21196!important;
		border: 1px solid #E21196!important;
	}
	
	.authen-title {
		position: relative;
	}
	
	.authen-title::after {
		content: '';
		position: absolute;
		left: 0;
		top: 8rpx;
		width: 8rpx;
		height: 30rpx;
		background: #E21196;
		border-radius: 4rpx;
	}
</style>