|
|
<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">登录</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 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>
|
