diff --git a/src/assets/image/home/375/bg-1.png b/src/assets/image/home/375/bg-1.png
index 8f7782d..e1bbf66 100644
Binary files a/src/assets/image/home/375/bg-1.png and b/src/assets/image/home/375/bg-1.png differ
diff --git a/src/assets/image/home/375/zh-TW/carousel-1.png b/src/assets/image/home/375/zh-TW/carousel-1.png
new file mode 100644
index 0000000..e35cf88
Binary files /dev/null and b/src/assets/image/home/375/zh-TW/carousel-1.png differ
diff --git a/src/assets/image/home/375/tw/组 1713@2x (1).png b/src/assets/image/home/375/zh-TW/carousel-2.png
similarity index 100%
rename from src/assets/image/home/375/tw/组 1713@2x (1).png
rename to src/assets/image/home/375/zh-TW/carousel-2.png
diff --git a/src/assets/image/home/375/tw/组 1717@2x.png b/src/assets/image/home/375/zh-TW/carousel-3.png
similarity index 100%
rename from src/assets/image/home/375/tw/组 1717@2x.png
rename to src/assets/image/home/375/zh-TW/carousel-3.png
diff --git a/src/assets/image/home/375/tw/组 1720@2x (1).png b/src/assets/image/home/375/zh-TW/carousel-4.png
similarity index 100%
rename from src/assets/image/home/375/tw/组 1720@2x (1).png
rename to src/assets/image/home/375/zh-TW/carousel-4.png
diff --git a/src/assets/image/home/768/bg-1.png b/src/assets/image/home/768/bg-1.png
index 9a1cd5a..07a07ba 100644
Binary files a/src/assets/image/home/768/bg-1.png and b/src/assets/image/home/768/bg-1.png differ
diff --git a/src/assets/image/home/768/tw/carousel-1.png b/src/assets/image/home/768/zh-TW/carousel-1.png
similarity index 100%
rename from src/assets/image/home/768/tw/carousel-1.png
rename to src/assets/image/home/768/zh-TW/carousel-1.png
diff --git a/src/assets/image/home/768/tw/carousel-2.png b/src/assets/image/home/768/zh-TW/carousel-2.png
similarity index 100%
rename from src/assets/image/home/768/tw/carousel-2.png
rename to src/assets/image/home/768/zh-TW/carousel-2.png
diff --git a/src/assets/image/home/768/tw/carousel-3.png b/src/assets/image/home/768/zh-TW/carousel-3.png
similarity index 100%
rename from src/assets/image/home/768/tw/carousel-3.png
rename to src/assets/image/home/768/zh-TW/carousel-3.png
diff --git a/src/assets/image/home/768/tw/carousel-4.png b/src/assets/image/home/768/zh-TW/carousel-4.png
similarity index 100%
rename from src/assets/image/home/768/tw/carousel-4.png
rename to src/assets/image/home/768/zh-TW/carousel-4.png
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 01065f4..c23e544 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,35 +1,45 @@
 <template>
-   <header className="header">
-      <div class="logo">
-        <img src="@/assets/image/logo.png" alt="logo" />
+  <header className="header">
+    <div class="logo">
+      <img src="@/assets/image/logo.png" alt="logo" />
+    </div>
+    <div class="tabs">
+      <div
+        class="tab-item"
+        :class="{ active: currentTab === 'home' }"
+        @click="handleTabClick('home')"
+      >
+        {{ t("home.nav.home") }}
       </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 === 'companyprofil' }" @click="handleTabClick('companyprofil')">
-          {{ t('home.nav.company') }}
-        </div>
-        <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
-          {{ t('home.nav.business') }}
-        </div>
+      <div
+        class="tab-item"
+        :class="{ active: currentTab === 'companyprofil' }"
+        @click="handleTabClick('companyprofil')"
+      >
+        {{ t("home.nav.company") }}
       </div>
-    </header>
+      <div
+        class="tab-item"
+        :class="{ active: currentTab === 'businessintroduction' }"
+        @click="handleTabClick('businessintroduction')"
+      >
+        {{ t("home.nav.business") }}
+      </div>
+    </div>
+  </header>
 </template>
 <script setup>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
+import { useHome } from "@/store/home/index.js";
 import { useRouter } from "vue-router";
-import { useHome } from '@/store/home/index.js';
 const router = useRouter();
 const { currentTab } = useHome();
 const { t } = useI18n();
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
-  router.push('/'+tab);
-}
+  router.push("/" + tab);
+};
 </script>
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 655473e..6d1db79 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -21,7 +21,7 @@ function getBrowserLanguage() {
   }
   return 'en' // 默认中文，而不是英语
 }
-
+localStorage.setItem("language", "en");
 // 获取存储的语言或浏览器语言
 const savedLanguage  = 'ja'
 
diff --git a/src/locales/zh.js b/src/locales/zh.js
index d5825ec..869e97c 100644
--- a/src/locales/zh.js
+++ b/src/locales/zh.js
@@ -47,6 +47,8 @@ export default {
     section4: {
       label: '业务介绍',
       title: '多元业务协同，推动文艺影响力腾飞',
+      title1: '多元业务协同',
+      title2: '推动文艺影响力腾飞',
       desc: 'FiEE 专注为文艺创作者提供全球化推广与专业运营服务。通过精准定位、多平台联动，打破地域限制，让作品登上国际舞台。依托强大资源网络对接商业机遇，运用 AI与大数据精准营销，高效触达受众，助力创作者实现艺术与商业价值双突破。',
       cards1: {
         title: '全球花卉产业，适合国际艺术交流中心',
diff --git a/src/router/index.js b/src/router/index.js
index 900f1d5..3e043b7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,7 @@
 // router/index.js
 import { createRouter, createWebHistory } from 'vue-router';
+import { setupRouterGuards } from './router-guards';
+
 const routes = [
     {
         path: '/',
@@ -42,4 +44,5 @@ router.beforeEach((to, from, next) => {
     }
     next()
 });
+setupRouterGuards(router);
 export default router;
diff --git a/src/router/router-guards.js b/src/router/router-guards.js
new file mode 100644
index 0000000..5e5318d
--- /dev/null
+++ b/src/router/router-guards.js
@@ -0,0 +1,6 @@
+// router/router-guards.js
+export function setupRouterGuards (router) {
+    router.afterEach(() => {
+        window.scrollTo(0, 0);
+    });
+}
\ No newline at end of file
diff --git a/src/views/businessintroduction/size375/index.vue b/src/views/businessintroduction/size375/index.vue
index 70cd801..daea125 100644
--- a/src/views/businessintroduction/size375/index.vue
+++ b/src/views/businessintroduction/size375/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="page-container">
+    <n-divider class="divider1" vertical />
+    <n-divider class="divider5" vertical />
     <header className="header flex items-center justify-between">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
@@ -14,15 +16,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('company')"
+          :class="{ active: currentTab === 'companyprofil' }"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -74,7 +76,7 @@
               moveRefs[3].value = el;
             }
           "
-          class="absolute bottom-[-424px] right-[0px]"
+          class="absolute bottom-[-376px] right-[0px] z-4"
         >
           <img
             src="@/assets/image/businessintroduction/375/bg-2.png"
@@ -576,6 +578,7 @@
 </template>
 
 <script setup>
+import { NDivider } from "naive-ui";
 import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
@@ -670,8 +673,11 @@ onUnmounted(() => {
   }
 });
 
+import { useRouter } from "vue-router";
+const router = useRouter();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -720,9 +726,12 @@ const goToSection = (i) => {
   display: flex;
   gap: 128px;
   margin-right: 32px;
+  margin-left: 60px;
 }
 
 .tab-item {
+  display: flex;
+  align-items: center;
   font-size: 61px;
   color: #000000;
   cursor: pointer;
@@ -824,4 +833,19 @@ const goToSection = (i) => {
 .overflow-hidden {
   overflow: hidden;
 }
+.divider1 {
+  position: absolute;
+  z-index: 3;
+  left: 64px;
+  width: 1px;
+  height: 100%;
+}
+
+.divider5 {
+  position: absolute;
+  z-index: 3;
+  right: 60px;
+  width: 1px;
+  height: 100%;
+}
 </style>
diff --git a/src/views/businessintroduction/size768/index.vue b/src/views/businessintroduction/size768/index.vue
index c3f180e..6bc4fbb 100644
--- a/src/views/businessintroduction/size768/index.vue
+++ b/src/views/businessintroduction/size768/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="page-container">
+    <n-divider class="divider1" vertical />
+    <n-divider class="divider5" vertical />
     <header className="header flex items-center justify-between">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
@@ -14,15 +16,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('company')"
+          :class="{ active: currentTab === 'companyprofil' }"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -68,7 +70,7 @@
               moveRefs[3].value = el;
             }
           "
-          class="absolute bottom-[-290px] right-[0px]"
+          class="absolute bottom-[-290px] right-[0px] z-4"
         >
           <img
             src="@/assets/image/businessintroduction/768/bg-2.png"
@@ -86,7 +88,7 @@
       <section class="section-sec relative">
         <div class="flex flex-wrap justify-center pt-[400px] pb-[270px]">
           <div class="w-full px-[188px]">
-            <div class="text-[#8B59F7] text-[40px] font-medium">行业现状</div>
+            <div class="text-[#8B59F7] text-[40px] font-semibold">行业现状</div>
           </div>
           <div class="w-full title mt-[58px] px-[188px]">
             <div>文创遇阻</div>
@@ -107,7 +109,7 @@
           </div>
 
           <div
-            class="w-full mt-[160px] px-[188px] font-medium text-[55px] text-[#8B59F7]"
+            class="w-full mt-[160px] px-[188px] font-semibold text-[55px] text-[#8B59F7]"
           >
             <div>文艺市场困局</div>
           </div>
@@ -120,7 +122,7 @@
               "
               class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
             >
-              <div class="font-medium">
+              <div class="font-semibold">
                 <img
                   class="w-[40px] h-[40px] mr-[25px]"
                   src="@/assets/image/businessintroduction/768/icon-y.png"
@@ -140,7 +142,7 @@
               "
               class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
             >
-              <div class="font-medium">
+              <div class="font-semibold">
                 <img
                   class="w-[40px] h-[40px] mr-[25px]"
                   src="@/assets/image/businessintroduction/768/icon-y.png"
@@ -160,7 +162,7 @@
               "
               class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
             >
-              <div class="font-medium">
+              <div class="font-semibold">
                 <img
                   class="w-[40px] h-[40px] mr-[25px]"
                   src="@/assets/image/businessintroduction/768/icon-y.png"
@@ -180,7 +182,7 @@
               "
               class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
             >
-              <div class="font-medium">
+              <div class="font-semibold">
                 <img
                   class="w-[40px] h-[40px] mr-[25px]"
                   src="@/assets/image/businessintroduction/768/icon-y.png"
@@ -199,7 +201,7 @@
                 moveRefs[9].value = el;
               }
             "
-            class="w-full mt-[160px] px-[188px] font-medium text-[55px] text-[#8B59F7]"
+            class="w-full mt-[160px] px-[188px] font-semibold text-[55px] text-[#8B59F7]"
           >
             <div>短视频自媒体：澎湃新势，蕴蓄无垠商机</div>
           </div>
@@ -222,7 +224,7 @@
       <section class="relative" style="background: #fff">
         <div class="flex flex-wrap justify-center">
           <div class="w-full px-[188px] mt-[113px]">
-            <div class="text-[#8B59F7] text-[40px] font-medium">业务模式</div>
+            <div class="text-[#8B59F7] text-[40px] font-semibold">业务模式</div>
           </div>
           <div class="w-full title mt-[58px] px-[188px]">
             <div>科技赋能</div>
@@ -247,7 +249,7 @@
             />
 
             <div
-              class="w-full mt-[50px] text-[#10253E] text-[45px] font-medium"
+              class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
             >
               精准分发 开启粉丝增长引擎
             </div>
@@ -270,7 +272,7 @@
             />
 
             <div
-              class="w-full mt-[50px] text-[#10253E] text-[45px] font-medium"
+              class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
             >
               多元变现 激活商业价值链条
             </div>
@@ -292,7 +294,7 @@
             />
 
             <div
-              class="w-full mt-[50px] text-[#10253E] text-[45px] font-medium"
+              class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
             >
               互动共享 构建艺术生态闭环
             </div>
@@ -332,7 +334,7 @@
           </div>
 
           <div
-            class="w-full mt-[160px] px-[188px] font-medium text-[55px] text-[#8B59F7]"
+            class="w-full mt-[160px] px-[188px] font-semibold text-[55px] text-[#8B59F7]"
           >
             <div>构建十亿流量社群，搭建全球文艺交流高地</div>
           </div>
@@ -366,7 +368,7 @@
 
       <section class="section-five h-[3195px] pt-[215px] relative">
         <div class="w-full px-[188px]">
-          <div class="text-[#fff] text-[55px] font-medium">
+          <div class="text-[#fff] text-[55px] font-semibold">
             全球合作拓展，绘制多元融合版图
           </div>
         </div>
@@ -412,7 +414,7 @@
           </div>
         </div>
 
-        <div class="absolute bottom-[262px] right-[0px]">
+        <div class="absolute bottom-[262px] right-[0px] z-4">
           <img
             src="@/assets/image/businessintroduction/768/bg-5.png"
             class="h-[361px]"
@@ -422,10 +424,10 @@
       <section>
         <div class="flex flex-wrap justify-center">
           <div class="w-full px-[188px] mt-[10px]">
-            <div class="text-[#8B59F7] text-[55px] font-medium">
+            <div class="text-[#8B59F7] text-[55px] font-semibold">
               18个月孵化0基础艺术KOL
             </div>
-            <div class="text-[#8B59F7] text-[55px] font-medium">
+            <div class="text-[#8B59F7] text-[55px] font-semibold">
               释放文艺商业潜能
             </div>
           </div>
@@ -464,7 +466,7 @@
                 />
               </div>
               <div
-                class="w-full font-medium mt-[50px] text-[#10253E] text-[45px]"
+                class="w-full font-semibold mt-[50px] text-[#10253E] text-[45px]"
               >
                 粉丝增长
               </div>
@@ -490,7 +492,7 @@
               </div>
 
               <div
-                class="w-full font-medium mt-[50px] text-[#10253E] text-[45px]"
+                class="w-full font-semibold mt-[50px] text-[#10253E] text-[45px]"
               >
                 KOL孵化
               </div>
@@ -513,7 +515,7 @@
             "
             class="w-full px-[188px] mt-[218px]"
           >
-            <div class="text-[#8B59F7] text-[55px] font-medium">
+            <div class="text-[#8B59F7] text-[55px] font-semibold">
               曝光量突破，塑造全球品牌影响力
             </div>
           </div>
@@ -531,7 +533,7 @@
             </div>
           </div>
           <div
-            class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
+            class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px] z-4"
           >
             <div ref="carouselTrack" class="carousel-track">
               <div
@@ -567,6 +569,7 @@
 </template>
 
 <script setup>
+import { NDivider } from "naive-ui";
 import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
@@ -655,7 +658,7 @@ onMounted(() => {
         });
       }
     });
