officialWebsite/src/views/businessintroduction/size375/index.vue

<template>
  <div class="page-container">
    <n-divider class="divider1" vertical />
    <n-divider class="divider5" vertical />
    <header className="header flex items-center justify-between">
      <div class="logo">
        <img src="@/assets/image/logo.png" alt="logo" />
      </div>
      <div class="tabs">
        <div
          class="tab-item"
          :class="{ active: currentTab === 'home' }"
          @click="handleTabClick('home')"
        >
          首页
        </div>
        <div
          class="tab-item"
          :class="{ active: currentTab === 'companyprofil' }"
          @click="handleTabClick('companyprofil')"
        >
          公司概况
        </div>
        <div
          class="tab-item"
          :class="{ active: currentTab === 'businessintroduction' }"
          @click="handleTabClick('businessintroduction')"
        >
          业务介绍
        </div>
      </div>
    </header>
    <main>
      <section className="relative pb-[1020px]">
        <div class="absolute top-[0px] right-[0px]">
          <img
            src="@/assets/image/businessintroduction/375/bg-6.png"
            class="w-[1920px]"
          />
        </div>

        <div class="pt-[2345px]">
          <div
            class="w-full title ml-[188px]"
            :ref="
              (el) => {
                moveRefs[0].value = el;
              }
            "
          >
            <div>AI × 短视频</div>
            <div>领航文创新视界</div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[1].value = el;
              }
            "
            class="text-[51px] text-[#8B59F7] w-[1413px] ml-[188px] mt-[55px]"
          >
            深度融合前沿 AI
            技术与短视频平台的独特优势，率先开启探索之旅，勇立潮头，领航文创领域踏入前所未有的崭新视界
          </div>
        </div>

        <div class="absolute bottom-[-260px] left-[0px]">
          <img
            src="@/assets/image/businessintroduction/375/bg-7.png"
            class="w-[1405px] h-[1428px]"
          />
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[3].value = el;
            }
          "
          class="absolute bottom-[-376px] right-[0px] z-4"
        >
          <img
            src="@/assets/image/businessintroduction/375/bg-2.png"
            class="w-[1039px]"
          />
        </div>
      </section>

      <section class="section-sec relative">
        <div class="flex flex-wrap justify-center pt-[480px]">
          <div class="w-full px-[184px]">
            <div class="text-[#8B59F7] text-[72px] font-semibold">行业现状</div>
          </div>
          <div class="w-full title mt-[87px] px-[184px]">
            <div>文创遇阻</div>
            <div>短视频解锁行业增长新密码</div>
          </div>
          <div class="w-full px-[184px] mt-[159px]">
            <div
              :ref="
                (el) => {
                  moveRefs[4].value = el;
                }
              "
              class="text-[#455363] text-[72px] pr-[139px]"
            >
              在文创领域深陷内容趋同、灵感枯竭的困局时，短视频凭借其独特的沉浸式体验、强大的社交裂变属性，打破桎梏，如春风化雨般为行业注入新的生命力，成为驱动增长的强劲引擎。
              "全周期" 价值赋能体系。
            </div>
          </div>

          <div
            class="w-full mt-[287px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
          >
            <div>文艺市场困局</div>
          </div>

          <div class="w-full px-[184px] flex flex-wrap">
            <div
              :ref="
                (el) => {
                  moveRefs[5].value = el;
                }
              "
              class="w-full mt-[154px] flex flex-wrap text-[72px]"
            >
              <div
                class="w-full font-semibold text-[82px] text-[#455363] flex flex-wrap items-center"
              >
                <img
                  class="w-[82px] h-[82px] mr-[51px]"
                  src="@/assets/image/businessintroduction/375/icon-y.png"
                />

                文艺价值蒙尘
              </div>
              <div class="w-full mt-[15px] pl-[133px] text-[#455363]">
                品牌塑造与市场运营匮乏，致使文艺价值隐于暗处，难以被大众洞悉与认可。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[6].value = el;
                }
              "
              class="w-full mt-[154px] flex flex-wrap text-[72px]"
            >
              <div
                class="w-full font-semibold text-[82px] text-[#455363] flex flex-wrap items-center"
              >
                <img
                  class="w-[82px] h-[82px] mr-[51px]"
                  src="@/assets/image/businessintroduction/375/icon-y.png"
                />

                推广途径困局
              </div>
              <div class="w-full mt-[15px] pl-[133px] text-[#455363]">
                个人社交平台和传统展览形式陈旧，无法达成广泛且优质的曝光，严重束缚传播。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[7].value = el;
                }
              "
              class="w-full mt-[154px] flex flex-wrap text-[72px]"
            >
              <div
                class="w-full font-semibold text-[82px] text-[#455363] flex flex-wrap items-center"
              >
                <img
                  class="w-[82px] h-[82px] mr-[51px]"
                  src="@/assets/image/businessintroduction/375/icon-y.png"
                />

                宣传单一致贫
              </div>
              <div class="w-full mt-[15px] pl-[133px] text-[#455363]">
                过度倚重线下展厅与个别展会，宣传面狭隘，致使收入结构单一且不稳定。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[8].value = el;
                }
              "
              class="w-full mt-[154px] flex flex-wrap text-[72px]"
            >
              <div
                class="w-full font-semibold text-[82px] text-[#455363] flex flex-wrap items-center"
              >
                <img
                  class="w-[82px] h-[82px] mr-[51px]"
                  src="@/assets/image/businessintroduction/375/icon-y.png"
                />

                传统营销掣肘
              </div>
              <div class="w-full mt-[15px] pl-[133px] text-[#455363]">
                传统广告渠道收费高昂，文艺创作者财力难支，极大限制了推广宣传的范围。
              </div>
            </div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[9].value = el;
              }
            "
            class="w-full mt-[160px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
          >
            <div>短视频自媒体：</div>
            <div>澎湃新势，蕴蓄无垠商机</div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[10].value = el;
              }
            "
            class="w-full mt-[154px] px-[184px] text-[72px] text-[#455363] leading-[102px] mb-[379px]"
          >
            <div>
              当下，短视频市场呈爆发式增长，广告规模迅猛扩张
              。短视频作为互联网内容领域的活力担当，用户规模和使用时长一路飙升，为广告投放与变现开辟广阔天地，用户时长占比节节攀升，用户粘性与日俱增，蕴藏无限潜力与机遇。
            </div>
          </div>
        </div>
      </section>

      <section class="relative" style="background: #fff">
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[184px] mt-[369px]">
            <div class="text-[#8B59F7] text-[72px] font-semibold">业务模式</div>
          </div>
          <div class="w-full title mt-[87px] px-[184px]">
            <div>科技赋能</div>
            <div>文艺创作者</div>
            <div>全链路价值服务体系</div>
          </div>

          <div class="mt-[230px] mb-[399px] overflow-hidden">
            <img
              :ref="
                (el) => {
                  moveRefs[11].value = el;
                }
              "
              class="w-[1715px]"
              src="@/assets/image/businessintroduction/375/imageshow-2.png"
            />
          </div>
          <div class="w-full px-[184px]">
            <img
              class="w-[306px] h-[229px]"
              src="@/assets/image/businessintroduction/375/icon-l.png"
            />

            <div
              class="w-full mt-[102px] text-[#10253E] text-[82px] font-semibold"
            >
              精准分发 开启粉丝增长引擎
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[12].value = el;
                }
              "
              class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
            >
              运用大数据分析与 AI
              算法，深度剖析用户浏览习惯、搜索偏好等行为数据，构建精准用户画像，把文艺创作者的作品精准推送给潜在受众，将无目的需求方转化为忠实粉丝，为创作者影响力传播奠定基础。
            </div>
          </div>
          <div class="w-full px-[184px] mt-[410px]">
            <img
              class="w-[222px] h-[198px]"
              src="@/assets/image/businessintroduction/375/icon-k.png"
            />

            <div
              class="w-full mt-[128px] text-[#10253E] text-[82px] font-semibold"
            >
              多元变现 激活商业价值链条
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[13].value = el;
                }
              "
              class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
            >
              为挖掘文艺创作商业价值，搭建粉丝经济运营体系。通过便捷打赏机制，让粉丝即时表达对创作者的喜爱；提供实体和数字作品售卖渠道，满足粉丝收藏需求；推出订阅服务，提供独家内容与活动优先参与权益，增强粉丝粘性。这些途径推动粉丝转变为消费者，实现创作者和平台的收入增长。
            </div>
          </div>
          <div class="w-full px-[184px] mt-[410px] mb-[379px]">
            <img
              class="w-[227px] h-[222px]"
              src="@/assets/image/businessintroduction/375/icon-h.png"
            />

            <div
              class="w-full mt-[123px] text-[#10253E] text-[82px] font-semibold"
            >
              互动共享 构建艺术生态闭环
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[14].value = el;
                }
              "
              class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
            >
              借助智能社交推荐技术，推动粉丝间深度互动交流，分享见解与创作灵感，挖掘彼此潜在需求，实现粉丝群体自然裂变。同时，通过数据分析洞察消费群体特征和需求，精准拓展消费圈层，挖掘新商机。这一互动共享机制构建起可持续发展的文艺创作生态，创作者影响力持续提升，公司也实现稳健发展与收益增长，达成双赢。
            </div>
          </div>
        </div>
      </section>

      <section class="relative" style="background: #f8f9ff">
        <div class="flex flex-wrap justify-center relative pb-[875px]">
          <div class="w-full px-[184px] mt-[379px]">
            <div class="text-[#8B59F7] text-[72px]">市场愿景</div>
          </div>
          <div class="w-full title mt-[87px] px-[184px]">
            <div>擘画文艺市场新蓝图</div>
          </div>
          <div class="w-full px-[184px] mt-[159px]">
            <div
              :ref="
                (el) => {
                  moveRefs[15].value = el;
                }
              "
              class="text-[#455363] text-[72px] pr-[112px]"
            >
              在变幻莫测的艺术浪潮中，FiEE以创新为笔，精准洞察为墨，以创新思维与全球化视野重新定义文艺产业的未来。深度挖掘文艺潜力，融合多元文化元素，打破传统壁垒，搭建线上流量社群，重塑文艺生态，激发市场活力，引领文艺价值的新流向，开启文艺市场的全新时代。
            </div>
          </div>

          <div
            class="w-full mt-[287px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
          >
            <div>构建十亿流量社群，搭建全球文艺交流高地</div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[16].value = el;
              }
            "
            class="w-full mt-[154px] px-[184px] text-[72px] text-[#455363]"
          >
            <div>
              运用前沿大数据与 AI
              技术，打造十亿级流量社群，汇聚全球文艺爱好者。借助智能算法实现精准内容推送与兴趣匹配，促进交流互动，为文艺创作者与粉丝搭建高效沟通桥梁，构建文艺生态流量基石。
            </div>
          </div>

          <div class="absolute bottom-[-180px]">
            <img
              :ref="
                (el) => {
                  moveRefs[17].value = el;
                }
              "
              class="w-[1715px]"
              src="@/assets/image/businessintroduction/375/imageshow-1.png"
            />
          </div>
        </div>
      </section>

      <section class="section-five h-[4562px] pt-[379px] relative">
        <div class="w-full px-[184px]">
          <div class="text-[#fff] text-[92px] font-semibold">
            <div>全球合作拓展</div>
            <div>绘制多元融合版图</div>
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[18].value = el;
            }
          "
          class="w-full px-[184px]"
        >
          <div class="w-full mt-[288px] text-[#fff] text-[82px]">2025年</div>
          <div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
            与1500+文艺机构、科技企业达成深度合作，整合资源，共同探索文艺科技融合项目，推动艺术创作与传播模式创新
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[19].value = el;
            }
          "
          class="w-full px-[184px] mt-[80px]"
        >
          <div class="w-full mt-[159px] text-[#fff] text-[82px]">2026年</div>
          <div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
            全球合作伙伴突破
            5000+，建立广泛合作网络，拓展业务覆盖区域，在全球主要艺术市场落地项目，提升品牌国际知名度。
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[20].value = el;
            }
          "
          class="w-full px-[184px] mt-[80px]"
        >
          <div class="w-full mt-[154px] text-[#fff] text-[82px]">2027年</div>
          <div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
            战略合作伙伴超
            10000+，形成稳固全球战略联盟，全面打通文艺产业链，实现资源共享、互利共赢。
          </div>
        </div>

        <div class="absolute bottom-[-10px] right-[0px]">
          <img
            src="@/assets/image/businessintroduction/375/bg-5.png"
            class="h-[361px]"
          />
        </div>
      </section>
      <section>
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[184px] mt-[300px]">
            <div class="text-[#8B59F7] text-[92px] font-semibold">
              18个月孵化0基础艺术KOL
            </div>
            <div class="text-[#8B59F7] text-[92px] font-semibold">
              释放文艺商业潜能
            </div>
          </div>

          <div class="w-full px-[184px] mt-[130px]">
            <div
              :ref="
                (el) => {
                  moveRefs[21].value = el;
                }
              "
              class="text-[#455363] text-[72px] pr-[57px] leading-[102px]"
            >
              18个月，是一场艺术潜能的深度挖掘，更是一次文艺商业的破茧之旅。从绘画技巧到审美构建，从内容创作到流量运营，全方位赋能。FiEE为
              0
              基础者量身定制成长路径，助你跨越文艺与商业的桥梁，成为引领潮流的文艺
              KOL ，开启无限可能的文艺新征程。
            </div>
          </div>

          <div
            class="w-full px-[184px] flex flex-wrap justify-between mt-[440px] mb-[384px]"
          >
            <div
              :ref="
                (el) => {
                  moveRefs[22].value = el;
                }
              "
              class="w-full flex flex-wrap text-[72px]"
            >
              <div class="w-full">
                <img
                  class="w-[229px] h-[222px]"
                  src="@/assets/image/businessintroduction/375/icon-s.png"
                />
              </div>
              <div
                class="w-full font-semibold mt-[123px] text-[#10253E] text-[82px]"
              >
                粉丝增长
              </div>
              <div class="mt-[87px]">
                至 2027 年，凭借精准营销策略，助力每位艺术家粉丝数超 10
                万，粉丝社区人数达 10
                亿，壮大文艺创作者粉丝群体，增强作品影响力。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[23].value = el;
                }
              "
              class="w-full flex flex-wrap text-[72px]"
            >
              <div class="w-full mt-[410px]">
                <img
                  class="w-[218px] h-[222px]"
                  src="@/assets/image/businessintroduction/375/icon-c.png"
                />
              </div>

              <div
                class="w-full font-semibold mt-[123px] text-[#10253E] text-[82px]"
              >
                KOL孵化
              </div>
              <div class="mt-[87px]">
                依托十亿流量社群，运用精准数据分析，18
                个月内将普通文艺创作者或商业品牌打造成国际知名
                KOL，实现艺术价值与商业价值的高效转化。
              </div>
            </div>
          </div>
        </div>
      </section>
      <section style="background: #f8f9ff">
        <div class="flex flex-wrap justify-center">
          <div
            :ref="
              (el) => {
                moveRefs[24].value = el;
              }
            "
            class="w-full px-[184px] mt-[364px]"
          >
            <div class="text-[#8B59F7] text-[92px] font-semibold">
              <div>曝光量突破</div>
              <div>塑造全球品牌影响力</div>
            </div>
          </div>

          <div
            :ref="
              (el) => {
                moveRefs[25].value = el;
              }
            "
            class="w-full px-[184px] mt-[154px]"
          >
            <div class="text-[#455363] text-[72px] pr-[57px]">
              凭借前沿的传播策略，精准狙击全球受众心智。深度整合顶级媒体资源，让曝光量呈指数级突破，全方位塑造全球品牌影响力，引领文艺潮流走向世界舞台中央
            </div>
          </div>
          <div class="mt-[46px] mb-[246px] px-[108px]">
            <div
              v-for="(item, idx) in state.marqueeArr"
              :key="idx"
              class="w-full flex flex-wrap justify-center carousel-item"
            >
              <img class="carousel-image" :src="item.imgUrl" />
              <div class="carousel-title w-full">
                <div>{{ item.title }}</div>
              </div>
              <div class="carousel-subtitle">
                <div>{{ item.subTitle }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section
        style="background: #fff"
        className="flex flex-wrap justify-center"
      >
        <img
          class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
          src="@/assets/image/image-footer.png"
          alt="logo"
        />
      </section>
    </main>
  </div>
</template>

<script setup>
import { NDivider } from "naive-ui";
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useHome } from "@/store/home/index.js";
import { useTransitionComposable } from "@/composables/transition-composable";

