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") }}
</div>
<section className="panel first-panel">
- <n-carousel autoplay :interval="5000" class="no-hover">
+ <n-carousel autoplay :interval="5000" class="no-hover">
<img class="carousel-img" :src="currentBannerImages[0]" />
<img class="carousel-img" :src="currentBannerImages[1]" />
<img class="carousel-img" :src="currentBannerImages[2]" />
@@ -741,7 +495,7 @@ watch(
/>
</div>
<div class="content">
- <div class="text-[#10253E] text-[54px] leading-[80px]">
+ <div class="text-[#10253E] text-[54px] leading-[80px]">
{{ t("home.section2.title1") }}
</div>
<div class="text-[#10253E] text-[54px] leading-[80px]">
@@ -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;