officialWebsite/src/views/home/size375/index.vue

<template>
  <div class="page-container">
    <header className="header flex items-center justify-between">
      <div class="logo">
        <img src="@/assets/image/logo.png" alt="logo" />
      </div>
      <div class="tabs">
        <div
          class="tab-item ellipsis"
          :class="{ active: currentTab === 'home' }"
          @click="handleTabClick('home')"
        >
          {{ t("home.nav.home") }}
        </div>
        <div
          class="tab-item ellipsis"
          :class="{ active: currentTab === 'companyprofil' }"
          @click="handleTabClick('companyprofil')"
        >
          {{ t("home.nav.company") }}
        </div>
        <div
          class="tab-item ellipsis"
          :class="{ active: currentTab === 'businessintroduction' }"
          @click="handleTabClick('businessintroduction')"
        >
          {{ t("home.nav.businessintroduction") }}
        </div>
        <div class="tab-item ellipsis" @click="handleLanguageChange">
          {{ currentLanguageLabel }}
          <img
            src="@/assets/image/home/375/icon-language.png"
            alt="language"
            class="w-[36px] ml-[26px]"
          />
        </div>
      </div>
    </header>

    <!-- 语言选择模态框 - 使用纯div实现 -->
    <div v-if="showLanguageModal" class="language-modal">
      <div class="language-modal-backdrop" @click="closeLanguageModal"></div>
      <div class="language-modal-content">
        <div class="modal-header font-semibold flex items-center">
          {{ t("home.nav.please_select") }}
          <img
            src="@/assets/image/home/375/icon-close.png"
            alt="close"
            class="close-btn w-[102px]"
            @click="closeLanguageModal"
          />
        </div>
        <div class="language-modal-body">
          <div
            v-for="option in languageOptions"
            :key="option.value"
            class="language-option"
            :class="{ active: selectedLanguage === option.value }"
            @click="selectedLanguage = option.value"
          >
            {{ option.label }}
          </div>
        </div>
        <div class="language-modal-footer">
          <button class="confirm-btn" @click="confirmLanguageChange">
            {{ t("home.nav.confirm_select") }}
          </button>
        </div>
      </div>
    </div>

    <main ref="main">
      <div class="scroll-down ellipsis" :class="{ hide: !scrollDownVisible }">
        {{ t("home.scroll.tip") }}
      </div>
      <section className="panel first-panel">
        <n-carousel autoplay :interval="5000" class="no-hover">
          <img
            v-for="(src, index) in currentCarouselImages"
            :key="index"
            class="carousel-img"
            :src="src"
          />
        </n-carousel>
      </section>

      <section
        className="panel"
        style="background-color: rgba(248, 249, 255, 1)"
      >
        <n-divider class="divider1" vertical />
        <div class="divider2" style=""></div>
        <div class="divider3" style=""></div>
        <div class="divider4" style=""></div>
        <n-divider class="divider5" vertical />
        <div class="parallax-bg" style="margin-top: 50px">
          <img
            ref="secondImage"
            class="second-image"
            src="@/assets/image/home/375/bg-1.png"
          />
        </div>
        <div class="content px-[338px]">
          <div
            class="text-[#10253E] text-[123px] leading-[164px] font-semibold mt-[480px]"
          >
            {{ t("home.section2.title1") }}
          </div>
          <div
            class="text-[#10253E] text-[123px] leading-[164px] font-semibold"
          >
            {{ t("home.section2.title2") }}
          </div>
        </div>
      </section>

      <section className="panel" style="background-color: #fff">
        <n-divider class="divider1" vertical />
        <div class="divider2" style=""></div>
        <div class="divider3" style=""></div>
        <div class="divider4" style=""></div>
        <n-divider class="divider5" vertical />
        <div class="parallax-bg" style="margin-top: 70px"></div>
        <div class="content3 mt-[451px] px-[184px]">
          <div class="text-[#8B59F7] text-[72px]">
            {{ t("home.section3.label") }}
          </div>
          <div class="text-[#10253E] text-[113px] mt-[87px] font-semibold">
            FiEE
          </div>
          <div class="text-[#455363] text-[72px] mt-[159px]">
            {{ t("home.section3.desc") }}
          </div>

          <n-marquee auto-fill>
            <div style="display: flex" class="mt-[160px]">
              <div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
                <img
                  class="w-[973px] h-[973px]"
                  src="@/assets/image/jj1.png"
                  alt="logo"
                />

                <div
                  class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle font-semibold"
                >
                  {{ t("home.section3.features.data.title") }}
                </div>
                <div
                  class="text-[#455363] text-[72px] line-3 mt-[72px] max-w-[1024px] break-words"
                >
                  {{ t("home.section3.features.data.desc") }}
                </div>
              </div>
              <div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
                <img
                  class="w-[973px] h-[973px]"
                  src="@/assets/image/jj2.png"
                  alt="logo"
                />

                <div
                  class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle font-semibold"
                >
                  {{ t("home.section3.features.ai.title") }}
                </div>
                <div
                  class="text-[#455363] text-[72px] line-3 mt-[72px] max-w-[1024px] break-words"
                >
                  {{ t("home.section3.features.ai.desc") }}
                </div>
              </div>
              <div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
                <img
                  class="w-[973px] h-[973px]"
                  src="@/assets/image/jj3.png"
                  alt="logo"
                />

                <div
                  class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle font-semibold"
                >
                  {{ t("home.section3.features.cloud.title") }}
                </div>
                <div
                  class="text-[#455363] text-[72px] line-3 mt-[72px] max-w-[1024px] break-words"
                >
                  {{ t("home.section3.features.cloud.desc") }}
                </div>
              </div>
              <div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
                <img
                  class="w-[973px] h-[973px]"
                  src="@/assets/image/jj4.png"
                  alt="logo"
                />

                <div
                  class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle font-semibold"
                >
                  {{ t("home.section3.features.cooperation.title") }}
                </div>
                <div
                  class="text-[#455363] text-[72px] line-3 mt-[72px] max-w-[1024px] break-words"
                >
                  {{ t("home.section3.features.cooperation.desc") }}
                </div>
              </div>
              <div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
                <img
                  class="w-[973px] h-[973px]"
                  src="@/assets/image/jj5.png"
                  alt="logo"
                />

                <div
                  class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle font-semibold"
                >
                  {{ t("home.section3.features.promotion.title") }}
                </div>
                <div
                  class="text-[#455363] text-[72px] line-3 mt-[72px] max-w-[1024px] break-words"
                >
                  {{ t("home.section3.features.promotion.desc") }}
                </div>
              </div>
            </div>
          </n-marquee>
        </div>
      </section>

      <section className="panel" style="background-color: #f8f9ff">
        <n-divider class="divider1" vertical />
        <div class="divider2" style=""></div>
        <div class="divider3" style=""></div>
        <div class="divider4" style=""></div>
        <n-divider class="divider5" vertical />
        <div class="parallax-bg"></div>
        <div class="content4 mt-[451px]">
          <div class="text-[#8B59F7] text-[113px]">
            {{ t("home.section4.label") }}
          </div>
          <div class="text-[#10253E] text-[113px] mt-[87px] font-semibold">
            <div>
              {{ t("home.section4.title1") }}
            </div>
            <div>
              {{ t("home.section4.title2") }}
            </div>
          </div>
          <div
            class="text-[#455363] text-[72px] mt-[159px] leading-[102px] pr-[139px]"
          >
            {{ t("home.section4.desc") }}
          </div>
          <div class="container mt-[166px]">
            <div class="card">
              <img
                src="@/assets/image/home/375/imageShow-2.png"
                alt="Image 2"
              />
              <div class="js-detail font-bold">
                {{ t("home.section4.cards2.title") }}
                <div
                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
                >
                  {{ t("home.section4.cards2.desc") }}
                </div>
              </div>
            </div>
            <div class="card">
              <img
                src="@/assets/image/home/375/imageShow-1.png"
                alt="Image 1"
              />
              <div class="js-detail font-bold">
                {{ t("home.section4.cards1.title") }}
                <div
                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
                >
                  {{ t("home.section4.cards1.desc") }}
                </div>
              </div>
            </div>
            <div class="card">
              <img
                src="@/assets/image/home/375/imageShow-4.png"
                alt="Image 4"
              />
              <div class="js-detail font-bold">
                {{ t("home.section4.cards4.title") }}
                <div
                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
                >
                  {{ t("home.section4.cards4.desc") }}
                </div>
              </div>
            </div>
            <div class="card mb-[217px]">
              <img
                src="@/assets/image/home/375/imageShow-3.png"
                alt="Image 3"
              />
              <div class="js-detail font-bold">
                {{ t("home.section4.cards3.title") }}
                <div
                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
                >
                  {{ t("home.section4.cards3.desc") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <div style="background: #fff" className="flex flex-wrap justify-center">
        <img
          class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
          src="@/assets/image/image-footer.png"
          alt="logo"
        />
      </div>
    </footer>
  </div>
</template>

<script setup>
import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useHome } from "@/store/home/index.js";
import { useTransitionComposable } from "@/composables/transition-composable";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";

const router = useRouter();
const { transitionState } = useTransitionComposable();
const main = ref();
const secondImage = ref(null);
let scrollTween;
let ctx;
const { currentTab } = useHome();
let isScrolling = false; // 添加滚动状态标记
const scrollThreshold = 50; // 添加滚动阈值
let lastScrollTime = 0; // 添加最后滚动时间记录
const scrollDownVisible = ref(true);
const { t } = useI18n();
import { useLanguage } from "@/utils/changeLanguage.js";
const {
  languageOptions,
  currentLanguageLabel,
  changeLanguage,
  initLanguage,
  currentLang,
} = useLanguage();

// 导入所有语言的轮播图
const carouselImages = {
  zh: [
    new URL("@/assets/image/home/375/zh/carousel-1.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/zh/carousel-2.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/zh/carousel-3.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/zh/carousel-4.jpg", import.meta.url).href,
  ],
  en: [
    new URL("@/assets/image/home/375/en/carousel-1.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/en/carousel-2.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/en/carousel-3.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/en/carousel-4.jpg", import.meta.url).href,
  ],
  ja: [
    new URL("@/assets/image/home/375/ja/carousel-1.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/ja/carousel-2.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/ja/carousel-3.jpg", import.meta.url).href,
    new URL("@/assets/image/home/375/ja/carousel-4.jpg", import.meta.url).href,
  ],
  "zh-TW": [
    new URL("@/assets/image/home/375/zh-TW/carousel-1.jpg", import.meta.url)
      .href,
    new URL("@/assets/image/home/375/zh-TW/carousel-2.jpg", import.meta.url)
      .href,
    new URL("@/assets/image/home/375/zh-TW/carousel-3.jpg", import.meta.url)
      .href,
    new URL("@/assets/image/home/375/zh-TW/carousel-4.jpg", import.meta.url)
      .href,
  ],
  de: [
    new URL("@/assets/image/home/375/de/carousel-1.png", import.meta.url).href,
    new URL("@/assets/image/home/375/de/carousel-2.png", import.meta.url).href,
    new URL("@/assets/image/home/375/de/carousel-3.png", import.meta.url).href,
    new URL("@/assets/image/home/375/de/carousel-4.png", import.meta.url).href,
  ],
};
const currentLanguage = ref(localStorage.getItem("language") || "zh");
const currentCarouselImages = computed(() => {
  return carouselImages[currentLanguage.value] || carouselImages.zh;
});

// 添加语言变化的监听
watch(
  () => localStorage.getItem("language"),
  (newLang) => {
    if (newLang) {
      currentLanguage.value = newLang;
    }
  },
  { immediate: true }
);

const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push("/" + tab);
};