// 定义组件的自定义事件
defineEmits(["sendCode"]);

// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);

const { transitionState } = useTransitionComposable();

const moveRefs = ref(
  Array(27)
    .fill(null)
    .map(() => ref(null))
);
const { currentTab } = useHome();
let ctx;

// 导入图片
import imageshow3 from "@/assets/image/businessintroduction/375/imageshow-3.png";
import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
import imageshow5 from "@/assets/image/businessintroduction/375/imageshow-5.png";

const state = reactive({
  marqueeArr: [
    {
      title: "2025年",
      subTitle:
        "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
      imgUrl: imageshow3, // 使用导入的图片
    },
    {
      title: "2026年",
      subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
      imgUrl: imageshow4, // 使用导入的图片
    },
    {
      title: "2027年",
      subTitle:
        "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
      imgUrl: imageshow5, // 使用导入的图片
    },
  ],
});

let carouselAnimation = null; // 存储 GSAP 动画实例

// 监听窗口大小变化
onMounted(() => {
  ctx = gsap.context(() => {
    moveRefs.value.forEach((moveRef, index) => {
      if (moveRef.value) {
        // 修改初始状态设置
        gsap.set(moveRef.value, {
          opacity: 0,
          // 使用 translateX 替代 x，并且初始位置设置在元素自身宽度范围内
          transform: `translateX(${index % 2 === 0 ? "-100%" : "100%"})`,
          // 添加 overflow: hidden 确保不会影响布局
          overflow: "hidden",
        });

        // 修改动画设置
        gsap.to(moveRef.value, {
          opacity: 1,
          transform: "translateX(0)", // 使用 transform 替代 x
          duration: 1.2,
          ease: "power2.out",
          scrollTrigger: {
            trigger: moveRef.value,
            start: "top 80%",
            end: "top 40%",
            toggleActions: "play none none reverse",
            markers: false,
          },
        });
      }
    });
  });
});

