vue、element-ui登录界面模板
这里总结一个用vue、element-ui写的登录界面，为以后复制粘贴备用。
截图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!--引入js-->
<script src="../../js/vue.js"></script>
<script src="../../js/jquery-3.6.0.js"></script>
<!--引入element-ui-->
<!-- 引入样式 -->
<link rel="stylesheet" href="../../css/Eleindex.css">
<!-- 引入组件库 -->
<script src="../../js/Eleindex.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header>XXXX</el-header>
<!--主体内容-->
<el-main>
<el-row>
<el-col :span="8" :offset="8">
<div id="loginBox">
用户登录<br>
账号：<el-input v-model="adminUser.username" placeholder="账号"></el-input><br>
密码：<el-input type="password" v-model="adminUser.password" placeholder="密码"></el-input><br>
<el-button type="primary" @click="y_reset">重置</el-button>
<el-button type="primary" @click="y_login">登录</el-button>
</div>
</el-col>
</el-row>
</el-main>
<el-footer>Copyright © 2022xxxx all rights reserved</el-footer>
</el-container>
</div>
</body>
</html>
<style>
/*整体样式*/
*{
margin: 0;
padding: 0;
}
body,html,.el-container,#app{
height: 100%;
}
/*放账号密码input的div*/
#loginBox{
background-color: #eee;
border-radius: 15px;
margin-top: 15%;
}
/*布局容器样式 main header fotter*/
.el-header {
background-color:deepskyblue;
color: #fff;
text-align: center;
line-height: 60px;
font-size: xx-large;
font-weight: bolder;
}
.el-footer{
background-color: #bbb;
color: #000;
text-align: center;
line-height: 60px;
}
.el-main {
background-color: #fff;
color: #333;
text-align: center;
line-height: 80px;
}
/* 输入框样式*/
.el-input{
width: 50%;
}
</style>
<script>
var app=new Vue({
el:"#app",
data:{
adminUser:{},
},
methods:{
y_reset(){//重置
this.adminUser={};
},
y_login(){//点击登录按钮后发送ajax请求给后端进行账号密码比对
this.post01();
}
}
});
</script>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)