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

<script setup>
import { onUnmounted, ref, watch } from 'vue';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import { useHome } from '@/store/home/index.js';
import { useI18n } from 'vue-i18n';
import { useTransitionComposable } from '@/composables/transition-composable';
import { useRouter } from "vue-router";
import { NDivider } from 'naive-ui'

// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);
const { currentTab } = useHome();
const router = useRouter();
const { transitionState } = useTransitionComposable();
const main = ref();
let ctx;
const { t } = useI18n();
const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push('/' + tab);
}
watch(
  [() => transitionState.transitionComplete, main],
  (newValue) => {
    if (newValue && main.value) {
      ctx = gsap.context((self) => {
        // Text animations from left
        gsap.utils.toArray('.text-animate').forEach(text => {
          gsap.from(text, {
            x: -100,
            opacity: 0,
            duration: 1,
            scrollTrigger: {
              trigger: text,
              start: 'top 80%',
              end: 'top 50%',
              toggleActions: 'play none none reverse',
            }
          });
        });

        // Image animations from right
        gsap.utils.toArray('.image-animate').forEach(image => {
          gsap.from(image, {
            x: 100,
            opacity: 0,
            duration: 1,
            scrollTrigger: {
              trigger: image,
              start: 'top 80%',
              end: 'top 50%',
              toggleActions: 'play none none reverse',
            }
          });
        });
      }, main.value);
    }
  },
  {
    immediate: true,
  }
);

onUnmounted(() => {
  ctx?.revert(); // <- Easy Cleanup!
});
</script>

