src/components/AppHeader.vue

@@ -1,45 +1,35 @@
 <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
+      <div class="tabs">
-        class="tab-item"
+        <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
-        :class="{ active: currentTab === 'companyprofil' }"
+          {{ t('home.nav.home') }}
-        @click="handleTabClick('companyprofil')"
+        </div>
-      >
+        <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>
-      <div
+    </header>
-        class="tab-item"
-        :class="{ active: currentTab === 'businessintroduction' }"
-        @click="handleTabClick('businessintroduction')"
-      >
-        {{ t("home.nav.business") }}
-      </div>
-    </div>
-  </header>
 </template>
 <script setup>
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
-import { useHome } from "@/store/home/index.js";
 import { useRouter } from "vue-router";
+import { useHome } from '@/store/home/index.js';
 const router = useRouter();
 const { currentTab } = useHome();
 const { t } = useI18n();
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
-  router.push("/" + tab);
+  router.push('/'+tab);
-};
+}
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+
+</style>

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

src/views/businessintroduction/size768/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'companyprofil' }"
+          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('companyprofil')"
+          @click="handleTabClick('company')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'businessintroduction' }"
+          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('businessintroduction')"
+          @click="handleTabClick('business')"
         >
           业务介绍
         </div>
@@ -655,7 +655,7 @@ onMounted(() => {
         });
       }
     });