const goToSection = (i) => {
  if (scrollTween) {
    scrollTween.kill();
  }

  // 防止频繁触发
  const now = Date.now();
  if (now - lastScrollTime < 800) return; // 增加间隔时间到800ms
  lastScrollTime = now;

  isScrolling = true;
  scrollTween = gsap.to(window, {
    scrollTo: { y: i * window.innerHeight, autoKill: false },
    duration: 1, // 增加动画时间到1秒
    ease: "power2.inOut",
    onComplete: () => {
      scrollTween = null;
      isScrolling = false;
    },
    overwrite: true,
  });
};

// 修改 handleWheel 函数
const handleWheel = (e) => {
  if (isScrolling) {
    e.preventDefault();
    return;
  }

  const delta = e.deltaY;
  const currentSection = Math.round(window.scrollY / window.innerHeight);
  const lastPanel = document.querySelector(".panel:last-child");
  const isInLastPanel = currentSection === 3;

  // 添加防抖动
  if (Math.abs(delta) <= scrollThreshold) {
    return;
  }

  // 在最后一个panel时允许自然滚动
  if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) {
    if (
      (lastPanel.scrollTop === 0 && delta < 0) ||
      (lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight &&
        delta > 0)
    ) {
      if (delta > 0 && currentSection < 3) {
        goToSection(currentSection + 1);
      } else if (delta < 0 && currentSection > 0) {
        goToSection(currentSection - 1);
      }
    }
    return;
  }

  // 非最后一个panel的处理
  if (delta > 0 && currentSection < 3) {
    goToSection(currentSection + 1);
  } else if (delta < 0 && currentSection > 0) {
    goToSection(currentSection - 1);
  }
};

