From ea598e5d4b9f95b8febe4bb8478e096f56dae34b Mon Sep 17 00:00:00 2001 From: scout <1134087124@qq.com> Date: Sun, 23 Feb 2025 14:47:00 +0800 Subject: [PATCH] fixbug --- src/i18n/index.js | 2 +- src/views/home/size1440/index.vue | 305 +++-------------------------- src/views/home/size1920/index.vue | 312 +++--------------------------- 3 files changed, 60 insertions(+), 559 deletions(-) diff --git a/src/i18n/index.js b/src/i18n/index.js index ca152de..b1dafee 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -25,7 +25,7 @@ function getBrowserLanguage() { // 获取存储的语言或浏览器语言 // const savedLanguage = 'zh' // localStorage.setItem('language', 'zh-TW') -const savedLanguage = localStorage.getItem('language') || getBrowserLanguage() +const savedLanguage = 'en' const i18n = createI18n({ legacy: false, // 使用 Composition API locale: savedLanguage, diff --git a/src/views/home/size1440/index.vue b/src/views/home/size1440/index.vue index 8ce6a06..3cd1f55 100644 --- a/src/views/home/size1440/index.vue +++ b/src/views/home/size1440/index.vue @@ -105,21 +105,13 @@ const handleWheel = (e) => { const isInLastPanel = currentSection === 3; // 在最后一个panel时允许自然滚动 - if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) { - // 检查是否在panel顶部且向上滚动，或在底部且向下滚动 - if ( - (lastPanel.scrollTop === 0 && delta < 0) || - (lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight && - delta > 0) - ) { - // 只有在这些边界条件下才触发页面切换 + if (isInLastPanel) { + // 只在向上滚动时处理 + if (delta < 0 && lastPanel.scrollTop === 0) { if (Math.abs(delta) > scrollThreshold) { - if (delta > 0 && currentSection < 3) { - goToSection(currentSection + 1); - } else if (delta < 0 && currentSection > 0) { - goToSection(currentSection - 1); - } + goToSection(currentSection - 1); } + e.preventDefault(); } return; // 其他情况允许自然滚动 } @@ -131,6 +123,7 @@ const handleWheel = (e) => { } else if (delta < 0 && currentSection > 0) { goToSection(currentSection - 1); } + e.preventDefault(); } }; @@ -155,6 +148,9 @@ watch( // 为每个面板创建滚动触发器 panels.forEach((panel, i) => { + // 跳过第四个面板 + if (i === 3) return; + ScrollTrigger.create({ trigger: panel, start: "top center", @@ -170,6 +166,9 @@ watch( // 移除之前的渐入动画代码 panels.forEach((panel, i) => { + // 跳过第四个面板 + if (i === 3) return; + // 背景视差 const bg = panel.querySelector(".parallax-bg"); if (bg) { @@ -414,264 +413,19 @@ watch( }, }); - // 修改第四幕的动画配置 - ScrollTrigger.create({ - trigger: panels[3], - start: "top 80%", - end: "bottom center", - onEnter: () => { - // 进入第四幕时隐藏 - scrollDownVisible.value = false; - // 初始状态设置 - gsap.set(".content4", { - opacity: 1, - y: 0, - immediateRender: true, - }); - - // 预先设置所有元素的初始状态 - gsap.set( - [ - ".content4 > div:nth-child(1)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(3)", - ], - { - opacity: 0, - y: 30, - immediateRender: true, - } - ); - - // 单独设置卡片的初始状态 - gsap.set(".content4 .container .card", { - opacity: 0, - y: 50, - immediateRender: true, - }); - - const tl = gsap.timeline({ - defaults: { - duration: 0.6, - ease: "power2.out", - }, - }); - - // 标题动画 - tl.to(".content4 > div:nth-child(1)", { - opacity: 1, - y: 0, - }) - .to( - ".content4 > div:nth-child(2)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - .to( - ".content4 > div:nth-child(3)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - // 卡片动画 - .to( - ".content4 .container > div:first-child .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.2" - ) - .to( - ".content4 .container > .right .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > div:first-child .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > .right .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ); - }, - onLeave: () => { - // 离开第四幕时显示 - scrollDownVisible.value = true; - gsap - .timeline({ - defaults: { - duration: 0.4, - ease: "power2.in", - }, - }) - .to(".content4 .container .card", { - opacity: 0, - y: -30, - stagger: { - each: 0.1, - from: "end", - }, - }) - .to( - [ - ".content4 > div:nth-child(3)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(1)", - ], - { - opacity: 0, - y: -30, - stagger: 0.1, - }, - "-=0.3" - ); - }, - onEnterBack: () => { - // 返回第四幕时隐藏 - scrollDownVisible.value = false; - gsap.set(".content4", { - opacity: 1, - y: 0, - immediateRender: true, - }); - - gsap.set( - [ - ".content4 > div:nth-child(1)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(3)", - ], - { - opacity: 0, - y: -30, - immediateRender: true, - } - ); - - gsap.set(".content4 .container .card", { - opacity: 0, - y: -50, - immediateRender: true, - }); - - const tl = gsap.timeline({ - defaults: { - duration: 0.6, - ease: "power2.out", - }, - }); - - tl.to(".content4 > div:nth-child(1)", { - opacity: 1, - y: 0, - }) - .to( - ".content4 > div:nth-child(2)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - .to( - ".content4 > div:nth-child(3)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - .to( - ".content4 .container > div:first-child .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.2" - ) - .to( - ".content4 .container > .right .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > div:first-child .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > .right .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ); - }, - onLeaveBack: () => { - // 向上离开第四幕时显示 - scrollDownVisible.value = true; - gsap - .timeline({ - defaults: { - duration: 0.4, - ease: "power2.in", - }, - }) - .to(".content4 .container .card", { - opacity: 0, - y: 30, - stagger: { - each: 0.1, - from: "end", - }, - }) - .to( - [ - ".content4 > div:nth-child(3)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(1)", - ], - { - opacity: 0, - y: 30, - stagger: 0.1, - }, - "-=0.3" - ); - }, + // 第四幕不需要动画，直接设置初始状态 + gsap.set(".content4", { + opacity: 1, + y: 0, + }); + gsap.set([ + ".content4 > div:nth-child(1)", + ".content4 > div:nth-child(2)", + ".content4 > div:nth-child(3)", + ".content4 .container .card" + ], { + opacity: 1, + y: 0, }); }, main.value); } @@ -1086,14 +840,11 @@ watch( // 为第四个panel添加特殊处理 &:last-child { position: relative; - overflow-y: auto; height: auto; min-height: 100vh; - - // 隐藏滚动条但保持功能 - &::-webkit-scrollbar { - display: none; // Chrome, Safari, Opera - } + overflow-y: visible; + top: auto; + sticky: none; } &.first-panel { diff --git a/src/views/home/size1920/index.vue b/src/views/home/size1920/index.vue index d6b08ad..cba5e8f 100644 --- a/src/views/home/size1920/index.vue +++ b/src/views/home/size1920/index.vue @@ -105,21 +105,13 @@ const handleWheel = (e) => { const isInLastPanel = currentSection === 3; // 在最后一个panel时允许自然滚动 - if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) { - // 检查是否在panel顶部且向上滚动，或在底部且向下滚动 - if ( - (lastPanel.scrollTop === 0 && delta < 0) || - (lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight && - delta > 0) - ) { - // 只有在这些边界条件下才触发页面切换 + if (isInLastPanel) { + // 只在向上滚动时处理 + if (delta < 0 && lastPanel.scrollTop === 0) { if (Math.abs(delta) > scrollThreshold) { - if (delta > 0 && currentSection < 3) { - goToSection(currentSection + 1); - } else if (delta < 0 && currentSection > 0) { - goToSection(currentSection - 1); - } + goToSection(currentSection - 1); } + e.preventDefault(); } return; // 其他情况允许自然滚动 } @@ -131,6 +123,7 @@ const handleWheel = (e) => { } else if (delta < 0 && currentSection > 0) { goToSection(currentSection - 1); } + e.preventDefault(); } }; @@ -155,6 +148,9 @@ watch( // 为每个面板创建滚动触发器 panels.forEach((panel, i) => { + // 跳过第四个面板 + if (i === 3) return; + ScrollTrigger.create({ trigger: panel, start: "top center", @@ -170,6 +166,9 @@ watch( // 移除之前的渐入动画代码 panels.forEach((panel, i) => { + // 跳过第四个面板 + if (i === 3) return; + // 背景视差 const bg = panel.querySelector(".parallax-bg"); if (bg) { @@ -414,264 +413,19 @@ watch( }, }); - // 修改第四幕的动画配置 - ScrollTrigger.create({ - trigger: panels[3], - start: "top 80%", - end: "bottom center", - onEnter: () => { - // 进入第四幕时隐藏 - scrollDownVisible.value = false; - // 初始状态设置 - gsap.set(".content4", { - opacity: 1, - y: 0, - immediateRender: true, - }); - - // 预先设置所有元素的初始状态 - gsap.set( - [ - ".content4 > div:nth-child(1)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(3)", - ], - { - opacity: 0, - y: 30, - immediateRender: true, - } - ); - - // 单独设置卡片的初始状态 - gsap.set(".content4 .container .card", { - opacity: 0, - y: 50, - immediateRender: true, - }); - - const tl = gsap.timeline({ - defaults: { - duration: 0.6, - ease: "power2.out", - }, - }); - - // 标题动画 - tl.to(".content4 > div:nth-child(1)", { - opacity: 1, - y: 0, - }) - .to( - ".content4 > div:nth-child(2)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - .to( - ".content4 > div:nth-child(3)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - // 卡片动画 - .to( - ".content4 .container > div:first-child .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.2" - ) - .to( - ".content4 .container > .right .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > div:first-child .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > .right .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ); - }, - onLeave: () => { - // 离开第四幕时显示 - scrollDownVisible.value = true; - gsap - .timeline({ - defaults: { - duration: 0.4, - ease: "power2.in", - }, - }) - .to(".content4 .container .card", { - opacity: 0, - y: -30, - stagger: { - each: 0.1, - from: "end", - }, - }) - .to( - [ - ".content4 > div:nth-child(3)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(1)", - ], - { - opacity: 0, - y: -30, - stagger: 0.1, - }, - "-=0.3" - ); - }, - onEnterBack: () => { - // 返回第四幕时隐藏 - scrollDownVisible.value = false; - gsap.set(".content4", { - opacity: 1, - y: 0, - immediateRender: true, - }); - - gsap.set( - [ - ".content4 > div:nth-child(1)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(3)", - ], - { - opacity: 0, - y: -30, - immediateRender: true, - } - ); - - gsap.set(".content4 .container .card", { - opacity: 0, - y: -50, - immediateRender: true, - }); - - const tl = gsap.timeline({ - defaults: { - duration: 0.6, - ease: "power2.out", - }, - }); - - tl.to(".content4 > div:nth-child(1)", { - opacity: 1, - y: 0, - }) - .to( - ".content4 > div:nth-child(2)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - .to( - ".content4 > div:nth-child(3)", - { - opacity: 1, - y: 0, - }, - "-=0.4" - ) - .to( - ".content4 .container > div:first-child .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.2" - ) - .to( - ".content4 .container > .right .card:first-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > div:first-child .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ) - .to( - ".content4 .container > .right .card:last-child", - { - opacity: 1, - y: 0, - duration: 0.8, - }, - "-=0.6" - ); - }, - onLeaveBack: () => { - // 向上离开第四幕时显示 - scrollDownVisible.value = true; - gsap - .timeline({ - defaults: { - duration: 0.4, - ease: "power2.in", - }, - }) - .to(".content4 .container .card", { - opacity: 0, - y: 30, - stagger: { - each: 0.1, - from: "end", - }, - }) - .to( - [ - ".content4 > div:nth-child(3)", - ".content4 > div:nth-child(2)", - ".content4 > div:nth-child(1)", - ], - { - opacity: 0, - y: 30, - stagger: 0.1, - }, - "-=0.3" - ); - }, + // 第四幕不需要动画，直接设置初始状态 + gsap.set(".content4", { + opacity: 1, + y: 0, + }); + gsap.set([ + ".content4 > div:nth-child(1)", + ".content4 > div:nth-child(2)", + ".content4 > div:nth-child(3)", + ".content4 .container .card" + ], { + opacity: 1, + y: 0, }); }, main.value); } @@ -719,7 +473,7 @@ watch( {{ t("home.scroll.tip") }}
- + @@ -741,7 +495,7 @@ watch( />
-
+
{{ t("home.section2.title1") }}
@@ -1086,14 +840,11 @@ watch( // 为第四个panel添加特殊处理 &:last-child { position: relative; - overflow-y: auto; height: auto; min-height: 100vh; - - // 隐藏滚动条但保持功能 - &::-webkit-scrollbar { - display: none; // Chrome, Safari, Opera - } + overflow-y: visible; + top: auto; + sticky: none; } &.first-panel { @@ -1115,8 +866,7 @@ watch( .parallax-bg { position: absolute; - top: -10%; - left: 0; + width: 100%; height: 120%; z-index: 1;