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

<script setup>
import { NCarousel, NDivider, NMarquee, NImage } from 'naive-ui'
import { onUnmounted, ref, watch, onMounted } 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();

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

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

  // 防止频繁触发
  const now = Date.now();
  if (now - lastScrollTime < 500) return;  // 500ms 内不重复触发
  lastScrollTime = now;

  isScrolling = true;
  scrollTween = gsap.to(window, {
    scrollTo: { y: i * window.innerHeight, autoKill: false },
    duration: 0.8,  // 增加动画时间使其更平滑
    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;

  // 在最后一个panel时允许自然滚动
  if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) {
    // 检查是否在panel顶部且向上滚动，或在底部且向下滚动
    if ((lastPanel.scrollTop === 0 && delta < 0) ||
      (lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight && delta > 0)) {
      // 只有在这些边界条件下才触发页面切换
      if (Math.abs(delta) > scrollThreshold) {
        if (delta > 0 && currentSection < 3) {
          goToSection(currentSection + 1);
        } else if (delta < 0 && currentSection > 0) {
          goToSection(currentSection - 1);
        }
      }
    }
    return; // 其他情况允许自然滚动
  }

  // 非最后一个panel的处理保持不变
  if (Math.abs(delta) > scrollThreshold) {
    if (delta > 0 && currentSection < 3) {
      goToSection(currentSection + 1);
    } else if (delta < 0 && currentSection > 0) {
      goToSection(currentSection - 1);
    }
  }
};

// 监听滚轮事件
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 (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
            });

            // 单独设置卡片的初始状态
            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);
    }
  },
  { immediate: true }
);
</script>