// 在 onMounted 中移除重复的初始化
onMounted(() => {
  window.addEventListener("wheel", handleWheel, { passive: false });
});

onUnmounted(() => {
  window.removeEventListener("wheel", handleWheel);
  ctx?.revert();
  ScrollTrigger.killAll();
});

watch(
  [() => transitionState.transitionComplete, main],
  (newValue) => {
    if (newValue && main.value) {
      ctx = gsap.context((self) => {
        const panels = self.selector(".panel");

        // 为每个面板创建滚动触发器
        panels.forEach((panel, i) => {
          ScrollTrigger.create({
            trigger: panel,
            start: "top center",
            end: "bottom center",
            onToggle: (self) => {
              if (self.isActive && !isScrolling) {
                goToSection(i);
              }
            },
            preventOverlaps: true,
          });
        });

        // 移除之前的渐入动画代码
        panels.forEach((panel, i) => {
          const bg = panel.querySelector(".parallax-bg");

          // 区分处理最后一个面板和其他面板
          if (i === 3) {
            // 第四个面板
            const content = panel.querySelector(".content4");
            if (bg && content) {
              const contentHeight = content.offsetHeight;
              const viewportHeight = window.innerHeight;
              const parallaxRange = Math.max(
                30,
                (contentHeight / viewportHeight) * 15
              );

              // 只为第四个面板设置特殊的背景高度
              gsap.set(bg, {
                height: `${Math.max(
                  120,
                  (contentHeight / viewportHeight) * 100
                )}%`,
              });

              gsap.to(bg, {
                yPercent: parallaxRange,
                ease: "none",
                scrollTrigger: {
                  trigger: panel,
                  start: "top bottom",
                  end: "bottom top",
                  scrub: true,
                  invalidateOnRefresh: true,
                },
              });
            }
          } else {
            // 其他面板保持原有的视差效果
            if (bg) {
              gsap.to(bg, {
                yPercent: 30,
                ease: "none",
                scrollTrigger: {
                  trigger: panel,
                  start: "top bottom",
                  end: "bottom top",
                  scrub: true,
                },
              });
            }
          }

          // 内容视差
          const content = panel.querySelector(".content");
          if (content) {
            gsap.from(content, {
              yPercent: 50,
              opacity: 0,
              scrollTrigger: {
                trigger: panel,
                start: "top center",
                end: "center center",
                scrub: true,
              },
            });
          }
        });

        // 修改第二个面板的动画配置
        ScrollTrigger.create({
          trigger: panels[1],
          start: "top 60%", // 调整为更晚的触发时机
          end: "bottom 40%", // 调整离开时机
          onEnter: () => {
            // 进入第二幕时
            gsap.to(secondImage.value, {
              opacity: 1,
              y: 0,
              duration: 1.2,
              ease: "power2.out",
            });
          },
          onLeave: () => {
            // 离开第二幕时（向下滚动）
            gsap.to(secondImage.value, {
              opacity: 0,
              y: -50,
              duration: 0.5, // 加快渐出速度
              ease: "power1.in", // 使用更快的缓动函数
            });
          },
          onEnterBack: () => {
            // 重新进入第二幕时（向上滚动）
            gsap.to(secondImage.value, {
              opacity: 1,
              y: 0,
              duration: 1.2,
              ease: "power2.out",
            });
          },
          onLeaveBack: () => {
            // 返回第一幕时（向上滚动）
            gsap.to(secondImage.value, {
              opacity: 0,
              y: 50,
              duration: 0.5, // 加快渐出速度
              ease: "power1.in", // 使用更快的缓动函数
            });
          },
        });

        // 修改第三幕的ScrollTrigger配置
        ScrollTrigger.create({
          trigger: panels[2],
          start: "top 60%", // 提前触发
          end: "bottom center",
          onEnter: () => {
            // 初始状态设置
            gsap.set(".content3", {
              opacity: 1, // 容器始终保持可见
              y: 0,
            });

            gsap.set(
              [
                ".content3 > div:nth-child(1)",
                ".content3 > div:nth-child(2)",
                ".content3 > div:nth-child(3)",
                ".content3 > .n-marquee",
              ],
              {
                opacity: 0,
                y: 50,
              }
            );

            const tl = gsap.timeline({
              defaults: {
                duration: 0.8,
                ease: "power2.out",
              },
            });

            tl.to(".content3 > div:nth-child(1)", {
              opacity: 1,
              y: 0,
            })
              .to(
                ".content3 > div:nth-child(2)",
                {
                  opacity: 1,
                  y: 0,
                },
                "-=0.6"
              )
              .to(
                ".content3 > div:nth-child(3)",
                {
                  opacity: 1,
                  y: 0,
                },
                "-=0.6"
              )
              .to(
                ".content3 > .n-marquee",
                {
                  opacity: 1,
                  y: 0,
                  onStart: () => {
                    const marquee = document.querySelector(
                      ".content3 > .n-marquee"
                    );
                    if (marquee) {
                      marquee.style.visibility = "visible";
                    }
                  },
                },
                "-=0.6"
              );
          },
          onLeave: () => {
            const tl = gsap.timeline({
              defaults: {
                duration: 0.3,
                ease: "power2.in",
              },
            });

            tl.to(
              [
                ".content3 > .n-marquee",
                ".content3 > div:nth-child(3)",
                ".content3 > div:nth-child(2)",
                ".content3 > div:nth-child(1)",
              ],
              {
                opacity: 0,
                y: -30,
                stagger: 0.1,
              }
            );
          },
          onEnterBack: () => {
            gsap.set(".content3", {
              opacity: 1,
              y: 0,
            });

            gsap.set(
              [
                ".content3 > div:nth-child(1)",
                ".content3 > div:nth-child(2)",
                ".content3 > div:nth-child(3)",
                ".content3 > .n-marquee",
              ],
              {
                opacity: 0,
                y: -50,
              }
            );

            const tl = gsap.timeline({
              defaults: {
                duration: 0.8,
                ease: "power2.out",
              },
            });

            tl.to(".content3 > div:nth-child(1)", {
              opacity: 1,
              y: 0,
            })
              .to(
                ".content3 > div:nth-child(2)",
                {
                  opacity: 1,
                  y: 0,
                },
                "-=0.6"
              )
              .to(
                ".content3 > div:nth-child(3)",
                {
                  opacity: 1,
                  y: 0,
                },
                "-=0.6"
              )
              .to(
                ".content3 > .n-marquee",
                {
                  opacity: 1,
                  y: 0,
                },
                "-=0.6"
              );
          },
          onLeaveBack: () => {
            const tl = gsap.timeline({
              defaults: {
                duration: 0.3,
                ease: "power2.in",
              },
            });

            tl.to(
              [
                ".content3 > .n-marquee",
                ".content3 > div:nth-child(3)",
                ".content3 > div:nth-child(2)",
                ".content3 > div:nth-child(1)",
              ],
              {
                opacity: 0,
                y: 30,
                stagger: 0.1,
              }
            );
          },
        });

        // 修改第四幕的动画配置
        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,
              }
            );

            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"
              );
          },
          onLeave: () => {
            scrollDownVisible.value = true;
            gsap
              .timeline({
                defaults: {
                  duration: 0.4,
                  ease: "power2.in",
                },
              })
              .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,
              }
            );

            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"
              );
          },
          onLeaveBack: () => {
            scrollDownVisible.value = true;
            gsap
              .timeline({
                defaults: {
                  duration: 0.4,
                  ease: "power2.in",
                },
              })

              .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);
    }
  },
  { immediate: true }
);

