vue element-ui登录页面源码

在这里插入图片描述
HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>登录</title><script src="static/Vue.jsv2.6.12.js" type="text/javascript" charset="utf-8"></script><script src="static/element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="static/element-ui/lib/theme-chalk/index.css" /></head><body><el-row type="flex" justify="end" id="bodylogin"><div class="login"><p class="denglu">登录</p><el-form :label-position="labelPosition" label-width="60px" :model="form"><el-form-item label="账号:"><el-input v-model="form.username" placeholder="请输入账号"></el-input></el-form-item><el-form-item label="密码:"><el-input v-model="form.password" show-password placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button style="width: 150px;" type="primary" plain @click="onsubmit">登录</el-button><el-button style="width: 150px;" type="primary" plain @click="regist">注册</el-button></el-form-item></el-form></div></el-row></body><script src="js/login.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="./css/login.css" />
</html>

new Vue({el: "#bodylogin",data: {labelPosition: 'center',form: {username: '',password: '',}},methods: {/* 登录发送请求 */onsubmit() {console.log("登录" + this.form.username);console.log("密码" + this.form.password);},regist(){    console.log("ddd")window.location.href = "/login/regist.html";}}
});

CSS

.login {/* 背景图片 */background-image: url(../static/新建文件夹/17.png);background-size: 100% 100%;/* background-color: powderblue; */margin-top: 10rem;border-radius: 12px;/* 内边距 */padding: 20px;text-align: center;box-shadow: 0 8px 5px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}/* 登录文字 */
.denglu {color: white;font-size: 20px;
}/* 背景图片 */
body {background-image: url(../static/新建文件夹/8.png);background-size: 100% 100%;background-attachment: fixed;
}
.label-position{background-color: #000000;
}