Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/officialWebsite
This commit is contained in:
scout
commit
36b1aa0bd9
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 352 KiB |
BIN
src/assets/image/home/375/zh-TW/carousel-1.png
Normal file
BIN
src/assets/image/home/375/zh-TW/carousel-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 387 KiB After Width: | Height: | Size: 411 KiB |
|
Before Width: | Height: | Size: 221 KiB After Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
|
Before Width: | Height: | Size: 239 KiB After Width: | Height: | Size: 239 KiB |
|
Before Width: | Height: | Size: 233 KiB After Width: | Height: | Size: 233 KiB |
@ -4,32 +4,42 @@
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
|
||||
{{ t('home.nav.home') }}
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'home' }"
|
||||
@click="handleTabClick('home')"
|
||||
>
|
||||
{{ t("home.nav.home") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
|
||||
{{ t('home.nav.company') }}
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'companyprofil' }"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
{{ t("home.nav.company") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
|
||||
{{ t('home.nav.business') }}
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
{{ t("home.nav.business") }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHome } from '@/store/home/index.js';
|
||||
const router = useRouter();
|
||||
const { currentTab } = useHome();
|
||||
const { t } = useI18n();
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push('/'+tab);
|
||||
}
|
||||
router.push("/" + tab);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -21,7 +21,7 @@ function getBrowserLanguage() {
|
||||
}
|
||||
return 'en' // 默认中文，而不是英语
|
||||
}
|
||||
|
||||
localStorage.setItem("language", "en");
|
||||
// 获取存储的语言或浏览器语言
|
||||
const savedLanguage = 'ja'
|
||||
|
||||
|
||||
@ -47,6 +47,8 @@ export default {
|
||||
section4: {
|
||||
label: '业务介绍',
|
||||
title: '多元业务协同，推动文艺影响力腾飞',
|
||||
title1: '多元业务协同',
|
||||
title2: '推动文艺影响力腾飞',
|
||||
desc: 'FiEE 专注为文艺创作者提供全球化推广与专业运营服务。通过精准定位、多平台联动，打破地域限制，让作品登上国际舞台。依托强大资源网络对接商业机遇，运用 AI与大数据精准营销，高效触达受众，助力创作者实现艺术与商业价值双突破。',
|
||||
cards1: {
|
||||
title: '全球花卉产业，适合国际艺术交流中心',
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
// router/index.js
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { setupRouterGuards } from './router-guards';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
@ -42,4 +44,5 @@ router.beforeEach((to, from, next) => {
|
||||
}
|
||||
next()
|
||||
});
|
||||
setupRouterGuards(router);
|
||||
export default router;
|
||||
|
||||
6
src/router/router-guards.js
Normal file
6
src/router/router-guards.js
Normal file
@ -0,0 +1,6 @@
|
||||
// router/router-guards.js
|
||||
export function setupRouterGuards (router) {
|
||||
router.afterEach(() => {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
@ -14,15 +16,15 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'company' }"
|
||||
@click="handleTabClick('company')"
|
||||
:class="{ active: currentTab === 'companyprofil' }"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
公司概况
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
业务介绍
|
||||
</div>
|
||||
@ -74,7 +76,7 @@
|
||||
moveRefs[3].value = el;
|
||||
}
|
||||
"
|
||||
class="absolute bottom-[-424px] right-[0px]"
|
||||
class="absolute bottom-[-376px] right-[0px] z-4"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/businessintroduction/375/bg-2.png"
|
||||
@ -576,6 +578,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDivider } from "naive-ui";
|
||||
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
@ -670,8 +673,11 @@ onUnmounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
|
||||
const goToSection = (i) => {
|
||||
@ -720,9 +726,12 @@ const goToSection = (i) => {
|
||||
display: flex;
|
||||
gap: 128px;
|
||||
margin-right: 32px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 61px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
@ -824,4 +833,19 @@ const goToSection = (i) => {
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 64px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 60px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
@ -14,15 +16,15 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'company' }"
|
||||
@click="handleTabClick('company')"
|
||||
:class="{ active: currentTab === 'companyprofil' }"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
公司概况
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
业务介绍
|
||||
</div>
|
||||
@ -68,7 +70,7 @@
|
||||
moveRefs[3].value = el;
|
||||
}
|
||||
"
|
||||
class="absolute bottom-[-290px] right-[0px]"
|
||||
class="absolute bottom-[-290px] right-[0px] z-4"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/businessintroduction/768/bg-2.png"
|
||||
@ -86,7 +88,7 @@
|
||||
<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 class="text-[#8B59F7] text-[40px] font-semibold">行业现状</div>
|
||||
</div>
|
||||
<div class="w-full title mt-[58px] px-[188px]">
|
||||
<div>文创遇阻</div>
|
||||
@ -107,7 +109,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full mt-[160px] px-[188px] font-medium text-[55px] text-[#8B59F7]"
|
||||
class="w-full mt-[160px] px-[188px] font-semibold text-[55px] text-[#8B59F7]"
|
||||
>
|
||||
<div>文艺市场困局</div>
|
||||
</div>
|
||||
@ -120,7 +122,7 @@
|
||||
"
|
||||
class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
|
||||
>
|
||||
<div class="font-medium">
|
||||
<div class="font-semibold">
|
||||
<img
|
||||
class="w-[40px] h-[40px] mr-[25px]"
|
||||
src="@/assets/image/businessintroduction/768/icon-y.png"
|
||||
@ -140,7 +142,7 @@
|
||||
"
|
||||
class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
|
||||
>
|
||||
<div class="font-medium">
|
||||
<div class="font-semibold">
|
||||
<img
|
||||
class="w-[40px] h-[40px] mr-[25px]"
|
||||
src="@/assets/image/businessintroduction/768/icon-y.png"
|
||||
@ -160,7 +162,7 @@
|
||||
"
|
||||
class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
|
||||
>
|
||||
<div class="font-medium">
|
||||
<div class="font-semibold">
|
||||
<img
|
||||
class="w-[40px] h-[40px] mr-[25px]"
|
||||
src="@/assets/image/businessintroduction/768/icon-y.png"
|
||||
@ -180,7 +182,7 @@
|
||||
"
|
||||
class="w-[50%] mt-[58px] flex flex-wrap text-[40px]"
|
||||
>
|
||||
<div class="font-medium">
|
||||
<div class="font-semibold">
|
||||
<img
|
||||
class="w-[40px] h-[40px] mr-[25px]"
|
||||
src="@/assets/image/businessintroduction/768/icon-y.png"
|
||||
@ -199,7 +201,7 @@
|
||||
moveRefs[9].value = el;
|
||||
}
|
||||
"
|
||||
class="w-full mt-[160px] px-[188px] font-medium text-[55px] text-[#8B59F7]"
|
||||
class="w-full mt-[160px] px-[188px] font-semibold text-[55px] text-[#8B59F7]"
|
||||
>
|
||||
<div>短视频自媒体：澎湃新势，蕴蓄无垠商机</div>
|
||||
</div>
|
||||
@ -222,7 +224,7 @@
|
||||
<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 class="text-[#8B59F7] text-[40px] font-semibold">业务模式</div>
|
||||
</div>
|
||||
<div class="w-full title mt-[58px] px-[188px]">
|
||||
<div>科技赋能</div>
|
||||
@ -247,7 +249,7 @@
|
||||
/>
|
||||
|
||||
<div
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-medium"
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||||
>
|
||||
精准分发 开启粉丝增长引擎
|
||||
</div>
|
||||
@ -270,7 +272,7 @@
|
||||
/>
|
||||
|
||||
<div
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-medium"
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||||
>
|
||||
多元变现 激活商业价值链条
|
||||
</div>
|
||||
@ -292,7 +294,7 @@
|
||||
/>
|
||||
|
||||
<div
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-medium"
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||||
>
|
||||
互动共享 构建艺术生态闭环
|
||||
</div>
|
||||
@ -332,7 +334,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full mt-[160px] px-[188px] font-medium text-[55px] text-[#8B59F7]"
|
||||
class="w-full mt-[160px] px-[188px] font-semibold text-[55px] text-[#8B59F7]"
|
||||
>
|
||||
<div>构建十亿流量社群，搭建全球文艺交流高地</div>
|
||||
</div>
|
||||
@ -366,7 +368,7 @@
|
||||
|
||||
<section class="section-five h-[3195px] pt-[215px] relative">
|
||||
<div class="w-full px-[188px]">
|
||||
<div class="text-[#fff] text-[55px] font-medium">
|
||||
<div class="text-[#fff] text-[55px] font-semibold">
|
||||
全球合作拓展，绘制多元融合版图
|
||||
</div>
|
||||
</div>
|
||||
@ -412,7 +414,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-[262px] right-[0px]">
|
||||
<div class="absolute bottom-[262px] right-[0px] z-4">
|
||||
<img
|
||||
src="@/assets/image/businessintroduction/768/bg-5.png"
|
||||
class="h-[361px]"
|
||||
@ -422,10 +424,10 @@
|
||||
<section>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full px-[188px] mt-[10px]">
|
||||
<div class="text-[#8B59F7] text-[55px] font-medium">
|
||||
<div class="text-[#8B59F7] text-[55px] font-semibold">
|
||||
18个月孵化0基础艺术KOL
|
||||
</div>
|
||||
<div class="text-[#8B59F7] text-[55px] font-medium">
|
||||
<div class="text-[#8B59F7] text-[55px] font-semibold">
|
||||
释放文艺商业潜能
|
||||
</div>
|
||||
</div>
|
||||
@ -464,7 +466,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full font-medium mt-[50px] text-[#10253E] text-[45px]"
|
||||
class="w-full font-semibold mt-[50px] text-[#10253E] text-[45px]"
|
||||
>
|
||||
粉丝增长
|
||||
</div>
|
||||
@ -490,7 +492,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full font-medium mt-[50px] text-[#10253E] text-[45px]"
|
||||
class="w-full font-semibold mt-[50px] text-[#10253E] text-[45px]"
|
||||
>
|
||||
KOL孵化
|
||||
</div>
|
||||
@ -513,7 +515,7 @@
|
||||
"
|
||||
class="w-full px-[188px] mt-[218px]"
|
||||
>
|
||||
<div class="text-[#8B59F7] text-[55px] font-medium">
|
||||
<div class="text-[#8B59F7] text-[55px] font-semibold">
|
||||
曝光量突破，塑造全球品牌影响力
|
||||
</div>
|
||||
</div>
|
||||
@ -531,7 +533,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
|
||||
class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px] z-4"
|
||||
>
|
||||
<div ref="carouselTrack" class="carousel-track">
|
||||
<div
|
||||
@ -567,6 +569,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDivider } from "naive-ui";
|
||||
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
@ -655,7 +658,7 @@ onMounted(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(moveRefs.value);
|
||||
|
||||
// 初始化轮播动画
|
||||
nextTick(() => {
|
||||
if (carouselTrack.value) {
|
||||
@ -694,8 +697,11 @@ onUnmounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
|
||||
const goToSection = (i) => {
|
||||
@ -853,4 +859,21 @@ const goToSection = (i) => {
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
color: #eff1f6;
|
||||
left: 142px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
color: #eff1f6;
|
||||
right: 142px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,8 +18,7 @@ import { NDivider } from "naive-ui";
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const { currentTab } = useHome();
|
||||
const router = useRouter();
|
||||
const { transitionState } =
|
||||
useTransitionComposable();
|
||||
const { transitionState } = useTransitionComposable();
|
||||
const main = ref();
|
||||
let ctx;
|
||||
const { t } = useI18n();
|
||||
@ -28,18 +27,12 @@ const handleTabClick = (tab) => {
|
||||
router.push("/" + tab);
|
||||
};
|
||||
watch(
|
||||
[
|
||||
() =>
|
||||
transitionState.transitionComplete,
|
||||
main,
|
||||
],
|
||||
[() => transitionState.transitionComplete, main],
|
||||
(newValue) => {
|
||||
if (newValue && main.value) {
|
||||
ctx = gsap.context((self) => {
|
||||
// Text animations from left
|
||||
gsap.utils
|
||||
.toArray(".text-animate")
|
||||
.forEach((text) => {
|
||||
gsap.utils.toArray(".text-animate").forEach((text) => {
|
||||
gsap.from(text, {
|
||||
x: -100,
|
||||
opacity: 0,
|
||||
@ -48,16 +41,13 @@ watch(
|
||||
trigger: text,
|
||||
start: "top 80%",
|
||||
end: "top 50%",
|
||||
toggleActions:
|
||||
"play none none reverse",
|
||||
toggleActions: "play none none reverse",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Image animations from right
|
||||
gsap.utils
|
||||
.toArray(".image-animate")
|
||||
.forEach((image) => {
|
||||
gsap.utils.toArray(".image-animate").forEach((image) => {
|
||||
gsap.from(image, {
|
||||
x: 100,
|
||||
opacity: 0,
|
||||
@ -66,27 +56,25 @@ watch(
|
||||
trigger: image,
|
||||
start: "top 80%",
|
||||
end: "top 50%",
|
||||
toggleActions:
|
||||
"play none none reverse",
|
||||
toggleActions: "play none none reverse",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// 轮播卡片上升动画
|
||||
gsap.from('.carousel-item', {
|
||||
gsap.from(".carousel-item", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1.5,
|
||||
stagger: 0.4,
|
||||
scrollTrigger: {
|
||||
trigger: '.carousel-container',
|
||||
start: 'top 70%',
|
||||
end: 'top 30%',
|
||||
trigger: ".carousel-container",
|
||||
start: "top 70%",
|
||||
end: "top 30%",
|
||||
scrub: 2,
|
||||
toggleActions: 'restart pause reverse pause',
|
||||
}
|
||||
toggleActions: "restart pause reverse pause",
|
||||
},
|
||||
});
|
||||
|
||||
}, main.value);
|
||||
}
|
||||
},
|
||||
@ -144,7 +132,8 @@ const handleDragMove = (e) => {
|
||||
const walk = startX.value - x;
|
||||
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transform = `translateX(-${scrollLeft.value + walk
|
||||
carouselTrack.value.style.transform = `translateX(-${
|
||||
scrollLeft.value + walk
|
||||
}px)`;
|
||||
}
|
||||
};
|
||||
@ -193,28 +182,28 @@ import carouselShow5 from "@/assets/image/companyprofil/768/carouselShow-5.png";
|
||||
const state = reactive({
|
||||
marqueeArr: [
|
||||
{
|
||||
title: t('companyprofil.news.carousel.item1.title'),
|
||||
subTitle: t('companyprofil.news.carousel.item1.desc'),
|
||||
title: t("companyprofil.news.carousel.item1.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item1.desc"),
|
||||
imgUrl: carouselShow1,
|
||||
},
|
||||
{
|
||||
title: t('companyprofil.news.carousel.item2.title'),
|
||||
subTitle: t('companyprofil.news.carousel.item2.desc'),
|
||||
title: t("companyprofil.news.carousel.item2.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item2.desc"),
|
||||
imgUrl: carouselShow2,
|
||||
},
|
||||
{
|
||||
title: t('companyprofil.news.carousel.item3.title'),
|
||||
subTitle: t('companyprofil.news.carousel.item3.desc'),
|
||||
title: t("companyprofil.news.carousel.item3.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item3.desc"),
|
||||
imgUrl: carouselShow3,
|
||||
},
|
||||
{
|
||||
title: t('companyprofil.news.carousel.item4.title'),
|
||||
subTitle: t('companyprofil.news.carousel.item4.desc'),
|
||||
title: t("companyprofil.news.carousel.item4.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item4.desc"),
|
||||
imgUrl: carouselShow4,
|
||||
},
|
||||
{
|
||||
title: t('companyprofil.news.carousel.item5.title'),
|
||||
subTitle: t('companyprofil.news.carousel.item5.desc'),
|
||||
title: t("companyprofil.news.carousel.item5.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item5.desc"),
|
||||
imgUrl: carouselShow5,
|
||||
},
|
||||
],
|
||||
@ -256,7 +245,7 @@ const handleCarouselClick = (item, event) => {
|
||||
router.push({
|
||||
path: "/companyprofildetail",
|
||||
query: {
|
||||
title: item.title,
|
||||
titleNo: item.titleNo,
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -275,20 +264,22 @@ onUnmounted(() => {
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{
|
||||
active: currentTab === 'home',
|
||||
}" @click="handleTabClick('home')">
|
||||
}"
|
||||
@click="handleTabClick('home')"
|
||||
>
|
||||
{{ t("home.nav.home") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
active:
|
||||
currentTab ===
|
||||
'companyprofil',
|
||||
}" @click="
|
||||
handleTabClick(
|
||||
'companyprofil'
|
||||
)
|
||||
">
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{
|
||||
active: currentTab === 'companyprofil',
|
||||
}"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
{{ t("home.nav.company") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
@ -305,14 +296,20 @@ onUnmounted(() => {
|
||||
<div class="head relative">
|
||||
<img src="@/assets/image/gk.png" alt="head" />
|
||||
|
||||
<div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
|
||||
{{ t('companyprofil.slogan.title1') }}
|
||||
<div
|
||||
class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate"
|
||||
>
|
||||
{{ t("companyprofil.slogan.title1") }}
|
||||
</div>
|
||||
<div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate">
|
||||
{{ t('companyprofil.slogan.title2') }}
|
||||
<div
|
||||
class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate"
|
||||
>
|
||||
{{ t("companyprofil.slogan.title2") }}
|
||||
</div>
|
||||
<div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
|
||||
{{ t('companyprofil.slogan.desc') }}
|
||||
<div
|
||||
class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate"
|
||||
>
|
||||
{{ t("companyprofil.slogan.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<n-divider class="divider1" vertical />
|
||||
@ -321,125 +318,192 @@ onUnmounted(() => {
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div class="bg-[#F8F9FF]">
|
||||
<div class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col">
|
||||
<div class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate">
|
||||
{{ t('companyprofil.intro.label') }}
|
||||
<div
|
||||
class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col"
|
||||
>
|
||||
<div
|
||||
class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate"
|
||||
>
|
||||
{{ t("companyprofil.intro.label") }}
|
||||
</div>
|
||||
<div class="pl-[505px] pr-[480px] flex">
|
||||
<div class="w-[411px] mr-[38px] text-animate">
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t('companyprofil.intro.title1') }}
|
||||
{{ t("companyprofil.intro.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t('companyprofil.intro.title2') }}
|
||||
{{ t("companyprofil.intro.title2") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[56px]">
|
||||
{{ t('companyprofil.intro.desc') }}
|
||||
{{ t("companyprofil.intro.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-[#10253E] text-[20px] image-animate">
|
||||
<img class="w-[465px] h-[415px]" src="@/assets/image/ship.png" alt="company" />
|
||||
<img
|
||||
class="w-[465px] h-[415px]"
|
||||
src="@/assets/image/ship.png"
|
||||
alt="company"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]">
|
||||
<div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate">
|
||||
{{ t('companyprofil.team.label') }}
|
||||
<div
|
||||
class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]"
|
||||
>
|
||||
<div
|
||||
class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate"
|
||||
>
|
||||
{{ t("companyprofil.team.label") }}
|
||||
</div>
|
||||
<div class="pl-[505px] pr-[490px] flex z-3">
|
||||
<div class="w-[412px] mr-[40px] text-animate">
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t('companyprofil.team.title1') }}
|
||||
{{ t("companyprofil.team.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t('companyprofil.team.title2') }}
|
||||
{{ t("companyprofil.team.title2") }}
|
||||
</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 />{{ t('companyprofil.team.features.global.title') }}
|
||||
<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
|
||||
/>{{ t("companyprofil.team.features.global.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">
|
||||
{{ t('companyprofil.team.features.global.desc') }}
|
||||
{{ t("companyprofil.team.features.global.desc") }}
|
||||
</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 />{{ t('companyprofil.team.features.fans.title') }}
|
||||
<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
|
||||
/>{{ t("companyprofil.team.features.fans.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">
|
||||
{{ t('companyprofil.team.features.fans.desc') }}
|
||||
{{ t("companyprofil.team.features.fans.desc") }}
|
||||
</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 />{{ t('companyprofil.team.features.talent.title') }}
|
||||
<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
|
||||
/>{{ t("companyprofil.team.features.talent.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">
|
||||
{{ t('companyprofil.team.features.talent.desc') }}
|
||||
{{ t("companyprofil.team.features.talent.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-[#455363] text-[16px] flex-1 image-animate">
|
||||
<div>
|
||||
{{ t('companyprofil.team.desc') }}
|
||||
{{ t("companyprofil.team.desc") }}
|
||||
</div>
|
||||
<img class="w-[465px] h-[625px] mt-[80px]" src="@/assets/image/randg.png" alt="cl" />
|
||||
<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] pb-[158px] overflow-hidden">
|
||||
<div
|
||||
class="content3 relative bg-[#fff] pt-[185px] pb-[158px] overflow-hidden"
|
||||
>
|
||||
<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] image-animate " src="@/assets/image/xlv.png"
|
||||
alt="cl" />
|
||||
<img
|
||||
class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px] image-animate"
|
||||
src="@/assets/image/xlv.png"
|
||||
alt="cl"
|
||||
/>
|
||||
<img class="absolute" src="@/assets/image/xbg.png" alt="cl" />
|
||||
<div class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate">
|
||||
<div
|
||||
class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate"
|
||||
>
|
||||
<div class="text-[#8B59F7] text-[16px]">
|
||||
{{ t('companyprofil.achievement.label') }}
|
||||
{{ t("companyprofil.achievement.label") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t('companyprofil.achievement.title') }}
|
||||
{{ t("companyprofil.achievement.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
|
||||
{{ t('companyprofil.achievement.desc') }}
|
||||
{{ t("companyprofil.achievement.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pl-[505px] pr-[490px] flex z-4 mt-[100px]">
|
||||
<div class="w-[419px] mr-[30px] flex flex-col justify-center text-animate">
|
||||
<div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title1') }}</div>
|
||||
<div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.certification.title2') }}</div>
|
||||
<div
|
||||
class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
|
||||
>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.certification.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.certification.title2") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[30px]">
|
||||
{{ t('companyprofil.achievement.certification.desc') }}
|
||||
{{ t("companyprofil.achievement.certification.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex image-animate">
|
||||
<img class="w-[465px] h-[493px]" src="@/assets/image/btable.png" alt="cl" />
|
||||
<img
|
||||
class="w-[465px] h-[493px]"
|
||||
src="@/assets/image/btable.png"
|
||||
alt="cl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pl-[505px] pr-[490px] flex z-4 mt-[85px]">
|
||||
<div class="w-[419px] mr-[30px] flex flex-col justify-center text-animate">
|
||||
<div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title1') }}</div>
|
||||
<div class="text-[#10253E] text-[22px]">{{ t('companyprofil.achievement.platform.title2') }}</div>
|
||||
<div
|
||||
class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
|
||||
>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.platform.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.platform.title2") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[30px]">
|
||||
{{ t('companyprofil.achievement.platform.desc') }}
|
||||
{{ t("companyprofil.achievement.platform.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex image-animate">
|
||||
<img class="w-[465px] h-[369px]" src="@/assets/image/huang.png" alt="cl" />
|
||||
<img
|
||||
class="w-[465px] h-[369px]"
|
||||
src="@/assets/image/huang.png"
|
||||
alt="cl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -449,36 +513,57 @@ onUnmounted(() => {
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div class="relative pl-[505px] pr-[490px] flex z-3 mt-[130px] z-4 flex-col text-animate">
|
||||
<div
|
||||
class="relative pl-[505px] pr-[490px] flex z-3 mt-[130px] z-4 flex-col text-animate"
|
||||
>
|
||||
<div class="text-[#8B59F7] text-[16px]">
|
||||
{{ t('companyprofil.news.label') }}
|
||||
{{ t("companyprofil.news.label") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t('companyprofil.news.title') }}
|
||||
{{ t("companyprofil.news.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
|
||||
{{ t('companyprofil.news.desc') }}
|
||||
{{ t("companyprofil.news.desc") }}
|
||||
</div>
|
||||
<div class="w-full mt-[56px] flex flex-wrap justify-end">
|
||||
<div class="flex flex-wrap mr-[20px]">
|
||||
<div class="arrow-btn" @click="handlePrev">
|
||||
<img class="w-[38px] h-[38px]" src="@/assets/image/companyprofil/768/icon-left.png" />
|
||||
<img
|
||||
class="w-[38px] h-[38px]"
|
||||
src="@/assets/image/companyprofil/768/icon-left.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="arrow-btn ml-[25px]" @click="handleNext">
|
||||
<img class="w-[38px] h-[38px]" src="@/assets/image/companyprofil/768/icon-right.png" />
|
||||
<img
|
||||
class="w-[38px] h-[38px]"
|
||||
src="@/assets/image/companyprofil/768/icon-right.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-[73px] pb-[103px] carousel-container px-[495px] z-14">
|
||||
<div ref="carouselTrack" class="carousel-track " :style="{
|
||||
<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 cursor-pointer"
|
||||
@click="handleCarouselClick(item, $event)">
|
||||
}"
|
||||
@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 cursor-pointer"
|
||||
@click="handleCarouselClick(item, $event)"
|
||||
>
|
||||
<img class="carousel-image" :src="item.imgUrl" />
|
||||
<div class="carousel-content">
|
||||
<div class="carousel-title">
|
||||
@ -577,9 +662,7 @@ onUnmounted(() => {
|
||||
left: 720px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom,
|
||||
#e6eaee 50%,
|
||||
transparent 50%);
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
@ -590,9 +673,7 @@ onUnmounted(() => {
|
||||
left: 952px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom,
|
||||
#e6eaee 50%,
|
||||
transparent 50%);
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
@ -603,9 +684,7 @@ onUnmounted(() => {
|
||||
left: 1182px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom,
|
||||
#e6eaee 50%,
|
||||
transparent 50%);
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
@ -14,15 +16,15 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'company' }"
|
||||
@click="handleTabClick('company')"
|
||||
:class="{ active: currentTab === 'companyprofil' }"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
公司概况
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
业务介绍
|
||||
</div>
|
||||
@ -60,7 +62,7 @@
|
||||
src="@/assets/image/companyprofil/375/image-q.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-[1920px] absolute bottom-[-160px]">
|
||||
<div class="w-[1920px] absolute bottom-[-160px] z-4">
|
||||
<img
|
||||
src="@/assets/image/companyprofil/375/icon-lang.png"
|
||||
alt="logo"
|
||||
@ -204,7 +206,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icon-langmul">
|
||||
<div class="icon-langmul z-4">
|
||||
<img
|
||||
class="w-[1205px]"
|
||||
src="@/assets/image/companyprofil/375/icon-langmul.png"
|
||||
@ -415,6 +417,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDivider } from "naive-ui";
|
||||
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
@ -447,12 +450,14 @@ import carouselShow5 from "@/assets/image/companyprofil/375/carouselShow-5.png";
|
||||
const state = reactive({
|
||||
marqueeArr: [
|
||||
{
|
||||
titleNo: "1",
|
||||
title: "实现技术突破，引领文艺创作技术革新",
|
||||
subTitle:
|
||||
"在数字化浪潮以前所未有的态势席卷文艺领域的当下，文艺创作正经历着深刻变革。FiEE凭借着团队持之以恒的努力与创新精神，在文艺创作技术领域取得了具有里程碑意义的重大突破。 历经无数个日夜的艰苦攻坚，FiEE自主研发的新一代智能创作辅助系统正式上线，宛如一颗冉冉升起的璀璨新星，为文艺创作开辟了全新的发展路径，给整个行业带来了前所未有的变革与机遇。",
|
||||
imgUrl: carouselShow1,
|
||||
},
|
||||
{
|
||||
titleNo: "2",
|
||||
title:
|
||||
"全球化战略升级，FiEE与30+国际平台达成战略合作，构建文艺传播新矩阵",
|
||||
subTitle:
|
||||
@ -461,12 +466,14 @@ const state = reactive({
|
||||
imgUrl: carouselShow2,
|
||||
},
|
||||
{
|
||||
titleNo: "3",
|
||||
title: "助力文艺创作者，FiEE 发布'AI × 短视频'全链路解决方案",
|
||||
subTitle:
|
||||
"对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。 作品完成后的传播与推广，同样是一道难以跨越的鸿沟。",
|
||||
imgUrl: carouselShow3,
|
||||
},
|
||||
{
|
||||
titleNo: "4",
|
||||
title: "FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星",
|
||||
subTitle:
|
||||
"在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。 今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL 孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。",
|
||||
@ -474,6 +481,7 @@ const state = reactive({
|
||||
imgUrl: carouselShow4,
|
||||
},
|
||||
{
|
||||
titleNo: "5",
|
||||
title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
|
||||
subTitle:
|
||||
"在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
|
||||
@ -482,7 +490,6 @@ const state = reactive({
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const carouselTrack = ref(null);
|
||||
const currentIndex = ref(0);
|
||||
const isTransitioning = ref(false);
|
||||
@ -585,6 +592,7 @@ onUnmounted(() => {
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
|
||||
const goToSection = (i) => {
|
||||
@ -727,7 +735,7 @@ const handleCarouselClick = (item, event) => {
|
||||
router.push({
|
||||
path: "/companyprofildetail",
|
||||
query: {
|
||||
title: item.title,
|
||||
titleNo: item.titleNo,
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -763,9 +771,12 @@ const handleCarouselClick = (item, event) => {
|
||||
display: flex;
|
||||
gap: 128px;
|
||||
margin-right: 32px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 61px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
@ -876,4 +887,19 @@ const handleCarouselClick = (item, event) => {
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 64px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 60px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
@ -14,15 +16,15 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'company' }"
|
||||
@click="handleTabClick('company')"
|
||||
:class="{ active: currentTab === 'companyprofil' }"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
公司概况
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
业务介绍
|
||||
</div>
|
||||
@ -62,7 +64,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[1920px] absolute bottom-[-660px]">
|
||||
<div class="w-[1920px] absolute bottom-[-660px] z-4">
|
||||
<img
|
||||
src="@/assets/image/companyprofil/768/icon-lang.png"
|
||||
alt="logo"
|
||||
@ -161,7 +163,9 @@
|
||||
src="@/assets/image/companyprofil/768/icon-lun.png"
|
||||
/>
|
||||
|
||||
<div class="w-full mt-[50px] text-[#10253E] text-[45px]">
|
||||
<div
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||||
>
|
||||
纵横全球 多元领航
|
||||
</div>
|
||||
<div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
|
||||
@ -175,7 +179,9 @@
|
||||
src="@/assets/image/companyprofil/768/icon-love.png"
|
||||
/>
|
||||
|
||||
<div class="w-full mt-[50px] text-[#10253E] text-[45px]">
|
||||
<div
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||||
>
|
||||
深耕粉丝 构筑生态
|
||||
</div>
|
||||
<div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
|
||||
@ -188,7 +194,9 @@
|
||||
src="@/assets/image/companyprofil/768/icon-p.png"
|
||||
/>
|
||||
|
||||
<div class="w-full mt-[50px] text-[#10253E] text-[45px]">
|
||||
<div
|
||||
class="w-full mt-[50px] text-[#10253E] text-[45px] font-semibold"
|
||||
>
|
||||
广纳贤才 团队进阶
|
||||
</div>
|
||||
<div class="mt-[38px] text-[#455363] text-[40px] w-[1345px]">
|
||||
@ -196,7 +204,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icon-langmul">
|
||||
<div class="icon-langmul z-4">
|
||||
<img
|
||||
class="w-[846px] h-[216px]"
|
||||
src="@/assets/image/companyprofil/768/icon-langmul.png"
|
||||
@ -355,7 +363,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-[73px] mb-[253px] carousel-container px-[80px] py-[40px]"
|
||||
class="mt-[73px] mb-[253px] carousel-container px-[80px] py-[40px] z-4"
|
||||
>
|
||||
<div
|
||||
ref="carouselTrack"
|
||||
@ -407,6 +415,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDivider } from "naive-ui";
|
||||
import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
@ -439,12 +448,14 @@ import carouselShow5 from "@/assets/image/companyprofil/768/carouselShow-5.png";
|
||||
const state = reactive({
|
||||
marqueeArr: [
|
||||
{
|
||||
titleNo: "1",
|
||||
title: "实现技术突破，引领文艺创作技术革新",
|
||||
subTitle:
|
||||
"在数字化浪潮以前所未有的态势席卷文艺领域的当下，文艺创作正经历着深刻变革。FiEE凭借着团队持之以恒的努力与创新精神，在文艺创作技术领域取得了具有里程碑意义的重大突破。 历经无数个日夜的艰苦攻坚，FiEE自主研发的新一代智能创作辅助系统正式上线，宛如一颗冉冉升起的璀璨新星，为文艺创作开辟了全新的发展路径，给整个行业带来了前所未有的变革与机遇。",
|
||||
imgUrl: carouselShow1,
|
||||
},
|
||||
{
|
||||
titleNo: "2",
|
||||
title:
|
||||
"全球化战略升级，FiEE与30+国际平台达成战略合作，构建文艺传播新矩阵",
|
||||
subTitle:
|
||||
@ -453,12 +464,14 @@ const state = reactive({
|
||||
imgUrl: carouselShow2,
|
||||
},
|
||||
{
|
||||
titleNo: "3",
|
||||
title: "助力文艺创作者，FiEE 发布'AI × 短视频'全链路解决方案",
|
||||
subTitle:
|
||||
"对于文艺创作者而言，创作瓶颈与效率低下是横亘在前行道路上的两座大山。构思一个吸引人的短视频脚本，常常需要耗费大量时间和精力，创作者们不仅要绞尽脑汁思考独特的创意，还要兼顾受众喜好和市场趋势。 作品完成后的传播与推广，同样是一道难以跨越的鸿沟。",
|
||||
imgUrl: carouselShow3,
|
||||
},
|
||||
{
|
||||
titleNo: "4",
|
||||
title: "FiEE启动 18 个月艺术 KOL 孵化，培育文艺领域明日之星",
|
||||
subTitle:
|
||||
"在文艺产业蓬勃发展的当下，优质内容创作者的重要性愈发凸显。作为行业内的先锋企业，FiEE始终关注着文艺领域的人才培养与发展动态。 今日，FiEE正式宣布启动一项精心筹备长达 18 个月的艺术 KOL 孵化计划，旨在为文艺领域培育一批具有强大影响力的明日之星，推动整个行业的创新发展。",
|
||||
@ -466,6 +479,7 @@ const state = reactive({
|
||||
imgUrl: carouselShow4,
|
||||
},
|
||||
{
|
||||
titleNo: "5",
|
||||
title: "多元人才汇聚，FiEE 构筑文艺创新发展基石",
|
||||
subTitle:
|
||||
"在当下文艺行业蓬勃发展、百花齐放的黄金时代，创新俨然成为引领行业持续进步、突破传统格局的关键要素。而追根溯源，人才作为创新的核心驱动力，其重要性不言而喻。 FiEE 深明此理，以海纳百川的胸怀和高瞻远瞩的战略眼光，积极广纳贤才，精心汇聚运营专家、技术精英以及国际顾问。",
|
||||
@ -577,6 +591,7 @@ onUnmounted(() => {
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
|
||||
const goToSection = (i) => {
|
||||
@ -719,7 +734,7 @@ const handleCarouselClick = (item, event) => {
|
||||
router.push({
|
||||
path: "/companyprofildetail",
|
||||
query: {
|
||||
title: item.title,
|
||||
titleNo: item.titleNo,
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -866,4 +881,21 @@ const handleCarouselClick = (item, event) => {
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
color: #eff1f6;
|
||||
left: 142px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
color: #eff1f6;
|
||||
right: 142px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
@ -14,15 +16,15 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'company' }"
|
||||
@click="handleTabClick('company')"
|
||||
:class="{ active: currentTab === 'companyprofil' }"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
公司概况
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
业务介绍
|
||||
</div>
|
||||
@ -31,7 +33,7 @@
|
||||
<main>
|
||||
<section
|
||||
className="section-first"
|
||||
v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
|
||||
v-if="state.pageTitleNo === '1'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -88,7 +90,7 @@
|
||||
|
||||
<section
|
||||
className="section-sec"
|
||||
v-if="state.pageTitle.includes('全球化战略升级')"
|
||||
v-if="state.pageTitleNo === '2'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -152,7 +154,7 @@
|
||||
|
||||
<section
|
||||
className="section-third"
|
||||
v-if="state.pageTitle.includes('助力文艺创作者')"
|
||||
v-if="state.pageTitleNo === '3'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -219,7 +221,7 @@
|
||||
|
||||
<section
|
||||
className="section-four"
|
||||
v-if="state.pageTitle.includes('培育文艺领域明日之星')"
|
||||
v-if="state.pageTitleNo === '4'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -282,7 +284,7 @@
|
||||
|
||||
<section
|
||||
className="section-five"
|
||||
v-if="state.pageTitle.includes('多元人才汇聚')"
|
||||
v-if="state.pageTitleNo === '5'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -354,6 +356,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDivider } from "naive-ui";
|
||||
import {
|
||||
onUnmounted,
|
||||
ref,
|
||||
@ -363,18 +366,25 @@ import {
|
||||
onBeforeMount,
|
||||
} from "vue";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const state = reactive({
|
||||
pageTitle: "",
|
||||
pageTitleNo: "",
|
||||
});
|
||||
|
||||
const { currentTab } = useHome();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
onBeforeMount(() => {
|
||||
state.pageTitle = route.query.title;
|
||||
state.pageTitleNo = route.query.titleNo;
|
||||
});
|
||||
onMounted(() => {});
|
||||
onUnmounted(() => {});
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -436,4 +446,19 @@ onUnmounted(() => {});
|
||||
text-indent: 2em; // Adjust the value as needed for the desired indent
|
||||
line-height: 143px;
|
||||
}
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 64px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 60px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
@ -14,15 +16,15 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'company' }"
|
||||
@click="handleTabClick('company')"
|
||||
:class="{ active: currentTab === 'companyprofil' }"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
公司概况
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
业务介绍
|
||||
</div>
|
||||
@ -31,7 +33,7 @@
|
||||
<main>
|
||||
<section
|
||||
className="section-first"
|
||||
v-if="state.pageTitle === '实现技术突破，引领文艺创作技术革新'"
|
||||
v-if="state.pageTitleNo === '1'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -88,7 +90,7 @@
|
||||
|
||||
<section
|
||||
className="section-sec"
|
||||
v-if="state.pageTitle.includes('全球化战略升级')"
|
||||
v-if="state.pageTitleNo === '2'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -152,7 +154,7 @@
|
||||
|
||||
<section
|
||||
className="section-third"
|
||||
v-if="state.pageTitle.includes('助力文艺创作者')"
|
||||
v-if="state.pageTitleNo === '3'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -219,7 +221,7 @@
|
||||
|
||||
<section
|
||||
className="section-four"
|
||||
v-if="state.pageTitle.includes('培育文艺领域明日之星')"
|
||||
v-if="state.pageTitleNo === '4'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -282,7 +284,7 @@
|
||||
|
||||
<section
|
||||
className="section-five"
|
||||
v-if="state.pageTitle.includes('多元人才汇聚')"
|
||||
v-if="state.pageTitleNo === '5'"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
@ -354,6 +356,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDivider } from "naive-ui";
|
||||
import {
|
||||
onUnmounted,
|
||||
ref,
|
||||
@ -363,18 +366,22 @@ import {
|
||||
onBeforeMount,
|
||||
} from "vue";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
import { useRoute } from "vue-router";
|
||||
const state = reactive({
|
||||
pageTitle: "",
|
||||
pageTitleNo: "",
|
||||
});
|
||||
|
||||
const { currentTab } = useHome();
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { currentTab } = useHome();
|
||||
onBeforeMount(() => {
|
||||
state.pageTitle = route.query.title;
|
||||
state.pageTitleNo = route.query.titleNo;
|
||||
});
|
||||
onMounted(() => {});
|
||||
onUnmounted(() => {});
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -436,4 +443,21 @@ onUnmounted(() => {});
|
||||
line-height: 110px;
|
||||
color: #10253e;
|
||||
}
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
color: #eff1f6;
|
||||
left: 116px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
color: #eff1f6;
|
||||
right: 116px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -21,8 +21,8 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
{{ t("home.nav.business") }}
|
||||
</div>
|
||||
@ -35,20 +35,10 @@
|
||||
<section className="panel first-panel">
|
||||
<n-carousel autoplay :interval="5000" class="no-hover">
|
||||
<img
|
||||
v-for="(src, index) in currentCarouselImages"
|
||||
:key="index"
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/375/zh/carousel-1.png"
|
||||
/>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/375/zh/carousel-2.png"
|
||||
/>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/375/zh/carousel-3.png"
|
||||
/>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/375/zh/carousel-4.png"
|
||||
:src="src"
|
||||
/>
|
||||
</n-carousel>
|
||||
</section>
|
||||
@ -71,7 +61,7 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
class="text-[#10253E] text-[123px] leading-[164px] font-semibold"
|
||||
class="text-[#10253E] text-[123px] leading-[164px] font-semibold mt-[480px]"
|
||||
>
|
||||
{{ t("home.section2.title1") }}
|
||||
</div>
|
||||
@ -90,33 +80,109 @@
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div class="parallax-bg" style="margin-top: 70px"></div>
|
||||
<div class="content3 mt-[348px]">
|
||||
<div class="content3 mt-[451px]">
|
||||
<div class="text-[#8B59F7] text-[72px]">
|
||||
{{ t("home.section3.label") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[113pxpx] mt-[43px]">FiEE</div>
|
||||
<div class="text-[#455363] text-[72px] mt-[78px] pr-[139px]">
|
||||
<div class="text-[#10253E] text-[113px] mt-[87px]">FiEE</div>
|
||||
<div class="text-[#455363] text-[72px] mt-[159px] pr-[139px]">
|
||||
{{ t("home.section3.desc") }}
|
||||
</div>
|
||||
|
||||
<n-marquee auto-fill>
|
||||
<div style="display: flex" class="mt-[317px]">
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
|
||||
<img
|
||||
class="w-[973px] h-[973px]"
|
||||
src="@/assets/image/jj1.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.data.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
|
||||
class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
|
||||
>
|
||||
<div ref="carouselTrack" class="carousel-track">
|
||||
{{ t("home.section3.features.data.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
|
||||
<img
|
||||
class="w-[973px] h-[973px]"
|
||||
src="@/assets/image/jj2.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-for="(item, idx) in getVisibleItems()"
|
||||
:key="idx"
|
||||
class="carousel-item"
|
||||
class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
|
||||
>
|
||||
<img class="carousel-image" :src="item.imgUrl" />
|
||||
<div class="carousel-title">
|
||||
<div>{{ item.title }}</div>
|
||||
{{ t("home.section3.features.ai.title") }}
|
||||
</div>
|
||||
<div class="carousel-subtitle">
|
||||
<div>{{ item.subTitle }}</div>
|
||||
<div
|
||||
class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.ai.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
|
||||
<img
|
||||
class="w-[973px] h-[973px]"
|
||||
src="@/assets/image/jj3.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.cloud.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.cloud.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
|
||||
<img
|
||||
class="w-[973px] h-[973px]"
|
||||
src="@/assets/image/jj4.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.cooperation.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.cooperation.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[1024px]">
|
||||
<img
|
||||
class="w-[973px] h-[973px]"
|
||||
src="@/assets/image/jj5.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.promotion.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.promotion.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-marquee>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -127,47 +193,24 @@
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div class="parallax-bg"></div>
|
||||
<div class="content4 mt-[408px]">
|
||||
<div class="text-[#8B59F7] text-[72px]">
|
||||
<div class="content4 mt-[451px]">
|
||||
<div class="text-[#8B59F7] text-[113px]">
|
||||
{{ t("home.section4.label") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[113pxpx] mt-[43px]">
|
||||
<div>多元业务协同</div>
|
||||
<div>推动文艺影响力腾飞</div>
|
||||
<div class="text-[#10253E] text-[113px] mt-[87px] font-semibold">
|
||||
<div>
|
||||
{{ t("home.section4.title1") }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t("home.section4.title2") }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[72px] mt-[78px] leading-[60px] pr-[139px]"
|
||||
class="text-[#455363] text-[72px] mt-[159px] leading-[102px] pr-[139px]"
|
||||
>
|
||||
{{ t("home.section4.desc") }}
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="mt-[493px]">
|
||||
<div class="card">
|
||||
<img
|
||||
src="@/assets/image/home/375/imageShow-1.png"
|
||||
alt="Image 1"
|
||||
/>
|
||||
<div class="js-detail font-bold">
|
||||
{{ t("home.section4.cards1.title") }}
|
||||
<div class="text-[#455363] text-[72px] font-normal">
|
||||
{{ t("home.section4.cards1.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img
|
||||
src="@/assets/image/home/375/imageShow-3.png"
|
||||
alt="Image 3"
|
||||
/>
|
||||
<div class="js-detail font-bold">
|
||||
{{ t("home.section4.cards3.title") }}
|
||||
<div class="text-[#455363] text-[72px] font-normal">
|
||||
{{ t("home.section4.cards3.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right mt-[215px]">
|
||||
<div class="container mt-[166px]">
|
||||
<div class="card">
|
||||
<img
|
||||
src="@/assets/image/home/375/imageShow-2.png"
|
||||
@ -175,11 +218,27 @@
|
||||
/>
|
||||
<div class="js-detail font-bold">
|
||||
{{ t("home.section4.cards2.title") }}
|
||||
<div class="text-[#455363] text-[72px] font-normal">
|
||||
<div
|
||||
class="text-[#455363] text-[72px] font-normal leading-[102px]"
|
||||
>
|
||||
{{ t("home.section4.cards2.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img
|
||||
src="@/assets/image/home/375/imageShow-1.png"
|
||||
alt="Image 1"
|
||||
/>
|
||||
<div class="js-detail font-bold">
|
||||
{{ t("home.section4.cards1.title") }}
|
||||
<div
|
||||
class="text-[#455363] text-[72px] font-normal leading-[102px]"
|
||||
>
|
||||
{{ t("home.section4.cards1.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img
|
||||
src="@/assets/image/home/375/imageShow-4.png"
|
||||
@ -187,11 +246,26 @@
|
||||
/>
|
||||
<div class="js-detail font-bold">
|
||||
{{ t("home.section4.cards4.title") }}
|
||||
<div class="text-[#455363] text-[72px] font-normal">
|
||||
<div
|
||||
class="text-[#455363] text-[72px] font-normal leading-[102px]"
|
||||
>
|
||||
{{ t("home.section4.cards4.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-[217px]">
|
||||
<img
|
||||
src="@/assets/image/home/375/imageShow-3.png"
|
||||
alt="Image 3"
|
||||
/>
|
||||
<div class="js-detail font-bold">
|
||||
{{ t("home.section4.cards3.title") }}
|
||||
<div
|
||||
class="text-[#455363] text-[72px] font-normal leading-[102px]"
|
||||
>
|
||||
{{ t("home.section4.cards3.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,8 +284,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NImage } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
|
||||
import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
@ -232,33 +306,53 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
|
||||
const scrollDownVisible = ref(true);
|
||||
const { t } = useI18n();
|
||||
|
||||
// 导入图片
|
||||
import imageshow3 from "@/assets/image/businessintroduction/375/imageshow-3.png";
|
||||
import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
|
||||
import imageshow5 from "@/assets/image/businessintroduction/375/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 carouselImages = {
|
||||
zh: [
|
||||
new URL("@/assets/image/home/375/zh/carousel-1.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/zh/carousel-2.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/zh/carousel-3.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/zh/carousel-4.png", import.meta.url).href,
|
||||
],
|
||||
en: [
|
||||
new URL("@/assets/image/home/375/en/carousel-1.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/en/carousel-2.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/en/carousel-3.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/en/carousel-4.png", import.meta.url).href,
|
||||
],
|
||||
ja: [
|
||||
new URL("@/assets/image/home/375/ja/carousel-1.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/ja/carousel-2.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/ja/carousel-3.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/375/ja/carousel-4.png", import.meta.url).href,
|
||||
],
|
||||
"zh-TW": [
|
||||
new URL("@/assets/image/home/375/zh-TW/carousel-1.png", import.meta.url)
|
||||
.href,
|
||||
new URL("@/assets/image/home/375/zh-TW/carousel-2.png", import.meta.url)
|
||||
.href,
|
||||
new URL("@/assets/image/home/375/zh-TW/carousel-3.png", import.meta.url)
|
||||
.href,
|
||||
new URL("@/assets/image/home/375/zh-TW/carousel-4.png", import.meta.url)
|
||||
.href,
|
||||
],
|
||||
};
|
||||
const currentLanguage = ref(localStorage.getItem("language") || "zh");
|
||||
const currentCarouselImages = computed(() => {
|
||||
return carouselImages[currentLanguage.value] || carouselImages.zh;
|
||||
});
|
||||
|
||||
// 添加语言变化的监听
|
||||
watch(
|
||||
() => localStorage.getItem("language"),
|
||||
(newLang) => {
|
||||
if (newLang) {
|
||||
currentLanguage.value = newLang;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
@ -271,13 +365,13 @@ const goToSection = (i) => {
|
||||
|
||||
// 防止频繁触发
|
||||
const now = Date.now();
|
||||
if (now - lastScrollTime < 500) return; // 500ms 内不重复触发
|
||||
if (now - lastScrollTime < 800) return; // 增加间隔时间到800ms
|
||||
lastScrollTime = now;
|
||||
|
||||
isScrolling = true;
|
||||
scrollTween = gsap.to(window, {
|
||||
scrollTo: { y: i * window.innerHeight, autoKill: false },
|
||||
duration: 0.8, // 增加动画时间使其更平滑
|
||||
duration: 1, // 增加动画时间到1秒
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => {
|
||||
scrollTween = null;
|
||||
@ -299,73 +393,44 @@ const handleWheel = (e) => {
|
||||
const lastPanel = document.querySelector(".panel:last-child");
|
||||
const isInLastPanel = currentSection === 3;
|
||||
|
||||
// 添加防抖动
|
||||
if (Math.abs(delta) <= scrollThreshold) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 在最后一个panel时允许自然滚动
|
||||
if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) {
|
||||
// 检查是否在panel顶部且向上滚动，或在底部且向下滚动
|
||||
if (
|
||||
(lastPanel.scrollTop === 0 && delta < 0) ||
|
||||
(lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight &&
|
||||
delta > 0)
|
||||
) {
|
||||
// 只有在这些边界条件下才触发页面切换
|
||||
if (Math.abs(delta) > scrollThreshold) {
|
||||
if (delta > 0 && currentSection < 3) {
|
||||
goToSection(currentSection + 1);
|
||||
} else if (delta < 0 && currentSection > 0) {
|
||||
goToSection(currentSection - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
return; // 其他情况允许自然滚动
|
||||
return;
|
||||
}
|
||||
|
||||
// 非最后一个panel的处理保持不变
|
||||
if (Math.abs(delta) > scrollThreshold) {
|
||||
// 非最后一个panel的处理
|
||||
if (delta > 0 && currentSection < 3) {
|
||||
goToSection(currentSection + 1);
|
||||
} else if (delta < 0 && currentSection > 0) {
|
||||
goToSection(currentSection - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 监听滚轮事件
|
||||
// 在 onMounted 中移除重复的初始化
|
||||
onMounted(() => {
|
||||
window.addEventListener("wheel", handleWheel, { passive: false });
|
||||
// 初始化轮播动画
|
||||
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(() => {
|
||||
window.removeEventListener("wheel", handleWheel);
|
||||
ctx?.revert();
|
||||
ScrollTrigger.killAll();
|
||||
if (carouselAnimation) {
|
||||
carouselAnimation.kill();
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
@ -392,8 +457,42 @@ watch(
|
||||
|
||||
// 移除之前的渐入动画代码
|
||||
panels.forEach((panel, i) => {
|
||||
// 背景视差
|
||||
const bg = panel.querySelector(".parallax-bg");
|
||||
|
||||
// 区分处理最后一个面板和其他面板
|
||||
if (i === 3) {
|
||||
// 第四个面板
|
||||
const content = panel.querySelector(".content4");
|
||||
if (bg && content) {
|
||||
const contentHeight = content.offsetHeight;
|
||||
const viewportHeight = window.innerHeight;
|
||||
const parallaxRange = Math.max(
|
||||
30,
|
||||
(contentHeight / viewportHeight) * 15
|
||||
);
|
||||
|
||||
// 只为第四个面板设置特殊的背景高度
|
||||
gsap.set(bg, {
|
||||
height: `${Math.max(
|
||||
120,
|
||||
(contentHeight / viewportHeight) * 100
|
||||
)}%`,
|
||||
});
|
||||
|
||||
gsap.to(bg, {
|
||||
yPercent: parallaxRange,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: panel,
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
invalidateOnRefresh: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 其他面板保持原有的视差效果
|
||||
if (bg) {
|
||||
gsap.to(bg, {
|
||||
yPercent: 30,
|
||||
@ -406,6 +505,7 @@ watch(
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 内容视差
|
||||
const content = panel.querySelector(".content");
|
||||
@ -483,6 +583,7 @@ watch(
|
||||
".content3 > div:nth-child(1)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > .n-marquee",
|
||||
],
|
||||
{
|
||||
opacity: 0,
|
||||
@ -516,6 +617,22 @@ watch(
|
||||
y: 0,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content3 > .n-marquee",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
onStart: () => {
|
||||
const marquee = document.querySelector(
|
||||
".content3 > .n-marquee"
|
||||
);
|
||||
if (marquee) {
|
||||
marquee.style.visibility = "visible";
|
||||
}
|
||||
},
|
||||
},
|
||||
"-=0.6"
|
||||
);
|
||||
},
|
||||
onLeave: () => {
|
||||
@ -528,6 +645,7 @@ watch(
|
||||
|
||||
tl.to(
|
||||
[
|
||||
".content3 > .n-marquee",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(1)",
|
||||
@ -550,6 +668,7 @@ watch(
|
||||
".content3 > div:nth-child(1)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > .n-marquee",
|
||||
],
|
||||
{
|
||||
opacity: 0,
|
||||
@ -583,6 +702,14 @@ watch(
|
||||
y: 0,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content3 > .n-marquee",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
},
|
||||
"-=0.6"
|
||||
);
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
@ -595,6 +722,7 @@ watch(
|
||||
|
||||
tl.to(
|
||||
[
|
||||
".content3 > .n-marquee",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(1)",
|
||||
@ -614,9 +742,7 @@ watch(
|
||||
start: "top 80%",
|
||||
end: "bottom center",
|
||||
onEnter: () => {
|
||||
// 进入第四幕时隐藏
|
||||
scrollDownVisible.value = false;
|
||||
// 初始状态设置
|
||||
gsap.set(".content4", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
@ -637,13 +763,6 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
// 单独设置卡片的初始状态
|
||||
gsap.set(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: 50,
|
||||
immediateRender: true,
|
||||
});
|
||||
|
||||
const tl = gsap.timeline({
|
||||
defaults: {
|
||||
duration: 0.6,
|
||||
@ -671,47 +790,9 @@ watch(
|
||||
y: 0,
|
||||
},
|
||||
"-=0.4"
|
||||
)
|
||||
// 卡片动画
|
||||
.to(
|
||||
".content4 .container > div:first-child .card:first-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.2"
|
||||
)
|
||||
.to(
|
||||
".content4 .container > .right .card:first-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content4 .container > div:first-child .card:last-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content4 .container > .right .card:last-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.6"
|
||||
);
|
||||
},
|
||||
onLeave: () => {
|
||||
// 离开第四幕时显示
|
||||
scrollDownVisible.value = true;
|
||||
gsap
|
||||
.timeline({
|
||||
@ -720,14 +801,6 @@ watch(
|
||||
ease: "power2.in",
|
||||
},
|
||||
})
|
||||
.to(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: -30,
|
||||
stagger: {
|
||||
each: 0.1,
|
||||
from: "end",
|
||||
},
|
||||
})
|
||||
.to(
|
||||
[
|
||||
".content4 > div:nth-child(3)",
|
||||
@ -743,7 +816,6 @@ watch(
|
||||
);
|
||||
},
|
||||
onEnterBack: () => {
|
||||
// 返回第四幕时隐藏
|
||||
scrollDownVisible.value = false;
|
||||
gsap.set(".content4", {
|
||||
opacity: 1,
|
||||
@ -764,12 +836,6 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
gsap.set(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: -50,
|
||||
immediateRender: true,
|
||||
});
|
||||
|
||||
const tl = gsap.timeline({
|
||||
defaults: {
|
||||
duration: 0.6,
|
||||
@ -796,46 +862,9 @@ watch(
|
||||
y: 0,
|
||||
},
|
||||
"-=0.4"
|
||||
)
|
||||
.to(
|
||||
".content4 .container > div:first-child .card:first-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.2"
|
||||
)
|
||||
.to(
|
||||
".content4 .container > .right .card:first-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content4 .container > div:first-child .card:last-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content4 .container > .right .card:last-child",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
},
|
||||
"-=0.6"
|
||||
);
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
// 向上离开第四幕时显示
|
||||
scrollDownVisible.value = true;
|
||||
gsap
|
||||
.timeline({
|
||||
@ -844,14 +873,7 @@ watch(
|
||||
ease: "power2.in",
|
||||
},
|
||||
})
|
||||
.to(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
stagger: {
|
||||
each: 0.1,
|
||||
from: "end",
|
||||
},
|
||||
})
|
||||
|
||||
.to(
|
||||
[
|
||||
".content4 > div:nth-child(3)",
|
||||
@ -872,13 +894,6 @@ watch(
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const carouselTrack = ref(null);
|
||||
let carouselAnimation = null; // 存储 GSAP 动画实例
|
||||
const getVisibleItems = () => {
|
||||
const items = state.marqueeArr;
|
||||
// 复制两组用于无缝滚动
|
||||
return [...items, ...items];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -909,9 +924,12 @@ const getVisibleItems = () => {
|
||||
display: flex;
|
||||
gap: 128px;
|
||||
margin-right: 32px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 61px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
@ -938,7 +956,7 @@ const getVisibleItems = () => {
|
||||
}
|
||||
.scroll-down {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
bottom: 113px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #ffffff;
|
||||
@ -987,50 +1005,17 @@ const getVisibleItems = () => {
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 477px;
|
||||
left: 64px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.divider2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 715px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider3 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 950px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider4 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1186px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1420px;
|
||||
right: 60px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
@ -1058,13 +1043,18 @@ const getVisibleItems = () => {
|
||||
&:last-child {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
|
||||
// 隐藏滚动条但保持功能
|
||||
&::-webkit-scrollbar {
|
||||
display: none; // Chrome, Safari, Opera
|
||||
}
|
||||
|
||||
// 调整最后一个面板的背景
|
||||
.parallax-bg {
|
||||
position: fixed; // 改为固定定位
|
||||
height: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-panel {
|
||||
@ -1089,7 +1079,7 @@ const getVisibleItems = () => {
|
||||
top: -10%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120%;
|
||||
height: 120%; // 保持原有高度
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -1116,13 +1106,26 @@ const getVisibleItems = () => {
|
||||
transform: translateY(50px);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
> .n-marquee {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
will-change: opacity, transform;
|
||||
visibility: hidden; // 初始隐藏跑马灯
|
||||
}
|
||||
}
|
||||
// 确保跑马灯内容可见
|
||||
:deep(.n-marquee) {
|
||||
.n-marquee-content {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content4 {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 0 184px;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -1156,18 +1159,11 @@ const getVisibleItems = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* Two columns */
|
||||
gap: 55px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 75px;
|
||||
margin-top: 154px;
|
||||
box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
|
||||
padding: 22px 18px 57px 20px;
|
||||
border-radius: 30px;
|
||||
padding: 46px 36px 118px 51px;
|
||||
border-radius: 60px;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1182,11 +1178,11 @@ const getVisibleItems = () => {
|
||||
|
||||
.js-detail {
|
||||
text-align: left;
|
||||
margin-top: 37px;
|
||||
font-size: 50px;
|
||||
margin-top: 87px;
|
||||
font-size: 92px;
|
||||
color: #10253e;
|
||||
width: 100%;
|
||||
padding: 0 20px 0 30px;
|
||||
padding: 0 82px 0 82px;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
@ -1239,8 +1235,17 @@ const getVisibleItems = () => {
|
||||
}
|
||||
|
||||
.carousel-subtitle {
|
||||
margin-top: 23px;
|
||||
color: #455363;
|
||||
font-size: 40px;
|
||||
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 * 1);
|
||||
}
|
||||
|
||||
// 只为第四个面板的背景添加特殊样式
|
||||
.panel:last-child .parallax-bg {
|
||||
height: 100%; // 第四个面板的背景初始高度
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider3"></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
@ -21,8 +24,8 @@
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'business' }"
|
||||
@click="handleTabClick('business')"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
>
|
||||
{{ t("home.nav.business") }}
|
||||
</div>
|
||||
@ -35,20 +38,10 @@
|
||||
<section className="panel first-panel">
|
||||
<n-carousel autoplay :interval="5000" class="no-hover">
|
||||
<img
|
||||
v-for="(src, index) in currentCarouselImages"
|
||||
:key="index"
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/768/zh/carousel-1.png"
|
||||
/>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/768/zh/carousel-2.png"
|
||||
/>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/768/zh/carousel-3.png"
|
||||
/>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="@/assets/image/home/768/zh/carousel-4.png"
|
||||
:src="src"
|
||||
/>
|
||||
</n-carousel>
|
||||
</section>
|
||||
@ -57,11 +50,6 @@
|
||||
className="panel"
|
||||
style="background-color: rgba(248, 249, 255, 1)"
|
||||
>
|
||||
<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="parallax-bg" style="margin-top: 210px">
|
||||
<img
|
||||
ref="secondImage"
|
||||
@ -80,11 +68,6 @@
|
||||
</section>
|
||||
|
||||
<section className="panel" style="background-color: #fff">
|
||||
<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="parallax-bg" style="margin-top: 70px"></div>
|
||||
<div class="content3 mt-[348px]">
|
||||
<div class="text-[#8B59F7] text-[40px]">
|
||||
@ -94,42 +77,116 @@
|
||||
<div class="text-[#455363] text-[40px] mt-[78px] pr-[100px]">
|
||||
{{ t("home.section3.desc") }}
|
||||
</div>
|
||||
<n-marquee auto-fill>
|
||||
<div style="display: flex" class="mt-[190px]">
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
|
||||
<img
|
||||
class="w-[475px] h-[475px]"
|
||||
src="@/assets/image/jj1.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.data.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
|
||||
class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
|
||||
>
|
||||
<div ref="carouselTrack" class="carousel-track">
|
||||
{{ t("home.section3.features.data.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
|
||||
<img
|
||||
class="w-[475px] h-[475px]"
|
||||
src="@/assets/image/jj2.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-for="(item, idx) in getVisibleItems()"
|
||||
:key="idx"
|
||||
class="carousel-item"
|
||||
class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
|
||||
>
|
||||
<img class="carousel-image" :src="item.imgUrl" />
|
||||
<div class="carousel-title">
|
||||
<div>{{ item.title }}</div>
|
||||
{{ t("home.section3.features.ai.title") }}
|
||||
</div>
|
||||
<div class="carousel-subtitle">
|
||||
<div>{{ item.subTitle }}</div>
|
||||
<div
|
||||
class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.ai.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
|
||||
<img
|
||||
class="w-[475px] h-[475px]"
|
||||
src="@/assets/image/jj3.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.cloud.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.cloud.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
|
||||
<img
|
||||
class="w-[475px] h-[475px]"
|
||||
src="@/assets/image/jj4.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.cooperation.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.cooperation.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#455363] text-[40px] mr-[83px] w-[500px]">
|
||||
<img
|
||||
class="w-[475px] h-[475px]"
|
||||
src="@/assets/image/jj5.png"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
|
||||
>
|
||||
{{ t("home.section3.features.promotion.title") }}
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
|
||||
>
|
||||
{{ t("home.section3.features.promotion.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-marquee>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="panel" style="background-color: #f8f9ff">
|
||||
<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="parallax-bg"></div>
|
||||
<div class="parallax-bg" style="height: 100% !important"></div>
|
||||
<div class="content4 mt-[408px]">
|
||||
<div class="text-[#8B59F7] text-[40px]">
|
||||
{{ t("home.section4.label") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[85px] mt-[43px]">
|
||||
<div>多元业务协同</div>
|
||||
<div>推动文艺影响力腾飞</div>
|
||||
<div>
|
||||
{{ t("home.section4.title1") }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t("home.section4.title2") }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-[#455363] text-[40px] mt-[78px] leading-[60px] pr-[100px]"
|
||||
@ -204,10 +261,9 @@
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NImage } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
|
||||
import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
|
||||
import { onUnmounted, ref, onMounted, watch, computed } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
@ -228,33 +284,54 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
|
||||
const scrollDownVisible = ref(true);
|
||||
const { t } = useI18n();
|
||||
|
||||
// 导入图片
|
||||
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 carouselImages = {
|
||||
zh: [
|
||||
new URL("@/assets/image/home/768/zh/carousel-1.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/zh/carousel-2.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/zh/carousel-3.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/zh/carousel-4.png", import.meta.url).href,
|
||||
],
|
||||
en: [
|
||||
new URL("@/assets/image/home/768/en/carousel-1.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/en/carousel-2.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/en/carousel-3.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/en/carousel-4.png", import.meta.url).href,
|
||||
],
|
||||
ja: [
|
||||
new URL("@/assets/image/home/768/ja/carousel-1.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/ja/carousel-2.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/ja/carousel-3.png", import.meta.url).href,
|
||||
new URL("@/assets/image/home/768/ja/carousel-4.png", import.meta.url).href,
|
||||
],
|
||||
"zh-TW": [
|
||||
new URL("@/assets/image/home/768/zh-TW/carousel-1.png", import.meta.url)
|
||||
.href,
|
||||
new URL("@/assets/image/home/768/zh-TW/carousel-2.png", import.meta.url)
|
||||
.href,
|
||||
new URL("@/assets/image/home/768/zh-TW/carousel-3.png", import.meta.url)
|
||||
.href,
|
||||
new URL("@/assets/image/home/768/zh-TW/carousel-4.png", import.meta.url)
|
||||
.href,
|
||||
],
|
||||
};
|
||||
|
||||
const currentLanguage = ref(localStorage.getItem("language") || "zh");
|
||||
const currentCarouselImages = computed(() => {
|
||||
return carouselImages[currentLanguage.value] || carouselImages.zh;
|
||||
});
|
||||
|
||||
// 添加语言变化的监听
|
||||
watch(
|
||||
() => localStorage.getItem("language"),
|
||||
(newLang) => {
|
||||
if (newLang) {
|
||||
currentLanguage.value = newLang;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
@ -328,40 +405,12 @@ const handleWheel = (e) => {
|
||||
// 监听滚轮事件
|
||||
onMounted(() => {
|
||||
window.addEventListener("wheel", handleWheel, { passive: false });
|
||||
// 初始化轮播动画
|
||||
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(() => {
|
||||
window.removeEventListener("wheel", handleWheel);
|
||||
ctx?.revert();
|
||||
ScrollTrigger.killAll();
|
||||
if (carouselAnimation) {
|
||||
carouselAnimation.kill();
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
@ -479,6 +528,7 @@ watch(
|
||||
".content3 > div:nth-child(1)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > .n-marquee",
|
||||
],
|
||||
{
|
||||
opacity: 0,
|
||||
@ -512,6 +562,22 @@ watch(
|
||||
y: 0,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content3 > .n-marquee",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
onStart: () => {
|
||||
const marquee = document.querySelector(
|
||||
".content3 > .n-marquee"
|
||||
);
|
||||
if (marquee) {
|
||||
marquee.style.visibility = "visible";
|
||||
}
|
||||
},
|
||||
},
|
||||
"-=0.6"
|
||||
);
|
||||
},
|
||||
onLeave: () => {
|
||||
@ -524,6 +590,7 @@ watch(
|
||||
|
||||
tl.to(
|
||||
[
|
||||
".content3 > .n-marquee",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(1)",
|
||||
@ -546,6 +613,7 @@ watch(
|
||||
".content3 > div:nth-child(1)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > .n-marquee",
|
||||
],
|
||||
{
|
||||
opacity: 0,
|
||||
@ -579,6 +647,14 @@ watch(
|
||||
y: 0,
|
||||
},
|
||||
"-=0.6"
|
||||
)
|
||||
.to(
|
||||
".content3 > .n-marquee",
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
},
|
||||
"-=0.6"
|
||||
);
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
@ -591,6 +667,7 @@ watch(
|
||||
|
||||
tl.to(
|
||||
[
|
||||
".content3 > .n-marquee",
|
||||
".content3 > div:nth-child(3)",
|
||||
".content3 > div:nth-child(2)",
|
||||
".content3 > div:nth-child(1)",
|
||||
@ -868,13 +945,6 @@ watch(
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const carouselTrack = ref(null);
|
||||
let carouselAnimation = null; // 存储 GSAP 动画实例
|
||||
const getVisibleItems = () => {
|
||||
const items = state.marqueeArr;
|
||||
// 复制两组用于无缝滚动
|
||||
return [...items, ...items];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -928,7 +998,7 @@ const getVisibleItems = () => {
|
||||
}
|
||||
.scroll-down {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
bottom: 110px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #ffffff;
|
||||
@ -976,51 +1046,27 @@ const getVisibleItems = () => {
|
||||
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 477px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.divider2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 715px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
z-index: 9;
|
||||
left: 22px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.divider3 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 950px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
z-index: 9;
|
||||
left: 400px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider4 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1186px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-size: 10px 60px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1420px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
z-index: 9;
|
||||
right: 22px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
@ -1106,6 +1152,19 @@ const getVisibleItems = () => {
|
||||
transform: translateY(50px);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
> .n-marquee {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
will-change: opacity, transform;
|
||||
visibility: hidden; // 初始隐藏跑马灯
|
||||
}
|
||||
}
|
||||
|
||||
// 确保跑马灯内容可见
|
||||
:deep(.n-marquee) {
|
||||
.n-marquee-content {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content4 {
|
||||
@ -1136,16 +1195,6 @@ const getVisibleItems = () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.divider3,
|
||||
.divider4 {
|
||||
:deep(.n-divider) {
|
||||
border-left: none;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 30px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -1229,8 +1278,12 @@ const getVisibleItems = () => {
|
||||
}
|
||||
|
||||
.carousel-subtitle {
|
||||
margin-top: 23px;
|
||||
color: #455363;
|
||||
font-size: 40px;
|
||||
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 * 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user