From 7ed2c7490f0ef110d6fd62424e5c277ac9ef3d8b Mon Sep 17 00:00:00 2001 From: zhcnyuyang Date: Thu, 22 May 2025 14:34:13 +0800 Subject: [PATCH] =?UTF-8?q?Revert=20"=E5=BC=80=E5=B1=8F=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=E5=BD=BB=E5=BA=95=E5=AE=8C=E5=96=84"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit cb0226b852a52332d6c96f63dae3b9c812f0db3c. # Conflicts: # src/components/HeaderVideo.vue --- package-lock.json | 94 ++++++++++++++++++- package.json | 3 +- src/components/HeaderVideo.vue | 166 ++++----------------------------- start.html | 2 +- 4 files changed, 113 insertions(+), 152 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7dbc209..41b52e6 100644 --- a/package-lock.json +++ b/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" + } } } } diff --git a/package.json b/package.json index 5ee833c..432c216 100644 --- a/package.json +++ b/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", diff --git a/src/components/HeaderVideo.vue b/src/components/HeaderVideo.vue index f85e3af..1a19333 100644 --- a/src/components/HeaderVideo.vue +++ b/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, - timer: null, - isLoading: true, // 加载状态 - loadingProgress: 0, // 加载进度 - preloadedImages: [] // 预加载的图片缓存 + // timestamp: new Date().getTime() } }, 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() - } } }) @@ -143,21 +53,8 @@ export default defineComponent({