Vue常用静态模板

多种登录方式模板

代码

<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>