<template>

  <main ref="main">
    <div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
    <section className="panel first-panel">

      <n-carousel autoplay :interval="5000" class="no-hover">
        <img class="carousel-img" src="@/assets/image/banner/cn/b1.jpg">
        <img class="carousel-img" src="@/assets/image/banner/cn/b2.jpg">
        <img class="carousel-img" src="@/assets/image/banner/cn/b3.jpg">
      </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: 70px;">
        <img ref="secondImage" class="second-image" src="@/assets/image/head.png">


      </div>
      <div class="content">
        <div class="text-[#10253E] text-[54px] leading-[80px]">{{ t('home.section2.title1') }}</div>
        <div class="text-[#10253E] text-[54px] leading-[80px]">{{ 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-[140px]">
        <div class="text-[#8B59F7] text-[16px]">{{ t('home.section3.label') }}</div>
        <div class="text-[#10253E] text-[40px]  mt-[17px]">
          FiEE
        </div>
        <div class="text-[#455363] text-[16px]  mt-[31px]">
          {{ t('home.section3.desc') }}
        </div>
        <n-marquee auto-fill>
          <div style="display: flex;">
            <div class="text-[#455363] text-[16px]  mt-[31px] mr-[30px]">
              <img class="w-[180px] h-[180px]" src="@/assets/image/jj1.png" alt="logo" />
              <div class="line"></div>
              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
                t('home.section3.features.data.title') }}</div>
              <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                {{ t('home.section3.features.data.desc') }}
              </div>
            </div>
            <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
              <img class="w-[180px] h-[180px]" src="@/assets/image/jj2.png" alt="logo" />
              <div class="line"></div>
              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.ai.title')
                }}</div>
              <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                {{ t('home.section3.features.ai.desc') }}
              </div>
            </div>
            <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
              <img class="w-[180px] h-[180px]" src="@/assets/image/jj3.png" alt="logo" />
              <div class="line"></div>
              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
                t('home.section3.features.cloud.title') }}</div>
              <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                {{ t('home.section3.features.cloud.desc') }}
              </div>
            </div>
            <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
              <img class="w-[180px] h-[180px]" src="@/assets/image/jj4.png" alt="logo" />
              <div class="line"></div>
              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
                t('home.section3.features.cooperation.title') }}</div>
              <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
                {{ t('home.section3.features.cooperation.desc') }}
              </div>
            </div>
            <div class="text-[#455363] text-[16px]  mt-[31px]  mr-[30px]">
              <img class="w-[180px] h-[180px]" src="@/assets/image/jj5.png" alt="logo" />
              <div class="line "></div>
              <div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
                t('home.section3.features.promotion.title') }}</div>
              <div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] 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-[103px]">
        <div class="text-[#8B59F7] text-[16px]">{{ t('home.section4.label') }}</div>
        <div class="text-[#10253E] text-[40px]  mt-[17px]">
          {{ t('home.section4.title') }}
        </div>
        <div class="text-[#455363] text-[16px]  mt-[31px]">
          {{ t('home.section4.desc') }}
        </div>
        <div class="container">
          <div class="mt-[100px]">
            <div class="card">
              <img src="@/assets/image/yw1.png" alt="Image 1" />
              <div class="js-detail font-bold">
                {{ t('home.section4.cards1.title') }}
                <div class="text-[#455363] text-[16px] font-normal">
                  {{ t('home.section4.cards1.desc') }}
                </div>
              </div>
            </div>
            <div class="card">
              <img src="@/assets/image/yw3.png" alt="Image 2" />
              <div class="js-detail font-bold">
                {{ t('home.section4.cards2.title') }}
                <div class="text-[#455363] text-[16px] font-normal">
                  {{ t('home.section4.cards2.desc') }}
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="card">
              <img src="@/assets/image/yw2.png" alt="Image 3" />
              <div class="js-detail font-bold">
                {{ t('home.section4.cards3.title') }}
                <div class="text-[#455363] text-[16px] font-normal">
                  {{ t('home.section4.cards3.desc') }}
                </div>
              </div>
            </div>
            <div class="card">
              <img src="@/assets/image/yw4.png" alt="Image 4" />
              <div class="js-detail font-bold">
                {{ t('home.section4.cards4.title') }}
                <div class="text-[#455363] text-[16px] font-normal">
                  {{ t('home.section4.cards4.desc') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <div class="footer-content">
      <img class="copyright" src="@/assets/image/cp.png" alt="logo" />


    </div>
  </footer>
</template>

<style scoped lang="scss">
.scroll-down {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  color: #FFFFFF;
  font-size: 16px;
  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: 22px;
  padding: 10px 20px;
  animation: float 2s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.3s ease;
  min-width: 122px;
  height: 38px;
  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: 477px;
  width: 1px;
  height: 100vw;

}

.divider2 {
  position: absolute;
  z-index: 3;
  left: 715px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider3 {
  position: absolute;
  z-index: 3;
  left: 950px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider4 {
  position: absolute;
  z-index: 3;
  left: 1186px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider5 {
  position: absolute;
  z-index: 3;
  left: 1420px;
  width: 1px;
  height: 100vw;
}

.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;
}

.header {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 10rem;
  background-color: transparent;
}

.logo {
  img {
    width: 108px;
    height: 33px;
  }
}

.tabs {
  display: flex;
  gap: 32px;
  margin-right: 32px;
}

.tab-item {
  font-size: 16px;
  color: #000000;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;

  &.active {
    color: #8B59FA;
  }

  &:hover {
    color: #8B59FA;
  }
}

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

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

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


  }

  &.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: 120%;
  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;
  padding: 0 500px;
  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; // 初始隐藏跑马灯
  }
}

.content4 {
  position: relative;
  z-index: 5;
  padding: 0 500px;
  height: 100%;
  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;
}

.divider3,
.divider4 {
  :deep(.n-divider) {
    border-left: none;
    background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
    background-size: 1px 30px;
    background-repeat: repeat-y;
  }
}

// 确保跑马灯内容可见
:deep(.n-marquee) {
  .n-marquee-content {
    visibility: visible !important;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Two columns */
  gap: 30px;
  padding: 10px;
}

.card {
  margin-top: 39px;
  box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
  padding: 9px;
  border-radius: 12px;
  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: 10px;
  font-size: 20px;
  color: #10253E;
  width: 100%;
  padding: 0 23px;
}

.footer-content {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;

  .copyright {
    width: 232px;
    height: 22pxpx;
  }
}
</style>