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

<template>
  <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 ref="main">
    <section style="background: #ffffff">
      <div class="relative section-first h-[1524px] box-contain pt-[718px]">
        <div
          class="w-[640px] title ml-[188px]"
          :ref="
            (el) => {
              moveRefs[0].value = el;
            }
          "
        >
          <div>领航文艺全周期</div>
          <div>创变价值新巅峰</div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[1].value = el;
            }
          "
          class="w-full text-[35px] text-[#8B59F7] w-[958px] ml-[188px] mt-[55px]"
        >
          FiEE立志成为文艺创作全周期的掌舵人，深度参与从灵感初绽、作品打磨完成，到市场推广宣传、文化广泛传播的每一处关键节点
        </div>

        <div ref="moveRef3" class="absolute top-[603px] right-[63px]">
          <img
            class="w-[949px] h-[574px]"
            src="@/assets/image/companyprofil/image-q.png"
          />
        </div>
      </div>

      <div class="w-[1920px] h-[955px]">
        <img src="@/assets/image/companyprofil/icon-lang.png" alt="logo" />
      </div>
    </section>

    <section style="background: #f8f9ff">
      <div class="flex flex-wrap justify-center">
        <div class="content 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>
        </div>
        <div class="w-full px-[188px] mt-[140px]">
          <div
            :ref="
              (el) => {
                moveRefs[2].value = el;
              }
            "
            class="text-[#455363] text-[40px] w-[1345px]"
          >
            FiEE彻底打破传统单一服务机构的局限，以行业变革者的姿态，深度融合前沿技术与丰富多元的资源，精心构建起一套贯穿文艺创作从萌芽构思到辉煌绽放全流程的
            "全周期" 价值赋能体系。
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[3].value = el;
              }
            "
            class="mt-[60px] text-[#455363] text-[40px] w-[1345px]"
          >
            无论你是刚刚踏入文艺殿堂、怀揣梦想的创作新人，还是在文艺道路上摸爬滚打、渴望突破创作瓶颈、攀登更高文艺巅峰的成熟文艺工作者，FiEE都将成为你最坚实的伙伴，一路贴心陪伴，为你的文艺征途遮风挡雨，指引前行的方向。
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[4].value = el;
            }
          "
          class="mt-[140px] mb-[235px] overflow-hidden"
        >
          <img
            :ref="
              (el) => {
                moveRefs[5].value = el;
              }
            "
            class="w-[1625px] h-[1038px]"
            src="@/assets/image/companyprofil/imageshow-2.png"
          />
        </div>
      </div>
    </section>

    <section class="relative" style="background: #fff">
      <div class="flex flex-wrap justify-center">
        <div class="content 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>
        </div>
        <div class="w-full px-[188px] mt-[140px]">
          <div
            :ref="
              (el) => {
                moveRefs[6].value = el;
              }
            "
            class="text-[#455363] text-[40px] w-[1345px]"
          >
            FiEE团队由运营专家、技术精英及国际顾问组成，提供从内容策划到全球推广的全方位支持。通过跨界合作与资源整合，FiEE突破传统边界，探索文艺新表达。依托前沿技术与精准营销，助力作品实现商业价值与社会影响力的双重提升，为文艺繁荣注入持久动力。
          </div>
        </div>
        <div class="mt-[143px] mb-[188px] overflow-hidden">
          <img
            :ref="
              (el) => {
                moveRefs[7].value = el;
              }
            "
            class="w-[1625px] h-[1038px]"
            src="@/assets/image/companyprofil/imageshow-3.png"
          />
        </div>
        <div class="w-full px-[188px]">
          <img
            class="w-[145px] h-[145px]"
            src="@/assets/image/companyprofil/icon-lun.png"
          />

          <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
            纵横全球 多元领航
          </div>
          <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
            海外精准营销，铺设多元渠道，塑造国际品牌。智能管理
            多语言平台，提供本地化服务。
          </div>
        </div>
        <div class="w-full px-[188px] mt-[170px]">
          <img
            class="w-[145px] h-[145px]"
            src="@/assets/image/companyprofil/icon-love.png"
          />

          <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
            深耕粉丝 构筑生态
          </div>
          <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
            社区精细运营，提供多元增值服务。升级社群管理工具，精准触达用户。创新激励机制，开发特色衍生周边。
          </div>
        </div>
        <div class="w-full px-[188px] mt-[160px] mb-[250px]">
          <img
            class="w-[145px] h-[145px]"
            src="@/assets/image/companyprofil/icon-p.png"
          />

          <div class="w-full mt-[50px] text-[#10253E] text-[45px]">
            广纳贤才 团队进阶
          </div>
          <div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
            广纳技术、营销精英，注入创新活力。强化内部培训，优化组织架构。引入先进理念，提升管理与服务效能。
          </div>
        </div>

        <div class="icon-langmul">
          <img
            class="w-[846px] h-[216px]"
            src="@/assets/image/companyprofil/icon-langmul.png"
          />
        </div>
      </div>
    </section>
    <section class="section-four">
      <div class="flex flex-wrap justify-center">
        <div class="content w-full px-[188px] mt-[458px]">
          <div class="text-[#8B59F7] text-[40px]">卓越建树</div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[8].value = el;
            }
          "
          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[9].value = el;
              }
            "
            class="text-[#455363] text-[40px] w-[1345px]"
          >
            长期深耕文艺领域，FiEE持续拓展业务版图，积累了深厚的行业资源，搭建起广泛的合作网络。目前已与多个全球热门自媒体平台深度携手，从多维度助力文艺创作者闪耀国际舞台，绽放独有的艺术光芒。
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[10].value = el;
            }
          "
          class="w-full mt-[260px] px-[188px] text-[55px] font-semibold"
        >
          <div>权威资质认证</div>
          <div>铸就文艺事业坚实根基</div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[11].value = el;
            }
          "
          class="w-full px-[188px] mt-[60px]"
        >
          <div class="text-[#455363] text-[40px] w-[1345px]">
            FiEE提供专业且权威的资质认证服务，助力文艺创作者获取行业广泛认可的资质。这不仅能让文艺创作者的作品价值得到显著提升，更能使文艺创作者在竞争白热化的艺术市场中崭露头角，大幅增强文艺工作者的市场竞争力，为文艺创作者的事业铺就稳固基石。
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[12].value = el;
            }
          "
          class="mt-[120px] mb-[260px] overflow-hidden"
        >
          <img
            class="w-[1625px] h-[1038px]"
            src="@/assets/image/companyprofil/imageshow-4.png"
          />
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[13].value = el;
            }
          "
          class="w-full px-[188px] text-[55px] font-semibold"
        >
          <div>全球平台矩阵</div>
          <div>拓展文艺传播边界</div>
        </div>
        <div class="w-full px-[188px] mt-[60px]">
          <div
            :ref="
              (el) => {
                moveRefs[14].value = el;
              }
            "
            class="text-[#455363] text-[40px] w-[1345px]"
          >
            <div>
              FiEE凭借深厚的行业资源和广泛的合作网络，与超过 30
              个全球热门自媒体平台达成深度战略合作伙伴关系。
            </div>
            <div>
              从国际知名的社交平台，到专注文艺领域的专业媒体，我们为文艺创作者精心打造专属账号，并运用先进的优化策略，让文艺创作者的账号在众多创作者中脱颖而出。
            </div>
          </div>
        </div>
        <div class="mt-[120px] mb-[220px] overflow-hidden">
          <img
            :ref="
              (el) => {
                moveRefs[15].value = el;
              }
            "
            class="w-[1625px] h-[1038px]"
            src="@/assets/image/companyprofil/imageshow-5.png"
          />
        </div>
      </div>
    </section>
    <section style="background: #fff">
      <div class="flex flex-wrap justify-center">
        <div class="content w-full px-[188px] mt-[245px]">
          <div class="text-[#8B59F7] text-[40px]">聚焦FiEE前沿动态</div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[16].value = el;
            }
          "
          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[17].value = el;
              }
            "
            class="text-[#455363] text-[40px] w-[1345px]"
          >
            FIEE始终扎根文艺领域，时刻紧跟全球艺术发展趋势。通过深度剖析案例、开展跨界研讨，探索文艺与科技、商业的深度融合，为文艺事业未来发展提供前瞻性洞察与灵感启迪。
          </div>
        </div>

        <div class="mt-[310px] mb-[253px]">
          <n-marquee>
            <div
              v-for="(item, idx) in state.marqueeArr"
              :key="idx"
              class="marquee-item w-[785px] flex flex-wrap justify-center pt-[23px] pb-[40px] pl-[20px] pr-[18px]"
            >
              <img class="w-[748px] h-[563px]" :src="item.imgUrl" />
              <div class="pl-[20px] pr-[60px]">
                <div class="text-[50px] font-medium mt-[38px]">
                  <div>{{ item.title }}</div>
                </div>
                <div class="mt-[23px] text-[#455363] text-[40px]">
                  <div>{{ item.subTitle }}</div>
                </div>
              </div>
            </div>
          </n-marquee>
        </div>
      </div>
    </section>
  </main>