// 语言选择模态框相关变量
const showLanguageModal = ref(false);
// 默认选中的语言，从localStorage获取，如果没有则默认为简体中文
const selectedLanguage = ref(localStorage.getItem("language") || "zh");

// 打开语言选择模态框
const handleLanguageChange = () => {
  showLanguageModal.value = true;
  // 打开时设置当前选中的语言
  selectedLanguage.value = localStorage.getItem("language") || "zh";
  // 禁止背景滚动
  document.body.style.overflow = "hidden";
};

// 确认语言选择
const confirmLanguageChange = () => {
  changeLanguage(selectedLanguage.value);
  // 更新轮播图
  currentLanguage.value = selectedLanguage.value;
  // 关闭模态框
  showLanguageModal.value = false;
  // 恢复背景滚动
  document.body.style.overflow = "";
};

// 关闭语言选择模态框
const closeLanguageModal = () => {
  showLanguageModal.value = false;
  // 恢复背景滚动
  document.body.style.overflow = "";
};
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
.header {
  width: 100%;
  height: 260px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 102px;
  background-color: #fff;
}
.logo {
  img {
    width: 399px;
    height: 128px;
  }
}

.tabs {
  display: flex;
  gap: 77px;
  margin-left: 67px;
}

.tab-item {
  display: flex;
  align-items: center;
  font-size: 61px;
  color: #000000;
  max-width: 251px;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;

  &.active {
    color: #8b59fa;
  }

  &:hover {
    color: #8b59fa;
  }
}
.ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}
.title {
  font-size: 113px;
  font-weight: 600;
  color: #10253e;
  line-height: 143px;
}
.subTitle {
  line-height: 102px;
}
.scroll-down {
  position: fixed;
  bottom: 113px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 82px;
  font-weight: 600;
  z-index: 999;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 113px;
  padding: 41px 143px;
  animation: flot 2s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.3s ease;
  min-width: 625px;
  height: 195px;
  display: flex;
  justify-content: center;
  align-items: center;

  &.hide {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -10px);
  }
}

