fix:调整组件和页面scheme的类型

src/components/AdaptivePage.vue

@@ -1,27 +1,40 @@
 <template>
-    <div style="overflow-y: scroll">
-        <div style="width: 100%;">
-            <slot name="header"></slot>
-        </div>
-        <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
-            <slot>
-                MAIN
-            </slot>
-        </div>
-
-        <div style="width: 100%;">
-            <slot name="footer"></slot>
-        </div>
-
+  <div :style="headerStyle">
+    <div style="width: 100%;">
+      <slot name="header"></slot>
     </div>
+    <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
+      MAIN
+      <slot>
+      </slot>
+    </div>
+
+    <div style="width: 100%;">
+      <slot name="footer"></slot>
+    </div>
+
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
+
 const dataSources = ref({})
 
-onMounted(()=>
-{
+const headerStyle = ref({});
 
+
+const fitRect = function () {
+  const containerEl = document.getElementById('renderArea');
+  if (!containerEl) return;
+  const containerRect = containerEl.getBoundingClientRect();
+  headerStyle.value = {
+    overflowY: scroll,
+    width: `${containerRect.width}px`,
+    height: `${containerRect.height}px`,
+  };
+}
+onMounted(() => {
+  fitRect();
 })
 </script>