front/pages/login/account_login/account_login.vue

<template>
  <view class="background">
	<!-- 欢迎 -->
	<image class="welcome" src="../../../static/login/account_login/welcome.png"></image>
	<!-- 登录部分 -->
	<view class="login_part">
		<!-- 导航栏 -->
		<view class="login_ways">
<!--      -->
			<view class="account_words" @click="toPassageEvent" 
				:style="{borderBottom:passageWordsBottomBorder}">
				密码登录
			</view>
			<view class="captcha_words" @click="toCaptchaEvent" 
				:style="{borderBottom:captchaWordsBottomBorder}">
				验证码登录
			</view>
		</view>
		<!-- 表单部分 -->
		<form class="login_form">
			<view class="form_input">
				<view class="account_box login_form_item">
					<input class="account" name="account" type="text" placeholder="请输入你的电话号码"/>
				</view>
				<!-- 密码登录 -->
				<view class="passage_box login_form_item" v-if="isPassagePage">
					<input class="passage" name="passage" :password="isOpened" type="text" placeholder="请输入你的密码"/>
					<image @click="openEyesEvent" class="eyes" :src="eyesStateIcon"></image>
				</view>
				<view class="captcha_box login_form_item" v-else>
					<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
					<button class="captcha_button" @click="sendCaptchaEvent" 
						:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
						{{captchaButtonText}}
					</button>
				</view>
				<view class="forget_passage">忘了密码？</view>
				<view class="button_box login_form_item">
					<button name="submit_button" class="login_button" @click="login">登录</button>
				</view>
			</view>
		</form>
	</view>
	<!-- 前往注册 -->
	<navigator url="/pages/login/register/register">
		<image class="goto_register" src="../../../static/login/account_login/register.png"></image>
	</navigator>
	<!-- 其他登录部分 -->
	<view class="otherways_part">
		<image class="otherways_tips" src="../../../static/login/account_login/other_ways.png"></image>
		<view class="two_ways">
			<image class="qq_icon" src="../../../static/login/account_login/qq_icon.png"></image>
			<image class="weixin_icon" src="../../../static/login/account_login/weixin_icon.png"></image>
		</view>
	</view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const isSendCaptcha = ref(false);	//是否发送了验证码的标志
var codeTime = ref(0);	//验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码")

const isPassagePage = ref(true);	//是否是密码登录页的标志；
const passageWordsBottomBorder = computed(() => isPassagePage.value? "0.1rem solid #094ABC":"none");	//密码登录导航的下边框
const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"0.1rem solid #094ABC");	//验证码登录导航的下边框
const isOpened = ref(true);	//密码是否明文显示的标志
const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");
//进入验证码登录页面
function toCaptchaEvent(){
	isPassagePage.value = false;
}
//发送验证码事件
function sendCaptchaEvent(){
	console.log("send captcha");
	if (codeTime.value>0){	//说明在倒计时
		uni.showToast({	//弹出提示框
			title: '不能重复获取',
			icon:"none"
		});
	} else{	//说明没有发送，也没倒计时
		codeTime.value = 60;
		isSendCaptcha.value = true;
		var timer = setInterval(()=>{
			codeTime.value--;
			if(codeTime.value<1){
				clearInterval(timer);
				isSendCaptcha.value = false;
				codeTime.value = 0;
			}
		},1000)
	};
}
function login(){
  //TODO:登录操作向后端发送验证码的逻辑
  uni.navigateTo({
    url: '@pages/information/sex/sex.vue'//登录成功后跳转的页面
  })
}
//进入密码登录页面
function toPassageEvent(){
	isPassagePage.value = true;
}
// 判断密码是否要明文显示
function openEyesEvent()
{
	if (isOpened.value)
	 {
		 isOpened.value = false;
		 eyesStateIcon.value = "../../../static/login/account_login/login_part/openedeyes.png"
	 }
	else
	 {
		 isOpened.value =true;
		 eyesStateIcon.value = "../../../static/login/account_login/login_part/closedeyes.png";
	 }
}

</script>

