Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/officialWebsite
This commit is contained in:
scout
commit
3a0d06de01
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB After Width: | Height: | Size: 221 KiB |
@ -1,9 +1,856 @@
|
||||
<script setup>
|
||||
import { useAuth } from "@/store/auth/index.js";
|
||||
const { clickSendCode, telNum, code, showTextCode, clickLogin } = useAuth();
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen min-h-screen" style=""></div>
|
||||
<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/bg-6.png"
|
||||
class="w-[1652px] h-[1865px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pt-[718px]">
|
||||
<div
|
||||
class="w-[640px] title ml-[188px]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[0].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div>AI × 短视频</div>
|
||||
<div>领航文创新视界</div>
|
||||
</div>
|
||||
<div
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[1].value = el;
|
||||
}
|
||||
"
|
||||
class="w-full 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/bg-2.png"
|
||||
class="w-[960px] h-[955px]"
|
||||
/>
|
||||
</div>
|
||||
<div class="absolute bottom-[-660px] left-[0px]">
|
||||
<img
|
||||
src="@/assets/image/businessintroduction/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/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/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/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/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/imageshow-2.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full px-[188px]">
|
||||
<img
|
||||
class="w-[161px] h-[120px]"
|
||||
src="@/assets/image/businessintroduction/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/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/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/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/bg-5.png"
|
||||
class="h-[361px]"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="">
|
||||
<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/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/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>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<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/imageshow-3.png";
|
||||
import imageshow4 from "@/assets/image/businessintroduction/imageshow-4.png";
|
||||
import imageshow5 from "@/assets/image/businessintroduction/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/bg-6.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.section-sec {
|
||||
z-index: 2;
|
||||
background: url("@/assets/image/businessintroduction/bg-12.png");
|
||||
background-size: cover;
|
||||
background-position: top-center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.section-five {
|
||||
background: url("@/assets/image/businessintroduction/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>
|
||||
|
||||
@ -1,9 +1,860 @@
|
||||
<script setup>
|
||||
import { useAuth } from "@/store/auth/index.js";
|
||||
const { clickSendCode, telNum, code, showTextCode, clickLogin } = useAuth();
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen min-h-screen" style=""></div>
|
||||
<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 style="background: #ffffff" className="relative">
|
||||
<div
|
||||
class="relative section-first h-[1524px] box-contain pt-[718px] mb-[400px]"
|
||||
>
|
||||
<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] absolute bottom-[-660px]">
|
||||
<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-[400px]">
|
||||
<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] leading-[60px]"
|
||||
>
|
||||
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="w-full mt-[143px] flex flex-wrap justify-end">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="arrow-btn" @click="handlePrev">
|
||||
<img
|
||||
class="w-[95px] h-[95px]"
|
||||
src="@/assets/image/companyprofil/icon-left.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="arrow-btn ml-[63px] mr-[230px]" @click="handleNext">
|
||||
<img
|
||||
class="w-[95px] h-[95px]"
|
||||
src="@/assets/image/companyprofil/icon-right.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-[73px] mb-[253px] carousel-container px-[80px] py-[40px]"
|
||||
>
|
||||
<div
|
||||
ref="carouselTrack"
|
||||
class="carousel-track"
|
||||
:style="{
|
||||
transform: `translateX(-${getSlideOffset()}px)`,
|
||||
}"
|
||||
@mousedown="handleDragStart"
|
||||
@mousemove="handleDragMove"
|
||||
@mouseup="handleDragEnd"
|
||||
@mouseleave="handleDragEnd"
|
||||
@touchstart="handleDragStart"
|
||||
@touchmove="handleDragMove"
|
||||
@touchend="handleDragEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(item, idx) in getVisibleItems()"
|
||||
:key="idx"
|
||||
class="carousel-item"
|
||||
@click="handleCarouselClick(item, $event)"
|
||||
>
|
||||
<img class="carousel-image" :src="item.imgUrl" />
|
||||
<div class="carousel-content">
|
||||
<div class="carousel-title">
|
||||
<div>{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="carousel-subtitle">
|
||||
<div>{{ item.subTitle }}</div>
|
||||
</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>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<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(18)
|
||||
.fill(null)
|
||||
.map(() => ref(null))
|
||||
);
|
||||
const { currentTab } = useHome();
|
||||
let ctx;
|
||||
|
||||
// 导入图片
|
||||
import carouselShow1 from "@/assets/image/companyprofil/carouselShow-1.png";
|
||||
import carouselShow2 from "@/assets/image/companyprofil/carouselShow-2.png";
|
||||
import carouselShow3 from "@/assets/image/companyprofil/carouselShow-3.png";
|
||||
import carouselShow4 from "@/assets/image/companyprofil/carouselShow-4.png";
|
||||
import carouselShow5 from "@/assets/image/companyprofil/carouselShow-5.png";
|
||||
|
||||
const state = reactive({
|
||||
marqueeArr: [
|
||||
{
|
||||
title: "实现技术突破，引领文艺创作技术革新",
|
||||
subTitle:
|
||||
"在数字化浪潮以前所未有的态势席卷文艺领域的当下，文艺创作正经历着深刻变革。FiEE凭借着团队持之以恒的努力与创新精神，在文艺创作技术领域取得了具有里程碑意义的重大突破。 历经无数个日夜的艰苦攻坚，FiEE自主研发的新一代智能创作辅助系统正式上线，宛如一颗冉冉升起的璀璨新星，为文艺创作开辟了全新的发展路径，给整个行业带来了前所未有的变革与机遇。",
|
||||
imgUrl: carouselShow1,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"全球化战略升级，FiEE与30+国际平台达成战略合作，构建文艺传播新矩阵",
|
||||
subTitle:
|
||||
"在全球文化交融以前所未有的迅猛之势加速推进的时代大背景下，文艺领域已然成为文化交流与创新的前沿阵地。作为文艺行业的领航者，FiEE 以敏锐的战略眼光和果敢的行动力，积极投身于这场全球文化交流的浪潮之中。 近日，FiEE 振奋人心地宣布与 TikTok、Instagram等 30 余家国际头部自媒体平台达成深度战略合作，同时正式启动具有深远意义的'文艺无界计划'，矢志破除地域之间的文化藩篱。",
|
||||
|
||||
imgUrl: carouselShow2,
|
||||
},
|
||||
{
|
||||
title: "助力文艺创作者，FiEE 发布'AI × 短视频'全链路解决方案",
|
||||
subTitle:
|
||||
"对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。 作品完成后的传播与推广，同样是一道难以跨越的鸿沟。",
|
||||
imgUrl: carouselShow3,
|
||||
},
|
||||
{
|
||||
title: "FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星",
|
||||
subTitle:
|
||||
"在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。 今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL 孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。",
|
||||
|
||||
imgUrl: carouselShow4,
|
||||
},
|
||||
{
|
||||
title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
|
||||
subTitle:
|
||||
"在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
|
||||
|
||||
imgUrl: carouselShow5,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const carouselTrack = ref(null);
|
||||
const currentIndex = ref(0);
|
||||
|
||||
const getVisibleItems = () => {
|
||||
const items = state.marqueeArr;
|
||||
// 创建一个包含所有项目的数组，前后各复制一组用于无缝循环
|
||||
return [...items, ...items, ...items];
|
||||
};
|
||||
|
||||
// 计算实际滑动距离
|
||||
const getSlideOffset = () => {
|
||||
if (!carouselTrack.value) return 0;
|
||||
|
||||
const firstItem = carouselTrack.value.querySelector(".carousel-item");
|
||||
if (!firstItem) return 0;
|
||||
|
||||
const itemWidth = firstItem.offsetWidth;
|
||||
const itemMargin = parseInt(window.getComputedStyle(firstItem).marginRight);
|
||||
const totalWidth = itemWidth + itemMargin;
|
||||
|
||||
// 初始偏移一组数据的长度，从而从中间组开始显示，并增加40px的额外偏移
|
||||
const initialOffset = state.marqueeArr.length * totalWidth + 32;
|
||||
return initialOffset + currentIndex.value * totalWidth;
|
||||
};
|
||||
|
||||
// 定义 resize 处理函数
|
||||
const handleResize = () => {
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听窗口大小变化
|
||||
onMounted(() => {
|
||||
console.log(moveRefs.value);
|
||||
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,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 使用定义的 handleResize 函数
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
// 初始化位置为第二组的开头
|
||||
currentIndex.value = 0;
|
||||
|
||||
nextTick(() => {
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transition = "none";
|
||||
carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`;
|
||||
|
||||
// 重新启用过渡效果
|
||||
setTimeout(() => {
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (ctx) {
|
||||
ctx.revert();
|
||||
}
|
||||
ScrollTrigger.killAll();
|
||||
// 移除事件监听
|
||||
window.removeEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
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,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 向前滑动
|
||||
const handlePrev = () => {
|
||||
if (!carouselTrack.value) return;
|
||||
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
currentIndex.value--;
|
||||
|
||||
// 如果滑到第一组的开头，跳转到第二组的末尾
|
||||
if (currentIndex.value < -state.marqueeArr.length) {
|
||||
setTimeout(() => {
|
||||
carouselTrack.value.style.transition = "none";
|
||||
currentIndex.value = -1;
|
||||
nextTick(() => {
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
// 向后滑动
|
||||
const handleNext = () => {
|
||||
if (!carouselTrack.value) return;
|
||||
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
currentIndex.value++;
|
||||
|
||||
// 如果滑到第三组的末尾，跳转到第二组的开头
|
||||
if (currentIndex.value >= state.marqueeArr.length) {
|
||||
setTimeout(() => {
|
||||
carouselTrack.value.style.transition = "none";
|
||||
currentIndex.value = 0;
|
||||
nextTick(() => {
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加滑动相关的状态
|
||||
const isDragging = ref(false);
|
||||
const startX = ref(0);
|
||||
const scrollLeft = ref(0);
|
||||
|
||||
// 处理鼠标/触摸按下事件
|
||||
const handleDragStart = (e) => {
|
||||
isDragging.value = true;
|
||||
startX.value = e.type === "mousedown" ? e.pageX : e.touches[0].pageX;
|
||||
scrollLeft.value = getSlideOffset();
|
||||
|
||||
// 禁用过渡效果，实现平滑拖动
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transition = "none";
|
||||
}
|
||||
};
|
||||
|
||||
// 处理鼠标/触摸移动事件
|
||||
const handleDragMove = (e) => {
|
||||
if (!isDragging.value) return;
|
||||
e.preventDefault();
|
||||
|
||||
const x = e.type === "mousemove" ? e.pageX : e.touches[0].pageX;
|
||||
const walk = startX.value - x;
|
||||
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transform = `translateX(-${
|
||||
scrollLeft.value + walk
|
||||
}px)`;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理鼠标/触摸释放事件
|
||||
const handleDragEnd = (e) => {
|
||||
if (!isDragging.value) return;
|
||||
isDragging.value = false;
|
||||
|
||||
if (carouselTrack.value) {
|
||||
// 恢复过渡效果
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
|
||||
const x = e.type === "mouseup" ? e.pageX : e.changedTouches[0].pageX;
|
||||
const walk = startX.value - x;
|
||||
|
||||
// 获取单个项目的宽度
|
||||
const firstItem = carouselTrack.value.querySelector(".carousel-item");
|
||||
if (!firstItem) return;
|
||||
|
||||
const itemWidth = firstItem.offsetWidth;
|
||||
const itemMargin = parseInt(window.getComputedStyle(firstItem).marginRight);
|
||||
const totalWidth = itemWidth + itemMargin;
|
||||
|
||||
// 根据滑动距离决定是否切换到下一个/上一个
|
||||
if (Math.abs(walk) > totalWidth / 3) {
|
||||
if (walk > 0) {
|
||||
handleNext();
|
||||
} else {
|
||||
handlePrev();
|
||||
}
|
||||
} else {
|
||||
// 如果滑动距离不够，回到当前位置
|
||||
carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`;
|
||||
}
|
||||
}
|
||||
};
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const handleCarouselClick = (item, event) => {
|
||||
// 检查事件类型是否为点击
|
||||
if (event.type === "click") {
|
||||
event.stopPropagation(); // 阻止事件传播
|
||||
event.preventDefault(); // 阻止默认行为
|
||||
console.log(item);
|
||||
router.push({
|
||||
path: "/companyprofildetail",
|
||||
query: {
|
||||
title: item.title,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 138px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.logo {
|
||||
img {
|
||||
width: 399px;
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 61px;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
.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: 28px;
|
||||
flex: 0 0 auto;
|
||||
display: 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;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 5);
|
||||
}
|
||||
|
||||
.carousel-subtitle {
|
||||
margin-top: 23px;
|
||||
color: #455363;
|
||||
font-size: 40px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 5);
|
||||
}
|
||||
|
||||
// 添加一个通用的溢出控制类
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 为所有可能需要动画的容器添加溢出隐藏
|
||||
[ref*="moveRef"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 标题容器也需要控制溢出
|
||||
.title {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,8 +29,10 @@
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section style="background: #ffffff">
|
||||
<div class="relative section-first h-[1524px] box-contain pt-[718px]">
|
||||
<section style="background: #ffffff" className="relative">
|
||||
<div
|
||||
class="relative section-first h-[1524px] box-contain pt-[718px] mb-[400px]"
|
||||
>
|
||||
<div
|
||||
class="w-[640px] title ml-[188px]"
|
||||
:ref="
|
||||
@ -60,15 +62,14 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[1920px] h-[955px]">
|
||||
<div class="w-[1920px] absolute bottom-[-660px]">
|
||||
<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="content w-full px-[188px] mt-[400px]">
|
||||
<div class="text-[#8B59F7] text-[40px]">公司介绍</div>
|
||||
</div>
|
||||
<div class="w-full title mt-[58px] px-[188px]">
|
||||
|
||||
@ -1,9 +1,459 @@
|
||||
<script setup>
|
||||
import { useAuth } from "@/store/auth/index.js";
|
||||
const { clickSendCode, telNum, code, showTextCode, clickLogin } = useAuth();
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen min-h-screen" style=""></div>
|
||||
<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="section-first"
|
||||
v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div
|
||||
class="w-full title mt-[298px] px-[180px] text-center div-indent"
|
||||
>
|
||||
实现技术突破，引领文艺创作技术革新
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[40px] div-indent"
|
||||
>
|
||||
2025年02月07日 12时00分
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden div-indent">
|
||||
<img
|
||||
class="w-[1625px] h-[1003px]"
|
||||
src="@/assets/image/companyprofil/carouselShow-1.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[188px] text-[#455363] text-[40px] div-indent mt-[118px] mb-[275px]"
|
||||
>
|
||||
<div>
|
||||
在数字化浪潮以前所未有的态势席卷文艺领域的当下，文艺创作正经历着深刻变革。FiEE凭借着团队持之以恒的努力与创新精神，在文艺创作技术领域取得了具有里程碑意义的重大突破。
|
||||
</div>
|
||||
<div>
|
||||
历经无数个日夜的艰苦攻坚，FiEE自主研发的新一代智能创作辅助系统正式上线，宛如一颗冉冉升起的璀璨新星，为文艺创作开辟了全新的发展路径，给整个行业带来了前所未有的变革与机遇。
|
||||
</div>
|
||||
<div>
|
||||
研发过程中，技术团队遭遇了诸多棘手难题。在海量文艺作品数据的收集环节，需从不同年代、不同风格、不同类型的文艺作品中获取数据，涵盖古今中外的文学名著、影视佳作、音乐经典等，这些数据来源广泛且格式多样，收集难度极大。
|
||||
整理与分析时，既要确保数据的准确性和完整性，又要对不同类型的数据进行分类整合，以便后续的深度挖掘。
|
||||
</div>
|
||||
<div>
|
||||
人工智能算法的优化也绝非易事，团队需要不断调整算法参数，使其能够精准地从海量数据中提取有价值的信息。大数据模型的搭建更是复杂，要考虑到模型的稳定性、可扩展性以及与其他技术的兼容性。
|
||||
</div>
|
||||
<div>
|
||||
团队成员们查阅了海量的国内外资料，从前沿学术论文到行业实践案例，不放过任何一个可能的灵感来源。进行了无数次的实验和模拟，每一次实验都可能面临失败，但他们从未放弃，不断优化方案。
|
||||
</div>
|
||||
<div>
|
||||
比如在处理不同类型文艺作品数据的兼容性时，团队创新性地采用了多维度数据分类算法。这种算法通过对数据的时间维度、风格维度、题材维度等多个角度进行分析，将看似杂乱无章的数据进行有效分类，确保了数据的精准分析和利用，为后续的智能创作支持奠定了坚实基础。
|
||||
该智能创作辅助系统整合了人工智能、大数据等前沿技术，为创作者提供了全方位、智能化的创作支持。通过对海量文艺作品数据的深度挖掘与分析，系统能够精准洞察当下文艺创作的趋势与热点。
|
||||
</div>
|
||||
<div>
|
||||
在提高创作效率方面，系统的人工智能技术展现出强大实力。传统创作方式可能需要花费数月时间构思框架，而使用该系统，仅需几天时间就能生成初步框架，创作者只需在此基础上进行细节完善，大大缩短了创作周期。
|
||||
</div>
|
||||
<div>
|
||||
公司技术研发团队负责人在发布会上难掩激动之情："这次技术突破是我们团队长期以来辛勤付出的结晶，也是FiEE对文艺创作技术革新的一次大胆尝试。我们深知，在科技飞速发展的今天，只有不断创新，才能为文艺创作者提供更强大的创作工具，推动文艺创作朝着高质量、高效率的方向发展。"
|
||||
</div>
|
||||
<div>
|
||||
业内专家评价道："FiEE的这一技术突破，无疑为文艺创作领域注入了新的活力。它不仅提升了创作效率，更为创作者带来了全新的创作思路，为整个行业的数字化转型提供了宝贵的经验和借鉴。"
|
||||
</div>
|
||||
<div>
|
||||
此次技术突破，使FiEE在文艺科技领域的竞争力大幅提升，成为行业内的技术引领者。未来，FiEE将继续加大技术研发投入，广纳人才，不断探索创新，致力于为文艺产业的数字化转型提供更多、更优质的技术支持，推动文艺创作迈向新的高峰。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-sec"
|
||||
v-if="state.pageTitle.includes('全球化战略升级')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div
|
||||
class="w-full title mt-[298px] px-[180px] text-center div-indent"
|
||||
>
|
||||
全球化战略升级，FiEE与30+国际平台达成战略合作，构建文艺传播新矩阵
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[40px] div-indent"
|
||||
>
|
||||
2025年02月10日 10时30分
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden div-indent">
|
||||
<img
|
||||
class="w-[1625px] h-[1003px]"
|
||||
src="@/assets/image/companyprofil/carouselShow-2.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[188px] text-[#455363] text-[40px] div-indent mt-[118px] mb-[275px]"
|
||||
>
|
||||
<div>
|
||||
在全球文化交融以前所未有的迅猛之势加速推进的时代大背景下，文艺领域已然成为文化交流与创新的前沿阵地。作为文艺行业的领航者，FiEE
|
||||
以敏锐的战略眼光和果敢的行动力，积极投身于这场全球文化交流的浪潮之中。
|
||||
</div>
|
||||
<div>
|
||||
近日，FiEE 振奋人心地宣布与 TikTok、Instagram等 30
|
||||
余家国际头部自媒体平台达成深度战略合作，同时正式启动具有深远意义的
|
||||
“文艺无界计划”，矢志破除地域之间的文化藩篱，全力以赴助力文艺创作者登上广阔无垠的世界舞台。此次
|
||||
FiEE 与全球 30
|
||||
余家顶尖平台的深度携手，堪称一场全方位、深层次的资源整合与协同创新的盛会。
|
||||
</div>
|
||||
<div>
|
||||
在社交媒体领域，与 TikTok 的合作堪称一大亮点。TikTok
|
||||
以其独特的短视频生态和强大的算法推荐系统，在全球范围内吸引了数十亿用户。借助这一平台，FiEE
|
||||
能够将文艺创作者的精彩作品以极具感染力的短视频形式，迅速精准地推送给全球各地对文艺感兴趣的用户，轻松打破地域限制，引发全球范围内的热烈互动与关注。
|
||||
</div>
|
||||
<div>
|
||||
Instagram
|
||||
则凭借其精美的视觉呈现和活跃的社交氛围，为各类文艺作品搭建了一个绝佳的展示橱窗。在这里，创作者们的作品能够得到高水准的展示，收获海量粉丝的关注与点赞，极大地提升作品的曝光量与影响力，让艺术之美在全球范围内广泛传播。在垂直社区方面，与
|
||||
ArtStation
|
||||
等专业平台的合作，为不同文艺领域的创作者们营造了一个专业、纯粹的交流与展示空间。
|
||||
</div>
|
||||
<div>
|
||||
为确保 “文艺无界计划” 能够高效、有序地实施，FiEE
|
||||
制定了一系列详尽且切实可行的策略与措施。在内容创作环节，FiEE
|
||||
将邀请国际知名的文艺专家、创作者开展线上线下相结合的专业培训与指导课程，帮助创作者深入了解国际市场的审美偏好、文化需求以及流行趋势，从而提升作品的国际传播力。
|
||||
</div>
|
||||
<div>
|
||||
在推广运营方面，FiEE
|
||||
将整合各方优势资源，为创作者量身定制全方位、立体化的推广方案。一方面，积极举办线上创作比赛等活动，吸引全球用户的目光，迅速提升创作者的知名度与影响力；另一方面，充分利用社交媒体平台的广告投放、话题营销、达人合作等手段，精准推送创作者的作品，进一步扩大作品的传播范围，让更多人能够欣赏到优秀的文艺创作。
|
||||
</div>
|
||||
<div>
|
||||
可以预见，对于广大文艺创作者而言，此次合作无疑是一次千载难逢的发展机遇。他们将有机会与国际顶尖的艺术家、创作者进行深度交流与合作，接触到全球最前沿的创作理念与技术，从而拓宽自己的创作视野，提升创作水平。同时，通过多元化的平台矩阵，他们的作品能够获得前所未有的曝光量与认可度，实现商业价值的最大化，为自己的艺术生涯开辟更为广阔的发展空间。
|
||||
</div>
|
||||
<div>
|
||||
展望未来，FiEE
|
||||
将坚定不移地继续深化与国际平台的合作，不断优化和完善
|
||||
“文艺无界计划”，持续为文艺创作者提供更加优质、全面、高效的服务，助力他们在国际舞台上绽放出更加耀眼夺目的光芒，为推动全球文化的交流、融合与繁荣贡献更多的智慧与力量。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-third"
|
||||
v-if="state.pageTitle.includes('助力文艺创作者')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div
|
||||
class="w-full title mt-[298px] px-[180px] text-center div-indent"
|
||||
>
|
||||
助力文艺创作者，FiEE 发布 “AI × 短视频” 全链路解决方案
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[40px] div-indent"
|
||||
>
|
||||
2025年02月14日 12时30分
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden div-indent">
|
||||
<img
|
||||
class="w-[1625px] h-[1003px]"
|
||||
src="@/assets/image/companyprofil/carouselShow-3.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[188px] text-[#455363] text-[40px] div-indent mt-[118px] mb-[275px]"
|
||||
>
|
||||
<div>
|
||||
对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。
|
||||
</div>
|
||||
<div>
|
||||
作品完成后的传播与推广，同样是一道难以跨越的鸿沟。在信息爆炸的时代，如何让自己的作品在海量内容中脱颖而出，精准触达目标受众，成为创作者们日思夜想的难题。
|
||||
</div>
|
||||
<div>
|
||||
传统的传播方式犹如撒网捕鱼，精准度严重不足，大量优质的文艺内容在传播过程中石沉大海，难以被真正感兴趣的受众发现。而且，用户互动性的欠缺也使得创作者无法深入挖掘用户需求，难以与受众建立起紧密的情感连接，作品难以真正
|
||||
“活” 起来，在传播的浪潮中显得孤立无援。
|
||||
</div>
|
||||
<div>
|
||||
在科技飞速发展的当下，人工智能与短视频行业正以前所未有的速度改变着文艺创作与传播的格局。
|
||||
</div>
|
||||
<div>
|
||||
作为文艺领域的创新先锋，FiEE
|
||||
紧跟时代步伐，积极探索技术与文艺的深度融合，今日正式发布 “AI ×
|
||||
短视频” 全链路解决方案，为文艺行业带来了一场革命性的变革。
|
||||
</div>
|
||||
<div>
|
||||
该解决方案集成了多项前沿 AI
|
||||
技术，具有多方面的显著优势。在内容创作环节，AI
|
||||
智能脚本生成工具能够根据创作者输入的主题、风格、受众等关键信息，快速生成创意十足的脚本。通过对海量优秀短视频脚本和文艺作品的学习，AI
|
||||
不仅能提供新颖的故事框架，还能精准匹配符合主题的情节与台词，大大缩短了创作周期。
|
||||
</div>
|
||||
<div>
|
||||
在内容传播与运营方面，AI
|
||||
大数据分析技术让短视频的推广更加精准有效。通过对用户的浏览历史、点赞评论行为、关注列表等多维度数据进行深度分析，系统能够精准洞察用户的兴趣偏好和需求，将文艺创作者的作品推送给真正感兴趣的受众群体。该解决方案的应用场景广泛，无论是专业的文艺创作者，还是怀揣文艺梦想的业余爱好者，都能从中受益。
|
||||
</div>
|
||||
<div>
|
||||
专业创作者可以借助 AI
|
||||
技术突破创作瓶颈，提升创作效率，创作出更具创新性和影响力的作品；业余爱好者则可以通过该方案降低创作门槛，轻松实现自己的创作想法，享受创作的乐趣。FiEE
|
||||
相关负责人表示：“我们一直关注着文艺创作者的需求和痛点，希望通过‘AI
|
||||
×
|
||||
短视频’全链路解决方案，为他们提供全方位的支持和帮助。这不仅是一次技术的创新应用，更是我们助力文艺行业发展的一次重要实践。我们相信，在
|
||||
AI
|
||||
技术的加持下，文艺创作者们能够创作出更多优秀的作品，让文艺之光照亮更广阔的天地。”
|
||||
</div>
|
||||
<div>
|
||||
展望未来，FiEE 将持续投入研发力量，不断优化和完善 “AI × 短视频”
|
||||
全链路解决方案，探索更多 AI
|
||||
技术在文艺领域的应用场景，加强与行业伙伴的合作，共同推动文艺创作与传播的创新发展，为文艺创作者打造更加优质、高效的创作环境，助力文艺行业迈向新的高峰。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-four"
|
||||
v-if="state.pageTitle.includes('培育文艺领域明日之星')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div
|
||||
class="w-full title mt-[298px] px-[180px] text-center div-indent"
|
||||
>
|
||||
FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[40px] div-indent"
|
||||
>
|
||||
2025年02月19日 12时00分
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden div-indent">
|
||||
<img
|
||||
class="w-[1625px] h-[1003px]"
|
||||
src="@/assets/image/companyprofil/carouselShow-4.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[188px] text-[#455363] text-[40px] div-indent mt-[118px] mb-[275px]"
|
||||
>
|
||||
<div>
|
||||
在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。
|
||||
</div>
|
||||
<div>
|
||||
今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL
|
||||
孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。随着社交媒体的兴起和内容传播方式的变革，KOL
|
||||
在文艺领域的传播与推广中扮演着关键角色。他们不仅是优质内容的创作者，更是连接文艺作品与广大受众的桥梁。
|
||||
</div>
|
||||
<div>
|
||||
然而，培养一位成熟且具有广泛影响力的艺术 KOL
|
||||
并非一蹴而就，需要系统的规划、专业的指导以及充足的实践机会。FiEE敏锐地洞察到这一市场需求，投入大量资源，精心策划了此次为期
|
||||
18
|
||||
个月的孵化计划。此次孵化计划目标明确，旨在挖掘并培养一批在文艺领域具有潜力的创作者，帮助他们成长为在国内外具有较高知名度和影响力的艺术
|
||||
KOL。
|
||||
</div>
|
||||
<div>
|
||||
通过这一计划，不仅能够为这些创作者提供广阔的发展空间，还能为文艺市场注入新鲜血液，推动文艺作品的多元化传播。在实施内容上，计划涵盖多个维度，全方位助力创作者成长。在专业培训环节，公司邀请了来自不同艺术领域的知名专家和学者，为创作者们提供系统且深入的课程培训。
|
||||
</div>
|
||||
<div>
|
||||
这些课程内容丰富，既包括艺术创作技巧的提升，如绘画中的色彩运用、音乐创作中的旋律编排等，也涵盖新媒体运营知识，如社交媒体营销策略、粉丝互动技巧等，以及商业管理方面的课程，帮助创作者了解文艺市场的运作规律，实现作品的商业价值转化。同时，为确保每位创作者都能得到个性化的指导，公司还为他们配备了一对一的导师，导师将根据创作者的特点和需求，提供针对性的建议和帮助。
|
||||
</div>
|
||||
<div>
|
||||
资源对接也是孵化计划的重要组成部分。FiEE凭借多年在行业内积累的深厚资源和广泛的合作伙伴关系，为创作者搭建了与品牌、媒体、平台等对接的桥梁。创作者们有机会与知名品牌合作，为其创作具有艺术价值的宣传内容；与媒体合作，参与文艺专题报道和节目制作；与各大文艺平台合作，发布自己的作品，扩大作品的传播范围。
|
||||
</div>
|
||||
<div>
|
||||
FiEE艺术 KOL
|
||||
孵化项目负责人在启动仪式上表示：“我们坚信，每一位参与孵化计划的创作者都具有无限的潜力。这
|
||||
18
|
||||
个月的时间，将是他们成长的关键时期。FiEE将全力为他们提供支持和帮助，让他们在艺术创作的道路上越走越远，成为文艺领域的中流砥柱。”
|
||||
</div>
|
||||
<div>
|
||||
展望未来，此次 18 个月艺术 KOL
|
||||
孵化计划的实施，有望为文艺领域培养出一批具有独特风格和广泛影响力的
|
||||
KOL。
|
||||
</div>
|
||||
<div>
|
||||
他们将通过自己的作品和影响力，吸引更多人关注文艺，推动文艺作品的传播与创新，为文艺产业的繁荣发展贡献重要力量。FiEE也将持续关注创作者的成长，不断优化孵化计划，为文艺领域的人才培养探索更多有效的模式。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-five"
|
||||
v-if="state.pageTitle.includes('多元人才汇聚')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div
|
||||
class="w-full title mt-[298px] px-[180px] text-center div-indent"
|
||||
>
|
||||
多元人才汇聚，FiEE 构筑文艺创新发展基石
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[40px] div-indent"
|
||||
>
|
||||
2025年02月20日 12时00分
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden div-indent">
|
||||
<img
|
||||
class="w-[1625px] h-[1003px]"
|
||||
src="@/assets/image/companyprofil/carouselShow-5.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[188px] text-[#455363] text-[40px] div-indent mt-[118px] mb-[275px]"
|
||||
>
|
||||
<div>
|
||||
在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。
|
||||
</div>
|
||||
<div>
|
||||
FiEE
|
||||
深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问，成功打造出一支专业素养过硬、知识结构多元的卓越团队，为公司在文艺领域的创新征程筑牢了坚不可摧的发展根基。
|
||||
</div>
|
||||
<div>
|
||||
运营专家团队堪称 FiEE
|
||||
在文艺领域稳健前行的领航灯塔。他们在文艺行业这片广阔天地中深耕多年，凭借丰富的实战经验和对市场的深度理解，练就了敏锐捕捉市场动态的能力，对受众喜好的把握更是精准入微。
|
||||
</div>
|
||||
<div>
|
||||
他们借助大数据分析和实地市场调研，深入研究不同年龄段、不同地域受众的文化背景和兴趣偏好，精准定位目标受众，为文艺创作者提供极具针对性的创作方向。他们会深入剖析当下的社会热点和观众的精神需求，巧妙融入时代元素，让作品既有深度又具吸引力。通过独特的创意策划，从项目起步阶段就成功吸引观众的目光，为后续的成功奠定坚实基础。
|
||||
</div>
|
||||
<div>
|
||||
随着科技与文艺的融合趋势愈发显著，技术精英成为 FiEE
|
||||
创新发展的强劲引擎。
|
||||
</div>
|
||||
<div>
|
||||
公司积极招徕掌握人工智能、大数据、虚拟现实等前沿技术的专业人才，为文艺创作注入科技活力。在内容创作过程中，这些技术精英充分发挥人工智能辅助创作工具的优势，为文艺创作者提供源源不断的灵感启发。利用虚拟现实（VR）和增强现实（AR）技术，让作品与观众进行深度互动，极大地拓展了文艺作品的表现形式和传播范围。
|
||||
</div>
|
||||
<div>
|
||||
在全球化的时代浪潮下，国际顾问团队为 FiEE
|
||||
带来了广阔的全球视野和多元的文化视角。他们来自世界各地，对不同国家和地区的文艺市场规则、审美偏好以及文化差异有着深入的了解。在FiEE将本土优秀文艺作品推向世界的过程中，国际顾问团队发挥着关键作用。这不仅为本土文艺创作者带来了新的创作思路和启发，也提升了FiEE在国际文艺领域的影响力。
|
||||
</div>
|
||||
<div>
|
||||
正是因为有了运营专家、技术精英和国际顾问等多元人才的汇聚，FiEE得以通过跨界合作与资源整合，突破传统文艺的边界，探索文艺新表达。FiEE与科技企业、时尚品牌、教育机构等展开广泛合作，将文艺与科技、时尚、教育等领域深度融合，创造出一系列新颖的文艺产品和服务。依托前沿技术与精准营销，FiEE
|
||||
助力众多文艺作品实现了商业价值与社会影响力的双重提升，为文艺的繁荣发展注入了持久动力。
|
||||
</div>
|
||||
<div>
|
||||
展望未来，FiEE
|
||||
将继续秉持开放、包容的人才理念，不断完善人才战略，吸引更多优秀人才加入。我们坚信，在多元人才的共同努力下，FiEE
|
||||
将在文艺创新发展的道路上不断前行，为推动全球文艺事业的繁荣做出更大的贡献。
|
||||
</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>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<script setup>
|
||||
import {
|
||||
onUnmounted,
|
||||
ref,
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
onBeforeMount,
|
||||
} from "vue";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
import { useRoute } from "vue-router";
|
||||
const state = reactive({
|
||||
pageTitle: "",
|
||||
});
|
||||
|
||||
const { currentTab } = useHome();
|
||||
const route = useRoute();
|
||||
onBeforeMount(() => {
|
||||
state.pageTitle = route.query.title;
|
||||
});
|
||||
onMounted(() => {});
|
||||
onUnmounted(() => {});
|
||||
</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;
|
||||
}
|
||||
|
||||
.div-indent {
|
||||
text-indent: 2em; // Adjust the value as needed for the desired indent
|
||||
line-height: 75px;
|
||||
}
|
||||
.title {
|
||||
line-height: 110px;
|
||||
color: #10253e;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user