officialAccount/pages/index/index.vue

<template>
	<view class="login-container">
		<view class="title">
			<image class="title-imge" src="/static/index/nu.png" />
			<view class="title-font">
				<view class="">您好，</view>
				<view class="">欢迎使用nu护理单元~</view>
			</view>
		</view>
		<image class="photo-imge" src="/static/index/bgc.png" />
		<image class="old-imge" src="/static/index/old.png" />
		<view class="under-container">
			<view class="under-container-title">
				<div v-show="isFadingOut" class="bubble">
					请勾选同意该协议
				</div>
				<view :class="isTarget ? 'radio-circle-target' : 'radio-circle'" @click="isTarget = !isTarget"></view>
				<view class="radio-circle-font" @click="isTarget = !isTarget">登录代表您已同意</view>
				<view class="radio-circle-blue">
					《法律条款与隐私政策》
				</view>
			</view>
			<view class="button-blue" @click="loginIt">
				一键登录
			</view>
			<view class="button-white" @click="yanzhengma">
				手机登录/注册
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		useWeChatAuth
	} from '@/compontent/useWeChatAuth.js';

	const isTarget = ref(false);
	const isFadingOut = ref(false);
	const {
		login
	} = useWeChatAuth();

	let timerId = null; // 用来保存定时器ID

	const loginIt = () => {
		// 清除上次的定时器，避免定时器重复触发
		if (timerId) {
			clearTimeout(timerId);
		}

		if (!isTarget.value) {
			isFadingOut.value = true;
			timerId = setTimeout(() => {
				isFadingOut.value = false;
			}, 1000); // 500ms后恢复显示
		} else {
			login();
		}
	};
	const yanzhengma = () => {
		if (timerId) {
			clearTimeout(timerId);
		}

		if (!isTarget.value) {
			isFadingOut.value = true;
			timerId = setTimeout(() => {
				isFadingOut.value = false;
			}, 1000); // 500ms后恢复显示
		} else {
			uni.navigateTo({
				url: "/pages/index/phonebumber"
			});
		}

	}
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		position: relative;

		.title {
			display: flex;
			margin-top: 120rpx;
			align-items: center;

			.title-imge {
				width: 110rpx;
				height: 110rpx;
				margin-right: 30rpx;
			}

			.title-font {
				font-size: 35rpx;
				font-weight: 500;
			}
		}

		.photo-imge {
			position: absolute;
			top: 120rpx;
			left: 0;
			width: 100%;
			height: 1100rpx;
		}

		.old-imge {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			top: 550rpx;
			width: 400rpx;
			height: 400rpx;
		}

		.under-container {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 680rpx;
			background-color: #fff;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;

			.radio-circle {
				position: relative;
				margin-top: 2rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #C0C5D9;
				background-color: transparent;
			}

			.radio-circle-target {
				position: relative;
				margin-top: 2rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #C0C5D9;
				background-color: transparent;
			}

			.radio-circle-target::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 30rpx;
				height: 30rpx;
				background-color: #00C9FF;
				border-radius: 50%;
			}
		}
	}

	.under-container-title {
		display: flex;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;

		.radio-circle-blue {
			color: #0083FF;
			margin-top: 3rpx;
		}

		.radio-circle-font {
			color: #5A607F;
			margin-left: 18rpx;
			margin-top: 3rpx;
		}
	}

	.button-blue {
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-radius: 43rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		color: #fff;
		font-size: 33rpx;
		margin-bottom: 30rpx;
	}

	.button-white {
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-radius: 43rpx;
		color: #5A607F;
		font-size: 33rpx;
		margin-bottom: 30rpx;
		border: 2rpx solid #C0C5D9;
	}

	.bubble {
		transition: opacity 1s ease-out;
		position: absolute;
		left: 25rpx;
		top: -5rpx;
		background-color: black;
		color: white;
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 23rpx;
		box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.2);
		pointer-events: none;
		opacity: 1;
		/* 初始为可见 */
	}

	.bubble::after {
		transition: opacity 1s ease-out;
		content: '';
		position: absolute;
		left: 50%;
		bottom: -8rpx;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid black;
		transform: translateX(-50%);
	}

	/* 隐藏气泡 */
	.bubble.hidden {
		opacity: 0;
	}
</style>