好看简单的登录界面！！！

最新推荐文章于 2024-09-24 11:41:48 发布

软工的小白

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量91

点赞数 1

分类专栏： vue 文章标签： vue.js javascript elementui 前端

本文链接：https://blog.csdn.net/2301_80256000/article/details/142448665

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

包括登录框透明化，表单校验，背景图片插入，登录居中，账号密码输入提示

<script setup>
import {ref,reactive} from 'vue'
const temp=reactive({
    account:'',
    password:''
})
//表单校验
const rules=reactive({
    account:[
        {required:true,message:'请输入账号',trigger:'blur'},
        {min:2,max:18,message:'长度在2-18个字符',trigger:'blur'},
    ],
    password:[
        {required:true,message:'请输入密码',trigger:'blur'},
        {min:2,max:18,message:'长度在2-18个字符',trigger:'blur'},
    ]
    
})
</script>

<template>
    <div class="background_style">
        <div class="login">
            <p class="login-title">多角色管理系统</p>
            <div class="login-content">
                <div class="login-main">
                    <div class="login-container">
                        <el-form
                        ref="ruleFormRef"
                        :model="temp"
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                        >
                        <el-form-item label="账号" prop="account">
                            <el-input placeholder="请输入账号" v-model="temp.account"/>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input placeholder="请输入密码" v-model="temp.password"  type="password"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped>
.background_style{
    width:100%;
    height: 100%;
    position:fixed;
    background-size:100% 100%;
    background-repeat: no-repeat;
    background-image: url("../assets/login.jpg");
    }

.login{
    position:absolute;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  width:400px;
  padding:50px;
  box-sizing:border-box;
  box-shadow: 0px 25px 25px rgba(12, 5, 5, 0.7);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius:15px;
  color: aliceblue;
  /*边框圆角，四个角均为15px*/

}
.login-title{
    margin:0 0 30px;
    text-align:center;
    
}
.login-container{
    color: aliceblue;
    
}


</style>