缩放布局

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div class="flex">
       <apps-nav/>
-      <router-view class="components"/>
+      <router-view class="components fill"/>
     </div>
   </div>
 </template>
@@ -21,6 +21,7 @@ html, body, #app {
 
 .components {
   background: #07193D;
+
 }
 </style>
 <script>
@@ -29,5 +30,30 @@ import AppsNav from "@/components/appsNav.vue";
 export default {
   name: "App",
   components: {AppsNav},
+  methods: {
+    scaleByAspect() {
+      const targetWidth = 1920;
+      const targetHeight = 1080;
+      const ratio = targetWidth / targetHeight;
+      const element = this.$el.querySelector('.components');
+      const {width: originalWidth, height: originalHeight} = element.getBoundingClientRect();
+      const ratioHeight = originalWidth / ratio;
+      let scale
+      if (ratioHeight < originalHeight) {
+        scale = originalWidth / targetWidth;
+      } else {
+        scale = originalHeight / targetHeight;
+      }
+
+      element.style.transform = `scale(${scale})`;
+      element.style.width = '1920px'
+      element.style.height = '1080px'
+      element.style.transformOrigin = 'top center';
+    }
+  },
+  mounted() {
+    this.scaleByAspect()
+    window.onresize = () => this.scaleByAspect()
+  }
 }
 </script>