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

<template>
  <div class="page-container">
    <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 === 'company' }"
          @click="handleTabClick('company')"
        >
          公司概况
        </div>
        <div
          class="tab-item"
          :class="{ active: currentTab === 'business' }"
          @click="handleTabClick('business')"
        >
          业务介绍
        </div>
      </div>
    </header>
    <main>
      <section className="relative pb-[900px]">
        <div class="absolute top-[0px] right-[0px]">
          <img
            src="@/assets/image/businessintroduction/768/bg-6.png"
            class="w-[1652px] h-[1865px]"
          />
        </div>

        <div class="pt-[718px]">
          <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-[35px] text-[#8B59F7] w-[958px] ml-[188px] mt-[55px]"
          >
            深度融合前沿 AI
            技术与短视频平台的独特优势，率先开启探索之旅，勇立潮头，领航文创领域踏入前所未有的崭新视界
          </div>
        </div>

        <div
          :ref="
            (el) => {
              moveRefs[3].value = el;
            }
          "
          class="absolute bottom-[-290px] right-[0px]"
        >
          <img
            src="@/assets/image/businessintroduction/768/bg-2.png"
            class="w-[960px] h-[955px]"
          />
        </div>
        <div class="absolute bottom-[-660px] left-[0px]">
          <img
            src="@/assets/image/businessintroduction/768/bg-7.png"
            class="w-[842px] h-[1798px]"
          />
        </div>
      </section>

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

          <div
            class="w-full mt-[160px] px-[188px] font-medium text-[55px] text-[#8B59F7]"
          >
            <div>文艺市场困局</div>
          </div>
          <div class="w-full px-[188px] flex flex-wrap">
            <div
              :ref="
                (el) => {
                  moveRefs[5].value = el;
                }
              "
              class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
            >
              <div class="font-medium">
                <img
                  class="w-[40px] h-[40px] mr-[25px]"
                  src="@/assets/image/businessintroduction/768/icon-y.png"
                />

                文艺价值蒙尘
              </div>
              <div class="mt-[8px] w-[680px]">
                品牌塑造与市场运营匮乏，致使文艺价值隐于暗处，难以被大众洞悉与认可。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[6].value = el;
                }
              "
              class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
            >
              <div class="font-medium">
                <img
                  class="w-[40px] h-[40px] mr-[25px]"
                  src="@/assets/image/businessintroduction/768/icon-y.png"
                />

                推广途径困局
              </div>
              <div class="mt-[8px] w-[680px]">
                个人社交平台和传统展览形式陈旧，无法达成广泛且优质的曝光，严重束缚传播。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[7].value = el;
                }
              "
              class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
            >
              <div class="font-medium">
                <img
                  class="w-[40px] h-[40px] mr-[25px]"
                  src="@/assets/image/businessintroduction/768/icon-y.png"
                />

                宣传单一致贫
              </div>
              <div class="mt-[8px] w-[680px]">
                过度倚重线下展厅与个别展会，宣传面狭隘，致使收入结构单一且不稳定。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[8].value = el;
                }
              "
              class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
            >
              <div class="font-medium">
                <img
                  class="w-[40px] h-[40px] mr-[25px]"
                  src="@/assets/image/businessintroduction/768/icon-y.png"
                />

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

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

          <div class="mt-[140px] mb-[188px] overflow-hidden">
            <img
              :ref="
                (el) => {
                  moveRefs[11].value = el;
                }
              "
              class="w-[1625px] h-[1038px]"
              src="@/assets/image/businessintroduction/768/imageshow-2.png"
            />
          </div>
          <div class="w-full px-[188px]">
            <img
              class="w-[161px] h-[120px]"
              src="@/assets/image/businessintroduction/768/icon-l.png"
            />

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

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

            <div
              class="w-full mt-[50px] text-[#10253E] text-[45px] font-medium"
            >
              互动共享 构建艺术生态闭环
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[14].value = el;
                }
              "
              class="mt-[38px] text-[#455363] text-[40px] w-[1345px]"
            >
              借助智能社交推荐技术，推动粉丝间深度互动交流，分享见解与创作灵感，挖掘彼此潜在需求，实现粉丝群体自然裂变。同时，通过数据分析洞察消费群体特征和需求，精准拓展消费圈层，挖掘新商机。这一互动共享机制构建起可持续发展的文艺创作生态，创作者影响力持续提升，公司也实现稳健发展与收益增长，达成双赢。
            </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-[188px] mt-[113px]">
            <div class="text-[#8B59F7] text-[40px]">市场愿景</div>
          </div>
          <div class="w-full title mt-[58px] px-[188px]">
            <div>擘画文艺市场新蓝图</div>
          </div>
          <div class="w-full px-[188px] mt-[140px]">
            <div
              :ref="
                (el) => {
                  moveRefs[15].value = el;
                }
              "
              class="text-[#455363] text-[40px] w-[1345px]"
            >
              在变幻莫测的艺术浪潮中，FiEE以创新为笔，精准洞察为墨，以创新思维与全球化视野重新定义文艺产业的未来。深度挖掘文艺潜力，融合多元文化元素，打破传统壁垒，搭建线上流量社群，重塑文艺生态，激发市场活力，引领文艺价值的新流向，开启文艺市场的全新时代。
            </div>
          </div>

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

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

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

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

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

          <div
            class="w-full px-[188px] flex flex-wrap justify-between mt-[160px] mb-[230px]"
          >
            <div
              :ref="
                (el) => {
                  moveRefs[22].value = el;
                }
              "
              class="w-[50%] flex flex-wrap text-[40px]"
            >
              <div class="w-full">
                <img
                  class="w-[139px] h-[135px]"
                  src="@/assets/image/businessintroduction/768/icon-s.png"
                />
              </div>
              <div
                class="w-full font-medium mt-[50px] text-[#10253E] text-[45px]"
              >
                粉丝增长
              </div>
              <div class="mt-[38px] w-[506px]">
                至 2027 年，凭借精准营销策略，助力每位艺术家粉丝数超 10
                万，粉丝社区人数达 10
                亿，壮大文艺创作者粉丝群体，增强作品影响力。
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[23].value = el;
                }
              "
              class="w-[50%] flex flex-wrap text-[40px]"
            >
              <div class="w-full">
                <img
                  class="w-[132px] h-[135px] mr-[25px]"
                  src="@/assets/image/businessintroduction/768/icon-c.png"
                />
              </div>

              <div
                class="w-full font-medium mt-[50px] text-[#10253E] text-[45px]"
              >
                KOL孵化
              </div>
              <div class="mt-[38px] w-[506px]">
                依托十亿流量社群，运用精准数据分析，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-[188px] mt-[218px]"
          >
            <div class="text-[#8B59F7] text-[55px] font-medium">
              曝光量突破，塑造全球品牌影响力
            </div>
          </div>

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

      <section
        style="background: #fff"
        className="flex flex-wrap justify-center"
      >
        <img
          class="w-[580px] h-[55px] my-[85px]"
          src="@/assets/image/image-footer.png"
          alt="logo"
        />
      </section>
    </main>
  </div>
