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

pnpm-lock.yaml

@@ -33,8 +33,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       naive-ui:
-        specifier: ^2.39.0
+        specifier: ^2.41.0
-        version: 2.39.0(vue@3.4.35)
+        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:
+  date-fns-tz@3.2.0:
-    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
+    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:
+  date-fns@3.6.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
-    engines: {node: '>=0.11'}
 
   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:
+  naive-ui@2.41.0:
-    resolution: {integrity: sha512-5oUJzRG+rtLSH8eRU+fJvVYiQids2BxF9jp+fwGoAqHOptEINrBlgBu9uy+95RHE5FLJ7Q/z41o+qkoGnUrKxQ==}
+    resolution: {integrity: sha512-KnmLg+xPLwXV8QVR7ZZ69eCjvel7R5vru8+eFe4VoAJHEgqAJgVph6Zno9K2IVQRpSF3GBGea3tjavslOR4FAA==}
     peerDependencies:
       vue: ^3.0.0
 
@@ -2588,8 +2587,8 @@ packages:
       typescript:
         optional: true
 
-  vueuc@0.4.58:
+  vueuc@0.4.64:
-    resolution: {integrity: sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==}
+    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:
+  date-fns@3.6.0: {}
-    dependencies:
-      '@babel/runtime': 7.25.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: 3.6.0
-      date-fns-tz: 2.0.1(date-fns@2.30.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

src/views/home/size1920/index.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { NCarousel } from 'naive-ui'
+import { NCarousel, NDivider, NMarquee, NImage } from 'naive-ui'
-import { onUnmounted, ref, watch } from 'vue';
+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 (scrollTween) {
-    if (e.vars && e.vars.id === 'scrollTween') {
+    scrollTween.kill();
-      e.kill();
+  }
-    }
+
-  });
+  // 防止频繁触发
-  ctx.add(() => {
+  const now = Date.now();
-    scrollTween = gsap.to(window, {
+  if (now - lastScrollTime < 500) return;  // 500ms 内不重复触发
-      scrollTo: { y: i * window.innerHeight, autoKill: false },
+  lastScrollTime = now;
-      duration: 1,
+
-      id: 'scrollTween',
+  isScrolling = true;
-      onComplete: () => (scrollTween = null),
+  scrollTween = gsap.to(window, {
-      overwrite: true,
+    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 
+      <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
-        class="tab-item" 
-        :class="{ active: currentTab === 'home' }" 
-        @click="handleTabClick('home')"
-      >
         首页
       </div>
-      <div 
+      <div class="tab-item" :class="{ active: currentTab === 'company' }" @click="handleTabClick('company')">
-        class="tab-item" 
-        :class="{ active: currentTab === 'company' }" 
-        @click="handleTabClick('company')"
-      >
         公司概况
       </div>
-      <div 
+      <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
-        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 
+        <img ref="secondImage" class="second-image" src="@/assets/image/head.png">
-          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>
       </div>
       <div class="content">
         <div class="text-[#10253E] text-[54px] leading-[80px]">FiEE携手文艺创作者</div>
@@ -196,11 +220,27 @@ onUnmounted(() => {
       </div>
     </section>
 
-    <section className="panel">
+    <section className="panel" style="background-color: #fff;">
-      <div class="parallax-bg">THREE</div>
+      <div class="parallax-bg" style="margin-top: 70px;">
-      <div class="content">
+
-        <!-- 添加你的内容 -->
+
+
       </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>