路由跳转

src/components/AppHeader.vue

@@ -1,35 +1,45 @@
 <template>
-   <header className="header">
+  <header className="header">
-      <div class="logo">
+    <div class="logo">
-        <img src="@/assets/image/logo.png" alt="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
-        <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
+        class="tab-item"
-          {{ t('home.nav.home') }}
+        :class="{ active: currentTab === 'companyprofil' }"
-        </div>
+        @click="handleTabClick('companyprofil')"
-        <div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
+      >
-          {{ t('home.nav.company') }}
+        {{ t("home.nav.company") }}
-        </div>
-        <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
-          {{ t('home.nav.business') }}
-        </div>
       </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 scoped lang="scss"></style>
-
-</style>

src/i18n/index.js

@@ -21,7 +21,7 @@ function getBrowserLanguage() {
   }
   return 'en' // 默认中文，而不是英语
 }
-
+localStorage.setItem("language", "en");
 // 获取存储的语言或浏览器语言
 const savedLanguage  = localStorage.getItem('language') || getBrowserLanguage()
 

src/locales/zh.js

@@ -47,6 +47,8 @@ export default {
     section4: {
       label: '业务介绍',
       title: '多元业务协同，推动文艺影响力腾飞',
+      title1: '多元业务协同',
+      title2: '推动文艺影响力腾飞',
       desc: 'FiEE 专注为文艺创作者提供全球化推广与专业运营服务。通过精准定位、多平台联动，打破地域限制，让作品登上国际舞台。依托强大资源网络对接商业机遇，运用 AI与大数据精准营销，高效触达受众，助力创作者实现艺术与商业价值双突破。',
       cards1: {
         title: '全球花卉产业，适合国际艺术交流中心',

src/views/businessintroduction/size375/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
+          :class="{ active: currentTab === 'companyprofil' }"
-          @click="handleTabClick('company')"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -543,18 +543,22 @@
               凭借前沿的传播策略，精准狙击全球受众心智。深度整合顶级媒体资源，让曝光量呈指数级突破，全方位塑造全球品牌影响力，引领文艺潮流走向世界舞台中央
             </div>
           </div>
-          <div class="mt-[46px] mb-[246px] px-[108px]">
+          <div
-            <div
+            class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
-              v-for="(item, idx) in state.marqueeArr"
+          >
-              :key="idx"
+            <div ref="carouselTrack" class="carousel-track">
-              class="w-full flex flex-wrap justify-center carousel-item"
+              <div
-            >
+                v-for="(item, idx) in getVisibleItems()"
-              <img class="carousel-image" :src="item.imgUrl" />
+                :key="idx"
-              <div class="carousel-title w-full">
+                class="carousel-item"
-                <div>{{ item.title }}</div>
+              >
-              </div>
+                <img class="carousel-image" :src="item.imgUrl" />
-              <div class="carousel-subtitle">
+                <div class="carousel-title">
-                <div>{{ item.subTitle }}</div>
+                  <div>{{ item.title }}</div>
+                </div>
+                <div class="carousel-subtitle">
+                  <div>{{ item.subTitle }}</div>
+                </div>
               </div>
             </div>
           </div>
@@ -566,7 +570,7 @@
         className="flex flex-wrap justify-center"
       >
         <img
-          class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
+          class="w-[580px] h-[55px] my-[85px]"
           src="@/assets/image/image-footer.png"
           alt="logo"
         />
@@ -625,8 +629,15 @@ const state = reactive({
   ],
 });
 
+const carouselTrack = ref(null);
 let carouselAnimation = null; // 存储 GSAP 动画实例
 
+const getVisibleItems = () => {
+  const items = state.marqueeArr;
+  // 复制两组用于无缝滚动
+  return [...items, ...items];
+};
+
 // 监听窗口大小变化
 onMounted(() => {
   ctx = gsap.context(() => {
@@ -657,6 +668,32 @@ onMounted(() => {
         });
       }
     });
+
+    // 初始化轮播动画
+    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 });
+          },
+        });
+      }
+    });
   });
 });
 
