登录
亲,你想咋看就咋看!
应用知识点:非空判断
正则判断
动画背景
定时跳转路由指定页面
<template>
<div class="box">
<div>
<video src="../../assets/my/meizi.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<div class="box1">
<img src="../../assets/my/xiaohongshu.png" alt="">
</div>
<div class="box2">
<input type="text" class="box3" placeholder="请“亲”输入账号" v-model="username">
<input type="password" class="box4" placeholder="请“亲”输入密码" v-model="userpass">
<input type="submit" class="box5" value="同意协议并登录" ref="login" @click="regSave" :disabled="!bool">
<p class="box6">
<router-link class="box7" to="/Zhuce"> 没账号?去注册</router-link>
</p>
</div>
<ul class="box9">
<li>
<img src="../../assets/my/微信.png" alt="">
</li>
<li>
<img src="../../assets/my/QQ.png" alt="">
</li>
<li>
<img src="../../assets/my/微博.png" alt="">
</li>
</ul>
<p class="box10">
<span>登录注册代表同意《同意协议》《隐私政策》《儿童/青少年<br>个人信息保护规则》</span>
</p>
<div class="in">
<p class="info" v-show="show">登录成功!{{num}}秒后跳转到首页</p>
<p class="info" v-show="show1">登录失败</p>
</div>
</div>
</template>
```css
<style scoped>
li {
font-size: 0.12rem;
}
.in{
width: 3rem;
height: 0.5rem;
/* background-color:red; */
position: relative;
top: -400px;
margin:auto;
text-align:center;
font-size: 0.20rem;
color: aqua;
}
.box {
width: 4.14rem;;
height: 100%;
}
.box video{
width: 100%;
height: 100%;
}
.box1 img{
width: 1.69rem;
height: 0.62rem;
position:absolute;
top: 1.14rem;
left: 1.24rem;
}
.box2 .box3{
width: 2.5rem;
height: 0.35rem;
z-index: 99;
position:absolute;
top: 3.85rem;
left: 0.78rem;
opacity: 0.5;
font-size: 0.16rem;
border-radius:0.1rem;
border: none;
text-indent: .2rem;
}
.box2 .box4{
width: 2.5rem;
height: 0.34rem;
z-index: 99;
position:absolute;
top: 4.40rem;
left: 0.78rem;
opacity: 0.5;
font-size: 0.16rem;
border-radius:0.1rem;
border: none;
text-indent: .2rem;
}
.box2 .box5{
width: 2.5rem;
height: 0.4rem;
z-index: 99;
position:absolute;
background-color:red;
color: #ffffff;
top:4.9rem;
left: 0.78rem;
opacity: 0.8;
font-size: 0.2rem;
border-radius:0.2rem;
border: none;
text-align: center;
}
.box2 .box6{
position: absolute;
z-index: 99;
top: 5.50rem;
left: 2.5rem;
color: blue;
}
.box2 .box6 .box7{
color: blue;
}
.box10{
width: 100%;
z-index: 99;
position:absolute;
top: 6.5rem;
left: 0px;
text-align:center;
}
.box9{
width: 2.8rem;
height: 0.4rem;
z-index: 99;
position:absolute;
left: 0.64rem;
top: 6rem;
display: flex;
justify-content:space-between;
}
.box9 img{
width: 0.3rem;
height: 0.3rem;
}
.box10 input{
border-radius:50%;
}
.box10 span{
font-size: 0.1rem;
color: #a4a4a5;
}
</style>
<script>
import axios from 'axios';
export default {
name: "box",
data() {
return {
username:"",
userpass:"",
num:3,
show:false,
show1:false,
bool: false,
}
},
methods:{
regSave(){
axios({
url:"/api/users/selectOne/122/122",
method:"get",
params:{
"username":this.username,
"userpass":this.userpass
},
})
.then(res=>{
console.log("res.data",res.data);
if(res.data==1){
this.show=true;
let that=this;
let time=setInterval(()=>{
that.num--;
if(that.num==0){
that.$router.push("/home");
clearInterval(time);
}
},1000);
}else{
if(res.data==0){
this.show1=true;
}
}
})
}
},
watch: {
username() {
if (
this.username &&
this.userpass
) {
this.$refs.login.style.backgroundColor = "blue";
this.bool = true;
} else {
this.$refs.login.style.backgroundColor = "#cecaca";
this.bool = false;
}
},
userpass() {
if (
this.username &&
this.userpass
) {
this.$refs.login.style.backgroundColor = "blue";
this.bool = true;
} else {
this.$refs.login.style.backgroundColor = "#cecaca";
this.bool = false;
}
},
},
};
</script>