1.登录页

登录页.png

代码：

<template>
    <div class="login_bg">
        <div class="login_view">
            <div class="login_title">NCIT在线教育管理平台</div>
            <!-- el的输入框：form表单 :model是输入框的值 :rules是输入要求等设置 ref 加标签供js使用 -->
            <el-form :model="rulesVaule" :rules="ruleSetting" ref="rulesVaule" label-width="0px" class="login_content" >
                <!-- prop: 父子prop之间形成了一个单向下行绑定,父级 prop 的更新会向下流动到子组件中，但是反过来则不行。 -->
                <el-form-item prop="username">
                    <!-- v-model 数据绑定 -->
                    <el-input v-model="rulesVaule.username" placeholder="请输入用户名">
                        <!-- slot:指定图标在输入框中的位置：prepend前置  prefix前缀 suffix后缀-->
                        <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="rulesVaule.password" placeholder="请输入密码" @keyup.enter.native="submitForm('rulesVaule')">
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login_btn">
                    <!-- 按钮的样式：primary主要按钮 success成功按钮 info信息按钮 warning警告按钮 danger危险按钮-->
                    <el-button type="primary" @click="submitForm('rulesVaule')">登录</el-button>
                </div>
                <p>提示： 模拟页面可任意输入。</p>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data:function(){
        return{
            rulesVaule:{
                username:'admin1',
                password:'123123'
            },
            ruleSetting:{
                username:[
                    // trigger：输入框的触发方式 blur：失去焦点时触发
                    {required: true, message:'请输入用户名',trigger:'blur'},
                    { min: 3, max: 15, message: '用户名为3-15位', trigger: 'blur' }
                ],
                password:[
                    {required: true, message:'请输入密码',trigger:'blur'},
                    { min: 6, max: 20, message: '密码需为6-20位', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        submitForm(inputValues){
            console.log("点击了提交按钮")
            this.$refs[inputValues].validate((valid)=>{
                if(valid){//可以提交
                    console.log("有值")
                }else{//不能提交
                    console.log("提交失败");
                    return false;
                }
            });
        }
    }
}
</script>
<style scoped>
.login_bg{
    position:relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login_bg.png);
    background-size: 100%;
}
.login_view{
    position: absolute;
    left: 70%;
    top:50%;
    width: 350px;
    /* height: 300px; */
    margin: -190px 0 0 -175px; /*上 右 下 左 注意 自身的宽高度*/
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
}
.login_title{
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: white;
    border-bottom: 1px solid #dddddd; /*下边框为1px ddd色*/
}
.login_content{
    padding: 30px;
}
.login_btn{
    text-align: center;
}
.login_btn button{
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
p{
    font-size: 12px;
    line-height: 30px;
    color: white;
}
</style>