fixbug
This commit is contained in:
scout
parent
433c004e44
commit
ea598e5d4b
@ -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,
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user