Refactor home page layout and update dependencies

- Upgrade naive-ui, date-fns, and vueuc to latest versions - Enhance scroll behavior with improved wheel event handling - Update second section layout with dividers and new content - Replace piece.png with updated head.png - Improve section navigation and scrolling mechanics
2025-02-19 19:03:37 +08:00 · 2025-02-19 19:03:37 +08:00 · 2389bc72af
commit 2389bc72af
parent f5d78c51ef
4 changed files with 196 additions and 88 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -33,8 +33,8 @@ importers:
        specifier: ^4.17.21
        version: 4.17.21
      naive-ui:
-        specifier: ^2.39.0
-        version: 2.39.0(vue@3.4.35)
+        specifier: ^2.41.0
+        version: 2.41.0(vue@3.4.35)
      path:
        specifier: ^0.12.7
        version: 0.12.7
@ -1655,14 +1655,13 @@ packages:
    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
    engines: {node: '>=18'}

-  date-fns-tz@2.0.1:
-    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
+  date-fns-tz@3.2.0:
+    resolution: {integrity: sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==}
    peerDependencies:
-      date-fns: 2.x
+      date-fns: ^3.0.0 || ^4.0.0

-  date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
+  date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}

  debug@4.3.6:
    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
@ -1980,8 +1979,8 @@ packages:
  mutation-observer@1.0.3:
    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}

-  naive-ui@2.39.0:
-    resolution: {integrity: sha512-5oUJzRG+rtLSH8eRU+fJvVYiQids2BxF9jp+fwGoAqHOptEINrBlgBu9uy+95RHE5FLJ7Q/z41o+qkoGnUrKxQ==}
+  naive-ui@2.41.0:
+    resolution: {integrity: sha512-KnmLg+xPLwXV8QVR7ZZ69eCjvel7R5vru8+eFe4VoAJHEgqAJgVph6Zno9K2IVQRpSF3GBGea3tjavslOR4FAA==}
    peerDependencies:
      vue: ^3.0.0

@ -2588,8 +2587,8 @@ packages:
      typescript:
        optional: true

-  vueuc@0.4.58:
-    resolution: {integrity: sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==}
+  vueuc@0.4.64:
+    resolution: {integrity: sha512-wlJQj7fIwKK2pOEoOq4Aro8JdPOGpX8aWQhV8YkTW9OgWD2uj2O8ANzvSsIGjx7LTOc7QbS7sXdxHi6XvRnHPA==}
    peerDependencies:
      vue: ^3.0.11

@ -4410,13 +4409,11 @@ snapshots:
      whatwg-mimetype: 4.0.0
      whatwg-url: 14.0.0

-  date-fns-tz@2.0.1(date-fns@2.30.0):
+  date-fns-tz@3.2.0(date-fns@3.6.0):
    dependencies:
-      date-fns: 2.30.0
+      date-fns: 3.6.0

-  date-fns@2.30.0:
-    dependencies:
-      '@babel/runtime': 7.25.0
+  date-fns@3.6.0: {}

  debug@4.3.6:
    dependencies:
@ -4724,7 +4721,7 @@ snapshots:

  mutation-observer@1.0.3: {}

-  naive-ui@2.39.0(vue@3.4.35):
+  naive-ui@2.41.0(vue@3.4.35):
    dependencies:
      '@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
      '@css-render/vue3-ssr': 0.15.14(vue@3.4.35)
@ -4734,8 +4731,8 @@ snapshots:
      async-validator: 4.2.5
      css-render: 0.15.14
      csstype: 3.1.3
-      date-fns: 2.30.0
-      date-fns-tz: 2.0.1(date-fns@2.30.0)
+      date-fns: 3.6.0
+      date-fns-tz: 3.2.0(date-fns@3.6.0)
      evtd: 0.2.4
      highlight.js: 11.10.0
      lodash: 4.17.21
@ -4745,7 +4742,7 @@ snapshots:
      vdirs: 0.1.8(vue@3.4.35)
      vooks: 0.2.12(vue@3.4.35)
      vue: 3.4.35
-      vueuc: 0.4.58(vue@3.4.35)
+      vueuc: 0.4.64(vue@3.4.35)

  nanoid@3.3.7: {}

@ -5421,7 +5418,7 @@ snapshots:
      '@vue/server-renderer': 3.4.35(vue@3.4.35)
      '@vue/shared': 3.4.35

-  vueuc@0.4.58(vue@3.4.35):
+  vueuc@0.4.64(vue@3.4.35):
    dependencies:
      '@css-render/vue3-ssr': 0.15.14(vue@3.4.35)
      '@juggle/resize-observer': 3.4.0
--- a/src/assets/image/head.png
+++ b/src/assets/image/head.png
--- a/src/assets/image/piece.png
+++ b/src/assets/image/piece.png
--- a/src/views/home/size1920/index.vue
+++ b/src/views/home/size1920/index.vue
@ -1,6 +1,6 @@
 <script setup>
-import { NCarousel } from 'naive-ui'
-import { onUnmounted, ref, watch } from 'vue';
+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';
@ -12,35 +12,90 @@ const secondImage = ref(null);
 let scrollTween;
 let ctx;
 const { currentTab } = useHome();
