273 lines
8.4 KiB
Vue
273 lines
8.4 KiB
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]">
|
|||
|
|
<div>领航文艺全周期</div>
|
|||
|
|
<div>创变价值新巅峰</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="w-full text-[35px] text-[#8B59F7] w-[958px] ml-[188px] mt-[55px]"
|
|||
|
|
>
|
|||
|
|
FiEE立志成为文艺创作全周期的掌舵人，深度参与从灵感初绽、作品打磨完成，到市场推广宣传、文化广泛传播的每一处关键节点
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div 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 class="text-[#455363] text-[40px] w-[1345px]">
|
|||
|
|
FiEE彻底打破传统单一服务机构的局限，以行业变革者的姿态，深度融合前沿技术与丰富多元的资源，精心构建起一套贯穿文艺创作从萌芽构思到辉煌绽放全流程的
|
|||
|
|
"全周期" 价值赋能体系。
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-[60px] text-[#455363] text-[40px] w-[1345px]">
|
|||
|
|
无论你是刚刚踏入文艺殿堂、怀揣梦想的创作新人，还是在文艺道路上摸爬滚打、渴望突破创作瓶颈、攀登更高文艺巅峰的成熟文艺工作者，FiEE都将成为你最坚实的伙伴，一路贴心陪伴，为你的文艺征途遮风挡雨，指引前行的方向。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-[140px] mb-[235px] overflow-hidden">
|
|||
|
|
<img
|
|||
|
|
ref="slideImage"
|
|||
|
|
class="w-[1625px] h-[1038px]"
|
|||
|
|
src="@/assets/image/companyprofil/imageshow-2.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section 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 class="text-[#455363] text-[40px] w-[1345px]">
|
|||
|
|
FiEE团队由运营专家、技术精英及国际顾问组成，提供从内容策划到全球推广的全方位支持。通过跨界合作与资源整合，FiEE突破传统边界，探索文艺新表达。依托前沿技术与精准营销，助力作品实现商业价值与社会影响力的双重提升，为文艺繁荣注入持久动力。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-[143px] mb-[188px] overflow-hidden">
|
|||
|
|
<img
|
|||
|
|
class="w-[1625px] h-[1038px]"
|
|||
|
|
src="@/assets/image/companyprofil/imageshow-2.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]">
|
|||
|
|
<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="w-full flex justify-end mt-[123px]">
|
|||
|
|
<img
|
|||
|
|
class="w-[846px] h-[216px]"
|
|||
|
|
src="@/assets/image/companyprofil/icon-langmul.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<section style="background: #fff"></section>
|
|||
|
|
</main>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { onUnmounted, ref, onMounted } 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 slideImage = ref(null);
|
|||
|
|
const { currentTab } = useHome();
|
|||
|
|
let ctx;
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 在组件挂载后初始化动画
|
|||
|
|
ctx = gsap.context(() => {
|
|||
|
|
gsap.from(slideImage.value, {
|
|||
|
|
x: "-100%",
|
|||
|
|
duration: 1.2,
|
|||
|
|
ease: "power2.out", // 缓动函数：开始快，结束慢
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: slideImage.value, // 触发元素
|
|||
|
|
start: "top 80%", // 开始点：当图片顶部到达视口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;
|
|||
|
|
}
|
|||
|
|
</style>
|