fixbug
This commit is contained in:
scout
parent
433c004e44
commit
ea598e5d4b
@ -25,7 +25,7 @@ function getBrowserLanguage() {
|
|||||||
// 获取存储的语言或浏览器语言
|
// 获取存储的语言或浏览器语言
|
||||||
// const savedLanguage = 'zh'
|
// const savedLanguage = 'zh'
|
||||||
// localStorage.setItem('language', 'zh-TW')
|
// localStorage.setItem('language', 'zh-TW')
|
||||||
const savedLanguage = localStorage.getItem('language') || getBrowserLanguage()
|
const savedLanguage = 'en'
|
||||||
const i18n = createI18n({
|
const i18n = createI18n({
|
||||||
legacy: false, // 使用 Composition API
|
legacy: false, // 使用 Composition API
|
||||||
locale: savedLanguage,
|
locale: savedLanguage,
|
||||||
|
|||||||
@ -105,21 +105,13 @@ const handleWheel = (e) => {
|
|||||||
const isInLastPanel = currentSection === 3;
|
const isInLastPanel = currentSection === 3;
|
||||||
|
|
||||||
// 在最后一个panel时允许自然滚动
|
// 在最后一个panel时允许自然滚动
|
||||||
if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) {
|
if (isInLastPanel) {
|
||||||
// 检查是否在panel顶部且向上滚动，或在底部且向下滚动
|
// 只在向上滚动时处理
|
||||||
if (
|
if (delta < 0 && lastPanel.scrollTop === 0) {
|
||||||
(lastPanel.scrollTop === 0 && delta < 0) ||
|
|
||||||
(lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight &&
|
|
||||||
delta > 0)
|
|
||||||
) {
|
|
||||||
// 只有在这些边界条件下才触发页面切换
|
|
||||||
if (Math.abs(delta) > scrollThreshold) {
|
if (Math.abs(delta) > scrollThreshold) {
|
||||||
if (delta > 0 && currentSection < 3) {
|
goToSection(currentSection - 1);
|
||||||
goToSection(currentSection + 1);
|
|
||||||
} else if (delta < 0 && currentSection > 0) {
|
|
||||||
goToSection(currentSection - 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
return; // 其他情况允许自然滚动
|
return; // 其他情况允许自然滚动
|
||||||
}
|
}
|
||||||
@ -131,6 +123,7 @@ const handleWheel = (e) => {
|
|||||||
} else if (delta < 0 && currentSection > 0) {
|
} else if (delta < 0 && currentSection > 0) {
|
||||||
goToSection(currentSection - 1);
|
goToSection(currentSection - 1);
|
||||||
}
|
}
|
||||||
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -155,6 +148,9 @@ watch(
|
|||||||
|
|
||||||
// 为每个面板创建滚动触发器
|
// 为每个面板创建滚动触发器
|
||||||
panels.forEach((panel, i) => {
|
panels.forEach((panel, i) => {
|
||||||
|
// 跳过第四个面板
|
||||||
|
if (i === 3) return;
|
||||||
|
|
||||||
ScrollTrigger.create({
|
ScrollTrigger.create({
|
||||||
trigger: panel,
|
trigger: panel,
|
||||||
start: "top center",
|
start: "top center",
|
||||||
@ -170,6 +166,9 @@ watch(
|
|||||||
|
|
||||||
// 移除之前的渐入动画代码
|
// 移除之前的渐入动画代码
|
||||||
panels.forEach((panel, i) => {
|
panels.forEach((panel, i) => {
|
||||||
|
// 跳过第四个面板
|
||||||
|
if (i === 3) return;
|
||||||
|
|
||||||
// 背景视差
|
// 背景视差
|
||||||
const bg = panel.querySelector(".parallax-bg");
|
const bg = panel.querySelector(".parallax-bg");
|
||||||
if (bg) {
|
if (bg) {
|
||||||
@ -414,264 +413,19 @@ watch(
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 修改第四幕的动画配置
|
// 第四幕不需要动画，直接设置初始状态
|
||||||
ScrollTrigger.create({
|
gsap.set(".content4", {
|
||||||
trigger: panels[3],
|
opacity: 1,
|
||||||
start: "top 80%",
|
y: 0,
|
||||||
end: "bottom center",
|
});
|
||||||
onEnter: () => {
|
gsap.set([
|
||||||
// 进入第四幕时隐藏
|
".content4 > div:nth-child(1)",
|
||||||
scrollDownVisible.value = false;
|
".content4 > div:nth-child(2)",
|
||||||
// 初始状态设置
|
".content4 > div:nth-child(3)",
|
||||||
gsap.set(".content4", {
|
".content4 .container .card"
|
||||||
opacity: 1,
|
], {
|
||||||
y: 0,
|
opacity: 1,
|
||||||
immediateRender: true,
|
y: 0,
|
||||||
});
|
|
||||||
|
|
||||||
// 预先设置所有元素的初始状态
|
|
||||||
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"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
}, main.value);
|
}, main.value);
|
||||||
}
|
}
|
||||||
@ -1086,14 +840,11 @@ watch(
|
|||||||
// 为第四个panel添加特殊处理
|
// 为第四个panel添加特殊处理
|
||||||
&:last-child {
|
&:last-child {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-y: auto;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
overflow-y: visible;
|
||||||
// 隐藏滚动条但保持功能
|
top: auto;
|
||||||
&::-webkit-scrollbar {
|
sticky: none;
|
||||||
display: none; // Chrome, Safari, Opera
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.first-panel {
|
&.first-panel {
|
||||||
|
|||||||
@ -105,21 +105,13 @@ const handleWheel = (e) => {
|
|||||||
const isInLastPanel = currentSection === 3;
|
const isInLastPanel = currentSection === 3;
|
||||||
|
|
||||||
// 在最后一个panel时允许自然滚动
|
// 在最后一个panel时允许自然滚动
|
||||||
if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) {
|
if (isInLastPanel) {
|
||||||
// 检查是否在panel顶部且向上滚动，或在底部且向下滚动
|
// 只在向上滚动时处理
|
||||||
if (
|
if (delta < 0 && lastPanel.scrollTop === 0) {
|
||||||
(lastPanel.scrollTop === 0 && delta < 0) ||
|
|
||||||
(lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight &&
|
|
||||||
delta > 0)
|
|
||||||
) {
|
|
||||||
// 只有在这些边界条件下才触发页面切换
|
|
||||||
if (Math.abs(delta) > scrollThreshold) {
|
if (Math.abs(delta) > scrollThreshold) {
|
||||||
if (delta > 0 && currentSection < 3) {
|
goToSection(currentSection - 1);
|
||||||
goToSection(currentSection + 1);
|
|
||||||
} else if (delta < 0 && currentSection > 0) {
|
|
||||||
goToSection(currentSection - 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
return; // 其他情况允许自然滚动
|
return; // 其他情况允许自然滚动
|
||||||
}
|
}
|
||||||
@ -131,6 +123,7 @@ const handleWheel = (e) => {
|
|||||||
} else if (delta < 0 && currentSection > 0) {
|
} else if (delta < 0 && currentSection > 0) {
|
||||||
goToSection(currentSection - 1);
|
goToSection(currentSection - 1);
|
||||||
}
|
}
|
||||||
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -155,6 +148,9 @@ watch(
|
|||||||
|
|
||||||
// 为每个面板创建滚动触发器
|
// 为每个面板创建滚动触发器
|
||||||
panels.forEach((panel, i) => {
|
panels.forEach((panel, i) => {
|
||||||
|
// 跳过第四个面板
|
||||||
|
if (i === 3) return;
|
||||||
|
|
||||||
ScrollTrigger.create({
|
ScrollTrigger.create({
|
||||||
trigger: panel,
|
trigger: panel,
|
||||||
start: "top center",
|
start: "top center",
|
||||||
@ -170,6 +166,9 @@ watch(
|
|||||||
|
|
||||||
// 移除之前的渐入动画代码
|
// 移除之前的渐入动画代码
|
||||||
panels.forEach((panel, i) => {
|
panels.forEach((panel, i) => {
|
||||||
|
// 跳过第四个面板
|
||||||
|
if (i === 3) return;
|
||||||
|
|
||||||
// 背景视差
|
// 背景视差
|
||||||
const bg = panel.querySelector(".parallax-bg");
|
const bg = panel.querySelector(".parallax-bg");
|
||||||
if (bg) {
|
if (bg) {
|
||||||
@ -414,264 +413,19 @@ watch(
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 修改第四幕的动画配置
|
// 第四幕不需要动画，直接设置初始状态
|
||||||
ScrollTrigger.create({
|
gsap.set(".content4", {
|
||||||
trigger: panels[3],
|
opacity: 1,
|
||||||
start: "top 80%",
|
y: 0,
|
||||||
end: "bottom center",
|
});
|
||||||
onEnter: () => {
|
gsap.set([
|
||||||
// 进入第四幕时隐藏
|
".content4 > div:nth-child(1)",
|
||||||
scrollDownVisible.value = false;
|
".content4 > div:nth-child(2)",
|
||||||
// 初始状态设置
|
".content4 > div:nth-child(3)",
|
||||||
gsap.set(".content4", {
|
".content4 .container .card"
|
||||||
opacity: 1,
|
], {
|
||||||
y: 0,
|
opacity: 1,
|
||||||
immediateRender: true,
|
y: 0,
|
||||||
});
|
|
||||||
|
|
||||||
// 预先设置所有元素的初始状态
|
|
||||||
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"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
}, main.value);
|
}, main.value);
|
||||||
}
|
}
|
||||||
@ -719,7 +473,7 @@ watch(
|
|||||||
{{ t("home.scroll.tip") }}
|
{{ t("home.scroll.tip") }}
|
||||||
</div>
|
</div>
|
||||||
<section className="panel first-panel">
|
<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[0]" />
|
||||||
<img class="carousel-img" :src="currentBannerImages[1]" />
|
<img class="carousel-img" :src="currentBannerImages[1]" />
|
||||||
<img class="carousel-img" :src="currentBannerImages[2]" />
|
<img class="carousel-img" :src="currentBannerImages[2]" />
|
||||||
@ -741,7 +495,7 @@ watch(
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="text-[#10253E] text-[54px] leading-[80px]">
|
<div class="text-[#10253E] text-[54px] leading-[80px]">
|
||||||
{{ t("home.section2.title1") }}
|
{{ t("home.section2.title1") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-[#10253E] text-[54px] leading-[80px]">
|
<div class="text-[#10253E] text-[54px] leading-[80px]">
|
||||||
@ -1086,14 +840,11 @@ watch(
|
|||||||
// 为第四个panel添加特殊处理
|
// 为第四个panel添加特殊处理
|
||||||
&:last-child {
|
&:last-child {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-y: auto;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
overflow-y: visible;
|
||||||
// 隐藏滚动条但保持功能
|
top: auto;
|
||||||
&::-webkit-scrollbar {
|
sticky: none;
|
||||||
display: none; // Chrome, Safari, Opera
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.first-panel {
|
&.first-panel {
|
||||||
@ -1115,8 +866,7 @@ watch(
|
|||||||
|
|
||||||
.parallax-bg {
|
.parallax-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 120%;
|
height: 120%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user