进度条改成白色

src/components/HeaderVideo.vue

@@ -5,38 +5,120 @@ const { breakpoint } = useBootstrapBreakpoint();
 
 export default defineComponent({
   name: "HeaderVideo",
+  props: {
+    // 给图片设置替代文本
+    alt:         { type: String, default: '' },
+    // 帧率（帧/秒），默认 20
+    fps:         { type: Number, default: 20 },
+    // 自动播放，默认 true
+    autoplay:    { type: Boolean, default: true },
+    // 播放完毕后不循环，触发跳转逻辑
+    loop:        { type: Boolean, default: false },
+    // 帧总数，默认 115
+    framesCount: { type: Number, default: 115 },
+    // 帧图所在目录
+    basePath:    { type: String, default: '/openvideo/' }
+  },
   data() {
     return {
-      // timestamp: new Date().getTime()
+      currentFrame: 0,
+      timer: null,
+      isLoading: true, // 加载状态
+      loadingProgress: 0, // 加载进度
+      preloadedImages: [] // 预加载的图片缓存
     }
   },
   methods:{
     handleVideoEnded:function (event){
       window.location.href = "/Homepage";
+    },
+    preloadAllImages() {
+      this.isLoading = true;
+      this.loadingProgress = 0;
+
+      let loadedCount = 0;
+      const totalFrames = this.frames.length;
+
+      // 创建Promise数组
+      const preloadPromises = this.frames.map((src, index) => {
+        return new Promise((resolve, reject) => {
+          const img = new Image();
+
+          img.onload = () => {
+            this.preloadedImages[index] = img;
+            loadedCount++;
+            this.loadingProgress = Math.floor(loadedCount / totalFrames * 100);
+            resolve(img);
+          };
+
+          img.onerror = (e) => {
+            console.error(`无法加载图片: ${src}`, e);
+            loadedCount++;
+            this.loadingProgress = Math.floor(loadedCount / totalFrames * 100);
+            reject(e);
+          };
+
+          img.src = src;
+        });
+      });
+
+      // 所有帧加载完成后开始播放
+      Promise.all(preloadPromises)
+          .then(() => {
+            console.log("所有帧预加载完成");
+            this.isLoading = false;
+            this.start();
+          })
+          .catch(() => {
+            console.log("部分帧加载失败，但仍继续播放");
+            this.isLoading = false;
+            this.start();
+          });
+    },
+
+    start() {
+      if (this.timer) return;
+      const interval = 1000 / this.fps;
+
+      this.timer = setInterval(() => {
+        const next = this.currentFrame + 1;
+
+        if (next < this.frames.length) {
+          this.currentFrame = next;
+        } else {
+          this.stop();
+          setTimeout(() => {
+            window.location.href = "/Homepage";
+          }, 100);
+        }
+      }, interval);
+    },
+    stop() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    }
+  },
+  computed: {
+    frames() {
+      const arr = []
+      for (let i = 0; i <= this.framesCount; i++) {
+        // 保证五位数文件名，高位补零
+        const name = String(i).padStart(5, '0') + '.jpg'
+        arr.push(this.basePath + name)
+      }
+      return arr
     }
   },
   mounted() {
     if(this.$isMobile.phone)
     {
-      // 重置 GIF 图片的 src 以确保从第一帧开始播放
-      const img = document.getElementById('beginwep');
-      if (img) {
-        const src = img.getAttribute('src');
-        img.setAttribute('src', '');
-        setTimeout(() => {
-          img.setAttribute('src', src);
-        }, 10);
-      }
-
-      setTimeout(function() {
-        // 在这里写入你的跳转语句
-        window.location.href = "/Homepage";
-      }, 5100);
+      this.preloadAllImages();
     }
     else
     {
       const videos = document.querySelectorAll('.startvideo');
-      // 检查是否找到了视频元素 (可选，但好习惯)
       if (videos.length > 0) {
         videos.forEach(video => {
           video.addEventListener('ended', this.handleVideoEnded);
@@ -46,6 +128,14 @@ export default defineComponent({
         console.warn("没有找到视频元素。");
       }
     }
+  },
+  beforeUnmount() {
+    this.stop()
+  },
+  watch: {
+    autoplay(val) {
+      val ? this.start() : this.stop()
+    }
   }
 })
 </script>
@@ -53,8 +143,21 @@ export default defineComponent({
 <template>
 <div id="beginroot" class="pageroot">
  <div id="videodiv">
-   <img v-if="$isMobile.phone"
-        src="/beginwepgif.gif" id="beginwep"/>
+   <!-- 加载进度条 -->
+   <div v-if="$isMobile.phone && isLoading" class="loading-container">
+     <div class="progress-container">
+       <div class="progress-bar" :style="{width: loadingProgress + '%'}"></div>
+     </div>
+     <div class="loading-text">加载中 {{ loadingProgress }}%</div>
+   </div>
+
+   <img
+       :src="frames[currentFrame]"
+       id="beginwep"
+       :alt="alt"
+       class="simple-frame-player"
+       v-if="$isMobile.phone && !isLoading"
+   />
    <video v-else-if="$isMobile.tablet" poster="/logobeginPCpld.png"
           id="tbstart" muted autoplay controls="controls"
           playsinline webkit-playsinline
@@ -85,6 +188,33 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import "src/publicstyle.scss";
+.loading-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  width: 80%;
+  z-index: 10;
+}
+.progress-container {
+  background-color: rgba(255, 255, 255, 0.2);
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: white;
+  transition: width 0.3s ease;
+}
+
+.loading-text {
+  color: white;
+  font-size: 14px;
+}
 #beginroot{
   height: 100%;
   display: flex;