step1：创建背景图组件 bg.vue

该组件实现：
1、背景图可以自适应屏幕宽度（高度足够适应，不考虑高度）
2、背景图位置固定，不会产生滚动条
3、背景图高度足够高（1920*4092），可以自适应PC端、iPad、移动端

<template>
	<div class="bg" :height="fullHeight" :width="fullWidth">
		<div class="img_box">
			<!-- 背景图片：动态绑定宽高 -->
			<!-- <img src="../../assets/img/bg01.png" :width="fullWidth" /> -->
			<img src="../../assets/img/bg1.png" :width="fullWidth" />
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			// 获取设备宽度、高度
			fullWidth: document.documentElement.clientWidth,
			fullHeight:document.documentElement.clientHeight,
			// 以下两个暂时没有用到
			curWidth: '',
			curHeight: ''
		}
	},
	created() {
		// 添加监听，监听设备宽高
		window.addEventListener('resize', this.handleResize)
	},
	beforeDestroy: function(){
		// 销毁监听
		window.removeEventListener('resize', this.handleResize)
	},
	computed: {
		// 处理设备宽高
	},
	methods: {
		// 处理设备宽高
		handleResize (event) {
			this.fullWidth = document.documentElement.clientWidth - 16
			this.fullHeight = document.documentElement.clientHeight - 16
			this.curWidth = this.fullWidth + 'px'
			this.curHeight = this.fullHeight + 'px'
			console.log('curWidth=' + this.curWidth +',curHeight=' + this.curHeight)
		}
	}
}
</script>

<style scoped>
	.bg{
		padding: 0;
		margin: 0;
	}
	.bg .img_box{
		width: 100%;height: 100%;
	}
	.bg .img_box img{
		position: fixed; /* 固定图片位置 */
	}
</style>

step2：在其他组件中调用该组件

<template>
	<div class="login" :height="fullHeight" :width="fullWidth">
		<!-- 引用背景图组件 -->
		<Bg></Bg>
		<!-- 以下开始写该组件中的内容 -->
	</div>
</template>

<script>
import Bg from "./globalCpn/bg.vue"
export default {
	data () {
		return {}
	},
	components:{
		Bg
	}
}
</script>