<template>
   <header className="header">
      <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')">
          {{ t('home.nav.home') }}
        </div>
        <div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
          {{ t('home.nav.company') }}
        </div>
        <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
          {{ t('home.nav.business') }}
        </div>
      </div>
    </header>
  <main ref="main">

    <div class="head relative">

      <img src="@/assets/image/gk.png" alt="head">

      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
        领航文艺全周期
      </div>
      <div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate">
        创变价值新巅峰
      </div>
      <div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
        FiEE立志成为文艺创作全周期的掌舵人，深度参与从灵感初绽、作品打磨完成，到市场推广宣传、文化广泛传播的每一处关键节点
      </div>

    </div>
    <n-divider class="divider1" vertical />
    <div class="divider2" style=""></div>
    <div class="divider3" style=""></div>
    <div class="divider4" style=""></div>
    <n-divider class="divider5" vertical />
    <div class="bg-[#F8F9FF] ">

      <div 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">公司介绍</div>
        <div class="pl-[505px] pr-[480px] flex">

          <div class="w-[411px] mr-[38px] text-animate">
            <div class="text-[#10253E] text-[40px]">独树一帜

            </div>
            <div class="text-[#10253E] text-[40px]">全周期价值赋能领航者</div>
            <div class="text-[#455363] text-[16px] mt-[56px]">
              FiEE彻底打破传统单一服务机构的局限，以行业变革者的姿态，深度融合前沿技术与丰富多元的资源，精心构建起一套贯穿文艺创作从萌芽构思到辉煌绽放全流程的 "全周期" 价值赋能体系。
              无论你是刚刚踏入文艺殿堂、怀揣梦想的创作新人，还是在文艺道路上摸爬滚打、渴望突破创作瓶颈、攀登更高文艺巅峰的成熟文艺工作者，FiEE都将成为你最坚实的伙伴，一路贴心陪伴，为你的文艺征途遮风挡雨，指引前行的方向。
            </div>
          </div>

          <div class="text-[#10253E] text-[20px] image-animate">
            <img class="w-[465px] h-[415px]" src="@/assets/image/ship.png" alt="company">
          </div>

        </div>
      </div>
      <div class="content2 relative flex items-center justify-center pt-[168px]  bg-[#fff]">
        <div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate">团队介绍</div>
        <div class="pl-[505px] pr-[490px] flex z-3">
          <div class="w-[412px] mr-[40px] text-animate">
            <div class="text-[#10253E] text-[40px]">汇聚精英</div>
            <div class="text-[#10253E] text-[40px]">燃文艺创变引擎</div>
            <div class="mt-[93px]">
              <img class="w-[58px] h-[58px]" src="@/assets/image/cl.png" alt="cl">
              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"> <n-divider
                  class="absolute left-[-23px] top-[6px]" style="background-color: #8B59F7;" vertical />纵横全球 多元领航</div>
              <div class="text-[#455363] text-[16px]">海外精准营销，铺设多元渠道，塑造国际品牌。智能管理 多语言平台，提供本地化服务。</div>
            </div>
            <div class="mt-[68px]">
              <img class="w-[58px] h-[50px]" src="@/assets/image/heart.png" alt="cl">
              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"> <n-divider
                  class="absolute left-[-23px] top-[6px]" style="background-color: #8B59F7;" vertical />深耕粉丝 构筑生态

              </div>
              <div class="text-[#455363] text-[16px]">社区精细运营，提供多元增值服务。升级社群管理工具，精准触达用户。创新激励机制，开发特色衍生周边。</div>
            </div>
            <div class="mt-[65px]">
              <img class="w-[54px] h-[52px]" src="@/assets/image/3p.png" alt="cl">
              <div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"> <n-divider
                  class="absolute left-[-23px] top-[6px]" style="background-color: #8B59F7;" vertical />广纳贤才 团队进阶

              </div>
              <div class="text-[#455363] text-[16px]">广纳技术、营销精英，注入创新活力。强化内部培训，优化组织架构。引入先进理念，提升管理与服务效能。</div>
            </div>
          </div>

          <div class="text-[#455363] text-[16px] flex-1 image-animate">
            <div>
              FiEE团队由运营专家、技术精英及国际顾问组成，提供从内容策划到全球推广的全方位支持。通过跨界合作与资源整合，FiEE突破传统边界，探索文艺新表达。依托前沿技术与精准营销，助力作品实现商业价值与社会影响力的双重提升，为文艺繁荣注入持久动力。
            </div>
            <img class="w-[465px] h-[625px] mt-[80px]" src="@/assets/image/randg.png" alt="cl">
          </div>

        </div>
      </div>
      <div class="content3 relative bg-[#fff] pt-[185px]">
        <n-divider class="divider1" vertical />
        <div class="divider2" style=""></div>
        <div class="divider3" style=""></div>
        <div class="divider4" style=""></div>
        <n-divider class="divider5" vertical />
        <img class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px]" src="@/assets/image/xlv.png" alt="cl">
        <img class="absolute" src="@/assets/image/xbg.png" alt="cl">
        <div class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate">
          <div class="text-[#8B59F7] text-[16px]">卓越建树</div>
          <div class="text-[#10253E] text-[40px]">以开拓之姿，登文艺之巅</div>
          <div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
            长期深耕文艺领域，FiEE持续拓展业务版图，积累了深厚的行业资源，搭建起广泛的合作网络。目前已与多个全球热门自媒体平台深度携手，从多维度助力文艺创作者闪耀国际舞台，绽放独有的艺术光芒。</div>
        </div>
      </div>
    </div>

  </main>
  <footer>
    <div class="footer-content">
      <img class="copyright" src="@/assets/image/cp.png" alt="logo" />


    </div>
  </footer>
</template>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 14rem;
  background-color: transparent;
}

.logo {
  img {
    width: 108px;
    height: 33px;
  }
}

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

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

  &.active {
    color: #8B59FA;
  }

  &:hover {
    color: #8B59FA;
  }
}
.head {
  width: 100%;
  background-color: #F8F9FF;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.divider1 {
  position: absolute;
  z-index: 3;
  left: 482px;
  width: 1px;
  height: 100vw;

}

.divider2 {
  position: absolute;
  z-index: 3;
  left: 720px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider3 {
  position: absolute;
  z-index: 3;
  left: 952px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider4 {
  position: absolute;
  z-index: 3;
  left: 1182px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider5 {
  position: absolute;
  z-index: 3;
  left: 1406px;
  width: 1px;
  height: 100vw;
}
.footer-content {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;

  .copyright {
    width: 232px;
    height: 22pxpx;
  }
}
</style>