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