857 lines
26 KiB
Vue
857 lines
26 KiB
Vue
<template>
|
||
<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/768/bg-6.png"
|
||
class="w-[1652px] h-[1865px]"
|
||
/>
|
||
</div>
|
||
|
||
<div class="pt-[718px]">
|
||
<div
|
||
class="w-full title ml-[188px]"
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[0].value = el;
|
||
}
|
||
"
|
||
>
|
||
<div>AI × 短视频</div>
|
||
<div>领航文创新视界</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[1].value = el;
|
||
}
|
||
"
|
||
class="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/768/bg-2.png"
|
||
class="w-[960px] h-[955px]"
|
||
/>
|
||
</div>
|
||
<div class="absolute bottom-[-660px] left-[0px]">
|
||
<img
|
||
src="@/assets/image/businessintroduction/768/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-semibold">行业现状</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-semibold 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-semibold">
|
||
<img
|
||
class="w-[40px] h-[40px] mr-[25px]"
|
||
src="@/assets/image/businessintroduction/768/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-semibold">
|
||
<img
|
||
class="w-[40px] h-[40px] mr-[25px]"
|
||
src="@/assets/image/businessintroduction/768/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-semibold">
|
||
<img
|
||
class="w-[40px] h-[40px] mr-[25px]"
|
||
src="@/assets/image/businessintroduction/768/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-semibold">
|
||
<img
|
||
class="w-[40px] h-[40px] mr-[25px]"
|
||
src="@/assets/image/businessintroduction/768/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-semibold 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-semibold">业务模式</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/768/imageshow-2.png"
|
||
/>
|
||
</div>
|
||
<div class="w-full px-[188px]">
|
||
<img
|
||
class="w-[161px] h-[120px]"
|
||
src="@/assets/image/businessintroduction/768/icon-l.png"
|
||
/>
|
||
|
||
<div
|
||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||
>
|
||
精准分发 开启粉丝增长引擎
|
||
</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/768/icon-k.png"
|
||
/>
|
||
|
||
<div
|
||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||
>
|
||
多元变现 激活商业价值链条
|
||
</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/768/icon-h.png"
|
||
/>
|
||
|
||
<div
|
||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||
>
|
||
互动共享 构建艺术生态闭环
|
||
</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-semibold 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/768/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-semibold">
|
||
全球合作拓展，绘制多元融合版图
|
||
</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/768/bg-5.png"
|
||
class="h-[361px]"
|
||
/>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<div class="flex flex-wrap justify-center">
|
||
<div class="w-full px-[188px] mt-[10px]">
|
||
<div class="text-[#8B59F7] text-[55px] font-semibold">
|
||
18个月孵化0基础艺术KOL
|
||
</div>
|
||
<div class="text-[#8B59F7] text-[55px] font-semibold">
|
||
释放文艺商业潜能
|
||
</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/768/icon-s.png"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="w-full font-semibold 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/768/icon-c.png"
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
class="w-full font-semibold 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-semibold">
|
||
曝光量突破，塑造全球品牌影响力
|
||
</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>
|
||
|
||
<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/768/imageshow-3.png";
|
||
import imageshow4 from "@/assets/image/businessintroduction/768/imageshow-4.png";
|
||
import imageshow5 from "@/assets/image/businessintroduction/768/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/768/bg-6.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.section-sec {
|
||
z-index: 2;
|
||
background: url("@/assets/image/businessintroduction/768/bg-12.png");
|
||
background-size: cover;
|
||
background-position: top-center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.section-five {
|
||
background: url("@/assets/image/businessintroduction/768/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>
|