-
+    console.log(moveRefs.value);
     // 初始化轮播动画
     nextTick(() => {
       if (carouselTrack.value) {
@@ -694,11 +694,8 @@ 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,5 +1,10 @@
 <script setup>
-import { onUnmounted, ref, watch, reactive } from "vue";
+import {
+  onUnmounted,
+  ref,
+  watch,
+  reactive
+} from "vue";
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
@@ -12,7 +17,8 @@ import { NDivider } from "naive-ui";
 gsap.registerPlugin(ScrollTrigger);
 const { currentTab } = useHome();
 const router = useRouter();
-const { transitionState } = useTransitionComposable();
+const { transitionState } =
+  useTransitionComposable();
 const main = ref();
 let ctx;
 const { t } = useI18n();
@@ -21,54 +27,65 @@ const handleTabClick = (tab) => {
   router.push("/" + tab);
 };
 watch(
-  [() => transitionState.transitionComplete, main],
+  [
+    () =>
+      transitionState.transitionComplete,
+    main,
+  ],
   (newValue) => {
     if (newValue && main.value) {
       ctx = gsap.context((self) => {
         // Text animations from left
-        gsap.utils.toArray(".text-animate").forEach((text) => {
+        gsap.utils
-          gsap.from(text, {
+          .toArray(".text-animate")
-            x: -100,
+          .forEach((text) => {
-            opacity: 0,
+            gsap.from(text, {
-            duration: 1,
+              x: -100,
-            scrollTrigger: {
+              opacity: 0,
-              trigger: text,
+              duration: 1,
-              start: "top 80%",
+              scrollTrigger: {
-              end: "top 50%",
+                trigger: text,
-              toggleActions: "play none none reverse",
+                start: "top 80%",
-            },
+                end: "top 50%",
+                toggleActions:
+                  "play none none reverse",
+              },
+            });
           });
-        });
 
         // Image animations from right
-        gsap.utils.toArray(".image-animate").forEach((image) => {
+        gsap.utils
-          gsap.from(image, {
+          .toArray(".image-animate")
-            x: 100,
+          .forEach((image) => {
-            opacity: 0,
+            gsap.from(image, {
-            duration: 1,
+              x: 100,
-            scrollTrigger: {
+              opacity: 0,
-              trigger: image,
+              duration: 1,
-              start: "top 80%",
+              scrollTrigger: {
-              end: "top 50%",
+                trigger: image,
-              toggleActions: "play none none reverse",
+                start: "top 80%",
-            },
+                end: "top 50%",
+                toggleActions:
+                  "play none none reverse",
+              },
+            });
           });
-        });
 
         // 轮播卡片上升动画
-        gsap.from(".carousel-item", {
+        gsap.from('.carousel-item', {
           y: 100,
           opacity: 0,
           duration: 1.5,
           stagger: 0.4,
           scrollTrigger: {
-            trigger: ".carousel-container",
+            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);
     }
   },
@@ -126,9 +143,8 @@ const handleDragMove = (e) => {
   const walk = startX.value - x;
 
   if (carouselTrack.value) {
-    carouselTrack.value.style.transform = `translateX(-${
+    carouselTrack.value.style.transform = `translateX(-${scrollLeft.value + walk
-      scrollLeft.value + walk
+      }px)`;
-    }px)`;
   }
 };
 
@@ -176,28 +192,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,
     },
   ],
@@ -239,7 +255,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        titleNo: item.titleNo,
+        title: item.title,
       },
     });
   }
@@ -255,31 +271,28 @@ onUnmounted(() => {
       <img src="@/assets/image/logo.png" alt="logo" />
     </div>
     <div class="tabs">
-      <div
+      <div class="tab-item" :class="{
-        class="tab-item"
+        active: currentTab === 'home',
-        :class="{
+      }" @click="handleTabClick('home')">
-          active: currentTab === 'home',
-        }"
-        @click="handleTabClick('home')"
-      >
         {{ t("home.nav.home") }}
       </div>
-      <div
+      <div class="tab-item" :class="{
-        class="tab-item"
+        active:
-        :class="{
+          currentTab ===
-          active: currentTab === 'companyprofil',
+          'companyprofil',
-        }"
+      }" @click="
-        @click="handleTabClick('companyprofil')"
+        handleTabClick(
-      >
+          'companyprofil'
+        )
+        ">
         {{ t("home.nav.company") }}
       </div>
-      <div
+      <div class="tab-item" :class="{
-        class="tab-item"
+        active:
-        :class="{
+          currentTab === 'business',
-          active: currentTab === 'business',
+      }" @click="
-        }"
+        handleTabClick('business')
-        @click="handleTabClick('business')"
+        ">
-      >
         {{ t("home.nav.business") }}
       </div>
     </div>
@@ -288,20 +301,14 @@ onUnmounted(() => {
     <div class="head relative">
       <img src="@/assets/image/gk.png" alt="head" />
 
-      <div
+      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
-        class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate"
+        {{ t('companyprofil.slogan.title1') }}
-      >
-        {{ t("companyprofil.slogan.title1") }}
       </div>
-      <div
+      <div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate">
-        class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate"
+        {{ t('companyprofil.slogan.title2') }}
-      >
-        {{ t("companyprofil.slogan.title2") }}
       </div>
-      <div
+      <div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
-        class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate"
+        {{ t('companyprofil.slogan.desc') }}
-      >
-        {{ t("companyprofil.slogan.desc") }}
       </div>
     </div>
     <n-divider class="divider1" vertical />
@@ -310,252 +317,164 @@ onUnmounted(() => {
     <div class="divider4" style=""></div>
     <n-divider class="divider5" vertical />
     <div class="bg-[#F8F9FF]">
-      <div
+      <div class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col">
-        class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col"
+        <div class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate">
-      >
+          {{ t('companyprofil.intro.label') }}
-        <div
-          class="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
+            <img class="w-[465px] h-[415px]" src="@/assets/image/ship.png" alt="company" />
-              class="w-[465px] h-[415px]"
-              src="@/assets/image/ship.png"
-              alt="company"
-            />
           </div>
         </div>
       </div>
-      <div
+      <div class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]">
-        class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]"
+        <div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate">
-      >
+          {{ t('companyprofil.team.label') }}
-        <div
-          class="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
+              <img class="w-[58px] h-[58px]" src="@/assets/image/cl.png" alt="cl" />
-                class="w-[58px] h-[58px]"
+              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
-                src="@/assets/image/cl.png"
+                <n-divider class="absolute left-[-23px] top-[6px]" style="
-                alt="cl"
+                    background-color: #8b59f7;
-              />
+                  " 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
+              <img class="w-[58px] h-[50px]" src="@/assets/image/heart.png" alt="cl" />
-                class="w-[58px] h-[50px]"
+              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
-                src="@/assets/image/heart.png"
+                <n-divider class="absolute left-[-23px] top-[6px]" style="
-                alt="cl"
+                    background-color: #8b59f7;
-              />
+                  " 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
+              <img class="w-[54px] h-[52px]" src="@/assets/image/3p.png" alt="cl" />
-                class="w-[54px] h-[52px]"
+              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
-                src="@/assets/image/3p.png"
+                <n-divider class="absolute left-[-23px] top-[6px]" style="
-                alt="cl"
+                    background-color: #8b59f7;
-              />
+                  " 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
+            <img class="w-[465px] h-[625px] mt-[80px]" src="@/assets/image/randg.png" alt="cl" />
-              class="w-[465px] h-[625px] mt-[80px]"
-              src="@/assets/image/randg.png"
-              alt="cl"
-            />
           </div>
         </div>
       </div>
-      <div
+      <div class="content3 relative bg-[#fff] pt-[185px] pb-[158px] overflow-hidden">
-        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
+        <img class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px] image-animate " src="@/assets/image/xlv.png"
-          class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px] image-animate"
+          alt="cl" />
-          src="@/assets/image/xlv.png"
-          alt="cl"
-        />
         <img class="absolute" src="@/assets/image/xbg.png" alt="cl" />
-        <div
+        <div class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate">
-          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
+          <div class="w-[419px] mr-[30px] flex flex-col justify-center text-animate">
-            class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
+            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title1') }}</div>
-          >
+            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title2') }}</div>
-            <div class="text-[#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
+            <img class="w-[465px] h-[493px]" src="@/assets/image/btable.png" alt="cl" />
-              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
+          <div class="w-[419px] mr-[30px] flex flex-col justify-center text-animate">
-            class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
+            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title1') }}</div>
-          >
+            <div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title2') }}</div>
-            <div class="text-[#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
+            <img class="w-[465px] h-[369px]" src="@/assets/image/huang.png" alt="cl" />
-              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
+        <div class="relative pl-[505px] pr-[490px] flex z-3 mt-[130px] z-4 flex-col text-animate">
-          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
+                <img class="w-[38px] h-[38px]" src="@/assets/image/companyprofil/768/icon-left.png" />
-                  class="w-[38px] h-[38px]"
-                  src="@/assets/image/companyprofil/768/icon-left.png"
-                />
               </div>
               <div class="arrow-btn ml-[25px]" @click="handleNext">
-                <img
+                <img class="w-[38px] h-[38px]" src="@/assets/image/companyprofil/768/icon-right.png" />
-                  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
+          <div ref="carouselTrack" class="carousel-track " :style="{
-            ref="carouselTrack"
+            transform: `translateX(-${getSlideOffset()}px)`,
-            class="carousel-track"
+          }" @mousedown="handleDragStart" @mousemove="handleDragMove" @mouseup="handleDragEnd"
-            :style="{
+            @mouseleave="handleDragEnd" @touchstart="handleDragStart" @touchmove="handleDragMove"
-              transform: `translateX(-${getSlideOffset()}px)`,
+            @touchend="handleDragEnd">
-            }"
+            <div v-for="(item, idx) in getVisibleItems()" :key="idx" class="carousel-item cursor-pointer"
-            @mousedown="handleDragStart"
+              @click="handleCarouselClick(item, $event)">
-            @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">
@@ -654,7 +573,9 @@ onUnmounted(() => {
   left: 720px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
+  background-image: linear-gradient(to bottom,
+      #e6eaee 50%,
+      transparent 50%);
   background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -665,7 +586,9 @@ onUnmounted(() => {
   left: 952px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
+  background-image: linear-gradient(to bottom,
+      #e6eaee 50%,
+      transparent 50%);
   background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
@@ -676,7 +599,9 @@ onUnmounted(() => {
   left: 1182px;
   width: 1px;
   height: 100vw;
-  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
+  background-image: linear-gradient(to bottom,
+      #e6eaee 50%,
+      transparent 50%);
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }

src/views/companyprofil/size375/index.vue

@@ -14,15 +14,15 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'companyprofil' }"
+          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('companyprofil')"
+          @click="handleTabClick('company')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'businessintroduction' }"
+          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('businessintroduction')"
+          @click="handleTabClick('business')"
         >
           业务介绍
         </div>
@@ -447,14 +447,12 @@ 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:
@@ -463,14 +461,12 @@ const state = reactive({
       imgUrl: carouselShow2,
     },
     {
-      titleNo: "3",
       title: "助力文艺创作者，FiEE 发布'AI × 短视频'全链路解决方案",
       subTitle:
         "对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。 作品完成后的传播与推广，同样是一道难以跨越的鸿沟。",
       imgUrl: carouselShow3,
     },
     {
-      titleNo: "4",
       title: "FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星",
       subTitle:
         "在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。 今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL 孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。",
@@ -478,7 +474,6 @@ const state = reactive({
       imgUrl: carouselShow4,
     },
     {
-      titleNo: "5",
       title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
       subTitle:
         "在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
@@ -487,6 +482,7 @@ const state = reactive({
     },
   ],
 });
+
 const carouselTrack = ref(null);
 const currentIndex = ref(0);
 const isTransitioning = ref(false);
@@ -589,7 +585,6 @@ onUnmounted(() => {
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
-  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -732,7 +727,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        titleNo: item.titleNo,
+        title: item.title,
       },
     });
   }
@@ -768,12 +763,9 @@ 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 === 'companyprofil' }"
+          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('companyprofil')"
+          @click="handleTabClick('company')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'businessintroduction' }"
+          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('businessintroduction')"
+          @click="handleTabClick('business')"
         >
           业务介绍
         </div>
@@ -439,14 +439,12 @@ 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:
@@ -455,14 +453,12 @@ const state = reactive({
       imgUrl: carouselShow2,
     },
     {
-      titleNo: "3",
       title: "助力文艺创作者，FiEE 发布'AI × 短视频'全链路解决方案",
       subTitle:
         "对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。 作品完成后的传播与推广，同样是一道难以跨越的鸿沟。",
       imgUrl: carouselShow3,
     },
     {
-      titleNo: "4",
       title: "FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星",
       subTitle:
         "在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。 今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL 孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。",
@@ -470,7 +466,6 @@ const state = reactive({
       imgUrl: carouselShow4,
     },
     {
-      titleNo: "5",
       title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
       subTitle:
         "在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
@@ -582,7 +577,6 @@ onUnmounted(() => {
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
-  router.push("/" + tab);
 };
 
 const goToSection = (i) => {
@@ -725,7 +719,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        titleNo: item.titleNo,
+        title: item.title,
       },
     });
   }

src/views/companyprofildetail/size1920/index.vue

@@ -1,47 +1,46 @@
 <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="tabs">
+      <div class="tab-item" :class="{
-        <div
+        active:
-          class="tab-item"
+          currentTab ===
-          :class="{
+          'companyprofil',
-            active: currentTab === 'home',
+      }" @click="
-          }"
+        handleTabClick(
-          @click="handleTabClick('home')"
+          'companyprofil'
-        >
+        )
-          {{ t("home.nav.home") }}
+        ">
-        </div>
+        {{ t("home.nav.company") }}
-        <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>
-    </header>
+      <div class="tab-item" :class="{
+        active:
+          currentTab === 'business',
+      }" @click="
+        handleTabClick('business')
+        ">
+        {{ t("home.nav.business") }}
+      </div>
+    </div>
+  </header>
     <main class="px-[490px]">
       <section
         className="section-first"
-        v-if="state.pageTitleNo === '1'"
+        v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
-          <div class="w-full title mt-[158px] text-center div-indent">
+          <div
+            class="w-full title mt-[158px]  text-center div-indent"
+          >
             实现技术突破，引领文艺创作技术革新
           </div>
           <div
@@ -96,7 +95,7 @@
 
       <section
         className="section-sec"
-        v-if="state.pageTitleNo === '2'"
+        v-if="state.pageTitle.includes('全球化战略升级')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -164,7 +163,7 @@
 
       <section
         className="section-third"
-        v-if="state.pageTitleNo === '3'"
+        v-if="state.pageTitle.includes('助力文艺创作者')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -235,7 +234,7 @@
 
       <section
         className="section-four"
-        v-if="state.pageTitleNo === '4'"
+        v-if="state.pageTitle.includes('培育文艺领域明日之星')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -302,7 +301,7 @@
 
       <section
         className="section-five"
-        v-if="state.pageTitleNo === '5'"
+        v-if="state.pageTitle.includes('多元人才汇聚')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -389,16 +388,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({
-  pageTitleNo: "",
+  pageTitle: "",
 });
 
 const { currentTab } = useHome();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitleNo = route.query.titleNo;
+  state.pageTitle = route.query.title;
 });
 onMounted(() => {});
 onUnmounted(() => {});