@@ -670,8 +707,11 @@ onUnmounted(() => {
   }
 });
 
+import { useRouter } from "vue-router";
+const router = useRouter();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -720,9 +760,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;
@@ -773,6 +816,11 @@ const goToSection = (i) => {
   bottom: -80px;
   right: 0;
 }
+.carousel-container {
+  width: 96%;
+  overflow: hidden;
+  position: relative;
+}
 
 .arrow-btn {
   cursor: pointer;
@@ -790,14 +838,18 @@ const goToSection = (i) => {
 }
 
 .carousel-item {
-  margin-top: 154px;
+  width: 785px;
-  padding: 46px 36px 118px 51px;
+  margin-right: 73px;
-  border-radius: 61px;
+  flex: 0 0 auto;
-  box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16);
+  display: block; // 改为 block 布局
+  padding: 23px 20px 40px;
+  border-radius: 30px;
+  box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
 }
 
 .carousel-image {
-  width: 1623px;
+  width: 748px;
+  height: 563px;
   object-fit: cover;
   display: block;
 }
@@ -808,16 +860,15 @@ const goToSection = (i) => {
 }
 
 .carousel-title {
-  text-align: left;
+  font-size: 50px;
-  font-size: 92px;
   font-weight: 500;
-  margin-top: 87px;
+  margin-top: 48px;
 }
 
 .carousel-subtitle {
-  margin-top: 51px;
+  margin-top: 23px;
   color: #455363;
-  font-size: 72px;
+  font-size: 40px;
 }
 
 // 添加一个通用的溢出控制类

src/views/businessintroduction/size768/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
+          :class="{ active: currentTab === 'companyprofil' }"
-          @click="handleTabClick('company')"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -655,7 +655,7 @@ onMounted(() => {
         });
       }
     });
