Vue，为div添加背景图片，添加一个透明卡片做登录框

最近需要拿Vue写一个前端，一开始就卡在了登录界面这里，甚至只是一个小小的设置背景图片，坑好多！

//定义一个div，去设置他的属性
<div class="background" :style="background">
		<!--中间的卡片-->
		<el-card class="box-card">
    </el-card>
</div>

<script>
export default {
		data() {
			return {
				 background: {
				 		//动态绑定背景图
				 		//require要用到拼接。
				 		//某些时候，../assets可能会失效，改成~@/assets试试
				        backgroundImage: "url(" + require("../assets/background01.png") + ")",
				        backgroundRepeat: "no-repeat",
				        position: "fixed",
				        backgroundSize: "100% 100%",
				      }
			}
		}
	}
</script>
//为div设置属性
<style>
	.background {
	  padding: 0px;
	  margin: 0px;
	  background-size: 100%;
	  height: 100%;
	  width: 100%;
	}
	//设置卡片的样式
	.box-card {
	  height: 50%;
	  width: 30%;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  padding: 10px;
	  background-color: rgba(255,255,255,0.6);//设置透明度
	  transform: translate(-50%, -50%);
	}

</style>

效果图：

中间表单部分代码没有添加进去，布局还有些问题