:deep .n-carousel__dot {
  background-color: #dddddd !important;
}

:deep .n-carousel__dot--active {
  background-color: #8b59f7 !important;
}

.divider1 {
  position: absolute;
  z-index: 3;
  left: 64px;
  width: 1px;
  height: 100%;
  background-color: rgba(230, 234, 238, 0.5) !important;
}

.divider5 {
  position: absolute;
  z-index: 3;
  right: 60px;
  width: 1px;
  height: 100%;
  background-color: rgba(230, 234, 238, 0.5) !important;
}

.carousel-img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.panel {
  height: 100vh;
  position: sticky;
  top: 0;
  color: var(--dark);
  font-size: 30px;
  overflow: hidden;

  // 为第四个panel添加特殊处理
  &:last-child {
    position: relative;
    overflow-y: auto;
    height: 100vh;

    // 隐藏滚动条但保持功能
    &::-webkit-scrollbar {
      display: none; // Chrome, Safari, Opera
    }

    // 调整最后一个面板的背景
    .parallax-bg {
      position: fixed; // 改为固定定位
      height: 120%;
    }
  }

  &.first-panel {
    position: relative;

    .carousel-img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .content {
      position: relative;
      z-index: 2;
    }
  }
}

.parallax-bg {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 100%; // 保持原有高度
  z-index: 1;
}

