vue+elementui设置div背景图片
<template >
<div class="login">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm aaa" >
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="pass">
<el-input type="password" v-model="" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return {
ruleForm: {
pass: '',
name: ''
},
rules: {
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
/*设置样式*/
.demo-ruleForm{
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 120px 15px 25px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
/* 背景图片*/
.login{
background:url("../assets/");
width: 100%;
height: 100%;
position:fixed;
margin-top: -65px;/*上边距*/
margin-left: -10px;/*左边距*/
background-size:100% 100%;
}
/* 背景图片*/
.aaa{
background:url("../assets/");
width: 26%;
height: 24%;
position:fixed;
margin-top: 260px;/*上边距*/
margin-left:460px;/*左边距*/
background-size:100% 100%;
}
</style>