缩放布局

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>

src/components/appsNav.vue

@@ -1,6 +1,9 @@
 <script>
 export default {
   name: "appsNav",
+  props: {
+    width: {default: "200px"}
+  },
   data() {
     return {
       menu: []
@@ -13,14 +16,14 @@ export default {
 </script>
 
 <template>
-  <div class="appsNav">
+  <div class="appsNav" :style="{width}">
     <img src="../assets/logo.svg" class="logo"/>
     <div class="item pointer" v-for="item in menu" :key="item.name" v-text="item.label" @click="$router.push({name: item.name})"/>
   </div>
 </template>
 <style scoped>
 .appsNav {
-  width: 200px;
+  flex-shrink: 0;
   height: 100vh;
   background: #f3f6f9;
 }