-    console.log(moveRefs.value);
+
     // 初始化轮播动画
     nextTick(() => {
       if (carouselTrack.value) {
@@ -694,8 +694,11 @@ onUnmounted(() => {
   }
 });
 
+import { useRouter } from "vue-router";
+const router = useRouter();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {

src/views/companyprofil/size1920/index.vue

@@ -1,10 +1,5 @@
 <script setup>
-import {
+import { onUnmounted, ref, watch, reactive } from "vue";
-  onUnmounted,
-  ref,
-  watch,
-  reactive
-} from "vue";
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
@@ -17,8 +12,7 @@ import { NDivider } from "naive-ui";
 gsap.registerPlugin(ScrollTrigger);
 const { currentTab } = useHome();
 const router = useRouter();
-const { transitionState } =
+const { transitionState } = useTransitionComposable();
-  useTransitionComposable();
 const main = ref();
 let ctx;
 const { t } = useI18n();
@@ -27,65 +21,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
+        gsap.utils.toArray(".text-animate").forEach((text) => {
-          .toArray(".text-animate")
+          gsap.from(text, {
-          .forEach((text) => {
+            x: -100,
-            gsap.from(text, {
+            opacity: 0,
-              x: -100,
+            duration: 1,
-              opacity: 0,
+            scrollTrigger: {
-              duration: 1,
+              trigger: text,
-              scrollTrigger: {
+              start: "top 80%",
-                trigger: text,
+              end: "top 50%",
-                start: "top 80%",
+              toggleActions: "play none none reverse",
-                end: "top 50%",
+            },
-                toggleActions:
-                  "play none none reverse",
-              },
-            });
           });
+        });
 
         // Image animations from right
-        gsap.utils
+        gsap.utils.toArray(".image-animate").forEach((image) => {
-          .toArray(".image-animate")
+          gsap.from(image, {
-          .forEach((image) => {
+            x: 100,
-            gsap.from(image, {
+            opacity: 0,
-              x: 100,
+            duration: 1,
-              opacity: 0,
+            scrollTrigger: {
-              duration: 1,
+              trigger: image,
-              scrollTrigger: {
+              start: "top 80%",
-                trigger: image,
+              end: "top 50%",
-                start: "top 80%",
+              toggleActions: "play none none reverse",
-                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',
+            trigger: ".carousel-container",
-            start: 'top 70%',
+            start: "top 70%",
-            end: 'top 30%',
+            end: "top 30%",
             scrub: 2,
-            toggleActions: 'restart pause reverse pause',
+            toggleActions: "restart pause reverse pause",
-          }
+          },
         });
-
       }, main.value);
     }
   },
@@ -143,8 +126,9 @@ const handleDragMove = (e) => {
   const walk = startX.value - x;
 
   if (carouselTrack.value) {
-    carouselTrack.value.style.transform = `translateX(-${scrollLeft.value + walk
+    carouselTrack.value.style.transform = `translateX(-${
-      }px)`;
+      scrollLeft.value + walk
+    }px)`;
   }
 };
 
@@ -192,28 +176,28 @@ import carouselShow5 from "@/assets/image/companyprofil/768/carouselShow-5.png";
 const state = reactive({
   marqueeArr: [
     {
-      title: t('companyprofil.news.carousel.item1.title'),
+      title: t("companyprofil.news.carousel.item1.title"),
-      subTitle: t('companyprofil.news.carousel.item1.desc'),
+      subTitle: t("companyprofil.news.carousel.item1.desc"),
       imgUrl: carouselShow1,
     },
     {
-      title: t('companyprofil.news.carousel.item2.title'),
+      title: t("companyprofil.news.carousel.item2.title"),
-      subTitle: t('companyprofil.news.carousel.item2.desc'),
+      subTitle: t("companyprofil.news.carousel.item2.desc"),
       imgUrl: carouselShow2,
     },
     {
-      title: t('companyprofil.news.carousel.item3.title'),
+      title: t("companyprofil.news.carousel.item3.title"),
-      subTitle: t('companyprofil.news.carousel.item3.desc'),
+      subTitle: t("companyprofil.news.carousel.item3.desc"),
       imgUrl: carouselShow3,
     },
     {
-      title: t('companyprofil.news.carousel.item4.title'),
+      title: t("companyprofil.news.carousel.item4.title"),
-      subTitle: t('companyprofil.news.carousel.item4.desc'),
+      subTitle: t("companyprofil.news.carousel.item4.desc"),
       imgUrl: carouselShow4,
     },
     {
-      title: t('companyprofil.news.carousel.item5.title'),
+      title: t("companyprofil.news.carousel.item5.title"),
-      subTitle: t('companyprofil.news.carousel.item5.desc'),
+      subTitle: t("companyprofil.news.carousel.item5.desc"),
       imgUrl: carouselShow5,
     },
   ],
@@ -255,7 +239,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo,
       },
     });
   }
@@ -271,28 +255,31 @@ onUnmounted(() => {
       <img src="@/assets/image/logo.png" alt="logo" />
     </div>
     <div class="tabs">
-      <div class="tab-item" :class="{
+      <div
-        active: currentTab === 'home',
+        class="tab-item"
-      }" @click="handleTabClick('home')">
+        :class="{
+          active: currentTab === 'home',
+        }"
+        @click="handleTabClick('home')"
+      >
         {{ t("home.nav.home") }}
       </div>
-      <div class="tab-item" :class="{
+      <div
-        active:
+        class="tab-item"
-          currentTab ===
+        :class="{
-          'companyprofil',
+          active: currentTab === 'companyprofil',
-      }" @click="
+        }"
-        handleTabClick(
+        @click="handleTabClick('companyprofil')"
-          'companyprofil'
+      >
-        )
-        ">
         {{ t("home.nav.company") }}
       </div>
-      <div class="tab-item" :class="{
+      <div
-        active:
+        class="tab-item"
-          currentTab === 'business',
+        :class="{
-      }" @click="
+          active: currentTab === 'business',
-        handleTabClick('business')
+        }"
-        ">
+        @click="handleTabClick('business')"
+      >
         {{ t("home.nav.business") }}
       </div>
     </div>
@@ -301,14 +288,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">
+      <div
-        {{ t('companyprofil.slogan.title1') }}
+        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">
+      <div
-        {{ t('companyprofil.slogan.title2') }}
+        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">
+      <div
-        {{ t('companyprofil.slogan.desc') }}
+        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 />
@@ -317,164 +310,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
-        <div class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate">
+        class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col"
-          {{ t('companyprofil.intro.label') }}
+      >
+        <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
-        <div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate">
+        class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]"
-          {{ t('companyprofil.team.label') }}
+      >
+        <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" />
+              <img
-              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
+                class="w-[58px] h-[58px]"
-                <n-divider class="absolute left-[-23px] top-[6px]" style="
+                src="@/assets/image/cl.png"
-                    background-color: #8b59f7;
+                alt="cl"
-                  " vertical />{{ t('companyprofil.team.features.global.title') }}
+              />
+              <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" />
+              <img
-              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
+                class="w-[58px] h-[50px]"
-                <n-divider class="absolute left-[-23px] top-[6px]" style="
+                src="@/assets/image/heart.png"
-                    background-color: #8b59f7;
+                alt="cl"
-                  " vertical />{{ t('companyprofil.team.features.fans.title') }}
+              />
+              <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" />
+              <img
-              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
+                class="w-[54px] h-[52px]"
-                <n-divider class="absolute left-[-23px] top-[6px]" style="
+                src="@/assets/image/3p.png"
-                    background-color: #8b59f7;
+                alt="cl"
-                  " vertical />{{ t('companyprofil.team.features.talent.title') }}
+              />
+              <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"
+        <img
-          alt="cl" />
+          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
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title1') }}</div>
+            class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title2') }}</div>
+          >
+            <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
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title1') }}</div>
+            class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
-            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title2') }}</div>
+          >
+            <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="{
+          <div
-            transform: `translateX(-${getSlideOffset()}px)`,
+            ref="carouselTrack"
-          }" @mousedown="handleDragStart" @mousemove="handleDragMove" @mouseup="handleDragEnd"
+            class="carousel-track"
-            @mouseleave="handleDragEnd" @touchstart="handleDragStart" @touchmove="handleDragMove"
+            :style="{
-            @touchend="handleDragEnd">
+              transform: `translateX(-${getSlideOffset()}px)`,
-            <div v-for="(item, idx) in getVisibleItems()" :key="idx" class="carousel-item cursor-pointer"
+            }"
-              @click="handleCarouselClick(item, $event)">
+            @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">
@@ -573,9 +654,7 @@ onUnmounted(() => {
   left: 720px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom,
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-      #e6eaee 50%,
-      transparent 50%);
   background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -586,9 +665,7 @@ onUnmounted(() => {
   left: 952px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom,
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-      #e6eaee 50%,
-      transparent 50%);
   background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -599,9 +676,7 @@ onUnmounted(() => {
   left: 1182px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom,
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-      #e6eaee 50%,
-      transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }

src/views/companyprofil/size375/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
+          :class="{ active: currentTab === 'companyprofil' }"
-          @click="handleTabClick('company')"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -447,12 +447,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 +463,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 +478,7 @@ const state = reactive({
       imgUrl: carouselShow4,
     },
     {
+      titleNo: "5",
       title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
       subTitle:
         "在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
@@ -482,7 +487,6 @@ const state = reactive({
     },
   ],
 });
-
 const carouselTrack = ref(null);
 const currentIndex = ref(0);
 const isTransitioning = ref(false);
@@ -585,6 +589,7 @@ onUnmounted(() => {
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -727,7 +732,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo,
       },
     });
   }
@@ -763,9 +768,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;

src/views/companyprofil/size768/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
+          :class="{ active: currentTab === 'companyprofil' }"
-          @click="handleTabClick('company')"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -439,12 +439,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 +455,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 +470,7 @@ const state = reactive({
       imgUrl: carouselShow4,
     },
     {
+      titleNo: "5",
       title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
       subTitle:
         "在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
@@ -577,6 +582,7 @@ onUnmounted(() => {
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
+  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -719,7 +725,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo,
       },
     });
   }

src/views/companyprofildetail/size1920/index.vue

@@ -1,46 +1,47 @@
 <template>
   <div class="page-container">
     <header className="header">
-    <div class="logo">
+      <div class="logo">
-      <img src="@/assets/image/logo.png" alt="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="tab-item" :class="{
+      <div class="tabs">
-        active:
+        <div
-          currentTab ===
+          class="tab-item"
-          'companyprofil',
+          :class="{
-      }" @click="
+            active: currentTab === 'home',
-        handleTabClick(
+          }"
-          'companyprofil'
+          @click="handleTabClick('home')"
-        )
+        >
-        ">
+          {{ t("home.nav.home") }}
-        {{ t("home.nav.company") }}
+        </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>
-      <div class="tab-item" :class="{
+    </header>
-        active:
-          currentTab === 'business',
-      }" @click="
-        handleTabClick('business')
-        ">
-        {{ t("home.nav.business") }}
-      </div>
-    </div>
-  </header>
     <main class="px-[490px]">
       <section
         className="section-first"
