介绍

解决思路 利用css 缩放 来处理大屏适配的问题，

封装组件

<template>
	<div class="ScaleBox" ref="ScaleBox" :style="'width:'+width+'px;'+scaleFun()">
		<slot></slot>
	</div>
</template>

<script>
	export default {
		name: "ScaleBox",
		props: {},
		data() {
			return {
				width: 1920,
				windowWitdh: `${document.documentElement.clientWidth}`,
			};
		},
		mounted() {
			let that = this;
			window.onresize = () => {
				that.windowWitdh = `${document.documentElement.clientWidth}`;
			};
		},
		methods: {
			scaleFun() {
				var that = this;
				var wBi = that.windowWitdh / 1920
				return "transform:scale(" + wBi + ", " + wBi + ")"
			}
		},
	};
</script>

<style lang="scss">
	.ScaleBox {
		
		transition: 0.3s;
		position: absolute;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-ms-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;

		-webkit-transform-origin: left top;
		-moz-transform: left top;
		-ms-transform: left top;
		-o-transform-origin: left top;
		transform-origin: left top;
	}

	body::-webkit-scrollbar {
		width: 0 !important
	}
</style>