</template>

<script setup>
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/768/imageshow-3.png";
import imageshow4 from "@/assets/image/businessintroduction/768/imageshow-4.png";
import imageshow5 from "@/assets/image/businessintroduction/768/imageshow-5.png";

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

const carouselTrack = ref(null);
let carouselAnimation = null; // 存储 GSAP 动画实例

const getVisibleItems = () => {
  const items = state.marqueeArr;
  // 复制两组用于无缝滚动
  return [...items, ...items];
};

// 监听窗口大小变化
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,
          },
        });
      }
    });
    console.log(moveRefs.value);
    // 初始化轮播动画
    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(() => {
  if (ctx) {
    ctx.revert();
  }
  ScrollTrigger.killAll();
  if (carouselAnimation) {
    carouselAnimation.kill();
  }
});

const handleTabClick = (tab) => {
  currentTab.value = 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: 155px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 10rem;
  background-color: transparent;
}
.logo {
  img {
    width: 270px;
    height: 83px;
  }
}

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

.tab-item {
  font-size: 30px;
  color: #000000;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;

  &.active {
    color: #8b59fa;
  }

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

.title {
  font-size: 85px;
  font-weight: 600;
}

.section-first {
  width: 100%;
  background: url("@/assets/image/businessintroduction/768/bg-6.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-sec {
  z-index: 2;
  background: url("@/assets/image/businessintroduction/768/bg-12.png");
  background-size: cover;
  background-position: top-center;
  background-repeat: no-repeat;
}

.section-five {
  background: url("@/assets/image/businessintroduction/768/bg-1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.icon-langmul {
  position: absolute;
  bottom: -80px;
  right: 0;
}
.carousel-container {
  width: 96%;
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  cursor: pointer;
}

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

  &:active {
    cursor: grabbing;
  }
}

.carousel-item {
  width: 785px;
  margin-right: 73px;
  flex: 0 0 auto;
  display: block; // 改为 block 布局
  padding: 23px 20px 40px;
  border-radius: 30px;
  box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
}

.carousel-image {
  width: 748px;
  height: 563px;
  object-fit: cover;
  display: block;
}

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

.carousel-title {
  font-size: 50px;
  font-weight: 500;
  margin-top: 48px;
}

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

// 添加一个通用的溢出控制类
.overflow-hidden {
  overflow: hidden;
}
</style>