-        v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
+        v-if="state.pageTitleNo === '1'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
-          <div
+          <div class="w-full title mt-[158px] text-center div-indent">
-            class="w-full title mt-[158px]  text-center div-indent"
-          >
             实现技术突破，引领文艺创作技术革新
           </div>
           <div
@@ -95,7 +96,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">
@@ -163,7 +164,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">
@@ -234,7 +235,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">
@@ -301,7 +302,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">
@@ -388,16 +389,16 @@ import {
 import { useHome } from "@/store/home/index.js";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
- 
+
 const { t } = useI18n();
 const state = reactive({
-  pageTitle: "",
+  pageTitleNo: "",
 });
 
 const { currentTab } = useHome();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitle = route.query.title;
+  state.pageTitleNo = route.query.titleNo;
 });
 onMounted(() => {});
 onUnmounted(() => {});
@@ -461,7 +462,6 @@ onUnmounted(() => {});
 
 .div-indent {
   text-indent: 2em; // Adjust the value as needed for the desired indent
-
 }
 .title {
   line-height: 110px;

src/views/companyprofildetail/size375/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
+          :class="{ active: currentTab === 'companyprofil' }"
-          @click="handleTabClick('company')"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -31,7 +31,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 +88,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 +152,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 +219,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 +282,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">
@@ -363,18 +363,25 @@ import {
   onBeforeMount,
 } from "vue";
 import { useHome } from "@/store/home/index.js";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
 const state = reactive({
-  pageTitle: "",
+  pageTitleNo: "",
 });
 
 const { currentTab } = useHome();
 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">

src/views/companyprofildetail/size768/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'company' }"
+          :class="{ active: currentTab === 'companyprofil' }"
-          @click="handleTabClick('company')"
+          @click="handleTabClick('companyprofil')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @click="handleTabClick('businessintroduction')"
         >
           业务介绍
         </div>
