vue、element-ui登录界面模板
这里总结一个用vue、element-ui写的登录界面，为以后复制粘贴备用。
截图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录</title><script src="../../js/vue.js"></script><script src="../../js/jquery-3.6.0.js"></script><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>