解决布局跳动问题

src/components/Aboutus.vue

@@ -142,7 +142,51 @@ const { breakpoint } = useBootstrapBreakpoint();
 
 <script>
 export default {
-  name: "Aboutus"
+  name: "Aboutus",
+  mounted() {
+    this.$nextTick(function() {
+      this.handleMediaLoad();
+    });
+  },
+  methods: {
+    handleMediaLoad: function() {
+      const container = document.getElementById('aboutusbanner');
+
+      if (container) {
+        // 处理视频加载
+        const video = document.getElementById('abtbannervideo');
+        if (video) {
+          const handleVideoReady = () => {
+            container.classList.add('video-loaded');
+            video.removeEventListener('loadedmetadata', handleVideoReady);
+            video.removeEventListener('canplay', handleVideoReady);
+          };
+
+          video.addEventListener('loadedmetadata', handleVideoReady);
+          video.addEventListener('canplay', handleVideoReady);
+
+          if (video.videoWidth > 0) {
+            handleVideoReady();
+          }
+        }
+
+        // 处理图片加载（移动端GIF）
+        const img = document.querySelector('#aboutusbanner .videoimg');
+        if (img) {
+          const handleImageReady = () => {
+            container.classList.add('video-loaded');
+            img.removeEventListener('load', handleImageReady);
+          };
+
+          img.addEventListener('load', handleImageReady);
+
+          if (img.complete && img.naturalWidth > 0) {
+            handleImageReady();
+          }
+        }
+      }
+    }
+  }
 }
 </script>
 

src/components/ServiceProcess.vue

@@ -96,7 +96,34 @@ const { breakpoint } = useBootstrapBreakpoint();
 
 <script>
 export default {
-  name: "ServiceProcess"
+  name: "ServiceProcess",
+  mounted() {
+    this.$nextTick(function() {
+      this.handleImageLoad();
+    });
+  },
+  methods: {
+    handleImageLoad: function() {
+      const img = document.querySelector('#serviceprocessbanner .videoimg');
+      const container = document.getElementById('serviceprocessbanner');
+
+      if (img && container) {
+        // 图片加载完成后的处理
+        const handleImageReady = () => {
+          container.classList.add('video-loaded');
+          // 移除事件监听器避免重复触发
+          img.removeEventListener('load', handleImageReady);
+        };
+
+        img.addEventListener('load', handleImageReady);
+
+        // 如果图片已经加载完成
+        if (img.complete && img.naturalWidth > 0) {
+          handleImageReady();
+        }
+      }
+    }
+  }
 }
 </script>