<template>
	<view class="u-tips">
		<view class="icon">!</view>
		<text>根据平台有关规定，为保障校园安全，进入校园必须人脸识别</text>
	</view>
	<view class="content">
		<view class="u-card">
			<view class="card" @click="addUser">
				<zzx-icon name="add" size="14"></zzx-icon>
				<view class="">新增用户</view>
			</view>
			<view class="card">
				<zzx-icon name="wechat" size="14"></zzx-icon>
				<view class="">邀请好友加入</view>
			</view>
		</view>
		<view class="u-select-btn">
			<button hover-class="hover-btn">确认选择:0人</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { RouterUtils } from '@/utils/util';
	const addUser = () => {
		RouterUtils.to_page('/pages/index/attestation/index');
	}
</script>

<style lang="less" scoped>
	.u-tips {
		display: flex;
		align-items: center;
		gap: 6rpx;
		background: rgba(255, 163, 71, 0.1);
		padding: 20rpx;

		.icon {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #FFA347;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 30rpx;
		}

		&>text {
			font-size: 24rpx;
			color: #222222;
		}
	}

	.u-card {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;

		.card {
			width: 336rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// flex-direction: column;  换行	
			gap: 10rpx;

			&>view {
				font-size: 28rpx;
				color: #222222;
			}
		}
	}

	.u-select-btn {
		position: fixed;
		bottom: 160rpx;
		width: 95%;

		&>button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background: #D3FD76;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		&>button::after {
			border: none;
		}

		.hover-btn {
			background: #ccf371;
			color: #999999;
		}
	}
</style>