@@ -31,7 +31,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 +88,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 +152,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 +219,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 +282,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">
@@ -365,13 +365,13 @@ import {
 import { useHome } from "@/store/home/index.js";
 import { useRoute } from "vue-router";
 const state = reactive({
-  pageTitle: "",
+  pageTitleNo: "",
 });
 
 const { currentTab } = useHome();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitle = route.query.title;
+  state.pageTitleNo = route.query.titleNo;
 });
 onMounted(() => {});
 onUnmounted(() => {});

src/views/home/size375/index.vue

@@ -21,8 +21,8 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @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"
+            :src="src"
-          />
-          <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"
           />
         </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-[#10253E] text-[113px] mt-[87px]">FiEE</div>
-          <div class="text-[#455363] text-[72px] mt-[78px] pr-[139px]">
+          <div class="text-[#455363] text-[72px] mt-[159px] pr-[139px]">
             {{ t("home.section3.desc") }}
           </div>
-        </div>
+
-        <div
+          <n-marquee auto-fill>
-          class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
+            <div style="display: flex" class="mt-[317px]">
-        >
+              <div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
-          <div ref="carouselTrack" class="carousel-track">
+                <img
-            <div
+                  class="w-[973px] h-[973px]"
-              v-for="(item, idx) in getVisibleItems()"
+                  src="@/assets/image/jj1.png"
-              :key="idx"
+                  alt="logo"
-              class="carousel-item"
+                />
-            >
+
-              <img class="carousel-image" :src="item.imgUrl" />
+                <div
-              <div class="carousel-title">
+                  class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
-                <div>{{ item.title }}</div>
+                >
+                  {{ 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 class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
-                <div>{{ item.subTitle }}</div>
+                <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="content4 mt-[451px]">
-          <div class="text-[#8B59F7] text-[72px]">
+          <div class="text-[#8B59F7] text-[113px]">
             {{ t("home.section4.label") }}
           </div>
-          <div class="text-[#10253E] text-[113pxpx] mt-[43px]">
+          <div class="text-[#10253E] text-[113px] mt-[87px] font-semibold">
-            <div>多元业务协同</div>
+            <div>
-            <div>推动文艺影响力腾飞</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="container mt-[166px]">
-            <div class="mt-[493px]">
+            <div class="card">
-              <div class="card">
+              <img
-                <img
+                src="@/assets/image/home/375/imageShow-2.png"
-                  src="@/assets/image/home/375/imageShow-1.png"
+                alt="Image 2"
-                  alt="Image 1"
+              />
-                />
+              <div class="js-detail font-bold">
-                <div class="js-detail font-bold">
+                {{ t("home.section4.cards2.title") }}
-                  {{ t("home.section4.cards1.title") }}
+                <div
-                  <div class="text-[#455363] text-[72px] font-normal">
+                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
-                    {{ t("home.section4.cards1.desc") }}
+                >
-                  </div>
+                  {{ t("home.section4.cards2.desc") }}
-                </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>
               </div>
             </div>
-            <div class="right mt-[215px]">
+            <div class="card">
-              <div class="card">
+              <img
-                <img
+                src="@/assets/image/home/375/imageShow-1.png"
-                  src="@/assets/image/home/375/imageShow-2.png"
+                alt="Image 1"
-                  alt="Image 2"
+              />
-                />
+              <div class="js-detail font-bold">
-                <div class="js-detail font-bold">
+                {{ t("home.section4.cards1.title") }}
-                  {{ t("home.section4.cards2.title") }}
+                <div
-                  <div class="text-[#455363] text-[72px] font-normal">
+                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
-                    {{ t("home.section4.cards2.desc") }}
+                >
-                  </div>
+                  {{ t("home.section4.cards1.desc") }}
                 </div>
               </div>
-              <div class="card">
+            </div>
-                <img
+            <div class="card">
-                  src="@/assets/image/home/375/imageShow-4.png"
+              <img
-                  alt="Image 4"
+                src="@/assets/image/home/375/imageShow-4.png"
-                />
+                alt="Image 4"
-                <div class="js-detail font-bold">
+              />
-                  {{ t("home.section4.cards4.title") }}
+              <div class="js-detail font-bold">
-                  <div class="text-[#455363] text-[72px] font-normal">
+                {{ t("home.section4.cards4.title") }}
-                    {{ t("home.section4.cards4.desc") }}
+                <div
-                  </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 { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
+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";
+const carouselImages = {
-import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
+  zh: [
-import imageshow5 from "@/assets/image/businessintroduction/375/imageshow-5.png";
+    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,
-const state = reactive({
+    new URL("@/assets/image/home/375/zh/carousel-3.png", import.meta.url).href,
-  marqueeArr: [
+    new URL("@/assets/image/home/375/zh/carousel-4.png", import.meta.url).href,
-    {
-      title: "2025年",
-      subTitle:
-        "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
-      imgUrl: imageshow3, // 使用导入的图片
-    },
-    {
-      title: "2026年",
-      subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
-      imgUrl: imageshow4, // 使用导入的图片
-    },
-    {
-      title: "2027年",
-      subTitle:
-        "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
-      imgUrl: imageshow5, // 使用导入的图片
-    },
   ],
+  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 (delta > 0 && currentSection < 3) {
-      if (Math.abs(delta) > scrollThreshold) {
+        goToSection(currentSection + 1);
-        if (delta > 0 && currentSection < 3) {
+      } else if (delta < 0 && currentSection > 0) {
-          goToSection(currentSection + 1);
+        goToSection(currentSection - 1);
-        } else if (delta < 0 && currentSection > 0) {
-          goToSection(currentSection - 1);
-        }
       }
     }
-    return; // 其他情况允许自然滚动
+    return;
   }
 
-  // 非最后一个panel的处理保持不变
+  // 非最后一个panel的处理
-  if (Math.abs(delta) > scrollThreshold) {
+  if (delta > 0 && currentSection < 3) {
-    if (delta > 0 && currentSection < 3) {
+    goToSection(currentSection + 1);
-      goToSection(currentSection + 1);
+  } else if (delta < 0 && currentSection > 0) {
-    } else if (delta < 0 && currentSection > 0) {
+    goToSection(currentSection - 1);
-      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,
+          if (i === 3) {
-              ease: "none",
+            // 第四个面板
-              scrollTrigger: {
+            const content = panel.querySelector(".content4");
-                trigger: panel,
+            if (bg && content) {
-                start: "top bottom",
+              const contentHeight = content.offsetHeight;
-                end: "bottom top",
+              const viewportHeight = window.innerHeight;
-                scrub: true,
+              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;
+  height: 100%;
-}
-
-.divider2 {
-  position: absolute;
-  z-index: 3;
-  left: 715px;
-  width: 1px;
-  height: 100vw;
-  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
-  background-repeat: repeat-y;
-}
-
-.divider3 {
-  position: absolute;
-  z-index: 3;
-  left: 950px;
-  width: 1px;
-  height: 100vw;
-  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
-  background-repeat: repeat-y;
-}
-
-.divider4 {
-  position: absolute;
-  z-index: 3;
-  left: 1186px;
-  width: 1px;
-  height: 100vw;
-  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
-  background-repeat: repeat-y;
 }
 
 .divider5 {
   position: absolute;
   z-index: 3;
-  left: 1420px;
+  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;
+    height: 100vh;
-    min-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;
+  padding: 46px 36px 118px 51px;
-  border-radius: 30px;
+  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;
+  margin-top: 87px;
-  font-size: 50px;
+  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;
+  display: -webkit-box;
-  color: #455363;
+  -webkit-line-clamp: 1;
-  font-size: 40px;
+  -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>

src/views/home/size768/index.vue

@@ -21,8 +21,8 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'business' }"
+          :class="{ active: currentTab === 'businessintroduction' }"
-          @click="handleTabClick('business')"
+          @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/768/zh/carousel-1.png"
+            :src="src"
-          />
-          <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"
           />
         </n-carousel>
       </section>
@@ -94,25 +84,100 @@
           <div class="text-[#455363] text-[40px] mt-[78px] pr-[100px]">
             {{ t("home.section3.desc") }}
           </div>
-        </div>
+          <n-marquee auto-fill>
-        <div
+            <div style="display: flex" class="mt-[190px]">
-          class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
+              <div class="text-[#455363] text-[40px] mr-[83px]">
-        >
+                <img
-          <div ref="carouselTrack" class="carousel-track">
+                  class="w-[475px] h-[475px]"
-            <div
+                  src="@/assets/image/jj1.png"
-              v-for="(item, idx) in getVisibleItems()"
+                  alt="logo"
-              :key="idx"
+                />
-              class="carousel-item"
+
-            >
+                <div
-              <img class="carousel-image" :src="item.imgUrl" />
+                  class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
-              <div class="carousel-title">
+                >
-                <div>{{ item.title }}</div>
+                  {{ 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 class="text-[#455363] text-[40px] mr-[83px]">
-                <div>{{ item.subTitle }}</div>
+                <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]">
+                <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]">
+                <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]">
+                <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>
 
@@ -122,14 +187,18 @@
         <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 +273,9 @@
     </footer>
   </div>
 </template>
-
 <script setup>
-import { NCarousel, NDivider, NImage } from "naive-ui";
+import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
+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 +296,54 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
 const scrollDownVisible = ref(true);
 const { t } = useI18n();
 
-// 导入图片
+// 导入所有语言的轮播图
-import imageshow3 from "@/assets/image/businessintroduction/768/imageshow-3.png";
+const carouselImages = {
-import imageshow4 from "@/assets/image/businessintroduction/768/imageshow-4.png";
+  zh: [
-import imageshow5 from "@/assets/image/businessintroduction/768/imageshow-5.png";
+    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,
-const state = reactive({
+    new URL("@/assets/image/home/768/zh/carousel-3.png", import.meta.url).href,
-  marqueeArr: [
+    new URL("@/assets/image/home/768/zh/carousel-4.png", import.meta.url).href,
-    {
-      title: "2025年",
-      subTitle:
-        "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
-      imgUrl: imageshow3, // 使用导入的图片
-    },
-    {
-      title: "2026年",
-      subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
-      imgUrl: imageshow4, // 使用导入的图片
-    },
-    {
-      title: "2027年",
-      subTitle:
-        "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
-      imgUrl: imageshow5, // 使用导入的图片
-    },
   ],
+  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 +417,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 +540,7 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
+                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -512,6 +574,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 +602,7 @@ watch(
 
             tl.to(
               [
+                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -546,6 +625,7 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
+                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -579,6 +659,14 @@ watch(
                   y: 0,
                 },
                 "-=0.6"
+              )
+              .to(
+                ".content3 > .n-marquee",
+                {
+                  opacity: 1,
+                  y: 0,
+                },
+                "-=0.6"
               );
           },
           onLeaveBack: () => {
@@ -591,6 +679,7 @@ watch(
 
             tl.to(
               [
+                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -868,13 +957,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 +1010,7 @@ const getVisibleItems = () => {
 }
 .scroll-down {
   position: fixed;
-  bottom: 50px;
+  bottom: 110px;
   left: 50%;
   transform: translateX(-50%);
   color: #ffffff;
@@ -977,50 +1059,26 @@ const getVisibleItems = () => {
 .divider1 {
   position: absolute;
   z-index: 3;
-  left: 477px;
+  left: 22px;
-  width: 1px;
+  width: 4px;
-  height: 100vw;
+  height: 100%;
-}
-
-.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;
+  left: 400px;
-  width: 1px;
+  height: 100%;
-  height: 100vw;
   background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-size: 10px 60px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
-  background-repeat: repeat-y;
-}
-
-.divider4 {
-  position: absolute;
-  z-index: 3;
-  left: 1186px;
-  width: 1px;
-  height: 100vw;
-  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
 
 .divider5 {
   position: absolute;
   z-index: 3;
-  left: 1420px;
+  right: 22px;
-  width: 1px;
+  height: 100%;
-  height: 100vw;
 }
 
 .carousel-img {
@@ -1106,6 +1164,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 {
@@ -1141,7 +1212,7 @@ const getVisibleItems = () => {
   :deep(.n-divider) {
     border-left: none;
     background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-    background-size: 1px 30px;
+    background-size: 10px 60px;
     background-repeat: repeat-y;
   }
 }
@@ -1229,8 +1300,12 @@ const getVisibleItems = () => {
 }
 
 .carousel-subtitle {
-  margin-top: 23px;
+  display: -webkit-box;
-  color: #455363;
+  -webkit-line-clamp: 1;
-  font-size: 40px;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+  max-height: calc(1.5em * 1);
 }
 </style>