@@ -462,6 +461,7 @@ 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 === 'companyprofil' }"
+          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('companyprofil')"
+          @click="handleTabClick('company')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'businessintroduction' }"
+          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('businessintroduction')"
+          @click="handleTabClick('business')"
         >
           业务介绍
         </div>
@@ -31,7 +31,7 @@
     <main>
       <section
         className="section-first"
-        v-if="state.pageTitleNo === '1'"
+        v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -88,7 +88,7 @@
 
       <section
         className="section-sec"
-        v-if="state.pageTitleNo === '2'"
+        v-if="state.pageTitle.includes('全球化战略升级')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -152,7 +152,7 @@
 
       <section
         className="section-third"
-        v-if="state.pageTitleNo === '3'"
+        v-if="state.pageTitle.includes('助力文艺创作者')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -219,7 +219,7 @@
 
       <section
         className="section-four"
-        v-if="state.pageTitleNo === '4'"
+        v-if="state.pageTitle.includes('培育文艺领域明日之星')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -282,7 +282,7 @@
 
       <section
         className="section-five"
-        v-if="state.pageTitleNo === '5'"
+        v-if="state.pageTitle.includes('多元人才汇聚')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -363,25 +363,18 @@ import {
   onBeforeMount,
 } from "vue";
 import { useHome } from "@/store/home/index.js";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