</template>

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

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

const { transitionState } = useTransitionComposable();
const main = ref();
const moveRefs = ref(
  Array(18)
    .fill(null)
    .map(() => ref(null))
);
const { currentTab } = useHome();
let ctx;

// 导入图片
import imageShow1 from "@/assets/image/companyprofil/imageshow-1.png";

const state = reactive({
  marqueeArr: [
    {
      title: "强大资源网络，拓展无限商业",
      subTitle:
        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
      imgUrl: imageShow1, // 使用导入的图片
    },
    {
      title: "强大资源网络，拓展无限商业",
      subTitle:
        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
      imgUrl: imageShow1, // 使用导入的图片
    },
    {
      title: "强大资源网络，拓展无限商业",
      subTitle:
        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
      imgUrl: imageShow1, // 使用导入的图片
    },
    {
      title: "强大资源网络，拓展无限商业",
      subTitle:
        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
      imgUrl: imageShow1, // 使用导入的图片
    },
    {
      title: "强大资源网络，拓展无限商业",
      subTitle:
        "FiEE与全球知名文艺机构、主流媒体建立深度合作，构建庞大资源网络，帮文艺创作者对接高端资源，拓展艺术作品授权、衍生品开发等商业合作机会。",
      imgUrl: imageShow1, // 使用导入的图片
    },
  ],
});

onMounted(() => {
  ctx = gsap.context(() => {
    moveRefs.value.forEach((moveRef, index) => {
      if (moveRef.value) {
        gsap.from(moveRef.value, {
          x: index % 2 === 0 ? "-100%" : "100%",
          duration: 1.2,
          ease: "power2.out",
          scrollTrigger: {
            trigger: moveRef.value,
            start: "top 80%",
            end: "top 40%",
            toggleActions: "play none none reverse",
            markers: true,
          },
        });
      }
    });
  });
});

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

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">
.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: 90px;
  font-weight: 600;
}
.section-first {
  background: url("@/assets/image/companyprofil/image-x.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-four {
  background: url("@/assets/image/companyprofil/bg-3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.icon-langmul {
  position: absolute;
  bottom: -80px;
  right: 0;
}
.marquee-item {
  border-radius: 30px;
  box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
}
</style>