多种登录方式模板
代码
<template>
<div>
<div class="login_warp">
<div class="loginbox fl">
<!-- 三个选项卡按钮 -->
<div class="login_header">
<span @click="cur=0" :class="{active:cur==0}">账号登录</span>
<span @click="cur=1" :class="{active:cur==1}">快捷登录</span>
<span @click="cur=2" :class="{active:cur==2}">扫码登录</span>
</div>
<div class="login_content">
<!-- 在cur==0时此板块显示 其他时候此板块不显示 -->
<div v-show="cur==0" class="Cbody_item">
<div class="form_item"><input type="text" name="fname" placeholder="用户名"></div>
<div class="form_item"><input type="password" name="fpassword" placeholder="密码"></div>
<div class="form_item">
<div class="fl"><input type="checkbox">记住密码</div>
<div class="fr"><a href="javascript:;" >找回密码</a></div>
</div>
<div class="clear"></div>
<div class="form_item">
<input type="submit" name="" value="登录">
</div>
</div>
<!-- 在cur==1时此板块显示 其他时候此板块不显示 -->
<div v-show="cur==1" class="Cbody_item">
<div class="form_item"><input type="text" name="fname" placeholder="手机号"></div>
<div class="form_item"><input type="password" name="fpassword" placeholder="验证码"></div>
<div class="form_item">
<!-- <div class="fl"><input type="checkbox">记住密码</div>
<div class="fr"><a href="javascript:;" >找回密码</a></div> -->
</div>
<div class="clear"></div>
<div class="form_item">
<input type="submit" name="" value="登录">
</div>
</div>
<!-- 在cur==2时此板块显示 其他时候此板块不显示 -->
<div v-show="cur==2" class="Cbody_item">
<div class="qcode"><img src="../../public/img/1709633675060.jpg" width="160" height="160" alt="二维码" /></div>
<div class="beizhu">打开手机客户端扫码注册</div>
</div>
</div>
</div>
<!-- 右边蓝色板块 -->
<div class="loginrslider fl"></div>
</div>
</div>
</template>
<script>
export default {
name: 'MyLogin',
data(){
return {
cur:0 //默认选中第一个tab
};
},
methods:{
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
a{
text-decoration: none;
color: #333;
transition: ease all 0.5s;
}
a{
color: #1c65ff
}
.login_header{
margin-bottom: 40px;
}
.login_header span{
margin-right: 20px;
cursor: pointer;
}
.loginbox{
width: 300px;
overflow: hidden;
padding: 20px;
padding-top: 15px;
}
.Cbody_item{
border: 0px solid #999;
overflow: hidden;
}
.form_item{
font-size: 13px;
}
.form_item input[type="text"],.form_item input[type="password"]{
display: block;
width: calc(100% - 18px);
height: 36px;
margin:0 auto;
padding-left: 16px;
outline: none;
border: 1px solid #999;
transition: ease all 0.5s;
margin-bottom: 20px;
}
.form_item input[type="text"]:focus,.form_item input[type="password"]:focus{
border: 1px solid #1c65ff
}
.form_item input[type="submit"]{
display: block;
width: calc(100% - 0px);
height: 40px;
margin:0 auto;
padding-left: 16px;
outline: none;
border: 1px solid #1c65ff;
transition: ease all 0.5s;
margin-top: 20px;
margin-bottom: 20px;
background-color: #1c65ff;
color: #fff;
cursor: pointer;
}
.form_item input[type="submit"]:hover{
background-color: #3f7dff;
border: 1px solid #3f7dff;
}
.active{
color: #3f7dff;
padding-bottom: 10px;
border-bottom: 3px solid #3f7dff;
}
.loginrslider{
width: 160px;
height: 322px;
background-color: #1c65ff;
}
.login_warp{
width: 500px;
margin: 50px auto;
border-radius: 10px;
box-shadow: 0 0px 0px #ccc;
overflow: hidden;
border:1px solid #3f7dff;
margin-top: 10%;
transition: ease all 0.5s;
position: relative;
top: 0px;
cursor: pointer;
}
.login_warp:hover{
top: -30px;
box-shadow: 0 15px 21px #ccc;
}
.loginrslider{
color: #fff;
}
.qcode{
width: 160px;
height: 160px;
background-color: #ccc;
margin: 0 auto;
margin-top: 2px;
}
.beizhu{
text-align: center;
font-size: 13px;
margin-top: 10px;
color: #999
}
</style>
简便注册模板
界面
代码
<template>
<div class="register-page">
<form class="register-form" >
<dic class="tip">请输入你的信息创建账号</dic>
<div class="number">学号</div>
<input class="form-number" placeholder="输入学号" type="text" v-model="userNumber" >
<div class="name">你的姓名</div>
<input class="form-name" placeholder="输入姓名" type="text" v-model="userName" >
<div class="phone">手机号码</div>
<input class="form-phone" placeholder="输入手机号码" type="text" v-model="userPhone" >
<div class="code-tip">
<input class="code" placeholder="输入验证码" type="text" v-model="code" >
<div @click="sendSMS" :class="tip">{{tipContent}}</div>
</div>
<div class="campus">所属校区</div>
<select class="form-campus" v-model="userCampus">
<option value="0">白云校区</option>
<option value="1">东校区</option>
<option value="2">河源校区</option>
</select>
<div class="address">用户地址</div>
<textarea placeholder="输入地址" class="form-address" v-model="userAddress"></textarea>
<div class="pwd">密码</div>
<input placeholder="输入密码" class="form-pwd" type="password" v-model="userPassword" >
<div class="pwd">再次输入密码：</div>
<input placeholder="再次输入密码" class="form-pwd" type="password" v-model="rePassword" >
<div class="form-but" @click="sumbit">提交</div>
</form>
</div>
</template>
<script>
import { ElNotification } from 'element-plus'
import axios from 'axios';
export default {
name: 'MyRegister',
data(){
return {
userNumber:'',
userName:'',
userPhone:'',
userAddress:'',
code:'',
userCampus:0,
userPassword:'',
rePassword:'',
tip:'tip',
tipContent:'发送验证码',
secondsRemaining: 60 // 设置倒计时初始值为60秒
};
},
methods:{
sumbit(){
if (this.userPassword !== this.rePassword) {
ElNotification({
title: 'Error',
message: '密码不一致',
type: 'error',
})
return;
}
this.$axios.post('/login/userRegister', {
data: {
userNumber: this.userNumber,
userPassword: this.userPassword,
userName: this.userName,
userAddress: this.userAddress,
userCampus:this.userCampus,
userPhone: this.userPhone,
code: this.code,
key: ''
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
},
async sendSMS(){
if(this.tip == 'clicked-tip'){
return;
}
if (this.userPhone === '') {
ElNotification({
title: 'Error',
message: '手机号码不能为空',
type: 'error',
})
return;
}
try {
const response = await axios.get('/login/SMSCode/'+this.userPhone);
console.log(response.data);
} catch (error) {
console.error('发生错误:', error);
}
this.tip='clicked-tip'
// 每秒钟更新计数器
this.timer = setInterval(() => {
if (this.secondsRemaining > 0) {
this.secondsRemaining--; // 每秒减一
this.tipContent=this.secondsRemaining+'s';
} else {
clearInterval(this.timer); // 当倒计时结束时清除计时器
// 执行倒计时结束后的操作
this.tip='tip'
this.tipContent='发送验证码'
this.secondsRemaining=60
}
}, 1000);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.register-page{
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
.register-form{
margin-top: 30px;
width: 80%;
text-align: left;
border: 2px solid rgb(186, 208, 255);
.tip{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
}
.number{
margin-left: 15px;
margin-top: 20px;
}
.form-number{
display: flex;
margin-top: 10px;
margin-left: 15px;
width: 70%;
}
.name{
margin-left: 15px;
margin-top: 10px;
}
.form-name{
display: flex;
margin-top: 10px;
margin-left: 15px;
width: 70%;
}
.phone{
margin-left: 10px;
margin-top: 15px;
}
.form-phone{
display: flex;
margin-top: 10px;
margin-left: 15px;
width: 70%;
}
.code-tip{
margin-top: 10px;
margin-left: 15px;
width: 80%;
display: flex;
flex-direction: row;
.code{
display: flex;
width: 40%;
}
.tip{
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
border-radius: 1.5rem;
background-color: blue;
color: white;
padding: 5px;
width: 35%;
cursor: pointer;
}
.clicked-tip{
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
border-radius: 1.5rem;
background-color: rgb(229, 232, 236);
color: white;
padding: 5px;
width: 35%;
}
}
.campus{
margin-left: 15px;
margin-top: 15px;
}
.form-campus{
display: flex;
margin-top: 15px;
margin-left: 15px;
width: 70%;
}
.address{
margin-left: 15px;
margin-top: 15px;
}
.form-address{
display: flex;
margin-top: 15px;
margin-left: 15px;
width: 70%;
height: 40PX;
}
.pwd{
margin-left: 15px;
margin-top: 10px;
}
.form-pwd{
display: flex;
margin-top: 15px;
margin-left: 15px;
width: 70%;
}
.form-but{
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
margin: 20px 0 30px 70px;
border-radius: 1.5rem;
padding: 10px;
}
}
}
</style>
