修改自适应问题

src/pages/main/performance/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="performance-container flex-justify-start">
+    <div v-if="routes.length" class="performance-container flex-justify-start">
         <div>
             <el-tabs tab-position="left" v-model="name">
                 <el-tab-pane
@@ -10,11 +10,15 @@
                 ></el-tab-pane>
             </el-tabs>
         </div>
-        <div v-if="routes.length" class="container-viewport flex-1">
+        <div class="container-viewport flex-1">
             <div class="font-size-30 padding-bottom-20 padding-left-20">
                 {{ handleLabel(name) }}
             </div>
-            <div :is="`${name}`"></div>
+            <div
+                v-if="!loading"
+                class="performance-container-viewport-component"
+                :is="`${name}`"
+            ></div>
         </div>
     </div>
 </template>
@@ -32,6 +36,7 @@ export default {
     },
     data() {
         return {
+            loading: true,
             name: "department",
             routes: [
                 {
@@ -61,6 +66,11 @@ export default {
             return array[0].label;
         },
     },
+    mounted() {
+        this.$nextTick(() => {
+            this.loading = false;
+        });
+    },
 };
 </script>
 <style lang="scss" scoped>
@@ -70,10 +80,11 @@ export default {
     margin: 15px;
     overflow: auto;
     width: calc(100% - 30px);
+    max-width: calc(100% - 30px);
     height: 100%;
     overflow-x: hidden;
     &-viewport {
-        width: calc(100% - 20px);
+        width: 100%;
         overflow: auto;
     }
 }