<template>
<div class="login-container">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
label-position="left" label-width="0px" class="login-form">
<el-form-item prop="name">
<el-input name="name" type="text" v-model="loginForm.name" autoComplete="on" placeholder=""></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
autoComplete="on" placeholder=""></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "login",
data () {
const validateUsername = (rule, value, callback) => {
if (value.trim().length < 1) {
callback(new Error(""))
} else {
callback();
}
};
const validatePass =(rule, value, callback) => {
if (value.trim().length < 1) {
callback(new Error(""))
}
};
return {
loginForm: {
name: "",
password: ""
},
loginRules: {
name: [{required: true, trigger: "blur", validator: validateUsername}],
password: [{required: true, trigger: "blur", validator: validatePass}]
},
loading: false,
pwdType: "password"
}
},
methods: {
}
</script>
<style lang="scss">
.login-container {
width: 100%;
height: 100%;
background: url(../assets/images/auth-bg.jpg) no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
.login-form {
width: 300px;
margin: 20px auto;
height: 20%;
top: calc(50% - 15px);
}
}
</style>
Why doesn"t the background picture fill the browser?