<style lang="scss">
.background{
	background-image: url("../../../static/login/account_login/background.png");
	background-size: cover;
	background-position: center;
	height: 100vh;
	width: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	object-fit: contain;
	.welcome{
		position: absolute;
		width: 62%;
		height: 19%;
		top: 20%;
		object-fit: contain;
	}
	.login_part{
		/* 登录 */
		position: absolute;
		width: 76%;
		height: 30%;
		top: 41%;
		// left: calc(50% - 314px/2 + 3px);
		.login_ways{
			position: absolute;
			width: 58%;
			height: 8.1%;
			display: flex;
			.account_words{
				height: 90%;
				margin-right: 5%;
				padding-bottom: 0.5rem;
				border-bottom: 1rem solid #094ABC;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 0.9rem;
				text-align: center;
				color: #000364;
			}
			.captcha_words{
				height: 90%;
				padding-bottom: 0.5rem;
				margin-left: 3%;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 0.9rem;
				text-align: center;
				color: #000364;
			}
		}
		.login_form{
			position: absolute;
			width: 97.8%;
			height: 73.1%;
			top: 20%;
			.form_input{
				position: absolute;
				width: 100%;
				height: 100%;
				.login_form_item{
					height: 25%;
					margin-bottom: 5%;
				}
				.account_box{
					padding-left: 3%;
					background-color: #D5E9FF;
					border-radius: 12px;
					.account{
						height: 100%;
						padding-left: 11%;
						background-image: url("../../../static/login/account_login/login_part/phone_icon.png");
						background-repeat: no-repeat;
						background-size: 0.8rem;
						background-position: 3% 50%;
						font-size: 0.8rem;
					}
				}
				.passage_box{
					display: flex;
					align-items: center;
					padding-left: 3%;
					background-color: #D5E9FF;
					border-radius: 12px;
					position: relative;
					.passage{
						height: 100%;
						padding-left: 11%;
						background-image: url("../../../static/login/account_login/login_part/lock_icon.png");
						background-repeat: no-repeat;
						background-size: 0.8rem;
						background-position: 4.7% 50%;
						font-size: 0.8rem;
					}
					.eyes{
						width: 1rem;
						height: 1rem;
						position: absolute;
						right: 13%;
					}
				}
				.captcha_box{
					display: flex;
					align-items: center;
					padding-left: 3%;
					background-color: #D5E9FF;
					border-radius: 12px;
					position: relative;
					.captcha{
						height: 100%;
						padding-left: 11%;
						background-image: url("../../../static/login/account_login/login_part/captcha_icon.png");
						background-repeat: no-repeat;
						background-size: 0.8rem;
						background-position: 4.5% 50%;
						font-size: 0.8rem;
					}
					.captcha_button{
						/* 发送验证码 */
						width: 5.5rem;
						height: 1.9rem;
						border-radius: 15px;
						font-size: 0.8rem;
						color: #000364;
						position: absolute;
						right: 5%;
					}
				}
				.forget_passage{
					margin-bottom: 0.4rem;
					margin-top: 1.2rem;
					text-align: right;
					color: #000364;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 24rem;
					font-size: 0.8rem;
					// line-height: 24px;
				}
				.login_button{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					border-radius: 12px;
					background-color: #4A69F7;
					color: #FFFCFC;
					text-align: center;
					font-size: 1.2rem;
				}
			}
		}
	}
	.goto_register{
		position: absolute;
		width: 14%;
		height: 2%;
		top: 78%;
		left: 43%;
		object-fit: contain;
	}
	.otherways_part{
		position: absolute;
		width: 59%;
		height: 10.9%;
		top: 82%;
		.otherways_tips{
			position: absolute;
			width: 98.6%;
			height: 24%;
			top: 0%;
		}
		.two_ways{
			/* 图标 */
			position: absolute;
			width: 46.9%;
			height: 50%;
			left: 26.6%;
			top: 35%;
			display: flex;
			justify-content: center;
			align-items: center;
			.qq_icon{
				/* qq图标 */
				position: absolute;
				width: 2.6rem;
				height: 2.6rem;
				left: 0%;
			}
			.weixin_icon{
				/* 微信图标 */
				position: absolute;
				width: 2.2rem;
				height: 2.2rem;
				left: 50%;
			}
		}
	}
}
</style>