From 397ab462e87d1fff14a1a37c1dbf31585e534ca5 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 23 Aug 2024 17:05:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                | 28 +++++++++++++++++++++++++++-
 src/components/appsNav.vue |  7 +++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b627e8a..79fe9d0 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/appsNav.vue b/src/components/appsNav.vue
index 302503f..a0c7642 100644
--- a/src/components/appsNav.vue
+++ b/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;
 }