From f5758abf93a06ae154da21cc3fa04cf27071e9a2 Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Thu, 21 Aug 2025 14:42:34 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E8=B7=B3=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Examples.vue       | 35 ++++++++++++++++++++++++++-----
 src/components/Homepage.vue       | 29 ++++++++++++++++++++-----
 src/components/ServiceProcess.vue |  3 +++
 src/publicstyle.scss              | 33 ++++++++++++++++++++++++++---
 4 files changed, 87 insertions(+), 13 deletions(-)

diff --git a/src/components/Examples.vue b/src/components/Examples.vue
index 8ca43f3..686899a 100644
--- a/src/components/Examples.vue
+++ b/src/components/Examples.vue
@@ -11,9 +11,6 @@ const { breakpoint } = useBootstrapBreakpoint();
 <template>
   <div class="pageroot" id="examplesprocessroot">
     <div id="examplebanner" class="videorootbanner">
-      <!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-      <!--           src="/ExpVideoPreload.png"-->
-      <!--           class="videoimg"/>-->
       <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
              controls=""
              id="expbannervideo"
@@ -23,7 +20,6 @@ const { breakpoint } = useBootstrapBreakpoint();
         <source :src="ExpVideo" type="video/mp4"></source>
       </video>
       <video v-else
-             :poster="ExpVideoPreload"
              id="expbannervideo"
              muted autoplay="autoplay"
              loop="loop" playsinline webkit-playsinline
@@ -52,7 +48,36 @@ const { breakpoint } = useBootstrapBreakpoint();
 <script>
 import axios from 'axios';
 export default {
-  name: "Examples"
+  name: "Examples",
+  mounted() {
+    this.$nextTick(function() {
+      this.handleVideoLoad();
+    });
+  },
+  methods: {
+    handleVideoLoad: function() {
+      const video = document.getElementById('expbannervideo');
+      const container = document.getElementById('examplebanner');
+
+      if (video && container) {
+        // 优化：使用loadedmetadata事件，这是视频尺寸信息可用的最早时机
+        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();
+        }
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index c4dd193..4f40991 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -19,18 +19,14 @@ const { breakpoint } = useBootstrapBreakpoint();
 <template>
   <div id="homepageroot" class="pageroot">
      <div id="homepagebanner" class="videorootbanner">
-<!--    <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-<!--         src="/bannervideopreload.png"-->
-<!--         class="videoimg"/>-->
       <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
-             :poster="bannervideopreload" controls=""
              id="bannervideo" muted autoplay="autoplay" loop="loop"
              playsinline webkit-playsinline
              class="bannervideos"
              x5-video-player-type="h5-page">
         <source :src="HpgVideo" type="video/mp4"></source>
       </video>
-      <video v-else :poster="bannervideopreload"
+      <video v-else
              id="bannervideo" muted autoplay="autoplay" loop="loop"
              playsinline webkit-playsinline
              class="bannervideos"
@@ -179,6 +175,7 @@ export default {
   mounted() {
     this.$nextTick(function() {
       this.video_autoplay();
+      this.handleVideoLoad();
     });
   },
   methods:{
@@ -190,6 +187,28 @@ export default {
           video.play();
         }
       });
+    },
+    handleVideoLoad: function() {
+      const video = document.getElementById('bannervideo');
+      const container = document.getElementById('homepagebanner');
+
+      if (video && container) {
+        // 优化：使用loadedmetadata事件，这是视频尺寸信息可用的最早时机
+        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();
+        }
+      }
     }
   }
 }
diff --git a/src/components/ServiceProcess.vue b/src/components/ServiceProcess.vue
index e5909a6..2075bf9 100644
--- a/src/components/ServiceProcess.vue
+++ b/src/components/ServiceProcess.vue
@@ -107,6 +107,9 @@ export default {
   @include media-breakpoint-between(xs, md) {
     aspect-ratio: 1.92;
   }
+  @include media-breakpoint-up(md){
+    aspect-ratio: 2.62026969;
+  }
 }
 
 #blackchart{
diff --git a/src/publicstyle.scss b/src/publicstyle.scss
index fe74770..062498f 100644
--- a/src/publicstyle.scss
+++ b/src/publicstyle.scss
@@ -36,11 +36,38 @@
 
 .videorootbanner{
   width: 100%;
-  height: auto;
   background-color: black;
   position: relative;
-  z-index: 0; // 明确设置父容器z-index
-  overflow: hidden; // 帮助创建新的堆叠上下文
+  z-index: 0;
+  overflow: hidden;
+
+  // 默认状态：视频未加载时使用固定aspect-ratio
+  @include media-breakpoint-between(xs, md) {
+    aspect-ratio: 1.92;
+  }
+  @include media-breakpoint-up(md){
+    aspect-ratio: 2.62026969;
+  }
+
+  // 视频元素默认样式
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  // 当视频加载完成后，切换为自适应高度模式
+  &.video-loaded {
+    aspect-ratio: unset; // 移除固定比例
+    height: auto; // 高度自适应
+
+    video {
+      width: 100%; // 宽度占满
+      height: auto; // 高度自适应
+      object-fit: contain; // 保持视频比例，完整显示
+    }
+  }
 }
 
 .bannervideos{

From 1ce63eaf10ffabd37402955ca53ca005ea67e1ca Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Thu, 21 Aug 2025 16:25:21 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E8=B7=B3=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Aboutus.vue        | 46 ++++++++++++++++++++++++++++++-
 src/components/ServiceProcess.vue | 29 ++++++++++++++++++-
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/src/components/Aboutus.vue b/src/components/Aboutus.vue
index 2c49ab6..d4b9196 100644
--- a/src/components/Aboutus.vue
+++ b/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>
 
diff --git a/src/components/ServiceProcess.vue b/src/components/ServiceProcess.vue
index 2075bf9..8d12774 100644
--- a/src/components/ServiceProcess.vue
+++ b/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>
 

From b4869ac00500438f43dc58675f8f98121589dddb Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Thu, 21 Aug 2025 16:39:00 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E8=B7=B3=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/publicstyle.scss | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/publicstyle.scss b/src/publicstyle.scss
index 062498f..f39d2b2 100644
--- a/src/publicstyle.scss
+++ b/src/publicstyle.scss
@@ -41,7 +41,7 @@
   z-index: 0;
   overflow: hidden;
 
-  // 默认状态：视频未加载时使用固定aspect-ratio
+  // 始终保持固定的aspect-ratio作为占位，确保立即渲染
   @include media-breakpoint-between(xs, md) {
     aspect-ratio: 1.92;
   }
@@ -49,23 +49,27 @@
     aspect-ratio: 2.62026969;
   }
 
-  // 视频元素默认样式
-  video {
+  // 视频/图片元素的默认样式
+  video, .videoimg {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
 
-  // 当视频加载完成后，切换为自适应高度模式
+  // 当媒体加载完成后，重新调整容器和媒体尺寸
   &.video-loaded {
     aspect-ratio: unset; // 移除固定比例
     height: auto; // 高度自适应
 
-    video {
+    video, .videoimg {
+      position: static; // 改为文档流布局
       width: 100%; // 宽度占满
       height: auto; // 高度自适应
-      object-fit: contain; // 保持视频比例，完整显示
+      object-fit: contain; // 保持媒体比例，完整显示
     }
   }
 }