Revert "开屏动画彻底完善"

This reverts commit cb0226b852a52332d6c96f63dae3b9c812f0db3c.

# Conflicts:
#	src/components/HeaderVideo.vue

package-lock.json

@@ -16,7 +16,8 @@
         "path": "latest",
         "sass": "latest",
         "vue": "^3.2.45",
-        "vue-router": "latest"
+        "vue-router": "latest",
+        "vue3-lottie": "3.3.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.0.0",
@@ -1062,6 +1063,12 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1270,6 +1277,21 @@
       "resolved": "",
       "link": true
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -1574,6 +1596,23 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vue3-lottie": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.3.1.tgz",
+      "integrity": "sha512-60uQmx4eefi3FdPjAxWnblrgJJjnVTXUA6e4BAI3jGzgOSR76pyzL1rrWDiyPmMFo4mTw4wGTW6Gbkg3HR1mYw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "klona": "^2.0.6",
+        "lottie-web": "5.12.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^3.2"
+      }
     }
   },
   "dependencies": {
@@ -2127,6 +2166,11 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2265,7 +2309,8 @@
         "sass": "latest",
         "vite": "^4.0.0",
         "vue": "^3.2.45",
-        "vue-router": "latest"
+        "vue-router": "latest",
+        "vue3-lottie": "3.3.1"
       },
       "dependencies": {
         "@babel/helper-string-parser": {
@@ -2818,6 +2863,11 @@
           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
           "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
         },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
         "fill-range": {
           "version": "7.1.1",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2943,6 +2993,16 @@
           "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
           "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
         },
+        "klona": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+          "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
+        },
+        "lottie-web": {
+          "version": "5.12.2",
+          "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+          "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+        },
         "magic-string": {
           "version": "0.30.17",
           "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -3108,9 +3168,29 @@
           "requires": {
             "@vue/devtools-api": "^6.6.4"
           }
+        },
+        "vue3-lottie": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.3.1.tgz",
+          "integrity": "sha512-60uQmx4eefi3FdPjAxWnblrgJJjnVTXUA6e4BAI3jGzgOSR76pyzL1rrWDiyPmMFo4mTw4wGTW6Gbkg3HR1mYw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3",
+            "klona": "^2.0.6",
+            "lottie-web": "5.12.2"
+          }
         }
       }
     },
+    "klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
+    },
+    "lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -3276,6 +3356,16 @@
       "requires": {
         "@vue/devtools-api": "^6.6.4"
       }
+    },
+    "vue3-lottie": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.3.1.tgz",
+      "integrity": "sha512-60uQmx4eefi3FdPjAxWnblrgJJjnVTXUA6e4BAI3jGzgOSR76pyzL1rrWDiyPmMFo4mTw4wGTW6Gbkg3HR1mYw==",
+      "requires": {
+        "fast-deep-equal": "^3.1.3",
+        "klona": "^2.0.6",
+        "lottie-web": "5.12.2"
+      }
     }
   }
 }

package.json

@@ -16,7 +16,8 @@
     "sass": "latest",
     "vue": "^3.2.45",
     "vue-router": "latest",
-    "ismobilejs": "1.1.1"
+    "ismobilejs": "1.1.1",
+    "vue3-lottie": "3.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

src/components/HeaderVideo.vue

@@ -5,120 +5,38 @@ 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 {
-      currentFrame: 0,
+      // timestamp: new Date().getTime()
-      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)
     {
-      this.preloadAllImages();
+      // 重置 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);
     }
     else
     {
       const videos = document.querySelectorAll('.startvideo');
+      // 检查是否找到了视频元素 (可选，但好习惯)
       if (videos.length > 0) {
         videos.forEach(video => {
           video.addEventListener('ended', this.handleVideoEnded);
@@ -128,14 +46,6 @@ export default defineComponent({
         console.warn("没有找到视频元素。");
       }
     }
-  },
-  beforeUnmount() {
-    this.stop()
-  },
-  watch: {
-    autoplay(val) {
-      val ? this.start() : this.stop()
-    }
   }
 })
 </script>
@@ -143,21 +53,8 @@ export default defineComponent({
 <template>
 <div id="beginroot" class="pageroot">
  <div id="videodiv">
-   <!-- 加载进度条 -->
+   <img v-if="$isMobile.phone"
-   <div v-if="$isMobile.phone && isLoading" class="loading-container">
+        src="/beginwepgif.gif" id="beginwep"/>
-     <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
@@ -188,33 +85,6 @@ 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: #DAA520;
-  transition: width 0.3s ease;
-}
-
-.loading-text {
-  color: white;
-  font-size: 14px;
-}
 #beginroot{
   height: 100%;
   display: flex;

start.html

@@ -20,7 +20,7 @@
     #start {
         display: flex;
         flex-direction: column;
-        height: 100%;
+        height: 100vh;
         overflow: hidden;
         position: fixed;
         top: 0;