onUnmounted(() => {
  if (ctx) {
    ctx.revert();
  }
  ScrollTrigger.killAll();
  if (carouselAnimation) {
    carouselAnimation.kill();
  }
});

import { useRouter } from "vue-router";
const router = useRouter();
const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push("/" + tab);
};

const goToSection = (i) => {
  ctx.data.forEach((e) => {
    if (e.vars && e.vars.id === "scrollTween") {
      e.kill();
    }
  });
  ctx.add(() => {
    scrollTween = gsap.to(window, {
      scrollTo: { y: i * window.innerHeight, autoKill: false },
      duration: 1,
      id: "scrollTween",
      onComplete: () => (scrollTween = null),
      overwrite: true,
    });
  });
};
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
.header {
  width: 100%;
  height: 260px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 138px;
  background-color: transparent;
}
.logo {
  img {
    width: 399px;
    height: 128px;
  }
}

.tabs {
  display: flex;
  gap: 128px;
  margin-right: 32px;
  margin-left: 60px;
}

.tab-item {
  display: flex;
  align-items: center;
  font-size: 61px;
  color: #000000;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;

  &.active {
    color: #8b59fa;
  }

  &:hover {
    color: #8b59fa;
  }
}

.title {
  font-size: 113px;
  font-weight: 600;
  color: #10253e;
  line-height: 143px;
}
.subTitle {
  line-height: 102px;
}
.section-first {
  width: 100%;
  background: url("@/assets/image/businessintroduction/375/bg-6.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-sec {
  z-index: 2;
  background: url("@/assets/image/businessintroduction/375/bg-12.png");
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}

.section-five {
  background: url("@/assets/image/businessintroduction/375/bg-1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.icon-langmul {
  position: absolute;
  bottom: -80px;
  right: 0;
}

.arrow-btn {
  cursor: pointer;
}

.carousel-track {
  display: flex;
  will-change: transform;
  cursor: grab;
  user-select: none;

  &:active {
    cursor: grabbing;
  }
}

.carousel-item {
  margin-top: 154px;
  padding: 46px 36px 118px 51px;
  border-radius: 61px;
  box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16);
}

.carousel-image {
  width: 1623px;
  object-fit: cover;
  display: block;
}

.carousel-content {
  padding: 0 20px 0 60px;
  margin-top: 38px;
}

.carousel-title {
  text-align: left;
  font-size: 92px;
  font-weight: 500;
  margin-top: 87px;
}

.carousel-subtitle {
  margin-top: 51px;
  color: #455363;
  font-size: 72px;
}

// 添加一个通用的溢出控制类
.overflow-hidden {
  overflow: hidden;
}
.divider1 {
  position: absolute;
  z-index: 3;
  left: 64px;
  width: 1px;
  height: 100%;
}

.divider5 {
  position: absolute;
  z-index: 3;
  right: 60px;
  width: 1px;
  height: 100%;
}
</style>