不同分辨率下适配组件

src/views/demo/workmanagement/projecthome/index.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="home-page">
     <Map />
-    <!-- 项目列表 -->
+    <div ref="leftComponentRef" style="position: absolute;top: 0px;left: 0px;">
-    <ProjectList />
+      <!-- 项目列表 -->
-    <!-- 基本信息 -->
+      <ProjectList />
-    <Info />
+      <!-- 基本信息 -->
-    <!-- 智慧巡检 -->
+      <Info />
-    <Inspection />
+    </div>
-    <!-- 成果动态 -->
+    <div ref="rightComponentRef" style="position: absolute;top: 0px;right: 0px;">
-    <Result />
+      <!-- 智慧巡检 -->
+      <Inspection />
+      <!-- 成果动态 -->
+      <Result />
+    </div>
   </div>
 </template>
 
@@ -18,7 +22,35 @@ import ProjectList from './ProjectList/index.vue'
 import Info from './Info/index.vue'
 import Inspection from './Inspection/index.vue'
 import Result from './Result/index.vue'
-import {} from "vue"
+import { ref, onMounted, onBeforeUnmount, } from "vue"
+
+const DESIGN_WIDTH = 1912
+const DESIGN_HEIGHT = 962
+const leftComponentRef = ref<HTMLElement | null>(null)
+const rightComponentRef = ref<HTMLElement | null>(null)
+
+function updateScale() {
+  const scaleX = window.innerWidth / DESIGN_WIDTH
+  const scaleY = window.innerHeight / DESIGN_HEIGHT
+  const scale = Math.min(scaleX, scaleY)
+
+  const left = leftComponentRef.value
+  const right = rightComponentRef.value
+  if (left) {
+    left.style.transform = `scale(${scale}) translate(-50%, -50%)`
+  }
+  if (right) {
+    right.style.transform = `scale(${scale}) translate(-50%, -50%)`
+  }
+}
+
+onMounted(() => {
+  updateScale()
+  window.addEventListener('resize', updateScale)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateScale)
+})
 </script>
 
 <style lang="scss" scoped>