【案例】简单的账号短信登录

<template>
    <div class="loginhome" :style="backgroundContentright">
        <div class="content" :style="{ position: 'absolute', 'top': '30%', left:loginwidth < 500? '15%':'40%' }">
            <table style="width:100%;height:100%;">
                <tr>
                    <td colspan="3"><div class="title"><span>系统登录span>div>td>
                tr>
                <tr>
                    <td colspan="3"><div><el-input type="text" style=" width:96%;margin:0 2% 0 2%;" v-model="phone" placeholder="手机号">el-input>div>td>
                tr>
                <tr>
                    <td colspan="3">
                        <div v-if="loginway == false">
                            <el-input show-password v-model="pass" style="width:96%;margin:0 2% 0 2%;" placeholder="密码">el-input>
                        div>
                        <div v-if="loginway == true">
                            <el-input  placeholder="验证码" v-model="code" style="width:96%;margin:0 2% 0 2%;" >
                                <el-button slot="suffix" style="font-weight:600;" type="text" @click="iClick">获取验证码el-button>
                            el-input>
                        div>
                    td>
                tr>
                <tr>
                    <td style="width:30%;"><div><span>span>div>td>
                    <td style="width:40%;">td>
                    <td style="width:30%; "><div class="way" @click="loginway = !loginway"><span v-if="loginway == false">短信登录span><span v-if="loginway == true">账号登录span>div>td>
                tr>
                <tr>
                    <td colspan="3"><div><el-button type="primary"  style="" @click="LoginSubmit()">登录el-button>div>td>
                tr>
            table>
        div>
    div>
template>
<script>
export default {
    data () {
        return {
            loginwidth: null,
            loginway: false,  // true 账号登录   false 短信登录
            eyeshow: false,
            pass: null, 
            phone: null, 
            code: null, 
            backgroundContentright: {
                backgroundImage:"url(" + require("@/images/002.png") + ")",   //图片所在路径，并加载
                backgroundRepeat:"np-repeat",
                backgroundSize:"100% 100%",    //图片适应大小
            },
        }
    },
    watch: {
        
    },
    mounted() {
        this.loginwidth = window.innerWidth;
        console.log(this.loginwidth);
    },
    methods: {
        // 获取验证码
        iClick(){},
        //登录
        LoginSubmit() {
            let loginway = this.loginway;
            console.log(loginway);
            if (loginway) {  // 短信登录
                console.log('短信登录');
            }
            if (!loginway) {  // 账号登录
                console.log('账号登录');
            }
        },
    }
}
script>
<style scoped>
.loginhome { background-color: rgb(15, 15, 15); height: 100vh; width: 100%; text-align: center; font-family: '黑体'; }
.content { height: 300px; width: 300px; text-align: center; background-color: rgba(106, 141, 172, 0.473); border-radius: 5%; box-shadow: 0px 0px 5px 3px rgb(88, 193, 235); }
.title { height: 30px; line-height: 30px; font-weight: 600; }
.way { font-size:15px;text-decoration: underline; color:rgb(0, 110, 255); cursor: pointer; }
style>