-
-const router = useRouter();
 const state = reactive({
-  pageTitleNo: "",
+  pageTitle: "",
 });
 
 const { currentTab } = useHome();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitleNo = route.query.titleNo;
+  state.pageTitle = route.query.title;
 });
 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 === 'companyprofil' }"
+          :class="{ active: currentTab === 'company' }"
-          @click="handleTabClick('companyprofil')"
+          @click="handleTabClick('company')"
         >
           公司概况
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'businessintroduction' }"
+          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('businessintroduction')"
+          @click="handleTabClick('business')"
         >
           业务介绍
         </div>
@@ -31,7 +31,7 @@
     <main>
       <section
         className="section-first"
-        v-if="state.pageTitleNo === '1'"
+        v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -88,7 +88,7 @@
 
       <section
         className="section-sec"
-        v-if="state.pageTitleNo === '2'"
+        v-if="state.pageTitle.includes('全球化战略升级')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -152,7 +152,7 @@
 
       <section
         className="section-third"
-        v-if="state.pageTitleNo === '3'"
+        v-if="state.pageTitle.includes('助力文艺创作者')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -219,7 +219,7 @@
 
       <section
         className="section-four"
-        v-if="state.pageTitleNo === '4'"
+        v-if="state.pageTitle.includes('培育文艺领域明日之星')"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center">
@@ -282,7 +282,7 @@
 
       <section
         className="section-five"
-        v-if="state.pageTitleNo === '5'"
+        v-if="state.pageTitle.includes('多元人才汇聚')"
         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({
-  pageTitleNo: "",
+  pageTitle: "",
 });
 
 const { currentTab } = useHome();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitleNo = route.query.titleNo;
+  state.pageTitle = route.query.title;
 });
 onMounted(() => {});
 onUnmounted(() => {});

src/views/home/size375/index.vue

@@ -21,8 +21,8 @@
         </div>
         <div
           class="tab-item"
-          :class="{ active: currentTab === 'businessintroduction' }"
+          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('businessintroduction')"
+          @click="handleTabClick('business')"
         >
           {{ t("home.nav.business") }}
         </div>
@@ -35,10 +35,20 @@
       <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="src"
+            src="@/assets/image/home/375/zh/carousel-1.png"
+          />
+          <img
+            class="carousel-img"
+            src="@/assets/image/home/375/zh/carousel-2.png"
+          />
+          <img
+            class="carousel-img"
+            src="@/assets/image/home/375/zh/carousel-3.png"
+          />
+          <img
+            class="carousel-img"
+            src="@/assets/image/home/375/zh/carousel-4.png"
           />
         </n-carousel>
       </section>
@@ -61,7 +71,7 @@
         </div>
         <div class="content">
           <div
-            class="text-[#10253E] text-[123px] leading-[164px] font-semibold mt-[480px]"
+            class="text-[#10253E] text-[123px] leading-[164px] font-semibold"
           >
             {{ t("home.section2.title1") }}
           </div>
@@ -80,109 +90,33 @@
         <div class="divider4" style=""></div>
         <n-divider class="divider5" vertical />
         <div class="parallax-bg" style="margin-top: 70px"></div>
-        <div class="content3 mt-[451px]">
+        <div class="content3 mt-[348px]">
           <div class="text-[#8B59F7] text-[72px]">
             {{ t("home.section3.label") }}
           </div>
-          <div class="text-[#10253E] text-[113px] mt-[87px]">FiEE</div>
+          <div class="text-[#10253E] text-[113pxpx] mt-[43px]">FiEE</div>
-          <div class="text-[#455363] text-[72px] mt-[159px] pr-[139px]">
+          <div class="text-[#455363] text-[72px] mt-[78px] pr-[139px]">
             {{ t("home.section3.desc") }}
           </div>
-
+        </div>
-          <n-marquee auto-fill>
+        <div
-            <div style="display: flex" class="mt-[317px]">
+          class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
-              <div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
+        >
-                <img
+          <div ref="carouselTrack" class="carousel-track">
-                  class="w-[973px] h-[973px]"
+            <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-[82px] mt-[154px] break-words carousel-subtitle"
+              <div class="carousel-title">
-                >
+                <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="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
+              <div class="carousel-subtitle">
-                <img
+                <div>{{ item.subTitle }}</div>
-                  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>
-          </n-marquee>
+          </div>
         </div>
       </section>
 
@@ -193,77 +127,69 @@
         <div class="divider4" style=""></div>
         <n-divider class="divider5" vertical />
         <div class="parallax-bg"></div>