+let isScrolling = false;  // 添加滚动状态标记
+const scrollThreshold = 50;  // 添加滚动阈值
+let lastScrollTime = 0;  // 添加最后滚动时间记录

 const handleTabClick = (tab) => {
  currentTab.value = tab;
 }

 const goToSection = (i) => {
-  ctx.data.forEach((e) => {
-    if (e.vars && e.vars.id === 'scrollTween') {
-      e.kill();
-    }
-  });
-  ctx.add(() => {
-    scrollTween = gsap.to(window, {
-      scrollTo: { y: i * window.innerHeight, autoKill: false },
-      duration: 1,
-      id: 'scrollTween',
-      onComplete: () => (scrollTween = null),
-      overwrite: true,
-    });
+  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,
  });
 };

+// 添加滚轮事件处理
+const handleWheel = (e) => {
+  if (isScrolling) {
+    e.preventDefault();
+    return;
+  }
+
+  const delta = e.deltaY;
+  const currentSection = Math.round(window.scrollY / window.innerHeight);
+
+  // 只有当滚动量超过阈值时才触发
+  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) => {
          // 背景视差
@ -72,14 +127,6 @@ watch(
              }
            });
          }
-
-          // 原有的面板切换逻辑
-          ScrollTrigger.create({
-            trigger: panel,
-            start: 'top bottom',
-            end: '+=200%',
-            onToggle: (self) => self.isActive && !scrollTween && goToSection(i),
-          });
        });

        // 修改第二个面板的动画配置
@ -120,24 +167,11 @@ watch(
            });
          }
        });
-
-        ScrollTrigger.create({
-          start: 0,
-          end: 'max',
-          snap: 1 / (panels.length - 1),
-        });
-
-      
      }, main.value);
    }
  },
  { immediate: true }
 );
-
-onUnmounted(() => {
-  ctx.revert();
-  ScrollTrigger.killAll();
-});
 </script>

 <template>
@ -146,49 +180,39 @@ onUnmounted(() => {
      <img src="@/assets/image/logo.png" alt="logo" />
    </div>
    <div class="tabs">
-      <div 
-        class="tab-item" 
-        :class="{ active: currentTab === 'home' }" 
-        @click="handleTabClick('home')"
-      >
+      <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
        首页
      </div>
-      <div 
-        class="tab-item" 
-        :class="{ active: currentTab === 'company' }" 
-        @click="handleTabClick('company')"
-      >
+      <div class="tab-item" :class="{ active: currentTab === 'company' }" @click="handleTabClick('company')">
        公司概况
      </div>
-      <div 
-        class="tab-item" 
-        :class="{ active: currentTab === 'business' }" 
-        @click="handleTabClick('business')"
-      >
+      <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
        业务介绍
      </div>
    </div>
  </header>
  <main ref="main">
+
    <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 class="pop1">
-          <img class="w-[88px] h-[32px]" src="@/assets/image/panel2/pop1.png" alt="pop1">
-        </div>
+        <img ref="secondImage" class="second-image" src="@/assets/image/head.png">
+
+
      </div>
      <div class="content">
        <div class="text-[#10253E] text-[54px] leading-[80px]">FiEE携手文艺创作者</div>
@ -196,11 +220,27 @@ onUnmounted(() => {
      </div>
    </section>

-    <section className="panel">
-      <div class="parallax-bg">THREE</div>
-      <div class="content">
-        <!-- 添加你的内容 -->
+    <section className="panel" style="background-color: #fff;">
+      <div class="parallax-bg" style="margin-top: 70px;">
+
+
+
      </div>
+      <div class="content3">
+        <div class="text-[#8B59F7] text-[16px]">公司简介</div>
+        <div class="text-[#10253E] text-[40px]  mt-[17px]">
+          FiEE
+        </div>
+        <div class="text-[#455363] text-[16px]  mt-[31px]">
+          作为一家深度扎根前沿科技领域的创新领航者，FiEE持续钻研
+          AI、大数据在文艺创作中的应用。凭借对文艺理念的深度剖析，以及对创作实践的深刻洞察，我们精准把握文艺发展脉络。怀着满腔热忱，整合各类技术与资源，为文艺创作者提供从灵感启发到作品推广的全方位赋能。
+        </div>
+        <n-marquee auto-fill>
+          <n-image width="80" height="80" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+            style="margin-right: 24px" />
+        </n-marquee>
+      </div>
+
    </section>

    <section className="panel">
@ -213,6 +253,56 @@ onUnmounted(() => {
 </template>

 <style scoped lang="scss">
+.divider1 {
+  position: absolute;
+  z-index: 3;
+  left: 477px;
+  width: 1px;
+  height: 100vw;
+
+}
+
+.divider2 {
+  position: absolute;
+  z-index: 3;
+  left: 715px;
+  width: 1px;
+  height: 100vh;
+  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: 100vh;
+  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: 100vh;
+  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;
@ -306,7 +396,7 @@ onUnmounted(() => {

 .content {
  position: relative;
-  z-index: 2;
+  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
@ -314,6 +404,16 @@ onUnmounted(() => {
  align-items: center;
 }

+.content3 {
+  position: relative;
+  z-index: 2;
+  padding: 0 500px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+}
+
 .no-hover {
  pointer-events: none;
 }
@ -328,8 +428,19 @@ onUnmounted(() => {

 .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;
+  }
+}
 </style>