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

<script setup>
import { onUnmounted, ref, watch } from 'vue';
import gsap from 'gsap';

import { useI18n } from 'vue-i18n';
import { useTransitionComposable } from '@/composables/transition-composable';
import { useRouter } from "vue-router";
import { NDivider } from 'naive-ui'
const router = useRouter();
const { transitionState } = useTransitionComposable();
const main = ref();
let ctx;
const { t } = useI18n();

watch(
  [() => transitionState.transitionComplete, main],
  (newValue) => {
    if (newValue && main.value) {
      ctx = gsap.context((self) => {
        const boxes = self.selector('.box');
        boxes.forEach((box) => {
          gsap.to(box, {
            x: 150,
            scrollTrigger: {
              trigger: box,
              start: 'bottom bottom',
              end: 'top 20%',
              scrub: true,
            },
          });
        });
      }, main.value); // <- Scope!
    }
  },
  {
    immediate: true,
  }
);

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

<template>
  <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">
        领航文艺全周期
      </div>
      <div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold">
        创变价值新巅峰
      </div>
      <div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] ">
        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]">公司介绍</div>
        <div class="pl-[505px] pr-[480px] flex">

          <div class="w-[411px] mr-[38px]">
            <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]">
            <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]">公司介绍</div>
        <div class="pl-[505px] pr-[490px] flex z-3">
          <div class="w-[412px] mr-[40px]">
            <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">
            <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">
          <div class="text-[#8B59F7] text-[16px]">卓越建树</div>
          <div class="text-[#10253E] text-[40px]">以开拓之姿，登文艺之巅</div>
          <div class="text-[#455363] w-[748px] text-[16px]">长期深耕文艺领域，FiEE持续拓展业务版图，积累了深厚的行业资源，搭建起广泛的合作网络。目前已与多个全球热门自媒体平台深度携手，从多维度助力文艺创作者闪耀国际舞台，绽放独有的艺术光芒。</div>
        </div>
      </div>
    </div>

  </main>
</template>
<style lang="scss" scoped>
.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;
}
</style>