-        <div class="content4 mt-[451px]">
+        <div class="content4 mt-[408px]">
-          <div class="text-[#8B59F7] text-[113px]">
+          <div class="text-[#8B59F7] text-[72px]">
             {{ t("home.section4.label") }}
           </div>
-          <div class="text-[#10253E] text-[113px] mt-[87px] font-semibold">
+          <div class="text-[#10253E] text-[113pxpx] mt-[43px]">
-            <div>
+            <div>多元业务协同</div>
-              {{ t("home.section4.title1") }}
+            <div>推动文艺影响力腾飞</div>
-            </div>
-            <div>
-              {{ t("home.section4.title2") }}
-            </div>
           </div>
           <div
-            class="text-[#455363] text-[72px] mt-[159px] leading-[102px] pr-[139px]"
+            class="text-[#455363] text-[72px] mt-[78px] leading-[60px] pr-[139px]"
           >
             {{ t("home.section4.desc") }}
           </div>
-          <div class="container mt-[166px]">
+          <div class="container">
-            <div class="card">
+            <div class="mt-[493px]">
-              <img
+              <div class="card">
-                src="@/assets/image/home/375/imageShow-2.png"
+                <img
-                alt="Image 2"
+                  src="@/assets/image/home/375/imageShow-1.png"
-              />
+                  alt="Image 1"
-              <div class="js-detail font-bold">
+                />
-                {{ t("home.section4.cards2.title") }}
+                <div class="js-detail font-bold">
-                <div
+                  {{ t("home.section4.cards1.title") }}
-                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
+                  <div class="text-[#455363] text-[72px] font-normal">
-                >
+                    {{ t("home.section4.cards1.desc") }}
-                  {{ t("home.section4.cards2.desc") }}
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <img
+                  src="@/assets/image/home/375/imageShow-3.png"
+                  alt="Image 3"
+                />
+                <div class="js-detail font-bold">
+                  {{ t("home.section4.cards3.title") }}
+                  <div class="text-[#455363] text-[72px] font-normal">
+                    {{ t("home.section4.cards3.desc") }}
+                  </div>
                 </div>
               </div>
             </div>
-            <div class="card">
+            <div class="right mt-[215px]">
-              <img
+              <div class="card">
-                src="@/assets/image/home/375/imageShow-1.png"
+                <img
-                alt="Image 1"
+                  src="@/assets/image/home/375/imageShow-2.png"
-              />
+                  alt="Image 2"
-              <div class="js-detail font-bold">
+                />
-                {{ t("home.section4.cards1.title") }}
+                <div class="js-detail font-bold">
-                <div
+                  {{ t("home.section4.cards2.title") }}
-                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
+                  <div class="text-[#455363] text-[72px] font-normal">
-                >
+                    {{ t("home.section4.cards2.desc") }}
-                  {{ t("home.section4.cards1.desc") }}
+                  </div>
                 </div>
               </div>
