登录界面（简约版）

登录界面效果图：
放大图：一（1）

放大图：二（2）

话不多说，直接放代码：

<template>
    <div :style="background" class="main">
        <div class="secondary">
            <el-row>
                <div :style="background_title" class="titl">
                    <div id="title_t">
                        <el-row>
                            <el-col>
                            		<!-- 放大图：一（1）-->
                                <div id="title_t2"><span><strong>耨耨你管理系统</strong></span></div>
                               <!-- 放大图：二（2）  -->
                                <!-- <div id="title_t2"><span><strong>用户登录</strong></span></div> -->
                                <!-- <div id="title_t3">———————欢迎来到耨耨管理登录———————</div> -->
                            </el-col>
                        </el-row>
                    </div>
                    <div class="contents">
                        <el-form :model="loginForm" class="login_form">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item>
                                        <el-input prefix-icon="el-icon-user" style="width:280px;" type="text" v-model="loginForm.name" placeholder="手机号或账号"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item>
                                        <el-input prefix-icon="el-icon-lock" style="width:280px;" type="password" show-password v-model="loginForm.password" placeholder="密码"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-button type="primary" size="mini" style="width:280px;font-size:15px;height:37px;" @click="login()">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
                                </el-col>
                            </el-row>
                        </el-form>

                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    name:"login",
    components:{

    },
    data(){
        return {
            loginForm:{
                name:"",
                password:"",
            },
            background:{
                backgroundImage: 'url('+ require('../images/MT.png') + ')',
                backgroundRepeat: 'no-repeat',
                backgroundSize: "100% 100%",
            },
            background_title: {
                backgroundSize: '100% 100%',
                backgroundImage: 'url('+require('../images/Stellar.png')+')',
                backgroundRepeat: 'no-repeat'
            }
        }
    },
    created(){

    },
    watch:{

    },
    computed:{

    },
    methods:{
        login(){
            if(this.loginForm.name !== ""){    //判断用户名是否为空
                if(this.loginForm.password !== ""){    //判断密码是否为空
                    const params = {
                        account:this.loginForm.name,
                        password:this.loginForm.password,
                    }
                    this.$http.post("api/user/login",params).then(res => {
                        if(res.data.code === 200){      //判断接口是否响应成功  code === 200
                            sessionStorage.setItem('token', res.data.token)
                            this.$notify({
                                title:"温馨提示",
                                type:"warning",
                                message:this.$createElement("i",{style:"color: green"}, res.data.msg)
                            })
                            this.$router.push("/first")
                        }else{
                            this.$notify({
                                title:"温馨提示",
                                type:"warning",
                                message:this.$createElement("i",{style:"color: orange"}, res.data.msg)
                            })
                        }
                    })
                }else{
                    this.$notify({
                        title:"温馨提示",
                        type:"warning",
                        message:this.$createElement("i",{style:"color: orange"}, "密码不能为空，请输入您的密码_")
                    })
                }
            }else{
                this.$notify({
                    title:"温馨提示",
                    type:"warning",
                    message:this.$createElement("i",{style:"color: orange"}, "账号不能为空，请输入您的账号_")
                })
            }
        }
    },
    mounted(){

    }
}
</script>
<style>
    .el-input__inner::placeholder { color: black; }
    .main { width: 100%; height: 98vh; }
    .secondary { position: absolute; height: 300px; width: 380px; text-align: center; margin: 30vh 0vw 0vh 38vw; border-radius: 5px;}
    .titl { height: 300px; width: 100%; font-size: 1.8em; color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
    #title_t { margin-bottom: 40px; }
    #title_t2 { margin-top: 20px; }
    #title_t3 { font-size: 13px; color: black; }
    .contents { position: absolute; width: 380px;  }
    .login_form { height: 250px; }
    
</style>

点个赞，拿走不谢！！