.content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content3 {
  position: relative;
  z-index: 5;

  height: 100%;
  display: flex;
  flex-direction: column;

  > div {
    opacity: 0;
    transform: translateY(50px);
    will-change: opacity, transform;
  }

  > .n-marquee {
    opacity: 0;
    transform: translateY(50px);
    will-change: opacity, transform;
    visibility: hidden; // 初始隐藏跑马灯
  }
}
// 确保跑马灯内容可见
:deep(.n-marquee) {
  .n-marquee-content {
    visibility: visible !important;
  }
}

.content4 {
  position: relative;
  z-index: 5;
  padding: 0 184px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.no-hover {
  pointer-events: none;
}

:deep(.no-hover) {
  .n-carousel__dots,
  .n-carousel__arrow {
    pointer-events: auto;
  }
}

.second-image {
  opacity: 0;
  padding: 0 64px;
  transform: translateY(50px);
  will-change: opacity, transform;
  pointer-events: none;
}

.card {
  margin-top: 154px;
  box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
  padding: 46px 36px 118px 51px;
  border-radius: 60px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card img {
  max-width: 100%;
  border-radius: 8px;
}

.js-detail {
  text-align: left;
  margin-top: 87px;
  font-size: 92px;
  color: #10253e;
  width: 100%;
  padding: 0 82px 0 82px;
}

.carousel-container {
  width: 96%;
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  cursor: pointer;
}

.carousel-item {
  width: 785px;
  margin-right: 73px;
  flex: 0 0 auto;
  display: block; // 改为 block 布局
  padding: 23px 20px 40px;
  border-radius: 30px;
  box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
}

.carousel-image {
  width: 748px;
  height: 563px;
  object-fit: cover;
  display: block;
}

.carousel-content {
  padding: 0 20px 0 60px;
  margin-top: 38px;
}

.carousel-title {
  font-size: 50px;
  font-weight: 500;
  margin-top: 48px;
}

.carousel-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: calc(1.5em * 1);
}

// 只为第四个面板的背景添加特殊样式
.panel:last-child .parallax-bg {
  height: 100%; // 第四个面板的背景初始高度
}
.line-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.5em * 3);
}