-            </div>
+              <div class="card">
-            <div class="card">
+                <img
-              <img
+                  src="@/assets/image/home/375/imageShow-4.png"
-                src="@/assets/image/home/375/imageShow-4.png"
+                  alt="Image 4"
-                alt="Image 4"
+                />
-              />
+                <div class="js-detail font-bold">
-              <div class="js-detail font-bold">
+                  {{ t("home.section4.cards4.title") }}
-                {{ t("home.section4.cards4.title") }}
+                  <div class="text-[#455363] text-[72px] font-normal">
-                <div
+                    {{ t("home.section4.cards4.desc") }}
-                  class="text-[#455363] text-[72px] font-normal leading-[102px]"
+                  </div>
-                >
-                  {{ 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>
@@ -284,8 +210,8 @@
 </template>
 
 <script setup>
-import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
+import { NCarousel, NDivider, NImage } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
@@ -306,52 +232,32 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
 const scrollDownVisible = ref(true);
 const { t } = useI18n();
 
-// 导入所有语言的轮播图
+// 导入图片
-const carouselImages = {
+import imageshow3 from "@/assets/image/businessintroduction/375/imageshow-3.png";
-  zh: [
+import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
-    new URL("@/assets/image/home/375/zh/carousel-1.png", import.meta.url).href,
+import imageshow5 from "@/assets/image/businessintroduction/375/imageshow-5.png";
-    new URL("@/assets/image/home/375/zh/carousel-2.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/zh/carousel-3.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/zh/carousel-4.png", import.meta.url).href,
-  ],
-  en: [
-    new URL("@/assets/image/home/375/en/carousel-1.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/en/carousel-2.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/en/carousel-3.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/en/carousel-4.png", import.meta.url).href,
-  ],
-  ja: [
-    new URL("@/assets/image/home/375/ja/carousel-1.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/ja/carousel-2.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/ja/carousel-3.png", import.meta.url).href,
-    new URL("@/assets/image/home/375/ja/carousel-4.png", import.meta.url).href,
-  ],
-  "zh-TW": [
-    new URL("@/assets/image/home/375/zh-TW/carousel-1.png", import.meta.url)
-      .href,
-    new URL("@/assets/image/home/375/zh-TW/carousel-2.png", import.meta.url)
-      .href,
-    new URL("@/assets/image/home/375/zh-TW/carousel-3.png", import.meta.url)
-      .href,
-    new URL("@/assets/image/home/375/zh-TW/carousel-4.png", import.meta.url)
-      .href,
-  ],
-};
-const currentLanguage = ref(localStorage.getItem("language") || "zh");
-const currentCarouselImages = computed(() => {
-  return carouselImages[currentLanguage.value] || carouselImages.zh;
-});
 
-// 添加语言变化的监听
+const state = reactive({
-watch(
+  marqueeArr: [
-  () => localStorage.getItem("language"),
+    {
-  (newLang) => {
+      title: "2025年",
-    if (newLang) {
+      subTitle:
-      currentLanguage.value = newLang;
+        "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
-    }
+      imgUrl: imageshow3, // 使用导入的图片
-  },
+    },
-  { immediate: true }
+    {
-);
+      title: "2026年",
+      subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
+      imgUrl: imageshow4, // 使用导入的图片
+    },
+    {
+      title: "2027年",
+      subTitle:
+        "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
+      imgUrl: imageshow5, // 使用导入的图片
+    },
+  ],
+});
 
 const handleTabClick = (tab) => {
   currentTab.value = tab;
@@ -365,13 +271,13 @@ const goToSection = (i) => {
 
   // 防止频繁触发
   const now = Date.now();
-  if (now - lastScrollTime < 800) return; // 增加间隔时间到800ms
+  if (now - lastScrollTime < 500) return; // 500ms 内不重复触发
   lastScrollTime = now;
 
   isScrolling = true;
   scrollTween = gsap.to(window, {
     scrollTo: { y: i * window.innerHeight, autoKill: false },
-    duration: 1, // 增加动画时间到1秒
+    duration: 0.8, // 增加动画时间使其更平滑
     ease: "power2.inOut",
     onComplete: () => {
       scrollTween = null;
@@ -381,7 +287,7 @@ const goToSection = (i) => {
   });
 };
 
-// 修改 handleWheel 函数
+// 修改handleWheel函数
 const handleWheel = (e) => {
   if (isScrolling) {
     e.preventDefault();
@@ -393,44 +299,73 @@ 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) {
+      // 只有在这些边界条件下才触发页面切换
-        goToSection(currentSection + 1);
+      if (Math.abs(delta) > scrollThreshold) {
-      } else if (delta < 0 && currentSection > 0) {
+        if (delta > 0 && currentSection < 3) {
-        goToSection(currentSection - 1);
+          goToSection(currentSection + 1);
+        } else if (delta < 0 && currentSection > 0) {
+          goToSection(currentSection - 1);
+        }
       }
     }
-    return;
+    return; // 其他情况允许自然滚动
   }
 
-  // 非最后一个panel的处理
+  // 非最后一个panel的处理保持不变
-  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);
+    }
   }
 };
 
-// 在 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(
@@ -457,54 +392,19 @@ watch(
 
         // 移除之前的渐入动画代码
         panels.forEach((panel, i) => {
+          // 背景视差
           const bg = panel.querySelector(".parallax-bg");
-
+          if (bg) {
-          // 区分处理最后一个面板和其他面板
+            gsap.to(bg, {
-          if (i === 3) {
+              yPercent: 30,
-            // 第四个面板
+              ease: "none",
-            const content = panel.querySelector(".content4");
+              scrollTrigger: {
-            if (bg && content) {
+                trigger: panel,
-              const contentHeight = content.offsetHeight;
+                start: "top bottom",
-              const viewportHeight = window.innerHeight;
+                end: "bottom top",
-              const parallaxRange = Math.max(
+                scrub: true,
-                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,
-                },
-              });
-            }
           }
 
           // 内容视差
@@ -583,7 +483,6 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
-                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -617,22 +516,6 @@ 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: () => {
@@ -645,7 +528,6 @@ watch(
 
             tl.to(
               [
-                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -668,7 +550,6 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
-                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -702,14 +583,6 @@ watch(
                   y: 0,
                 },
                 "-=0.6"
-              )
-              .to(
-                ".content3 > .n-marquee",
-                {
-                  opacity: 1,
-                  y: 0,
-                },
-                "-=0.6"
               );
           },
           onLeaveBack: () => {
@@ -722,7 +595,6 @@ watch(
 
             tl.to(
               [
-                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -742,7 +614,9 @@ watch(
           start: "top 80%",
           end: "bottom center",
           onEnter: () => {
+            // 进入第四幕时隐藏
             scrollDownVisible.value = false;
+            // 初始状态设置
             gsap.set(".content4", {
               opacity: 1,
               y: 0,
@@ -763,6 +637,13 @@ watch(
               }
             );
 
+            // 单独设置卡片的初始状态
+            gsap.set(".content4 .container .card", {
+              opacity: 0,
+              y: 50,
+              immediateRender: true,
+            });
+
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
@@ -790,9 +671,47 @@ 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({
@@ -801,6 +720,14 @@ watch(
                   ease: "power2.in",
                 },
               })
+              .to(".content4 .container .card", {
+                opacity: 0,
+                y: -30,
+                stagger: {
+                  each: 0.1,
+                  from: "end",
+                },
+              })
               .to(
                 [
                   ".content4 > div:nth-child(3)",
@@ -816,6 +743,7 @@ watch(
               );
           },
           onEnterBack: () => {
+            // 返回第四幕时隐藏
             scrollDownVisible.value = false;
             gsap.set(".content4", {
               opacity: 1,
@@ -836,6 +764,12 @@ watch(
               }
             );
 
+            gsap.set(".content4 .container .card", {
+              opacity: 0,
+              y: -50,
+              immediateRender: true,
+            });
+
             const tl = gsap.timeline({
               defaults: {
                 duration: 0.6,
@@ -862,9 +796,46 @@ 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({
@@ -873,7 +844,14 @@ watch(
                   ease: "power2.in",
                 },
               })
-
+              .to(".content4 .container .card", {
+                opacity: 0,
+                y: 30,
+                stagger: {
+                  each: 0.1,
+                  from: "end",
+                },
+              })
               .to(
                 [
                   ".content4 > div:nth-child(3)",
@@ -894,6 +872,13 @@ 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">
@@ -924,12 +909,9 @@ watch(
   display: flex;
   gap: 128px;
   margin-right: 32px;
-  margin-left: 60px;
 }
 
 .tab-item {
-  display: flex;
-  align-items: center;
   font-size: 61px;
   color: #000000;
   cursor: pointer;
@@ -956,7 +938,7 @@ watch(
 }
 .scroll-down {
   position: fixed;
-  bottom: 113px;
+  bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
   color: #ffffff;
@@ -1005,17 +987,50 @@ watch(
 .divider1 {
   position: absolute;
   z-index: 3;
-  left: 64px;
+  left: 477px;
   width: 1px;
-  height: 100%;
+  height: 100vw;
+}
+
+.divider2 {
+  position: absolute;
+  z-index: 3;
+  left: 715px;
+  width: 1px;
+  height: 100vw;
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
+  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-repeat: repeat-y;
+}
+
+.divider3 {
+  position: absolute;
+  z-index: 3;
+  left: 950px;
+  width: 1px;
+  height: 100vw;
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
+  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-repeat: repeat-y;
+}
+
+.divider4 {
+  position: absolute;
+  z-index: 3;
+  left: 1186px;
+  width: 1px;
+  height: 100vw;
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
+  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-repeat: repeat-y;
 }
 
 .divider5 {
   position: absolute;
   z-index: 3;
-  right: 60px;
+  left: 1420px;
   width: 1px;
-  height: 100%;
+  height: 100vw;
 }
 
 .carousel-img {
@@ -1043,18 +1058,13 @@ watch(
   &:last-child {
     position: relative;
     overflow-y: auto;
-    height: 100vh;
+    height: auto;
+    min-height: 100vh;
 
     // 隐藏滚动条但保持功能
     &::-webkit-scrollbar {
       display: none; // Chrome, Safari, Opera
     }
-
-    // 调整最后一个面板的背景
-    .parallax-bg {
-      position: fixed; // 改为固定定位
-      height: 120%;
-    }
   }
 
   &.first-panel {
@@ -1079,7 +1089,7 @@ watch(
   top: -10%;
   left: 0;
   width: 100%;
-  height: 120%; // 保持原有高度
+  height: 120%;
   z-index: 1;
 }
 
@@ -1106,26 +1116,13 @@ watch(
     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: auto;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -1159,11 +1156,18 @@ watch(
   }
 }
 
+.container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  /* Two columns */
+  gap: 55px;
+}
+
 .card {
-  margin-top: 154px;
+  margin-top: 75px;
   box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
-  padding: 46px 36px 118px 51px;
+  padding: 22px 18px 57px 20px;
-  border-radius: 60px;
+  border-radius: 30px;
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
@@ -1178,11 +1182,11 @@ watch(
 
 .js-detail {
   text-align: left;
-  margin-top: 87px;
+  margin-top: 37px;
-  font-size: 92px;
+  font-size: 50px;
   color: #10253e;
   width: 100%;
-  padding: 0 82px 0 82px;
+  padding: 0 20px 0 30px;
 }
 
 .carousel-container {
@@ -1235,17 +1239,8 @@ watch(
 }
 
 .carousel-subtitle {
-  display: -webkit-box;
+  margin-top: 23px;
-  -webkit-line-clamp: 1;
+  color: #455363;
-  -webkit-box-orient: vertical;
+  font-size: 40px;
-  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 === 'businessintroduction' }"
+          :class="{ active: currentTab === 'business' }"
-          @click="handleTabClick('businessintroduction')"
+          @click="handleTabClick('business')"
         >
           {{ t("home.nav.business") }}
         </div>
@@ -35,10 +35,20 @@
       <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="src"
+            src="@/assets/image/home/768/zh/carousel-1.png"
+          />
+          <img
+            class="carousel-img"
+            src="@/assets/image/home/768/zh/carousel-2.png"
+          />
+          <img
+            class="carousel-img"
+            src="@/assets/image/home/768/zh/carousel-3.png"
+          />
+          <img
+            class="carousel-img"
+            src="@/assets/image/home/768/zh/carousel-4.png"
           />
         </n-carousel>
       </section>
@@ -84,100 +94,25 @@
           <div class="text-[#455363] text-[40px] mt-[78px] pr-[100px]">
             {{ t("home.section3.desc") }}
           </div>
-          <n-marquee auto-fill>
+        </div>
-            <div style="display: flex" class="mt-[190px]">
+        <div
-              <div class="text-[#455363] text-[40px] mr-[83px]">
+          class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
-                <img
+        >
-                  class="w-[475px] h-[475px]"
+          <div ref="carouselTrack" class="carousel-track">
-                  src="@/assets/image/jj1.png"
+            <div
-                  alt="logo"
+              v-for="(item, idx) in getVisibleItems()"
-                />
+              :key="idx"
-
+              class="carousel-item"
-                <div
+            >
-                  class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+              <img class="carousel-image" :src="item.imgUrl" />
-                >
+              <div class="carousel-title">
-                  {{ t("home.section3.features.data.title") }}
+                <div>{{ item.title }}</div>
-                </div>
-                <div
-                  class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
-                >
-                  {{ t("home.section3.features.data.desc") }}
-                </div>
               </div>
-              <div class="text-[#455363] text-[40px] mr-[83px]">
+              <div class="carousel-subtitle">
-                <img
+                <div>{{ item.subTitle }}</div>
-                  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>
-          </n-marquee>
+          </div>
         </div>
       </section>
 
@@ -187,18 +122,14 @@
         <div class="divider3" style=""></div>
         <div class="divider4" style=""></div>
         <n-divider class="divider5" vertical />
-        <div class="parallax-bg" style="height: 100% !important"></div>
+        <div class="parallax-bg"></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>
-              {{ t("home.section4.title1") }}
+            <div>推动文艺影响力腾飞</div>
-            </div>
-            <div>
-              {{ t("home.section4.title2") }}
-            </div>
           </div>
           <div
             class="text-[#455363] text-[40px] mt-[78px] leading-[60px] pr-[100px]"
@@ -273,9 +204,10 @@
     </footer>
   </div>
 </template>
+
 <script setup>
-import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
+import { NCarousel, NDivider, NImage } from "naive-ui";
-import { onUnmounted, ref, onMounted, watch, computed } from "vue";
+import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
@@ -296,54 +228,33 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
 const scrollDownVisible = ref(true);
 const { t } = useI18n();
 
-// 导入所有语言的轮播图
+// 导入图片
-const carouselImages = {
+import imageshow3 from "@/assets/image/businessintroduction/768/imageshow-3.png";
-  zh: [
+import imageshow4 from "@/assets/image/businessintroduction/768/imageshow-4.png";
-    new URL("@/assets/image/home/768/zh/carousel-1.png", import.meta.url).href,
+import imageshow5 from "@/assets/image/businessintroduction/768/imageshow-5.png";
-    new URL("@/assets/image/home/768/zh/carousel-2.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/zh/carousel-3.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/zh/carousel-4.png", import.meta.url).href,
-  ],
-  en: [
-    new URL("@/assets/image/home/768/en/carousel-1.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/en/carousel-2.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/en/carousel-3.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/en/carousel-4.png", import.meta.url).href,
-  ],
-  ja: [
-    new URL("@/assets/image/home/768/ja/carousel-1.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/ja/carousel-2.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/ja/carousel-3.png", import.meta.url).href,
-    new URL("@/assets/image/home/768/ja/carousel-4.png", import.meta.url).href,
-  ],
-  "zh-TW": [
-    new URL("@/assets/image/home/768/zh-TW/carousel-1.png", import.meta.url)
-      .href,
-    new URL("@/assets/image/home/768/zh-TW/carousel-2.png", import.meta.url)
-      .href,
-    new URL("@/assets/image/home/768/zh-TW/carousel-3.png", import.meta.url)
-      .href,
-    new URL("@/assets/image/home/768/zh-TW/carousel-4.png", import.meta.url)
-      .href,
-  ],
-};
 
-const currentLanguage = ref(localStorage.getItem("language") || "zh");
+const state = reactive({
-const currentCarouselImages = computed(() => {
+  marqueeArr: [
-  return carouselImages[currentLanguage.value] || carouselImages.zh;
+    {
+      title: "2025年",
+      subTitle:
+        "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
+      imgUrl: imageshow3, // 使用导入的图片
+    },
+    {
+      title: "2026年",
+      subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
+      imgUrl: imageshow4, // 使用导入的图片
+    },
+    {
+      title: "2027年",
+      subTitle:
+        "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
+      imgUrl: imageshow5, // 使用导入的图片
+    },
+  ],
 });
 
-// 添加语言变化的监听
-watch(
-  () => localStorage.getItem("language"),
-  (newLang) => {
-    if (newLang) {
-      currentLanguage.value = newLang;
-    }
-  },
-  { immediate: true }
-);
-
 const handleTabClick = (tab) => {
   currentTab.value = tab;
   router.push("/" + tab);
@@ -417,12 +328,40 @@ 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(
@@ -540,7 +479,6 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
-                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -574,22 +512,6 @@ 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: () => {
@@ -602,7 +524,6 @@ watch(
 
             tl.to(
               [
-                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -625,7 +546,6 @@ watch(
                 ".content3 > div:nth-child(1)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(3)",
-                ".content3 > .n-marquee",
               ],
               {
                 opacity: 0,
@@ -659,14 +579,6 @@ watch(
                   y: 0,
                 },
                 "-=0.6"
-              )
-              .to(
-                ".content3 > .n-marquee",
-                {
-                  opacity: 1,
-                  y: 0,
-                },
-                "-=0.6"
               );
           },
           onLeaveBack: () => {
@@ -679,7 +591,6 @@ watch(
 
             tl.to(
               [
-                ".content3 > .n-marquee",
                 ".content3 > div:nth-child(3)",
                 ".content3 > div:nth-child(2)",
                 ".content3 > div:nth-child(1)",
@@ -957,6 +868,13 @@ 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">
@@ -1010,7 +928,7 @@ watch(
 }
 .scroll-down {
   position: fixed;
-  bottom: 110px;
+  bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
   color: #ffffff;
@@ -1059,26 +977,50 @@ watch(
 .divider1 {
   position: absolute;
   z-index: 3;
-  left: 22px;
+  left: 477px;
-  width: 4px;
+  width: 1px;
-  height: 100%;
+  height: 100vw;
+}
+
+.divider2 {
+  position: absolute;
+  z-index: 3;
+  left: 715px;
+  width: 1px;
+  height: 100vw;
+  background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
+  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-repeat: repeat-y;
 }
 
 .divider3 {
   position: absolute;
   z-index: 3;
-  left: 400px;
+  left: 950px;
-  height: 100%;
+  width: 1px;
+  height: 100vw;
   background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-  background-size: 10px 60px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  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;
-  right: 22px;
+  left: 1420px;
-  height: 100%;
+  width: 1px;
+  height: 100vw;
 }
 
 .carousel-img {
@@ -1164,19 +1106,6 @@ watch(
     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 {
@@ -1212,7 +1141,7 @@ watch(
   :deep(.n-divider) {
     border-left: none;
     background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
-    background-size: 10px 60px;
+    background-size: 1px 30px;
     background-repeat: repeat-y;
   }
 }
@@ -1300,12 +1229,8 @@ watch(
 }
 
 .carousel-subtitle {
-  display: -webkit-box;
+  margin-top: 23px;
-  -webkit-line-clamp: 1;
+  color: #455363;
-  -webkit-box-orient: vertical;
+  font-size: 40px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.5;
-  max-height: calc(1.5em * 1);
 }
 </style>