demo

<template><div class="bg-container"><div class="login-form"><h2>梅赛德斯-奔驰文化中心商城后台管理系统</h2><div><el-formref="loginForm":model="form":rules="rules"label-width="80px"class="login-box"><el-form-item label="账号" prop="username"><el-inputtype="text"placeholder="请输入账号"v-model="form.username"/></el-form-item><el-form-item label="密码" prop="password"><el-inputtype="password"placeholder="请输入密码"v-model="form.password"/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit('loginForm')">登录</el-button></el-form-item></el-form></div></div><div class="footer"><div class="copyright"><span>Copyright © 2019 东方明珠新媒体股份有限公司</span></div></div></div></template><script>export default {name: "login",data() {return {form: {username: "",password: ""},// 表单验证，需要在 el-form-item 元素中增加 prop 属性rules: {username: [{ required: true, message: "账号不可为空", trigger: "blur" }],password: [{ required: true, message: "密码不可为空", trigger: "blur" }]}};},methods: {onSubmit(formName) {// 为表单绑定验证功能this.$refs[formName].validate(valid => {if (valid) {// 使用 vue-router 路由到指定页面，该方式称之为编程式导航this.$router.push("/home");} else {return false;}});}}};</script><style scoped lang="scss">.bg-container {width: 100%;height: 100%;overflow: hidden;margin: 0;background-image: url(../../assets/login_bg.jpg);}.footer {position: absolute;bottom: 0;width: 100%;margin: 0 auto;height: 30px;line-height: 20px;padding-top: 5px;padding-bottom: 5px;}.footer .copyright {font-size: 12px;text-align: center;width: 100%;color: #fff;opacity: 0.5;}.login-form {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);h2 {color: #fff;}}.login-box {border: 1px solid #dcdfe6;width: 350px;margin: 80px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;}</style><style>.login-box .el-form-item__label {color: #fff;}</style>

背景图