/* 语言选择模态框样式 */
.language-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  touch-action: none; /* 防止触摸事件影响背景 */
}

.language-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

.language-modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 90vh; /* 最大高度为视口高度的90% */
  background-color: #fff;
  z-index: 1002;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 内容溢出隐藏 */
}

.modal-header {
  padding: 67px 77px 113px 77px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 82px;
  color: #000000;
  position: relative;
  flex-shrink: 0; /* 不允许头部收缩 */
}

.close-btn {
  cursor: pointer;
}

.language-modal-body {
  padding: 10px 0;
  overflow-y: auto; /* 只有内容区域可滚动 */
  -webkit-overflow-scrolling: touch; /* 为iOS设备提供平滑滚动 */
  flex: 1; /* 内容区域填充剩余空间 */
}

.language-option {
  padding: 30px 0;
  font-size: 72px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.language-option:hover,
.language-option.active {
  background-color: #f5f5f5;
  color: #8b59f7;
}

.language-modal-footer {
  padding: 113px 77px;
  display: flex;
  justify-content: center;
  flex-shrink: 0; /* 不允许底部收缩 */
}

.confirm-btn {
  background-color: #8b59f7;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 46px 0;
  width: 100%;
  font-size: 82px;
  cursor: pointer;
}

.confirm-btn:hover {
  background-color: #7a48e6;
}
</style>