-    console.log(moveRefs.value);
+
     // 初始化轮播动画
     nextTick(() => {
       if (carouselTrack.value) {
@@ -694,8 +697,11 @@ onUnmounted(() => {
   }
 });
 
+import { useRouter } from "vue-router";
+const router = useRouter();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -853,4 +859,21 @@ const goToSection = (i) => {
 .overflow-hidden {
   overflow: hidden;
 }
+.divider1 {
+  position: absolute;
+  z-index: 3;
+  color: #eff1f6;
+  left: 142px;
+  width: 1px;
+  height: 100%;
+}
+
+.divider5 {
+  position: absolute;
+  z-index: 3;
+  color: #eff1f6;
+  right: 142px;
+  width: 1px;
+  height: 100%;
+}
 </style>
diff --git a/src/views/companyprofil/size1920/index.vue b/src/views/companyprofil/size1920/index.vue
index ac35bb9..dd54cf4 100644
--- a/src/views/companyprofil/size1920/index.vue
+++ b/src/views/companyprofil/size1920/index.vue
@@ -18,8 +18,7 @@ import { NDivider } from "naive-ui";
 gsap.registerPlugin(ScrollTrigger);
 const { currentTab } = useHome();
 const router = useRouter();
-const { transitionState } =
-  useTransitionComposable();
+const { transitionState } = useTransitionComposable();
 const main = ref();
 let ctx;
 const { t } = useI18n();
@@ -28,65 +27,54 @@ const handleTabClick = (tab) => {
   router.push("/" + tab);
 };
 watch(
-  [
-    () =>
-      transitionState.transitionComplete,
-    main,
-  ],
+  [() => transitionState.transitionComplete, main],
   (newValue) => {
     if (newValue && main.value) {
       ctx = gsap.context((self) => {
         // Text animations from left
-        gsap.utils
-          .toArray(".text-animate")
-          .forEach((text) => {
-            gsap.from(text, {
-              x: -100,
-              opacity: 0,
-              duration: 1,
-              scrollTrigger: {
-                trigger: text,
-                start: "top 80%",
-                end: "top 50%",
-                toggleActions:
-                  "play none none reverse",
-              },
-            });
+        gsap.utils.toArray(".text-animate").forEach((text) => {
+          gsap.from(text, {
+            x: -100,
+            opacity: 0,
+            duration: 1,
+            scrollTrigger: {
+              trigger: text,
+              start: "top 80%",
+              end: "top 50%",
+              toggleActions: "play none none reverse",
+            },
           });
+        });
 
         // Image animations from right
-        gsap.utils
-          .toArray(".image-animate")
-          .forEach((image) => {
-            gsap.from(image, {
-              x: 100,
-              opacity: 0,
-              duration: 1,
-              scrollTrigger: {
-                trigger: image,
-                start: "top 80%",
-                end: "top 50%",
-                toggleActions:
-                  "play none none reverse",
-              },
-            });
+        gsap.utils.toArray(".image-animate").forEach((image) => {
+          gsap.from(image, {
+            x: 100,
+            opacity: 0,
+            duration: 1,
+            scrollTrigger: {
+              trigger: image,
+              start: "top 80%",
+              end: "top 50%",
+              toggleActions: "play none none reverse",
+            },
           });
+        });
 
         // 轮播卡片上升动画
-        gsap.from('.carousel-item', {
+        gsap.from(".carousel-item", {
           y: 100,
           opacity: 0,
           duration: 1.5,
           stagger: 0.4,
           scrollTrigger: {
-            trigger: '.carousel-container',
-            start: 'top 70%',
-            end: 'top 30%',
+            trigger: ".carousel-container",
+            start: "top 70%",
+            end: "top 30%",
             scrub: 2,
-            toggleActions: 'restart pause reverse pause',
-          }
+            toggleActions: "restart pause reverse pause",
+          },
         });
-
       }, main.value);
     }
   },
@@ -144,8 +132,9 @@ const handleDragMove = (e) => {
   const walk = startX.value - x;
 
   if (carouselTrack.value) {
-    carouselTrack.value.style.transform = `translateX(-${scrollLeft.value + walk
-      }px)`;
+    carouselTrack.value.style.transform = `translateX(-${
+      scrollLeft.value + walk
+    }px)`;
   }
 };
 
@@ -193,28 +182,28 @@ import carouselShow5 from "@/assets/image/companyprofil/768/carouselShow-5.png";
 const state = reactive({
   marqueeArr: [
     {
-      title: t('companyprofil.news.carousel.item1.title'),
-      subTitle: t('companyprofil.news.carousel.item1.desc'),
+      title: t("companyprofil.news.carousel.item1.title"),
+      subTitle: t("companyprofil.news.carousel.item1.desc"),
       imgUrl: carouselShow1,
     },
     {
-      title: t('companyprofil.news.carousel.item2.title'),
-      subTitle: t('companyprofil.news.carousel.item2.desc'),
+      title: t("companyprofil.news.carousel.item2.title"),
+      subTitle: t("companyprofil.news.carousel.item2.desc"),
       imgUrl: carouselShow2,
     },
     {
-      title: t('companyprofil.news.carousel.item3.title'),
-      subTitle: t('companyprofil.news.carousel.item3.desc'),
+      title: t("companyprofil.news.carousel.item3.title"),
+      subTitle: t("companyprofil.news.carousel.item3.desc"),
       imgUrl: carouselShow3,
     },
     {
-      title: t('companyprofil.news.carousel.item4.title'),
-      subTitle: t('companyprofil.news.carousel.item4.desc'),
+      title: t("companyprofil.news.carousel.item4.title"),
+      subTitle: t("companyprofil.news.carousel.item4.desc"),
       imgUrl: carouselShow4,
     },
     {
-      title: t('companyprofil.news.carousel.item5.title'),
-      subTitle: t('companyprofil.news.carousel.item5.desc'),
+      title: t("companyprofil.news.carousel.item5.title"),
+      subTitle: t("companyprofil.news.carousel.item5.desc"),
       imgUrl: carouselShow5,
     },
   ],
@@ -256,7 +245,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo,
       },
     });
   }
@@ -275,20 +264,22 @@ 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')"
+      >
         {{ t("home.nav.home") }}
       </div>
-      <div class="tab-item" :class="{
-        active:
-          currentTab ===
-          'companyprofil',
-      }" @click="
-        handleTabClick(
-          'companyprofil'
-        )
-        ">
+      <div
+        class="tab-item"
+        :class="{
+          active: currentTab === 'companyprofil',
+        }"
+        @click="handleTabClick('companyprofil')"
+      >
         {{ t("home.nav.company") }}
       </div>
       <div class="tab-item" :class="{
@@ -305,14 +296,20 @@ onUnmounted(() => {
     <div class="head relative">
       <img src="@/assets/image/gk.png" alt="head" />
 
-      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
-        {{ t('companyprofil.slogan.title1') }}
+      <div
+        class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate"
+      >
+        {{ t("companyprofil.slogan.title1") }}
       </div>
-      <div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate">
-        {{ t('companyprofil.slogan.title2') }}
+      <div
+        class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate"
+      >
+        {{ t("companyprofil.slogan.title2") }}
       </div>
-      <div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
-        {{ t('companyprofil.slogan.desc') }}
+      <div
+        class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate"
+      >
+        {{ t("companyprofil.slogan.desc") }}
       </div>
     </div>
     <n-divider class="divider1" vertical />
@@ -321,164 +318,252 @@ onUnmounted(() => {
     <div class="divider4" style=""></div>
     <n-divider class="divider5" vertical />
     <div class="bg-[#F8F9FF]">
-      <div class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col">
-        <div class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate">
-          {{ t('companyprofil.intro.label') }}
+      <div
+        class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col"
+      >
+        <div
+          class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate"
+        >
+          {{ t("companyprofil.intro.label") }}
         </div>
         <div class="pl-[505px] pr-[480px] flex">
           <div class="w-[411px] mr-[38px] text-animate">
             <div class="text-[#10253E] text-[40px]">
-              {{ t('companyprofil.intro.title1') }}
+              {{ t("companyprofil.intro.title1") }}
             </div>
             <div class="text-[#10253E] text-[40px]">
-              {{ t('companyprofil.intro.title2') }}
+              {{ t("companyprofil.intro.title2") }}
             </div>
             <div class="text-[#455363] text-[16px] mt-[56px]">
-              {{ t('companyprofil.intro.desc') }}
+              {{ t("companyprofil.intro.desc") }}
             </div>
           </div>
 
           <div class="text-[#10253E] text-[20px] image-animate">
-            <img class="w-[465px] h-[415px]" src="@/assets/image/ship.png" alt="company" />
+            <img
+              class="w-[465px] h-[415px]"
+              src="@/assets/image/ship.png"
+              alt="company"
+            />
           </div>
         </div>
       </div>
-      <div class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]">
-        <div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate">
-          {{ t('companyprofil.team.label') }}
+      <div
+        class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]"
+      >
+        <div
+          class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate"
+        >
+          {{ t("companyprofil.team.label") }}
         </div>
         <div class="pl-[505px] pr-[490px] flex z-3">
           <div class="w-[412px] mr-[40px] text-animate">
             <div class="text-[#10253E] text-[40px]">
-              {{ t('companyprofil.team.title1') }}
+              {{ t("companyprofil.team.title1") }}
             </div>
             <div class="text-[#10253E] text-[40px]">
-              {{ t('companyprofil.team.title2') }}
+              {{ t("companyprofil.team.title2") }}
             </div>
             <div class="mt-[93px]">
-              <img class="w-[58px] h-[58px]" src="@/assets/image/cl.png" alt="cl" />
-              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
-                <n-divider class="absolute left-[-23px] top-[6px]" style="
-                    background-color: #8b59f7;
-                  " vertical />{{ t('companyprofil.team.features.global.title') }}
+              <img
+                class="w-[58px] h-[58px]"
+                src="@/assets/image/cl.png"
+                alt="cl"
+              />
+              <div
+                class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"
+              >
+                <n-divider
+                  class="absolute left-[-23px] top-[6px]"
+                  style="background-color: #8b59f7"
+                  vertical
+                />{{ t("companyprofil.team.features.global.title") }}
               </div>
               <div class="text-[#455363] text-[16px]">
-                {{ t('companyprofil.team.features.global.desc') }}
+                {{ t("companyprofil.team.features.global.desc") }}
               </div>
             </div>
             <div class="mt-[68px]">
-              <img class="w-[58px] h-[50px]" src="@/assets/image/heart.png" alt="cl" />
-              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
-                <n-divider class="absolute left-[-23px] top-[6px]" style="
-                    background-color: #8b59f7;
-                  " vertical />{{ t('companyprofil.team.features.fans.title') }}
+              <img
+                class="w-[58px] h-[50px]"
+                src="@/assets/image/heart.png"
+                alt="cl"
+              />
+              <div
+                class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"
+              >
+                <n-divider
+                  class="absolute left-[-23px] top-[6px]"
+                  style="background-color: #8b59f7"
+                  vertical
+                />{{ t("companyprofil.team.features.fans.title") }}
               </div>
               <div class="text-[#455363] text-[16px]">
-                {{ t('companyprofil.team.features.fans.desc') }}
+                {{ t("companyprofil.team.features.fans.desc") }}
               </div>
             </div>
             <div class="mt-[65px]">
-              <img class="w-[54px] h-[52px]" src="@/assets/image/3p.png" alt="cl" />
-              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
-                <n-divider class="absolute left-[-23px] top-[6px]" style="
-                    background-color: #8b59f7;
-                  " vertical />{{ t('companyprofil.team.features.talent.title') }}
+              <img
+                class="w-[54px] h-[52px]"
+                src="@/assets/image/3p.png"
+                alt="cl"
+              />
+              <div
+                class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"
+              >
+                <n-divider
+                  class="absolute left-[-23px] top-[6px]"
+                  style="background-color: #8b59f7"
+                  vertical
+                />{{ t("companyprofil.team.features.talent.title") }}
               </div>
               <div class="text-[#455363] text-[16px]">
-                {{ t('companyprofil.team.features.talent.desc') }}
+                {{ t("companyprofil.team.features.talent.desc") }}
               </div>
             </div>
           </div>
 
           <div class="text-[#455363] text-[16px] flex-1 image-animate">
             <div>
-              {{ t('companyprofil.team.desc') }}
+              {{ t("companyprofil.team.desc") }}
             </div>
-            <img class="w-[465px] h-[625px] mt-[80px]" src="@/assets/image/randg.png" alt="cl" />
+            <img
+              class="w-[465px] h-[625px] mt-[80px]"
+              src="@/assets/image/randg.png"
+              alt="cl"
+            />
           </div>
         </div>
       </div>
-      <div class="content3 relative bg-[#fff] pt-[185px] pb-[158px] overflow-hidden">
+      <div
+        class="content3 relative bg-[#fff] pt-[185px] pb-[158px] overflow-hidden"
+      >
         <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 />
-        <img class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px] image-animate " src="@/assets/image/xlv.png"
-          alt="cl" />
+        <img
+          class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px] image-animate"
+          src="@/assets/image/xlv.png"
+          alt="cl"
+        />
         <img class="absolute" src="@/assets/image/xbg.png" alt="cl" />
-        <div class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate">
+        <div
+          class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate"
+        >
           <div class="text-[#8B59F7] text-[16px]">
-            {{ t('companyprofil.achievement.label') }}
+            {{ t("companyprofil.achievement.label") }}
           </div>
           <div class="text-[#10253E] text-[40px]">
-            {{ t('companyprofil.achievement.title') }}
+            {{ t("companyprofil.achievement.title") }}
           </div>
           <div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
-            {{ t('companyprofil.achievement.desc') }}
+            {{ t("companyprofil.achievement.desc") }}
           </div>
         </div>
         <div class="relative pl-[505px] pr-[490px] flex z-4 mt-[100px]">
-          <div class="w-[419px] mr-[30px] flex flex-col justify-center text-animate">
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title1') }}</div>
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title2') }}</div>
+          <div
+            class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
+          >
+            <div class="text-[#10253E] text-[22px]">
+              {{ t("companyprofil.achievement.certification.title1") }}
+            </div>
+            <div class="text-[#10253E] text-[22px]">
+              {{ t("companyprofil.achievement.certification.title2") }}
+            </div>
             <div class="text-[#455363] text-[16px] mt-[30px]">
-              {{ t('companyprofil.achievement.certification.desc') }}
+              {{ t("companyprofil.achievement.certification.desc") }}
             </div>
           </div>
           <div class="flex image-animate">
-            <img class="w-[465px] h-[493px]" src="@/assets/image/btable.png" alt="cl" />
+            <img
+              class="w-[465px] h-[493px]"
+              src="@/assets/image/btable.png"
+              alt="cl"
+            />
           </div>
         </div>
         <div class="relative pl-[505px] pr-[490px] flex z-4 mt-[85px]">
-          <div class="w-[419px] mr-[30px] flex flex-col justify-center text-animate">
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title1') }}</div>
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title2') }}</div>
+          <div
+            class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
+          >
+            <div class="text-[#10253E] text-[22px]">
+              {{ t("companyprofil.achievement.platform.title1") }}
+            </div>
+            <div class="text-[#10253E] text-[22px]">
+              {{ t("companyprofil.achievement.platform.title2") }}
+            </div>
             <div class="text-[#455363] text-[16px] mt-[30px]">
-              {{ t('companyprofil.achievement.platform.desc') }}
+              {{ t("companyprofil.achievement.platform.desc") }}
             </div>
           </div>
           <div class="flex image-animate">
-            <img class="w-[465px] h-[369px]" src="@/assets/image/huang.png" alt="cl" />
+            <img
+              class="w-[465px] h-[369px]"
+              src="@/assets/image/huang.png"
+              alt="cl"
+            />
           </div>
         </div>
       </div>
-      <div class="content4 relative bg-[#fff]  overflow-hidden">
+      <div class="content4 relative bg-[#fff] overflow-hidden">
         <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="relative pl-[505px] pr-[490px] flex z-3 mt-[130px] z-4 flex-col text-animate">
+        <div
+          class="relative pl-[505px] pr-[490px] flex z-3 mt-[130px] z-4 flex-col text-animate"
+        >
           <div class="text-[#8B59F7] text-[16px]">
-            {{ t('companyprofil.news.label') }}
+            {{ t("companyprofil.news.label") }}
           </div>
           <div class="text-[#10253E] text-[40px]">
-            {{ t('companyprofil.news.title') }}
+            {{ t("companyprofil.news.title") }}
           </div>
           <div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
-            {{ t('companyprofil.news.desc') }}
+            {{ t("companyprofil.news.desc") }}
           </div>
           <div class="w-full mt-[56px] flex flex-wrap justify-end">
             <div class="flex flex-wrap mr-[20px]">
               <div class="arrow-btn" @click="handlePrev">
-                <img class="w-[38px] h-[38px]" src="@/assets/image/companyprofil/768/icon-left.png" />
+                <img
+                  class="w-[38px] h-[38px]"
+                  src="@/assets/image/companyprofil/768/icon-left.png"
+                />
               </div>
               <div class="arrow-btn ml-[25px]" @click="handleNext">
-                <img class="w-[38px] h-[38px]" src="@/assets/image/companyprofil/768/icon-right.png" />
+                <img
+                  class="w-[38px] h-[38px]"
+                  src="@/assets/image/companyprofil/768/icon-right.png"
+                />
               </div>
             </div>
           </div>
         </div>
 
         <div class="pt-[73px] pb-[103px] carousel-container px-[495px] z-14">
-          <div ref="carouselTrack" class="carousel-track " :style="{
-            transform: `translateX(-${getSlideOffset()}px)`,
-          }" @mousedown="handleDragStart" @mousemove="handleDragMove" @mouseup="handleDragEnd"
-            @mouseleave="handleDragEnd" @touchstart="handleDragStart" @touchmove="handleDragMove"
-            @touchend="handleDragEnd">
-            <div v-for="(item, idx) in getVisibleItems()" :key="idx" class="carousel-item cursor-pointer"
-              @click="handleCarouselClick(item, $event)">
+          <div
+            ref="carouselTrack"
+            class="carousel-track"
+            :style="{
+              transform: `translateX(-${getSlideOffset()}px)`,
+            }"
+            @mousedown="handleDragStart"
+            @mousemove="handleDragMove"
+            @mouseup="handleDragEnd"
+            @mouseleave="handleDragEnd"
+            @touchstart="handleDragStart"
+            @touchmove="handleDragMove"
+            @touchend="handleDragEnd"
+          >
+            <div
+              v-for="(item, idx) in getVisibleItems()"
+              :key="idx"
+              class="carousel-item cursor-pointer"
+              @click="handleCarouselClick(item, $event)"
+            >
               <img class="carousel-image" :src="item.imgUrl" />
               <div class="carousel-content">
                 <div class="carousel-title">
@@ -577,9 +662,7 @@ onUnmounted(() => {
   left: 720px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom,
-      #e6eaee 50%,
-      transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -590,9 +673,7 @@ onUnmounted(() => {
   left: 952px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom,
-      #e6eaee 50%,
-      transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -603,9 +684,7 @@ onUnmounted(() => {
   left: 1182px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom,
-      #e6eaee 50%,
-      transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
diff --git a/src/views/companyprofil/size375/index.vue b/src/views/companyprofil/size375/index.vue
index a823789..cb6b3ea 100644
--- a/src/views/companyprofil/size375/index.vue
+++ b/src/views/companyprofil/size375/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="page-container">
+    <n-divider class="divider1" vertical />
+    <n-divider class="divider5" vertical />
     <header className="header flex items-center justify-between">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
@@ -14,15 +16,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('company')"
+          :class="{ active: currentTab === 'companyprofil' }"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -60,7 +62,7 @@
             src="@/assets/image/companyprofil/375/image-q.png"
           />
         </div>
-        <div class="w-[1920px] absolute bottom-[-160px]">
+        <div class="w-[1920px] absolute bottom-[-160px] z-4">
           <img
             src="@/assets/image/companyprofil/375/icon-lang.png"
             alt="logo"
@@ -204,7 +206,7 @@
             </div>
           </div>
 
-          <div class="icon-langmul">
+          <div class="icon-langmul z-4">
             <img
               class="w-[1205px]"
               src="@/assets/image/companyprofil/375/icon-langmul.png"
@@ -415,6 +417,7 @@
 </template>
 
 <script setup>
+import { NDivider } from "naive-ui";
 import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
@@ -447,12 +450,14 @@ import carouselShow5 from "@/assets/image/companyprofil/375/carouselShow-5.png";
 const state = reactive({
   marqueeArr: [
     {
+      titleNo: "1",
       title: "实现技术突破，引领文艺创作技术革新",
       subTitle:
         "在数字化浪潮以前所未有的态势席卷文艺领域的当下，文艺创作正经历着深刻变革。FiEE凭借着团队持之以恒的努力与创新精神，在文艺创作技术领域取得了具有里程碑意义的重大突破。 历经无数个日夜的艰苦攻坚，FiEE自主研发的新一代智能创作辅助系统正式上线，宛如一颗冉冉升起的璀璨新星，为文艺创作开辟了全新的发展路径，给整个行业带来了前所未有的变革与机遇。",
       imgUrl: carouselShow1,
     },
     {
+      titleNo: "2",
       title:
         "全球化战略升级，FiEE与30+国际平台达成战略合作，构建文艺传播新矩阵",
       subTitle:
@@ -461,12 +466,14 @@ const state = reactive({
       imgUrl: carouselShow2,
     },
     {
+      titleNo: "3",
       title: "助力文艺创作者，FiEE 发布'AI × 短视频'全链路解决方案",
       subTitle:
         "对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。 作品完成后的传播与推广，同样是一道难以跨越的鸿沟。",
       imgUrl: carouselShow3,
     },
     {
+      titleNo: "4",
       title: "FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星",
       subTitle:
         "在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。 今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL 孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。",
@@ -474,6 +481,7 @@ const state = reactive({
       imgUrl: carouselShow4,
     },
     {
+      titleNo: "5",
       title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
       subTitle:
         "在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
@@ -482,7 +490,6 @@ const state = reactive({
     },
   ],
 });
-
 const carouselTrack = ref(null);
 const currentIndex = ref(0);
 const isTransitioning = ref(false);
@@ -585,6 +592,7 @@ onUnmounted(() => {
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -727,7 +735,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo,
       },
     });
   }
@@ -763,9 +771,12 @@ const handleCarouselClick = (item, event) => {
   display: flex;
   gap: 128px;
   margin-right: 32px;
+  margin-left: 60px;
 }
 
 .tab-item {
+  display: flex;
+  align-items: center;
   font-size: 61px;
   color: #000000;
   cursor: pointer;
@@ -876,4 +887,19 @@ const handleCarouselClick = (item, event) => {
 .overflow-hidden {
   overflow: hidden;
 }
+.divider1 {
+  position: absolute;
+  z-index: 3;
+  left: 64px;
+  width: 1px;
+  height: 100%;
+}
+
+.divider5 {
+  position: absolute;
+  z-index: 3;
+  right: 60px;
+  width: 1px;
+  height: 100%;
+}
 </style>
diff --git a/src/views/companyprofil/size768/index.vue b/src/views/companyprofil/size768/index.vue
index 669fa6d..f57bca8 100644
--- a/src/views/companyprofil/size768/index.vue
+++ b/src/views/companyprofil/size768/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="page-container">
+    <n-divider class="divider1" vertical />
+    <n-divider class="divider5" vertical />
     <header className="header flex items-center justify-between">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
@@ -14,15 +16,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('company')"
+          :class="{ active: currentTab === 'companyprofil' }"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -62,7 +64,7 @@
             />
           </div>
         </div>
-        <div class="w-[1920px] absolute bottom-[-660px]">
+        <div class="w-[1920px] absolute bottom-[-660px] z-4">
           <img
             src="@/assets/image/companyprofil/768/icon-lang.png"
             alt="logo"
@@ -161,7 +163,9 @@
               src="@/assets/image/companyprofil/768/icon-lun.png"
             />
 
-            <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
+            <div
+              class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
+            >
               纵横全球 多元领航
             </div>
             <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
@@ -175,7 +179,9 @@
               src="@/assets/image/companyprofil/768/icon-love.png"
             />
 
-            <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
+            <div
+              class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
+            >
               深耕粉丝 构筑生态
             </div>
             <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
@@ -188,7 +194,9 @@
               src="@/assets/image/companyprofil/768/icon-p.png"
             />
 
-            <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
+            <div
+              class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
+            >
               广纳贤才 团队进阶
             </div>
             <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
@@ -196,7 +204,7 @@
             </div>
           </div>
 
-          <div class="icon-langmul">
+          <div class="icon-langmul z-4">
             <img
               class="w-[846px] h-[216px]"
               src="@/assets/image/companyprofil/768/icon-langmul.png"
@@ -355,7 +363,7 @@
             </div>
           </div>
           <div
-            class="mt-[73px] mb-[253px] carousel-container px-[80px] py-[40px]"
+            class="mt-[73px] mb-[253px] carousel-container px-[80px] py-[40px] z-4"
           >
             <div
               ref="carouselTrack"
@@ -407,6 +415,7 @@
 </template>
 
 <script setup>
+import { NDivider } from "naive-ui";
 import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
@@ -439,12 +448,14 @@ import carouselShow5 from "@/assets/image/companyprofil/768/carouselShow-5.png";
 const state = reactive({
   marqueeArr: [
     {
+      titleNo: "1",
       title: "实现技术突破，引领文艺创作技术革新",
       subTitle:
         "在数字化浪潮以前所未有的态势席卷文艺领域的当下，文艺创作正经历着深刻变革。FiEE凭借着团队持之以恒的努力与创新精神，在文艺创作技术领域取得了具有里程碑意义的重大突破。 历经无数个日夜的艰苦攻坚，FiEE自主研发的新一代智能创作辅助系统正式上线，宛如一颗冉冉升起的璀璨新星，为文艺创作开辟了全新的发展路径，给整个行业带来了前所未有的变革与机遇。",
       imgUrl: carouselShow1,
     },
     {
+      titleNo: "2",
       title:
         "全球化战略升级，FiEE与30+国际平台达成战略合作，构建文艺传播新矩阵",
       subTitle:
@@ -453,12 +464,14 @@ const state = reactive({
       imgUrl: carouselShow2,
     },
     {
+      titleNo: "3",
       title: "助力文艺创作者，FiEE 发布'AI × 短视频'全链路解决方案",
       subTitle:
         "对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。 作品完成后的传播与推广，同样是一道难以跨越的鸿沟。",
       imgUrl: carouselShow3,
     },
     {
+      titleNo: "4",
       title: "FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星",
       subTitle:
         "在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。 今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL 孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。",
@@ -466,6 +479,7 @@ const state = reactive({
       imgUrl: carouselShow4,
     },
     {
+      titleNo: "5",
       title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
       subTitle:
         "在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
@@ -577,6 +591,7 @@ onUnmounted(() => {
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -719,7 +734,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo,
       },
     });
   }
@@ -866,4 +881,21 @@ const handleCarouselClick = (item, event) => {
 .overflow-hidden {
   overflow: hidden;
 }
+.divider1 {
+  position: absolute;
+  z-index: 3;
+  color: #eff1f6;
+  left: 142px;
+  width: 1px;
+  height: 100%;
+}
+
+.divider5 {
+  position: absolute;
+  z-index: 3;
+  color: #eff1f6;
+  right: 142px;
+  width: 1px;
+  height: 100%;
+}
 </style>
diff --git a/src/views/companyprofildetail/size375/index.vue b/src/views/companyprofildetail/size375/index.vue
index 09025bf..2614f2c 100644
--- a/src/views/companyprofildetail/size375/index.vue
+++ b/src/views/companyprofildetail/size375/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="page-container">
+    <n-divider class="divider1" vertical />
+    <n-divider class="divider5" vertical />
     <header className="header flex items-center justify-between">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
@@ -14,15 +16,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('company')"
+          :class="{ active: currentTab === 'companyprofil' }"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -31,7 +33,7 @@
     <main>
       <section
         className="section-first"
-        v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
+        v-if="state.pageTitleNo === '1'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -88,7 +90,7 @@
 
       <section
         className="section-sec"
-        v-if="state.pageTitle.includes('全球化战略升级')"
+        v-if="state.pageTitleNo === '2'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -152,7 +154,7 @@
 
       <section
         className="section-third"
-        v-if="state.pageTitle.includes('助力文艺创作者')"
+        v-if="state.pageTitleNo === '3'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -219,7 +221,7 @@
 
       <section
         className="section-four"
-        v-if="state.pageTitle.includes('培育文艺领域明日之星')"
+        v-if="state.pageTitleNo === '4'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -282,7 +284,7 @@
 
       <section
         className="section-five"
-        v-if="state.pageTitle.includes('多元人才汇聚')"
+        v-if="state.pageTitleNo === '5'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -354,6 +356,7 @@
 </template>
 
 <script setup>
+import { NDivider } from "naive-ui";
 import {
   onUnmounted,
   ref,
@@ -363,18 +366,25 @@ import {
   onBeforeMount,
 } from "vue";
 import { useHome } from "@/store/home/index.js";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+
 const state = reactive({
-  pageTitle: "",
+  pageTitleNo: "",
 });
 
 const { currentTab } = useHome();
+const router = useRouter();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitle = route.query.title;
+  state.pageTitleNo = route.query.titleNo;
 });
 onMounted(() => {});
 onUnmounted(() => {});
+
+const handleTabClick = (tab) => {
+  currentTab.value = tab;
+  router.push("/" + tab);
+};
 </script>
 
 <style scoped lang="scss">
@@ -436,4 +446,19 @@ onUnmounted(() => {});
   text-indent: 2em; // Adjust the value as needed for the desired indent
   line-height: 143px;
 }
+.divider1 {
+  position: absolute;
+  z-index: 3;
+  left: 64px;
+  width: 1px;
+  height: 100%;
+}
+
+.divider5 {
+  position: absolute;
+  z-index: 3;
+  right: 60px;
+  width: 1px;
+  height: 100%;
+}
 </style>
diff --git a/src/views/companyprofildetail/size768/index.vue b/src/views/companyprofildetail/size768/index.vue
index 86434c9..9ff45bf 100644
--- a/src/views/companyprofildetail/size768/index.vue
+++ b/src/views/companyprofildetail/size768/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="page-container">
+    <n-divider class="divider1" vertical />
+    <n-divider class="divider5" vertical />
     <header className="header flex items-center justify-between">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
@@ -14,15 +16,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('company')"
+          :class="{ active: currentTab === 'companyprofil' }"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -31,7 +33,7 @@
     <main>
       <section
         className="section-first"
-        v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
+        v-if="state.pageTitleNo === '1'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -88,7 +90,7 @@
 
       <section
         className="section-sec"
-        v-if="state.pageTitle.includes('全球化战略升级')"
+        v-if="state.pageTitleNo === '2'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -152,7 +154,7 @@
 
       <section
         className="section-third"
-        v-if="state.pageTitle.includes('助力文艺创作者')"
+        v-if="state.pageTitleNo === '3'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -219,7 +221,7 @@
 
       <section
         className="section-four"
-        v-if="state.pageTitle.includes('培育文艺领域明日之星')"
+        v-if="state.pageTitleNo === '4'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -282,7 +284,7 @@
 
       <section
         className="section-five"
-        v-if="state.pageTitle.includes('多元人才汇聚')"
+        v-if="state.pageTitleNo === '5'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -354,6 +356,7 @@
 </template>
 
 <script setup>
+import { NDivider } from "naive-ui";
 import {
   onUnmounted,
   ref,
@@ -363,18 +366,22 @@ import {
   onBeforeMount,
 } from "vue";
 import { useHome } from "@/store/home/index.js";
-import { useRoute } from "vue-router";
 const state = reactive({
-  pageTitle: "",
+  pageTitleNo: "",
 });
-
-const { currentTab } = useHome();
+import { useRoute, useRouter } from "vue-router";
+const router = useRouter();
 const route = useRoute();
+const { currentTab } = useHome();
 onBeforeMount(() => {
-  state.pageTitle = route.query.title;
+  state.pageTitleNo = route.query.titleNo;
 });
 onMounted(() => {});
 onUnmounted(() => {});
+const handleTabClick = (tab) => {
+  currentTab.value = tab;
+  router.push("/" + tab);
+};
 </script>
 
 <style scoped lang="scss">
@@ -436,4 +443,21 @@ onUnmounted(() => {});
   line-height: 110px;
   color: #10253e;
 }
+.divider1 {
+  position: absolute;
+  z-index: 3;
+  color: #eff1f6;
+  left: 116px;
+  width: 1px;
+  height: 100%;
+}
+
+.divider5 {
+  position: absolute;
+  z-index: 3;
+  color: #eff1f6;
+  right: 116px;
+  width: 1px;
+  height: 100%;
+}
 </style>
diff --git a/src/views/home/size1440/index.vue b/src/views/home/size1440/index.vue
index e218198..a981cdd 100644
--- a/src/views/home/size1440/index.vue
+++ b/src/views/home/size1440/index.vue
@@ -1,11 +1,11 @@
 <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 { 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();
@@ -15,16 +15,16 @@ const secondImage = ref(null);
 let scrollTween;
 let ctx;
 const { currentTab } = useHome();
-let isScrolling = false;  // 添加滚动状态标记
-const scrollThreshold = 50;  // 添加滚动阈值
-let lastScrollTime = 0;  // 添加最后滚动时间记录
+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);
-}
+  router.push("/" + tab);
+};
 
 const goToSection = (i) => {
   if (scrollTween) {
@@ -33,13 +33,13 @@ const goToSection = (i) => {
 
   // 防止频繁触发
   const now = Date.now();
-  if (now - lastScrollTime < 500) return;  // 500ms 内不重复触发
+  if (now - lastScrollTime < 500) return; // 500ms 内不重复触发
   lastScrollTime = now;
 
   isScrolling = true;
   scrollTween = gsap.to(window, {
     scrollTo: { y: i * window.innerHeight, autoKill: false },
-    duration: 0.8,  // 增加动画时间使其更平滑
+    duration: 0.8, // 增加动画时间使其更平滑
     ease: "power2.inOut",
     onComplete: () => {
       scrollTween = null;
@@ -58,14 +58,17 @@ const handleWheel = (e) => {
 
   const delta = e.deltaY;
   const currentSection = Math.round(window.scrollY / window.innerHeight);
-  const lastPanel = document.querySelector('.panel:last-child');
+  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 (
+      (lastPanel.scrollTop === 0 && delta < 0) ||
+      (lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight &&
+        delta > 0)
+    ) {
       // 只有在这些边界条件下才触发页面切换
       if (Math.abs(delta) > scrollThreshold) {
         if (delta > 0 && currentSection < 3) {
@@ -95,7 +98,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  window.removeEventListener('wheel', handleWheel);
+  window.removeEventListener("wheel", handleWheel);
   ctx?.revert();
   ScrollTrigger.killAll();
 });
@@ -105,14 +108,14 @@ watch(
   (newValue) => {
     if (newValue && main.value) {
       ctx = gsap.context((self) => {
-        const panels = self.selector('.panel');
+        const panels = self.selector(".panel");
 
         // 为每个面板创建滚动触发器
         panels.forEach((panel, i) => {
           ScrollTrigger.create({
             trigger: panel,
-            start: 'top center',
-            end: 'bottom center',
+            start: "top center",
+            end: "bottom center",
             onToggle: (self) => {
               if (self.isActive && !isScrolling) {
                 goToSection(i);
@@ -125,7 +128,7 @@ watch(
         // 移除之前的渐入动画代码
         panels.forEach((panel, i) => {
           // 背景视差
-          const bg = panel.querySelector('.parallax-bg');
+          const bg = panel.querySelector(".parallax-bg");
           if (bg) {
             gsap.to(bg, {
               yPercent: 30,
@@ -134,13 +137,13 @@ watch(
                 trigger: panel,
                 start: "top bottom",
                 end: "bottom top",
-                scrub: true
-              }
+                scrub: true,
+              },
             });
           }
 
           // 内容视差
-          const content = panel.querySelector('.content');
+          const content = panel.querySelector(".content");
           if (content) {
             gsap.from(content, {
               yPercent: 50,
@@ -149,8 +152,8 @@ watch(
                 trigger: panel,
                 start: "top center",
                 end: "center center",
-                scrub: true
-              }
+                scrub: true,
+              },
             });
           }
         });
@@ -158,40 +161,44 @@ watch(
         // 修改第二个面板的动画配置
         ScrollTrigger.create({
           trigger: panels[1],
-          start: "top 60%",    // 调整为更晚的触发时机
-          end: "bottom 40%",   // 调整离开时机
-          onEnter: () => {     // 进入第二幕时
+          start: "top 60%", // 调整为更晚的触发时机
+          end: "bottom 40%", // 调整离开时机
+          onEnter: () => {
+            // 进入第二幕时
             gsap.to(secondImage.value, {
               opacity: 1,
               y: 0,
               duration: 1.2,
-              ease: "power2.out"
+              ease: "power2.out",
             });
           },
-          onLeave: () => {     // 离开第二幕时（向下滚动）
+          onLeave: () => {
+            // 离开第二幕时（向下滚动）
             gsap.to(secondImage.value, {
               opacity: 0,
               y: -50,
-              duration: 0.5,    // 加快渐出速度
-              ease: "power1.in"  // 使用更快的缓动函数
+              duration: 0.5, // 加快渐出速度
+              ease: "power1.in", // 使用更快的缓动函数
             });
           },
-          onEnterBack: () => { // 重新进入第二幕时（向上滚动）
+          onEnterBack: () => {
+            // 重新进入第二幕时（向上滚动）
             gsap.to(secondImage.value, {
               opacity: 1,
               y: 0,
               duration: 1.2,
-              ease: "power2.out"
+              ease: "power2.out",
             });
           },
-          onLeaveBack: () => { // 返回第一幕时（向上滚动）
+          onLeaveBack: () => {
+            // 返回第一幕时（向上滚动）
             gsap.to(secondImage.value, {
               opacity: 0,
               y: 50,
-              duration: 0.5,    // 加快渐出速度
-              ease: "power1.in"  // 使用更快的缓动函数
+              duration: 0.5, // 加快渐出速度
+              ease: "power1.in", // 使用更快的缓动函数
             });
-          }
+          },
         });
 
         // 修改第三幕的ScrollTrigger配置
@@ -202,128 +209,166 @@ watch(
           onEnter: () => {
             // 初始状态设置
             gsap.set(".content3", {
-              opacity: 1,  // 容器始终保持可见
-              y: 0
+              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
-            });
+            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"
-              }
+                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");
+              .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"
-              }
+                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
-            });
+            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
+              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
-            });
+            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"
-              }
+                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");
+              .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"
-              }
+                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
-            });
-          }
+            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,
+              }
+            );
+          },
         });
 
         // 修改第四幕的动画配置
@@ -338,32 +383,35 @@ watch(
             gsap.set(".content4", {
               opacity: 1,
               y: 0,
-              immediateRender: true
+              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 > 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
+              immediateRender: true,
             });
 
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
-                ease: "power2.out"
-              }
+                ease: "power2.out",
+              },
             });
 
             // 标题动画
@@ -371,62 +419,91 @@ watch(
               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 > 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");
+              .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"
-              }
-            })
+            gsap
+              .timeline({
+                defaults: {
+                  duration: 0.4,
+                  ease: "power2.in",
+                },
+              })
               .to(".content4 .container .card", {
                 opacity: 0,
                 y: -30,
                 stagger: {
                   each: 0.1,
-                  from: "end"
-                }
+                  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");
+              .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: () => {
             // 返回第四幕时隐藏
@@ -434,92 +511,124 @@ watch(
             gsap.set(".content4", {
               opacity: 1,
               y: 0,
-              immediateRender: true
+              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 > 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
+              immediateRender: true,
             });
 
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
-                ease: "power2.out"
-              }
+                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");
+              .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"
-              }
-            })
+            gsap
+              .timeline({
+                defaults: {
+                  duration: 0.4,
+                  ease: "power2.in",
+                },
+              })
               .to(".content4 .container .card", {
                 opacity: 0,
                 y: 30,
                 stagger: {
                   each: 0.1,
-                  from: "end"
-                }
+                  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");
-          }
+              .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);
     }
@@ -529,9 +638,17 @@ watch(
 </script>
 
 <template>
-   <header className="header">
-      <div class="logo">
-        <img src="@/assets/image/logo.png" alt="logo" />
+  <header className="header">
+    <div class="logo">
+      <img src="@/assets/image/logo.png" alt="logo" />
+    </div>
+    <div class="tabs">
+      <div
+        class="tab-item"
+        :class="{ active: currentTab === 'home' }"
+        @click="handleTabClick('home')"
+      >
+        {{ t("home.nav.home") }}
       </div>
       <div class="tabs">
         <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
@@ -544,109 +661,153 @@ watch(
           {{ t('home.nav.businessintroduction') }}
         </div>
       </div>
-    </header>
+      <div
+        class="tab-item"
+        :class="{ active: currentTab === 'businessintroduction' }"
+        @click="handleTabClick('businessintroduction')"
+      >
+        {{ t("home.nav.business") }}
+      </div>
+    </div>
+  </header>
   <main ref="main">
-    <div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
+    <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">
+        <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);">
+    <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="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 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;">
+    <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="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 class="text-[#8B59F7] text-[16px]">
+          {{ t("home.section3.label") }}
         </div>
-        <div class="text-[#455363] text-[16px]  mt-[31px]">
-          {{ t('home.section3.desc') }}
+        <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 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 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="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 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="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 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="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 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 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;">
+    <section className="panel" style="background-color: #f8f9ff">
       <n-divider class="divider1" vertical />
       <div class="divider2" style=""></div>
       <div class="divider3" style=""></div>
@@ -654,30 +815,32 @@ watch(
       <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 class="text-[#8B59F7] text-[16px]">
+          {{ t("home.section4.label") }}
         </div>
-        <div class="text-[#455363] text-[16px]  mt-[31px]">
-          {{ t('home.section4.desc') }}
+        <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') }}
+                {{ t("home.section4.cards1.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards1.desc') }}
+                  {{ 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') }}
+                {{ t("home.section4.cards2.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards2.desc') }}
+                  {{ t("home.section4.cards2.desc") }}
                 </div>
               </div>
             </div>
@@ -686,18 +849,18 @@ watch(
             <div class="card">
               <img src="@/assets/image/yw2.png" alt="Image 3" />
               <div class="js-detail font-bold">
-                {{ t('home.section4.cards3.title') }}
+                {{ t("home.section4.cards3.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards3.desc') }}
+                  {{ 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') }}
+                {{ t("home.section4.cards4.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards4.desc') }}
+                  {{ t("home.section4.cards4.desc") }}
                 </div>
               </div>
             </div>
@@ -709,8 +872,6 @@ watch(
   <footer>
     <div class="footer-content">
       <img class="copyright" src="@/assets/image/cp.png" alt="logo" />
-
-
     </div>
   </footer>
 </template>
@@ -752,11 +913,11 @@ watch(
   padding: 4px 8px;
 
   &.active {
-    color: #8B59FA;
+    color: #8b59fa;
   }
 
   &:hover {
-    color: #8B59FA;
+    color: #8b59fa;
   }
 }
 .scroll-down {
@@ -764,7 +925,7 @@ watch(
   bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 16px;
   font-weight: 600;
   z-index: 999;
@@ -789,7 +950,6 @@ watch(
 }
 
 @keyframes float {
-
   0%,
   100% {
     transform: translate(-50%, 0);
@@ -801,11 +961,11 @@ watch(
 }
 
 :deep .n-carousel__dot {
-  background-color: #DDDDDD !important;
+  background-color: #dddddd !important;
 }
 
 :deep .n-carousel__dot--active {
-  background-color: #8B59F7 !important;
+  background-color: #8b59f7 !important;
 }
 
 .divider1 {
@@ -814,7 +974,6 @@ watch(
   left: 477px;
   width: 1px;
   height: 100vw;
-
 }
 
 .divider2 {
@@ -823,7 +982,7 @@ watch(
   left: 715px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -834,7 +993,7 @@ watch(
   left: 950px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -845,7 +1004,7 @@ watch(
   left: 1186px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -871,8 +1030,6 @@ watch(
   -moz-osx-font-smoothing: grayscale;
 }
 
-
-
 .panel {
   height: 100vh;
   position: sticky;
@@ -892,8 +1049,6 @@ watch(
     &::-webkit-scrollbar {
       display: none; // Chrome, Safari, Opera
     }
-
-
   }
 
   &.first-panel {
@@ -940,13 +1095,13 @@ watch(
   display: flex;
   flex-direction: column;
 
-  >div {
+  > div {
     opacity: 0;
     transform: translateY(50px);
     will-change: opacity, transform;
   }
 
-  >.n-marquee {
+  > .n-marquee {
     opacity: 0;
     transform: translateY(50px);
     will-change: opacity, transform;
@@ -968,7 +1123,6 @@ watch(
 }
 
 :deep(.no-hover) {
-
   .n-carousel__dots,
   .n-carousel__arrow {
     pointer-events: auto;
@@ -987,7 +1141,7 @@ watch(
 .divider4 {
   :deep(.n-divider) {
     border-left: none;
-    background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+    background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
     background-size: 1px 30px;
     background-repeat: repeat-y;
   }
@@ -1013,7 +1167,7 @@ watch(
   box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
   padding: 9px;
   border-radius: 12px;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1029,7 +1183,7 @@ watch(
   text-align: left;
   margin-top: 10px;
   font-size: 20px;
-  color: #10253E;
+  color: #10253e;
   width: 100%;
   padding: 0 23px;
 }
@@ -1045,4 +1199,4 @@ watch(
     height: 22pxpx;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/home/size1920/index.vue b/src/views/home/size1920/index.vue
index 94fb829..fc900ce 100644
--- a/src/views/home/size1920/index.vue
+++ b/src/views/home/size1920/index.vue
@@ -1,11 +1,11 @@
 <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 { 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();
@@ -15,18 +15,16 @@ const secondImage = ref(null);
 let scrollTween;
 let ctx;
 const { currentTab } = useHome();
-let isScrolling = false;  // 添加滚动状态标记
-const scrollThreshold = 50;  // 添加滚动阈值
-let lastScrollTime = 0;  // 添加最后滚动时间记录
+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);
-}
+  router.push("/" + tab);
+};
 
 const goToSection = (i) => {
   if (scrollTween) {
@@ -35,13 +33,13 @@ const goToSection = (i) => {
 
   // 防止频繁触发
   const now = Date.now();
-  if (now - lastScrollTime < 500) return;  // 500ms 内不重复触发
+  if (now - lastScrollTime < 500) return; // 500ms 内不重复触发
   lastScrollTime = now;
 
   isScrolling = true;
   scrollTween = gsap.to(window, {
     scrollTo: { y: i * window.innerHeight, autoKill: false },
-    duration: 0.8,  // 增加动画时间使其更平滑
+    duration: 0.8, // 增加动画时间使其更平滑
     ease: "power2.inOut",
     onComplete: () => {
       scrollTween = null;
@@ -60,14 +58,17 @@ const handleWheel = (e) => {
 
   const delta = e.deltaY;
   const currentSection = Math.round(window.scrollY / window.innerHeight);
-  const lastPanel = document.querySelector('.panel:last-child');
+  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 (
+      (lastPanel.scrollTop === 0 && delta < 0) ||
+      (lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight &&
+        delta > 0)
+    ) {
       // 只有在这些边界条件下才触发页面切换
       if (Math.abs(delta) > scrollThreshold) {
         if (delta > 0 && currentSection < 3) {
@@ -93,11 +94,11 @@ const handleWheel = (e) => {
 // 监听滚轮事件
 onMounted(() => {
   window.scrollTo(0, 0);
-  window.addEventListener('wheel', handleWheel, { passive: false });
+  window.addEventListener("wheel", handleWheel, { passive: false });
 });
 
 onUnmounted(() => {
-  window.removeEventListener('wheel', handleWheel);
+  window.removeEventListener("wheel", handleWheel);
   ctx?.revert();
   ScrollTrigger.killAll();
 });
@@ -107,14 +108,14 @@ watch(
   (newValue) => {
     if (newValue && main.value) {
       ctx = gsap.context((self) => {
-        const panels = self.selector('.panel');
+        const panels = self.selector(".panel");
 
         // 为每个面板创建滚动触发器
         panels.forEach((panel, i) => {
           ScrollTrigger.create({
             trigger: panel,
-            start: 'top center',
-            end: 'bottom center',
+            start: "top center",
+            end: "bottom center",
             onToggle: (self) => {
               if (self.isActive && !isScrolling) {
                 goToSection(i);
@@ -127,7 +128,7 @@ watch(
         // 移除之前的渐入动画代码
         panels.forEach((panel, i) => {
           // 背景视差
-          const bg = panel.querySelector('.parallax-bg');
+          const bg = panel.querySelector(".parallax-bg");
           if (bg) {
             gsap.to(bg, {
               yPercent: 30,
@@ -136,13 +137,13 @@ watch(
                 trigger: panel,
                 start: "top bottom",
                 end: "bottom top",
-                scrub: true
-              }
+                scrub: true,
+              },
             });
           }
 
           // 内容视差
-          const content = panel.querySelector('.content');
+          const content = panel.querySelector(".content");
           if (content) {
             gsap.from(content, {
               yPercent: 50,
@@ -151,8 +152,8 @@ watch(
                 trigger: panel,
                 start: "top center",
                 end: "center center",
-                scrub: true
-              }
+                scrub: true,
+              },
             });
           }
         });
@@ -160,40 +161,44 @@ watch(
         // 修改第二个面板的动画配置
         ScrollTrigger.create({
           trigger: panels[1],
-          start: "top 60%",    // 调整为更晚的触发时机
-          end: "bottom 40%",   // 调整离开时机
-          onEnter: () => {     // 进入第二幕时
+          start: "top 60%", // 调整为更晚的触发时机
+          end: "bottom 40%", // 调整离开时机
+          onEnter: () => {
+            // 进入第二幕时
             gsap.to(secondImage.value, {
               opacity: 1,
               y: 0,
               duration: 1.2,
-              ease: "power2.out"
+              ease: "power2.out",
             });
           },
-          onLeave: () => {     // 离开第二幕时（向下滚动）
+          onLeave: () => {
+            // 离开第二幕时（向下滚动）
             gsap.to(secondImage.value, {
               opacity: 0,
               y: -50,
-              duration: 0.5,    // 加快渐出速度
-              ease: "power1.in"  // 使用更快的缓动函数
+              duration: 0.5, // 加快渐出速度
+              ease: "power1.in", // 使用更快的缓动函数
             });
           },
-          onEnterBack: () => { // 重新进入第二幕时（向上滚动）
+          onEnterBack: () => {
+            // 重新进入第二幕时（向上滚动）
             gsap.to(secondImage.value, {
               opacity: 1,
               y: 0,
               duration: 1.2,
-              ease: "power2.out"
+              ease: "power2.out",
             });
           },
-          onLeaveBack: () => { // 返回第一幕时（向上滚动）
+          onLeaveBack: () => {
+            // 返回第一幕时（向上滚动）
             gsap.to(secondImage.value, {
               opacity: 0,
               y: 50,
-              duration: 0.5,    // 加快渐出速度
-              ease: "power1.in"  // 使用更快的缓动函数
+              duration: 0.5, // 加快渐出速度
+              ease: "power1.in", // 使用更快的缓动函数
             });
-          }
+          },
         });
 
         // 修改第三幕的ScrollTrigger配置
@@ -204,128 +209,166 @@ watch(
           onEnter: () => {
             // 初始状态设置
             gsap.set(".content3", {
-              opacity: 1,  // 容器始终保持可见
-              y: 0
+              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
-            });
+            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"
-              }
+                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");
+              .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"
-              }
+                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
-            });
+            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
+              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
-            });
+            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"
-              }
+                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");
+              .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"
-              }
+                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
-            });
-          }
+            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,
+              }
+            );
+          },
         });
 
         // 修改第四幕的动画配置
@@ -340,32 +383,35 @@ watch(
             gsap.set(".content4", {
               opacity: 1,
               y: 0,
-              immediateRender: true
+              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 > 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
+              immediateRender: true,
             });
 
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
-                ease: "power2.out"
-              }
+                ease: "power2.out",
+              },
             });
 
             // 标题动画
@@ -373,62 +419,91 @@ watch(
               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 > 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");
+              .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"
-              }
-            })
+            gsap
+              .timeline({
+                defaults: {
+                  duration: 0.4,
+                  ease: "power2.in",
+                },
+              })
               .to(".content4 .container .card", {
                 opacity: 0,
                 y: -30,
                 stagger: {
                   each: 0.1,
-                  from: "end"
-                }
+                  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");
+              .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: () => {
             // 返回第四幕时隐藏
@@ -436,92 +511,124 @@ watch(
             gsap.set(".content4", {
               opacity: 1,
               y: 0,
-              immediateRender: true
+              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 > 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
+              immediateRender: true,
             });
 
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
-                ease: "power2.out"
-              }
+                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");
+              .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"
-              }
-            })
+            gsap
+              .timeline({
+                defaults: {
+                  duration: 0.4,
+                  ease: "power2.in",
+                },
+              })
               .to(".content4 .container .card", {
                 opacity: 0,
                 y: 30,
                 stagger: {
                   each: 0.1,
-                  from: "end"
-                }
+                  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");
-          }
+              .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);
     }
@@ -531,9 +638,17 @@ watch(
 </script>
 
 <template>
-   <header className="header">
-      <div class="logo">
-        <img src="@/assets/image/logo.png" alt="logo" />
+  <header className="header">
+    <div class="logo">
+      <img src="@/assets/image/logo.png" alt="logo" />
+    </div>
+    <div class="tabs">
+      <div
+        class="tab-item"
+        :class="{ active: currentTab === 'home' }"
+        @click="handleTabClick('home')"
+      >
+        {{ t("home.nav.home") }}
       </div>
       <div class="tabs">
         <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
@@ -546,141 +661,187 @@ watch(
           {{ t('home.nav.businessintroduction') }}
         </div>
       </div>
-    </header>
+      <div
+        class="tab-item"
+        :class="{ active: currentTab === 'businessintroduction' }"
+        @click="handleTabClick('businessintroduction')"
+      >
+        {{ t("home.nav.business") }}
+      </div>
+    </div>
+  </header>
   <main ref="main">
-    <div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
+    <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-item" src="@/assets/image/banner/cn/b0.png">
-        <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">
+        <img class="carousel-item" src="@/assets/image/banner/cn/b0.png" />
+        <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);">
+    <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="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 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;">
+    <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="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 class="text-[#8B59F7] text-[16px]">
+          {{ t("home.section3.label") }}
         </div>
-        <div class="text-[#455363] text-[16px]  mt-[31px]">
-          {{ t('home.section3.desc') }}
+        <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 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 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="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 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="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 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="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 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 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 style="height: 100%;" />
-      <div class="divider2" style="height: 100%;"></div>
-      <div class="divider3" style="height: 100%;"></div>
-      <div class="divider4" style="height: 100%;"></div>
-      <n-divider class="divider5" vertical style="height: 100%;" />
+    <section className="panel" style="background-color: #f8f9ff">
+      <n-divider class="divider1" vertical style="height: 100%" />
+      <div class="divider2" style="height: 100%"></div>
+      <div class="divider3" style="height: 100%"></div>
+      <div class="divider4" style="height: 100%"></div>
+      <n-divider class="divider5" vertical style="height: 100%" />
       <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 class="text-[#8B59F7] text-[16px]">
+          {{ t("home.section4.label") }}
         </div>
-        <div class="text-[#455363] text-[16px]  mt-[31px]">
-          {{ t('home.section4.desc') }}
+        <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') }}
+                {{ t("home.section4.cards1.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards1.desc') }}
+                  {{ 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') }}
+                {{ t("home.section4.cards2.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards2.desc') }}
+                  {{ t("home.section4.cards2.desc") }}
                 </div>
               </div>
             </div>
@@ -689,18 +850,18 @@ watch(
             <div class="card">
               <img src="@/assets/image/yw2.png" alt="Image 3" />
               <div class="js-detail font-bold">
-                {{ t('home.section4.cards3.title') }}
+                {{ t("home.section4.cards3.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards3.desc') }}
+                  {{ 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') }}
+                {{ t("home.section4.cards4.title") }}
                 <div class="text-[#455363] text-[16px] font-normal">
-                  {{ t('home.section4.cards4.desc') }}
+                  {{ t("home.section4.cards4.desc") }}
                 </div>
               </div>
             </div>
@@ -712,8 +873,6 @@ watch(
   <footer>
     <div class="footer-content">
       <img class="copyright" src="@/assets/image/cp.png" alt="logo" />
-
-
     </div>
   </footer>
 </template>
@@ -755,11 +914,11 @@ watch(
   padding: 4px 8px;
 
   &.active {
-    color: #8B59FA;
+    color: #8b59fa;
   }
 
   &:hover {
-    color: #8B59FA;
+    color: #8b59fa;
   }
 }
 .scroll-down {
@@ -767,7 +926,7 @@ watch(
   bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 16px;
   font-weight: 600;
   z-index: 999;
@@ -792,7 +951,6 @@ watch(
 }
 
 @keyframes float {
-
   0%,
   100% {
     transform: translate(-50%, 0);
@@ -804,11 +962,11 @@ watch(
 }
 
 :deep .n-carousel__dot {
-  background-color: #DDDDDD !important;
+  background-color: #dddddd !important;
 }
 
 :deep .n-carousel__dot--active {
-  background-color: #8B59F7 !important;
+  background-color: #8b59f7 !important;
 }
 
 .divider1 {
@@ -817,7 +975,6 @@ watch(
   left: 477px;
   width: 1px;
   height: 100vw;
-
 }
 
 .divider2 {
@@ -826,7 +983,7 @@ watch(
   left: 715px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -837,7 +994,7 @@ watch(
   left: 950px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -848,7 +1005,7 @@ watch(
   left: 1186px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -874,8 +1031,6 @@ watch(
   -moz-osx-font-smoothing: grayscale;
 }
 
-
-
 .panel {
   height: 100vh;
   position: sticky;
@@ -895,8 +1050,6 @@ watch(
     &::-webkit-scrollbar {
       display: none; // Chrome, Safari, Opera
     }
-
-
   }
 
   &.first-panel {
@@ -943,13 +1096,13 @@ watch(
   display: flex;
   flex-direction: column;
 
-  >div {
+  > div {
     opacity: 0;
     transform: translateY(50px);
     will-change: opacity, transform;
   }
 
-  >.n-marquee {
+  > .n-marquee {
     opacity: 0;
     transform: translateY(50px);
     will-change: opacity, transform;
@@ -971,7 +1124,6 @@ watch(
 }
 
 :deep(.no-hover) {
-
   .n-carousel__dots,
   .n-carousel__arrow {
     pointer-events: auto;
@@ -990,7 +1142,7 @@ watch(
 .divider4 {
   :deep(.n-divider) {
     border-left: none;
-    background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+    background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
     background-size: 1px 30px;
     background-repeat: repeat-y;
   }
@@ -1016,7 +1168,7 @@ watch(
   box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
   padding: 9px;
   border-radius: 12px;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1032,7 +1184,7 @@ watch(
   text-align: left;
   margin-top: 10px;
   font-size: 20px;
-  color: #10253E;
+  color: #10253e;
   width: 100%;
   padding: 0 23px;
 }
@@ -1048,4 +1200,4 @@ watch(
     height: 22pxpx;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/home/size375/index.vue b/src/views/home/size375/index.vue
index fba51a9..3bda6f5 100644
--- a/src/views/home/size375/index.vue
+++ b/src/views/home/size375/index.vue
@@ -21,8 +21,8 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           {{ t("home.nav.business") }}
         </div>
@@ -35,20 +35,10 @@
       <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="@/assets/image/home/375/zh/carousel-1.png"
-          />
-          <img
-            class="carousel-img"
-            src="@/assets/image/home/375/zh/carousel-2.png"
-          />
-          <img
-            class="carousel-img"
-            src="@/assets/image/home/375/zh/carousel-3.png"
-          />
-          <img
-            class="carousel-img"
-            src="@/assets/image/home/375/zh/carousel-4.png"
+            :src="src"
           />
         </n-carousel>
       </section>
@@ -71,7 +61,7 @@
         </div>
         <div class="content">
           <div
-            class="text-[#10253E] text-[123px] leading-[164px] font-semibold"
+            class="text-[#10253E] text-[123px] leading-[164px] font-semibold mt-[480px]"
           >
             {{ t("home.section2.title1") }}
           </div>
@@ -90,33 +80,109 @@
         <div class="divider4" style=""></div>
         <n-divider class="divider5" vertical />
         <div class="parallax-bg" style="margin-top: 70px"></div>
-        <div class="content3 mt-[348px]">
+        <div class="content3 mt-[451px]">
           <div class="text-[#8B59F7] text-[72px]">
             {{ t("home.section3.label") }}
           </div>
-          <div class="text-[#10253E] text-[113pxpx] mt-[43px]">FiEE</div>
-          <div class="text-[#455363] text-[72px] mt-[78px] pr-[139px]">
+          <div class="text-[#10253E] text-[113px] mt-[87px]">FiEE</div>
+          <div class="text-[#455363] text-[72px] mt-[159px] pr-[139px]">
             {{ t("home.section3.desc") }}
           </div>
-        </div>
-        <div
-          class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
-        >
-          <div ref="carouselTrack" class="carousel-track">
-            <div
-              v-for="(item, idx) in getVisibleItems()"
-              :key="idx"
-              class="carousel-item"
-            >
-              <img class="carousel-image" :src="item.imgUrl" />
-              <div class="carousel-title">
-                <div>{{ item.title }}</div>
+
+          <n-marquee auto-fill>
+            <div style="display: flex" class="mt-[317px]">
+              <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"
+                >
+                  {{ t("home.section3.features.data.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
+                >
+                  {{ t("home.section3.features.data.desc") }}
+                </div>
               </div>
-              <div class="carousel-subtitle">
-                <div>{{ item.subTitle }}</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"
+                >
+                  {{ t("home.section3.features.ai.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[72px] 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"
+                >
+                  {{ t("home.section3.features.cloud.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[72px] 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"
+                >
+                  {{ t("home.section3.features.cooperation.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[72px] 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"
+                >
+                  {{ t("home.section3.features.promotion.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
+                >
+                  {{ t("home.section3.features.promotion.desc") }}
+                </div>
               </div>
             </div>
-          </div>
+          </n-marquee>
         </div>
       </section>
 
@@ -127,69 +193,77 @@
         <div class="divider4" style=""></div>
         <n-divider class="divider5" vertical />
         <div class="parallax-bg"></div>
-        <div class="content4 mt-[408px]">
-          <div class="text-[#8B59F7] text-[72px]">
+        <div class="content4 mt-[451px]">
+          <div class="text-[#8B59F7] text-[113px]">
             {{ t("home.section4.label") }}
           </div>
-          <div class="text-[#10253E] text-[113pxpx] mt-[43px]">
-            <div>多元业务协同</div>
-            <div>推动文艺影响力腾飞</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-[78px] leading-[60px] pr-[139px]"
+            class="text-[#455363] text-[72px] mt-[159px] leading-[102px] pr-[139px]"
           >
             {{ t("home.section4.desc") }}
           </div>
-          <div class="container">
-            <div class="mt-[493px]">
-              <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">
-                    {{ t("home.section4.cards1.desc") }}
-                  </div>
-                </div>
-              </div>
-              <div class="card">
-                <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">
-                    {{ t("home.section4.cards3.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="right mt-[215px]">
-              <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">
-                    {{ t("home.section4.cards2.desc") }}
-                  </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 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">
-                    {{ t("home.section4.cards4.desc") }}
-                  </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>
@@ -210,8 +284,8 @@
 </template>
 
 <script setup>
-import { NCarousel, NDivider, NImage } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
+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";
@@ -232,33 +306,53 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
 const scrollDownVisible = ref(true);
 const { t } = useI18n();
 
-// 导入图片
-import imageshow3 from "@/assets/image/businessintroduction/375/imageshow-3.png";
-import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
-import imageshow5 from "@/assets/image/businessintroduction/375/imageshow-5.png";
-
-const state = reactive({
-  marqueeArr: [
-    {
-      title: "2025年",
-      subTitle:
-        "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
-      imgUrl: imageshow3, // 使用导入的图片
-    },
-    {
-      title: "2026年",
-      subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
-      imgUrl: imageshow4, // 使用导入的图片
-    },
-    {
-      title: "2027年",
-      subTitle:
-        "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
-      imgUrl: imageshow5, // 使用导入的图片
-    },
+// 导入所有语言的轮播图
+const carouselImages = {
+  zh: [
+    new URL("@/assets/image/home/375/zh/carousel-1.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/zh/carousel-2.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/zh/carousel-3.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/zh/carousel-4.png", import.meta.url).href,
   ],
+  en: [
+    new URL("@/assets/image/home/375/en/carousel-1.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/en/carousel-2.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/en/carousel-3.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/en/carousel-4.png", import.meta.url).href,
+  ],
+  ja: [
+    new URL("@/assets/image/home/375/ja/carousel-1.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/ja/carousel-2.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/ja/carousel-3.png", import.meta.url).href,
+    new URL("@/assets/image/home/375/ja/carousel-4.png", import.meta.url).href,
+  ],
+  "zh-TW": [
+    new URL("@/assets/image/home/375/zh-TW/carousel-1.png", import.meta.url)
+      .href,
+    new URL("@/assets/image/home/375/zh-TW/carousel-2.png", import.meta.url)
+      .href,
+    new URL("@/assets/image/home/375/zh-TW/carousel-3.png", import.meta.url)
+      .href,
+    new URL("@/assets/image/home/375/zh-TW/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);
@@ -271,13 +365,13 @@ const goToSection = (i) => {
 
   // 防止频繁触发
   const now = Date.now();
-  if (now - lastScrollTime < 500) return; // 500ms 内不重复触发
+  if (now - lastScrollTime < 800) return; // 增加间隔时间到800ms
   lastScrollTime = now;
 
   isScrolling = true;
   scrollTween = gsap.to(window, {
     scrollTo: { y: i * window.innerHeight, autoKill: false },
-    duration: 0.8, // 增加动画时间使其更平滑
+    duration: 1, // 增加动画时间到1秒
     ease: "power2.inOut",
     onComplete: () => {
       scrollTween = null;
@@ -287,7 +381,7 @@ const goToSection = (i) => {
   });
 };
 
-// 修改handleWheel函数
+// 修改 handleWheel 函数
 const handleWheel = (e) => {
   if (isScrolling) {
     e.preventDefault();
@@ -299,73 +393,44 @@ const handleWheel = (e) => {
   const lastPanel = document.querySelector(".panel:last-child");
   const isInLastPanel = currentSection === 3;
 
+  // 添加防抖动
+  if (Math.abs(delta) <= scrollThreshold) {
+    return;
+  }
+
   // 在最后一个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);
-        }
+      if (delta > 0 && currentSection < 3) {
+        goToSection(currentSection + 1);
+      } else if (delta < 0 && currentSection > 0) {
+        goToSection(currentSection - 1);
       }
     }
-    return; // 其他情况允许自然滚动
+    return;
   }
 
-  // 非最后一个panel的处理保持不变
-  if (Math.abs(delta) > scrollThreshold) {
-    if (delta > 0 && currentSection < 3) {
-      goToSection(currentSection + 1);
-    } else if (delta < 0 && currentSection > 0) {
-      goToSection(currentSection - 1);
-    }
+  // 非最后一个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 });
-  // 初始化轮播动画
-  nextTick(() => {
-    if (carouselTrack.value) {
-      const firstItem = carouselTrack.value.querySelector(".carousel-item");
-      if (!firstItem) return;
-
-      const itemWidth = firstItem.offsetWidth;
-      const itemMargin = parseInt(
-        window.getComputedStyle(firstItem).marginRight
-      );
-      const slideWidth = itemWidth + itemMargin;
-      const totalWidth = slideWidth * state.marqueeArr.length;
-
-      // 创建无限滚动动画
-      carouselAnimation = gsap.to(carouselTrack.value, {
-        x: -totalWidth,
-        duration: 20,
-        ease: "none",
-        repeat: -1,
-        onRepeat: () => {
-          gsap.set(carouselTrack.value, { x: 0 });
-        },
-      });
-    }
-  });
 });
 
 onUnmounted(() => {
   window.removeEventListener("wheel", handleWheel);
   ctx?.revert();
   ScrollTrigger.killAll();
-  if (carouselAnimation) {
-    carouselAnimation.kill();
-  }
 });
 
 watch(
@@ -392,19 +457,54 @@ watch(
 
         // 移除之前的渐入动画代码
         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,
-              },
-            });
+
+          // 区分处理最后一个面板和其他面板
+          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,
+                },
+              });
+            }
           }
 
           // 内容视差
@@ -483,6 +583,7 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
+                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -516,6 +617,22 @@ watch(
                   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: () => {
@@ -528,6 +645,7 @@ watch(
 
             tl.to(
               [
+                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -550,6 +668,7 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
+                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -583,6 +702,14 @@ watch(
                   y: 0,
                 },
                 "-=0.6"
+              )
+              .to(
+                ".content3 > .n-marquee",
+                {
+                  opacity: 1,
+                  y: 0,
+                },
+                "-=0.6"
               );
           },
           onLeaveBack: () => {
@@ -595,6 +722,7 @@ watch(
 
             tl.to(
               [
+                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -614,9 +742,7 @@ watch(
           start: "top 80%",
           end: "bottom center",
           onEnter: () => {
-            // 进入第四幕时隐藏
             scrollDownVisible.value = false;
-            // 初始状态设置
             gsap.set(".content4", {
               opacity: 1,
               y: 0,
@@ -637,13 +763,6 @@ watch(
               }
             );
 
-            // 单独设置卡片的初始状态
-            gsap.set(".content4 .container .card", {
-              opacity: 0,
-              y: 50,
-              immediateRender: true,
-            });
-
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
@@ -671,47 +790,9 @@ watch(
                   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({
@@ -720,14 +801,6 @@ watch(
                   ease: "power2.in",
                 },
               })
-              .to(".content4 .container .card", {
-                opacity: 0,
-                y: -30,
-                stagger: {
-                  each: 0.1,
-                  from: "end",
-                },
-              })
               .to(
                 [
                   ".content4 > div:nth-child(3)",
@@ -743,7 +816,6 @@ watch(
               );
           },
           onEnterBack: () => {
-            // 返回第四幕时隐藏
             scrollDownVisible.value = false;
             gsap.set(".content4", {
               opacity: 1,
@@ -764,12 +836,6 @@ watch(
               }
             );
 
-            gsap.set(".content4 .container .card", {
-              opacity: 0,
-              y: -50,
-              immediateRender: true,
-            });
-
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
@@ -796,46 +862,9 @@ watch(
                   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({
@@ -844,14 +873,7 @@ watch(
                   ease: "power2.in",
                 },
               })
-              .to(".content4 .container .card", {
-                opacity: 0,
-                y: 30,
-                stagger: {
-                  each: 0.1,
-                  from: "end",
-                },
-              })
+
               .to(
                 [
                   ".content4 > div:nth-child(3)",
@@ -872,13 +894,6 @@ watch(
   },
   { immediate: true }
 );
-const carouselTrack = ref(null);
-let carouselAnimation = null; // 存储 GSAP 动画实例
-const getVisibleItems = () => {
-  const items = state.marqueeArr;
-  // 复制两组用于无缝滚动
-  return [...items, ...items];
-};
 </script>
 
 <style scoped lang="scss">
@@ -909,9 +924,12 @@ const getVisibleItems = () => {
   display: flex;
   gap: 128px;
   margin-right: 32px;
+  margin-left: 60px;
 }
 
 .tab-item {
+  display: flex;
+  align-items: center;
   font-size: 61px;
   color: #000000;
   cursor: pointer;
@@ -938,7 +956,7 @@ const getVisibleItems = () => {
 }
 .scroll-down {
   position: fixed;
-  bottom: 50px;
+  bottom: 113px;
   left: 50%;
   transform: translateX(-50%);
   color: #ffffff;
@@ -987,50 +1005,17 @@ const getVisibleItems = () => {
 .divider1 {
   position: absolute;
   z-index: 3;
-  left: 477px;
+  left: 64px;
   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;
+  height: 100%;
 }
 
 .divider5 {
   position: absolute;
   z-index: 3;
-  left: 1420px;
+  right: 60px;
   width: 1px;
-  height: 100vw;
+  height: 100%;
 }
 
 .carousel-img {
@@ -1058,13 +1043,18 @@ const getVisibleItems = () => {
   &:last-child {
     position: relative;
     overflow-y: auto;
-    height: auto;
-    min-height: 100vh;
+    height: 100vh;
 
     // 隐藏滚动条但保持功能
     &::-webkit-scrollbar {
       display: none; // Chrome, Safari, Opera
     }
+
+    // 调整最后一个面板的背景
+    .parallax-bg {
+      position: fixed; // 改为固定定位
+      height: 120%;
+    }
   }
 
   &.first-panel {
@@ -1089,7 +1079,7 @@ const getVisibleItems = () => {
   top: -10%;
   left: 0;
   width: 100%;
-  height: 120%;
+  height: 120%; // 保持原有高度
   z-index: 1;
 }
 
@@ -1116,13 +1106,26 @@ const getVisibleItems = () => {
     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: 100%;
+  height: auto;
   display: flex;
   flex-direction: column;
 }
@@ -1156,18 +1159,11 @@ const getVisibleItems = () => {
   }
 }
 
-.container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  /* Two columns */
-  gap: 55px;
-}
-
 .card {
-  margin-top: 75px;
+  margin-top: 154px;
   box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
-  padding: 22px 18px 57px 20px;
-  border-radius: 30px;
+  padding: 46px 36px 118px 51px;
+  border-radius: 60px;
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
@@ -1182,11 +1178,11 @@ const getVisibleItems = () => {
 
 .js-detail {
   text-align: left;
-  margin-top: 37px;
-  font-size: 50px;
+  margin-top: 87px;
+  font-size: 92px;
   color: #10253e;
   width: 100%;
-  padding: 0 20px 0 30px;
+  padding: 0 82px 0 82px;
 }
 
 .carousel-container {
@@ -1239,8 +1235,17 @@ const getVisibleItems = () => {
 }
 
 .carousel-subtitle {
-  margin-top: 23px;
-  color: #455363;
-  font-size: 40px;
+  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%; // 第四个面板的背景初始高度
 }
 </style>
diff --git a/src/views/home/size768/index.vue b/src/views/home/size768/index.vue
index cc2acaa..b8f0ff8 100644
--- a/src/views/home/size768/index.vue
+++ b/src/views/home/size768/index.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="page-container">
+    <n-divider class="divider1" vertical />
+    <div class="divider3"></div>
+    <n-divider class="divider5" vertical />
     <header className="header flex items-center justify-between">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
@@ -21,8 +24,8 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('business')"
+          :class="{ active: currentTab === 'businessintroduction' }"
+          @click="handleTabClick('businessintroduction')"
         >
           {{ t("home.nav.business") }}
         </div>
@@ -35,20 +38,10 @@
       <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="@/assets/image/home/768/zh/carousel-1.png"
-          />
-          <img
-            class="carousel-img"
-            src="@/assets/image/home/768/zh/carousel-2.png"
-          />
-          <img
-            class="carousel-img"
-            src="@/assets/image/home/768/zh/carousel-3.png"
-          />
-          <img
-            class="carousel-img"
-            src="@/assets/image/home/768/zh/carousel-4.png"
+            :src="src"
           />
         </n-carousel>
       </section>
@@ -57,11 +50,6 @@
         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: 210px">
           <img
             ref="secondImage"
@@ -80,11 +68,6 @@
       </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-[348px]">
           <div class="text-[#8B59F7] text-[40px]">
@@ -94,42 +77,116 @@
           <div class="text-[#455363] text-[40px] mt-[78px] pr-[100px]">
             {{ t("home.section3.desc") }}
           </div>
-        </div>
-        <div
-          class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
-        >
-          <div ref="carouselTrack" class="carousel-track">
-            <div
-              v-for="(item, idx) in getVisibleItems()"
-              :key="idx"
-              class="carousel-item"
-            >
-              <img class="carousel-image" :src="item.imgUrl" />
-              <div class="carousel-title">
-                <div>{{ item.title }}</div>
+          <n-marquee auto-fill>
+            <div style="display: flex" class="mt-[190px]">
+              <div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
+                <img
+                  class="w-[475px] h-[475px]"
+                  src="@/assets/image/jj1.png"
+                  alt="logo"
+                />
+
+                <div
+                  class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+                >
+                  {{ t("home.section3.features.data.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+                >
+                  {{ t("home.section3.features.data.desc") }}
+                </div>
               </div>
-              <div class="carousel-subtitle">
-                <div>{{ item.subTitle }}</div>
+              <div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
+                <img
+                  class="w-[475px] h-[475px]"
+                  src="@/assets/image/jj2.png"
+                  alt="logo"
+                />
+
+                <div
+                  class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+                >
+                  {{ t("home.section3.features.ai.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+                >
+                  {{ t("home.section3.features.ai.desc") }}
+                </div>
+              </div>
+              <div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
+                <img
+                  class="w-[475px] h-[475px]"
+                  src="@/assets/image/jj3.png"
+                  alt="logo"
+                />
+
+                <div
+                  class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+                >
+                  {{ t("home.section3.features.cloud.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+                >
+                  {{ t("home.section3.features.cloud.desc") }}
+                </div>
+              </div>
+              <div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
+                <img
+                  class="w-[475px] h-[475px]"
+                  src="@/assets/image/jj4.png"
+                  alt="logo"
+                />
+
+                <div
+                  class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+                >
+                  {{ t("home.section3.features.cooperation.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+                >
+                  {{ t("home.section3.features.cooperation.desc") }}
+                </div>
+              </div>
+              <div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
+                <img
+                  class="w-[475px] h-[475px]"
+                  src="@/assets/image/jj5.png"
+                  alt="logo"
+                />
+
+                <div
+                  class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+                >
+                  {{ t("home.section3.features.promotion.title") }}
+                </div>
+                <div
+                  class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+                >
+                  {{ t("home.section3.features.promotion.desc") }}
+                </div>
               </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="parallax-bg" style="height: 100% !important"></div>
         <div class="content4 mt-[408px]">
           <div class="text-[#8B59F7] text-[40px]">
             {{ t("home.section4.label") }}
           </div>
           <div class="text-[#10253E] text-[85px] mt-[43px]">
-            <div>多元业务协同</div>
-            <div>推动文艺影响力腾飞</div>
+            <div>
+              {{ t("home.section4.title1") }}
+            </div>
+            <div>
+              {{ t("home.section4.title2") }}
+            </div>
           </div>
           <div
             class="text-[#455363] text-[40px] mt-[78px] leading-[60px] pr-[100px]"
@@ -204,10 +261,9 @@
     </footer>
   </div>
 </template>
-
 <script setup>
-import { NCarousel, NDivider, NImage } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
+import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
+import { onUnmounted, ref, onMounted, watch, computed } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
@@ -228,33 +284,54 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
 const scrollDownVisible = ref(true);
 const { t } = useI18n();
 
-// 导入图片
-import imageshow3 from "@/assets/image/businessintroduction/768/imageshow-3.png";
-import imageshow4 from "@/assets/image/businessintroduction/768/imageshow-4.png";
-import imageshow5 from "@/assets/image/businessintroduction/768/imageshow-5.png";
-
-const state = reactive({
-  marqueeArr: [
-    {
-      title: "2025年",
-      subTitle:
-        "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
-      imgUrl: imageshow3, // 使用导入的图片
-    },
-    {
-      title: "2026年",
-      subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
-      imgUrl: imageshow4, // 使用导入的图片
-    },
-    {
-      title: "2027年",
-      subTitle:
-        "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
-      imgUrl: imageshow5, // 使用导入的图片
-    },
+// 导入所有语言的轮播图
+const carouselImages = {
+  zh: [
+    new URL("@/assets/image/home/768/zh/carousel-1.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/zh/carousel-2.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/zh/carousel-3.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/zh/carousel-4.png", import.meta.url).href,
   ],
+  en: [
+    new URL("@/assets/image/home/768/en/carousel-1.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/en/carousel-2.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/en/carousel-3.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/en/carousel-4.png", import.meta.url).href,
+  ],
+  ja: [
+    new URL("@/assets/image/home/768/ja/carousel-1.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/ja/carousel-2.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/ja/carousel-3.png", import.meta.url).href,
+    new URL("@/assets/image/home/768/ja/carousel-4.png", import.meta.url).href,
+  ],
+  "zh-TW": [
+    new URL("@/assets/image/home/768/zh-TW/carousel-1.png", import.meta.url)
+      .href,
+    new URL("@/assets/image/home/768/zh-TW/carousel-2.png", import.meta.url)
+      .href,
+    new URL("@/assets/image/home/768/zh-TW/carousel-3.png", import.meta.url)
+      .href,
+    new URL("@/assets/image/home/768/zh-TW/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);
@@ -328,40 +405,12 @@ const handleWheel = (e) => {
 // 监听滚轮事件
 onMounted(() => {
   window.addEventListener("wheel", handleWheel, { passive: false });
-  // 初始化轮播动画
-  nextTick(() => {
-    if (carouselTrack.value) {
-      const firstItem = carouselTrack.value.querySelector(".carousel-item");
-      if (!firstItem) return;
-
-      const itemWidth = firstItem.offsetWidth;
-      const itemMargin = parseInt(
-        window.getComputedStyle(firstItem).marginRight
-      );
-      const slideWidth = itemWidth + itemMargin;
-      const totalWidth = slideWidth * state.marqueeArr.length;
-
-      // 创建无限滚动动画
-      carouselAnimation = gsap.to(carouselTrack.value, {
-        x: -totalWidth,
-        duration: 20,
-        ease: "none",
-        repeat: -1,
-        onRepeat: () => {
-          gsap.set(carouselTrack.value, { x: 0 });
-        },
-      });
-    }
-  });
 });
 
 onUnmounted(() => {
   window.removeEventListener("wheel", handleWheel);
   ctx?.revert();
   ScrollTrigger.killAll();
-  if (carouselAnimation) {
-    carouselAnimation.kill();
-  }
 });
 
 watch(
@@ -479,6 +528,7 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
+                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -512,6 +562,22 @@ watch(
                   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: () => {
@@ -524,6 +590,7 @@ watch(
 
             tl.to(
               [
+                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -546,6 +613,7 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
+                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -579,6 +647,14 @@ watch(
                   y: 0,
                 },
                 "-=0.6"
+              )
+              .to(
+                ".content3 > .n-marquee",
+                {
+                  opacity: 1,
+                  y: 0,
+                },
+                "-=0.6"
               );
           },
           onLeaveBack: () => {
@@ -591,6 +667,7 @@ watch(
 
             tl.to(
               [
+                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -868,13 +945,6 @@ watch(
   },
   { immediate: true }
 );
-const carouselTrack = ref(null);
-let carouselAnimation = null; // 存储 GSAP 动画实例
-const getVisibleItems = () => {
-  const items = state.marqueeArr;
-  // 复制两组用于无缝滚动
-  return [...items, ...items];
-};
 </script>
 
 <style scoped lang="scss">
@@ -928,7 +998,7 @@ const getVisibleItems = () => {
 }
 .scroll-down {
   position: fixed;
-  bottom: 50px;
+  bottom: 110px;
   left: 50%;
   transform: translateX(-50%);
   color: #ffffff;
@@ -976,51 +1046,27 @@ const getVisibleItems = () => {
 
 .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;
+  z-index: 9;
+  left: 22px;
+  width: 4px;
+  height: 100%;
 }
 
 .divider3 {
   position: absolute;
-  z-index: 3;
-  left: 950px;
-  width: 1px;
-  height: 100vw;
+  z-index: 9;
+  left: 400px;
+  height: 100%;
   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-size: 10px 60px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
 
 .divider5 {
   position: absolute;
-  z-index: 3;
-  left: 1420px;
-  width: 1px;
-  height: 100vw;
+  z-index: 9;
+  right: 22px;
+  height: 100%;
 }
 
 .carousel-img {
@@ -1106,6 +1152,19 @@ const getVisibleItems = () => {
     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 {
@@ -1136,16 +1195,6 @@ const getVisibleItems = () => {
   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;
-  }
-}
-
 .container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -1229,8 +1278,12 @@ const getVisibleItems = () => {
 }
 
 .carousel-subtitle {
-  margin-top: 23px;
-  color: #455363;
-  font-size: 40px;
+  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);
 }
 </style>