home1920 1440

src/i18n/index.js

@@ -19,7 +19,7 @@ function getBrowserLanguage() {
   if (lang.includes('ja')) {
     return 'ja'
   }
-  return 'zh' // 默认中文，而不是英语
+  return 'en' // 默认中文，而不是英语
 }
 
 // 获取存储的语言或浏览器语言

src/locales/en.js

@@ -5,9 +5,66 @@ export default {
     confirm: 'Confirm'
   },
   home: {
-    title: 'Children Art Collection',
-    vote: 'Vote',
-    signup: 'Sign Up'
+    nav: {
+      home: 'Home',
+      company: 'Company Overview',
+      business: 'Business Introduction'
+    },
+    scroll: {
+      tip: 'Scroll Down'
+    },
+    section2: {
+      title1: 'FiEE with Art Creators',
+      title2: 'Embarking on Global Impact'
+    },
+    section3: {
+      label: 'Company Profile',
+      title: 'FiEE',
+      desc: 'As an innovative pioneer deeply rooted in cutting-edge technology, FiEE continuously researches the application of AI and big data in artistic creation. Through in-depth analysis of artistic concepts and profound insights into creative practices, we precisely grasp the development trends of art. With great passion, we integrate various technologies and resources to provide comprehensive empowerment for art creators, from inspiration to promotion.',
+      features: {
+        data: {
+          title: 'Big Data Anchors Creative Direction',
+          desc: 'Using self-developed big data models to deeply analyze the global art market, providing forward-looking judgments to help creators clarify direction.'
+        },
+        ai: {
+          title: 'AI Algorithms Break Communication Barriers',
+          desc: 'Utilizing cutting-edge AI algorithms to build personalized recommendation systems, precisely matching audiences and breaking through art communication limitations.'
+        },
+        cloud: {
+          title: 'Cloud Computing Mines Artistic Value',
+          desc: 'Leveraging excellent cloud computing capabilities to efficiently process massive data, supporting creators in exploration and expansion.'
+        },
+        cooperation: {
+          title: 'Professional Cooperation Establishes Benchmark Status',
+          desc: 'Collaborating with professional art institutions and academic platforms to help creators gain recognition and establish professional art benchmarks.'
+        },
+        promotion: {
+          title: 'Diverse Promotion Shapes Global Brands',
+          desc: 'Utilizing diverse communication and innovative marketing, combined with brand building and promotion, to help creators become global art brands.'
+        }
+      }
+    },
+    section4: {
+      label: 'Business Introduction',
+      title: 'Multi-business Synergy, Driving Artistic Influence to Soar',
+      desc: 'FiEE focuses on providing global promotion and professional operation services for art creators. Through precise positioning and multi-platform linkage, we break geographical restrictions to bring works to the international stage. Relying on a strong resource network to connect business opportunities, using AI and big data for precise marketing, efficiently reaching audiences, helping creators achieve breakthroughs in both artistic and commercial value.',
+      cards1: {
+          title: 'Global Floral Industry, Suitable for International Art Exchange Center',
+          desc: 'FiEE upholds the concept of "Art Without Borders", relying on multi-platform linkage to break geographical restrictions, pushing works to the global market, attracting potential consumers, and letting art creators shine on the international stage.'
+      },
+      cards2: {
+        title: 'Professional Operation Team, Precise Audience Targeting',
+        desc: 'FiEE\'s operation team brings together senior talents from multiple fields, leveraging rich experience and market insights to formulate precise promotion strategies through data analysis, enabling works to accurately reach target audiences and achieve deep resonance.'
+      },
+      cards3: {
+        title: 'Strong Resource Network, Expanding Unlimited Business Opportunities',
+        desc: 'FiEE establishes deep cooperation with globally renowned art institutions and mainstream media, building a vast resource network, helping art creators connect with high-end resources, and expanding business cooperation opportunities such as artwork licensing and derivative product development.'
+      },
+      cards4: {
+        title: 'Technology-Driven Marketing, Efficiently Reaching Fan Groups',
+        desc: 'FiEE uses AI algorithms and big data analysis to precisely profile target groups, achieve personalized promotion, quickly reach fan groups, accumulate loyal fan communities, and use intelligent tools to optimize promotion strategies, empowering art creators\' artistic career development.'
+      }
+    }
   },
   vote: {
     title: 'Children Art Collection Activity',

src/locales/zh.js

@@ -5,9 +5,69 @@ export default {
     confirm: '确认'
   },
   home: {
-    title: '儿童美术征集',
-    vote: '投票',
-    signup: '报名'
+    nav: {
+      home: '首页',
+      company: '公司概况',
+      business: '业务介绍'
+    },
+    scroll: {
+      tip: '向下滑动'
+    },
+    section2: {
+      title1: 'FiEE携手文艺创作者',
+      title2: '启航全球影响力新征程'
+    },
+    section3: {
+      label: '公司简介',
+      title: 'FiEE',
+      desc: '作为一家深度扎根前沿科技领域的创新领航者，FiEE持续钻研AI、大数据在文艺创作中的应用。凭借对文艺理念的深度剖析，以及对创作实践的深刻洞察，我们精准把握文艺发展脉络。怀着满腔热忱，整合各类技术与资源，为文艺创作者提供从灵感启发到作品推广的全方位赋能。',
+      features: {
+        data: {
+          title: '大数据锚定创作方向',
+          desc: '借助自研大数据模型，深析全球文艺市场，提供前瞻研判，助创作者明确方向。'
+        },
+        ai: {
+          title: 'AI 算法打破传播圈层',
+          desc: '运用前沿 AI算法，搭建个性化推荐体系，精准匹配受众，突破文艺传播圈限制。'
+        },
+        cloud: {
+          title: '云计算挖掘文艺价值',
+          desc: '凭借卓越云计算能力，高效处理海量数据，为创作者探索与拓展提供支撑。'
+        },
+        cooperation: {
+          title: '专业合作树立标杆地位',
+          desc: '与专业文艺机构、学术平台合作，助力创作者作品获赞，树立专业文艺标杆。'
+        },
+        promotion: {
+          title: '多元推广塑造全球品牌',
+          desc: '借助多元传播与创新营销，结合品牌塑造与推广，助创作者成全球文艺品牌。'
+        }
+      }
+    },
+    section4: {
+      label: '业务介绍',
+      title: '多元业务协同，推动文艺影响力腾飞',
+      desc: 'FiEE 专注为文艺创作者提供全球化推广与专业运营服务。通过精准定位、多平台联动，打破地域限制，让作品登上国际舞台。依托强大资源网络对接商业机遇，运用 AI与大数据精准营销，高效触达受众，助力创作者实现艺术与商业价值双突破。',
+      cards1: {
+    
+          title: '全球花卉产业，适合国际艺术交流中心',
+          desc: 'FiEE秉持 "文艺无国界"理念，依托多平台联动，打破地域限制，将作品推向全球市场，吸引潜在消费者，让文艺创作者在国际舞台绽放光彩。'
+       
+        // 其他卡片内容相同，可以复用global的内容
+      },
+      cards2: {
+        title: '专业运营团队，精准定位受众',
+        desc: 'FiEE运营团队汇聚多领域资深人才，凭借丰富经验和对市场的洞察，通过数据分析制定精准推广策略，让作品精准触达目标受众，实现深度共鸣。'
+      },
+      cards3: {
+        title: '强大资源网络，拓展无限商业机遇',
+        desc: 'FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。'
+      },
+      cards4: {
+        title: '技术驱动营销，高效触达粉丝群体',
+        desc: 'FiEE利用 AI 算法和大数据分析，精准画像目标人群，实现个性化推广，快速触达粉丝群体，积累忠实粉丝社群，运用智能工具优化推广策略，为文艺创作者的艺术事业发展助力。'
+      }
+    }
   },
   vote: {
     title: '儿童美术征集活动',

src/views/home/size1920/index.vue

@@ -5,6 +5,7 @@ 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';
 
 const { transitionState } = useTransitionComposable();
 const main = ref();
@@ -15,6 +16,8 @@ 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;
@@ -43,7 +46,7 @@ const goToSection = (i) => {
   });
 };
 
-// 添加滚轮事件处理
+// 修改handleWheel函数
 const handleWheel = (e) => {
   if (isScrolling) {
     e.preventDefault();
@@ -52,12 +55,31 @@ const handleWheel = (e) => {
 
   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) {  // 向下滚动
+    if (delta > 0 && currentSection < 3) {
       goToSection(currentSection + 1);
-    } else if (delta < 0 && currentSection > 0) {  // 向上滚动
+    } else if (delta < 0 && currentSection > 0) {
       goToSection(currentSection - 1);
     }
   }
@@ -167,6 +189,334 @@ watch(
             });
           }
         });
+
+        // 修改第三幕的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);
     }
   },
@@ -181,18 +531,18 @@ watch(
     </div>
     <div class="tabs">
       <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
-        首页
+        {{ t('home.nav.home') }}
       </div>
       <div class="tab-item" :class="{ active: currentTab === 'company' }" @click="handleTabClick('company')">
-        公司概况
+        {{ t('home.nav.company') }}
       </div>
       <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
-        业务介绍
+        {{ t('home.nav.business') }}
       </div>
     </div>
   </header>
   <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">
@@ -215,44 +565,191 @@ watch(
 
       </div>
       <div class="content">
-        <div class="text-[#10253E] text-[54px] leading-[80px]">FiEE携手文艺创作者</div>
-        <div class="text-[#10253E] text-[54px] leading-[80px]">启航全球影响力新征程</div>
+        <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">
-        <div class="text-[#8B59F7] text-[16px]">公司简介</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]">
-          作为一家深度扎根前沿科技领域的创新领航者，FiEE持续钻研
-          AI、大数据在文艺创作中的应用。凭借对文艺理念的深度剖析，以及对创作实践的深刻洞察，我们精准把握文艺发展脉络。怀着满腔热忱，整合各类技术与资源，为文艺创作者提供从灵感启发到作品推广的全方位赋能。
+          {{ t('home.section3.desc') }}
         </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" />
+          <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">
-      <div class="parallax-bg">FOUR</div>
-      <div class="content">
-        <!-- 添加你的内容 -->
+    <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;
@@ -267,7 +764,7 @@ watch(
   z-index: 3;
   left: 715px;
   width: 1px;
-  height: 100vh;
+  height: 100vw;
   background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
@@ -278,7 +775,7 @@ watch(
   z-index: 3;
   left: 950px;
   width: 1px;
-  height: 100vh;
+  height: 100vw;
   background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
@@ -289,7 +786,7 @@ watch(
   z-index: 3;
   left: 1186px;
   width: 1px;
-  height: 100vh;
+  height: 100vw;
   background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
@@ -368,6 +865,21 @@ watch(
   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;
 
@@ -406,12 +918,33 @@ watch(
 
 .content3 {
   position: relative;
-  z-index: 2;
+  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 {
@@ -443,4 +976,55 @@ watch(
     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>