gaikuang
This commit is contained in:
scout
parent
c303fe0f0f
commit
f4a34a4a4a
@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NConfigProvider, NDropdown } from "naive-ui";
|
||||
import AppHeader from "@/components/AppHeader.vue";
|
||||
@ -54,6 +55,7 @@ const handleLanguageChange = (key) => {
|
||||
{{ languageOptions.find(opt => opt.key === locale)?.label }}
|
||||
</div>
|
||||
</n-dropdown> -->
|
||||
<AppHeader />
|
||||
<router-view />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
BIN
src/assets/image/3p.png
Normal file
BIN
src/assets/image/3p.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/image/cl.png
Normal file
BIN
src/assets/image/cl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/image/gk.png
Normal file
BIN
src/assets/image/gk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 768 KiB |
BIN
src/assets/image/heart.png
Normal file
BIN
src/assets/image/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/image/randg.png
Normal file
BIN
src/assets/image/randg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/image/ship.png
Normal file
BIN
src/assets/image/ship.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/image/xbg.png
Normal file
BIN
src/assets/image/xbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
BIN
src/assets/image/xlv.png
Normal file
BIN
src/assets/image/xlv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -1,14 +1,39 @@
|
||||
<template>
|
||||
<header className="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
</header>
|
||||
<header className="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
|
||||
{{ t('home.nav.home') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
|
||||
{{ t('home.nav.company') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
|
||||
{{ t('home.nav.business') }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHome } from '@/store/home/index.js';
|
||||
const router = useRouter();
|
||||
const { currentTab } = useHome();
|
||||
const { t } = useI18n();
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push('/'+tab);
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
@ -17,16 +42,36 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
padding: 0 14rem;
|
||||
background-color: transparent;
|
||||
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.logo{
|
||||
img{
|
||||
width: 108px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
width: 108px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
|
||||
&.active {
|
||||
color: #8B59FA;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #8B59FA;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,216 @@
|
||||
<script setup>
|
||||
import { useAuth } from "@/store/auth/index.js";
|
||||
const { clickSendCode, telNum, code, showTextCode, clickLogin } = useAuth();
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen min-h-screen" style=""></div>
|
||||
</template>
|
||||
import { onUnmounted, ref, watch } from 'vue';
|
||||
import gsap from 'gsap';
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useTransitionComposable } from '@/composables/transition-composable';
|
||||
import { useRouter } from "vue-router";
|
||||
import { NDivider } from 'naive-ui'
|
||||
const router = useRouter();
|
||||
const { transitionState } = useTransitionComposable();
|
||||
const main = ref();
|
||||
let ctx;
|
||||
const { t } = useI18n();
|
||||
|
||||
watch(
|
||||
[() => transitionState.transitionComplete, main],
|
||||
(newValue) => {
|
||||
if (newValue && main.value) {
|
||||
ctx = gsap.context((self) => {
|
||||
const boxes = self.selector('.box');
|
||||
boxes.forEach((box) => {
|
||||
gsap.to(box, {
|
||||
x: 150,
|
||||
scrollTrigger: {
|
||||
trigger: box,
|
||||
start: 'bottom bottom',
|
||||
end: 'top 20%',
|
||||
scrub: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
}, main.value); // <- Scope!
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
ctx?.revert(); // <- Easy Cleanup!
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
|
||||
<div class="head relative">
|
||||
|
||||
<img src="@/assets/image/gk.png" alt="head">
|
||||
|
||||
<div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold">
|
||||
领航文艺全周期
|
||||
</div>
|
||||
<div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold">
|
||||
创变价值新巅峰
|
||||
</div>
|
||||
<div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] ">
|
||||
FiEE立志成为文艺创作全周期的掌舵人，深度参与从灵感初绽、作品打磨完成，到市场推广宣传、文化广泛传播的每一处关键节点
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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="bg-[#F8F9FF] ">
|
||||
|
||||
<div class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col">
|
||||
<div class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px]">公司介绍</div>
|
||||
<div class="pl-[505px] pr-[480px] flex">
|
||||
|
||||
<div class="w-[411px] mr-[38px]">
|
||||
<div class="text-[#10253E] text-[40px]">独树一帜
|
||||
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">全周期价值赋能领航者</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[56px]">
|
||||
FiEE彻底打破传统单一服务机构的局限，以行业变革者的姿态，深度融合前沿技术与丰富多元的资源，精心构建起一套贯穿文艺创作从萌芽构思到辉煌绽放全流程的 “全周期” 价值赋能体系。
|
||||
无论你是刚刚踏入文艺殿堂、怀揣梦想的创作新人，还是在文艺道路上摸爬滚打、渴望突破创作瓶颈、攀登更高文艺巅峰的成熟文艺工作者，FiEE都将成为你最坚实的伙伴，一路贴心陪伴，为你的文艺征途遮风挡雨，指引前行的方向。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-[#10253E] text-[20px]">
|
||||
<img class="w-[465px] h-[415px]" src="@/assets/image/ship.png" alt="company">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]">
|
||||
<div class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px]">公司介绍</div>
|
||||
<div class="pl-[505px] pr-[490px] flex z-3">
|
||||
<div class="w-[412px] mr-[40px]">
|
||||
<div class="text-[#10253E] text-[40px]">汇聚精英</div>
|
||||
<div class="text-[#10253E] text-[40px]">燃文艺创变引擎</div>
|
||||
<div class="mt-[93px]">
|
||||
<img class="w-[58px] h-[58px]" src="@/assets/image/cl.png" alt="cl">
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"> <n-divider
|
||||
class="absolute left-[-23px] top-[6px]" style="background-color: #8B59F7;" vertical />纵横全球 多元领航</div>
|
||||
<div class="text-[#455363] text-[16px]">海外精准营销，铺设多元渠道，塑造国际品牌。智能管理 多语言平台，提供本地化服务。</div>
|
||||
</div>
|
||||
<div class="mt-[68px]">
|
||||
<img class="w-[58px] h-[50px]" src="@/assets/image/heart.png" alt="cl">
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"> <n-divider
|
||||
class="absolute left-[-23px] top-[6px]" style="background-color: #8B59F7;" vertical />深耕粉丝 构筑生态
|
||||
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">社区精细运营，提供多元增值服务。升级社群管理工具，精准触达用户。创新激励机制，开发特色衍生周边。</div>
|
||||
</div>
|
||||
<div class="mt-[65px]">
|
||||
<img class="w-[54px] h-[52px]" src="@/assets/image/3p.png" alt="cl">
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"> <n-divider
|
||||
class="absolute left-[-23px] top-[6px]" style="background-color: #8B59F7;" vertical />广纳贤才 团队进阶
|
||||
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">广纳技术、营销精英，注入创新活力。强化内部培训，优化组织架构。引入先进理念，提升管理与服务效能。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-[#455363] text-[16px] flex-1">
|
||||
<div>
|
||||
FiEE团队由运营专家、技术精英及国际顾问组成，提供从内容策划到全球推广的全方位支持。通过跨界合作与资源整合，FiEE突破传统边界，探索文艺新表达。依托前沿技术与精准营销，助力作品实现商业价值与社会影响力的双重提升，为文艺繁荣注入持久动力。
|
||||
</div>
|
||||
<img class="w-[465px] h-[625px] mt-[80px]" src="@/assets/image/randg.png" alt="cl">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content3 relative bg-[#fff] pt-[185px]">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<img class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px]" src="@/assets/image/xlv.png" alt="cl">
|
||||
<img class="absolute" src="@/assets/image/xbg.png" alt="cl">
|
||||
<div class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col">
|
||||
<div class="text-[#8B59F7] text-[16px]">卓越建树</div>
|
||||
<div class="text-[#10253E] text-[40px]">以开拓之姿，登文艺之巅</div>
|
||||
<div class="text-[#455363] w-[748px] text-[16px]">长期深耕文艺领域，FiEE持续拓展业务版图，积累了深厚的行业资源，搭建起广泛的合作网络。目前已与多个全球热门自媒体平台深度携手，从多维度助力文艺创作者闪耀国际舞台，绽放独有的艺术光芒。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.head {
|
||||
width: 100%;
|
||||
background-color: #F8F9FF;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 482px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
|
||||
}
|
||||
|
||||
.divider2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 720px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider3 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 952px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider4 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1182px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1406px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -525,22 +525,6 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
|
||||
{{ t('home.nav.home') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'company' }" @click="handleTabClick('company')">
|
||||
{{ t('home.nav.company') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
|
||||
{{ t('home.nav.business') }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main ref="main">
|
||||
<div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
|
||||
<section className="panel first-panel">
|
||||
|
||||
@ -6,7 +6,9 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
import { useHome } from '@/store/home/index.js';
|
||||
import { useTransitionComposable } from '@/composables/transition-composable';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const { transitionState } = useTransitionComposable();
|
||||
const main = ref();
|
||||
const secondImage = ref(null);
|
||||
@ -21,6 +23,7 @@ const { t } = useI18n();
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push('/' + tab);
|
||||
}
|
||||
|
||||
const goToSection = (i) => {
|
||||
@ -336,7 +339,7 @@ watch(
|
||||
y: 0,
|
||||
immediateRender: true
|
||||
});
|
||||
|
||||
|
||||
// 预先设置所有元素的初始状态
|
||||
gsap.set([
|
||||
".content4 > div:nth-child(1)",
|
||||
@ -367,35 +370,35 @@ watch(
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
})
|
||||
.to(".content4 > div:nth-child(2)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
.to(".content4 > div:nth-child(3)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
// 卡片动画
|
||||
.to(".content4 .container > div:first-child .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.2")
|
||||
.to(".content4 .container > .right .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > div:first-child .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > .right .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6");
|
||||
.to(".content4 > div:nth-child(2)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
.to(".content4 > div:nth-child(3)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
// 卡片动画
|
||||
.to(".content4 .container > div:first-child .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.2")
|
||||
.to(".content4 .container > .right .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > div:first-child .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > .right .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6");
|
||||
},
|
||||
onLeave: () => {
|
||||
// 离开第四幕时显示
|
||||
@ -406,23 +409,23 @@ watch(
|
||||
ease: "power2.in"
|
||||
}
|
||||
})
|
||||
.to(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: -30,
|
||||
stagger: {
|
||||
each: 0.1,
|
||||
from: "end"
|
||||
}
|
||||
})
|
||||
.to([
|
||||
".content4 > div:nth-child(3)",
|
||||
".content4 > div:nth-child(2)",
|
||||
".content4 > div:nth-child(1)"
|
||||
], {
|
||||
opacity: 0,
|
||||
y: -30,
|
||||
stagger: 0.1
|
||||
}, "-=0.3");
|
||||
.to(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: -30,
|
||||
stagger: {
|
||||
each: 0.1,
|
||||
from: "end"
|
||||
}
|
||||
})
|
||||
.to([
|
||||
".content4 > div:nth-child(3)",
|
||||
".content4 > div:nth-child(2)",
|
||||
".content4 > div:nth-child(1)"
|
||||
], {
|
||||
opacity: 0,
|
||||
y: -30,
|
||||
stagger: 0.1
|
||||
}, "-=0.3");
|
||||
},
|
||||
onEnterBack: () => {
|
||||
// 返回第四幕时隐藏
|
||||
@ -432,7 +435,7 @@ watch(
|
||||
y: 0,
|
||||
immediateRender: true
|
||||
});
|
||||
|
||||
|
||||
gsap.set([
|
||||
".content4 > div:nth-child(1)",
|
||||
".content4 > div:nth-child(2)",
|
||||
@ -460,34 +463,34 @@ watch(
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
})
|
||||
.to(".content4 > div:nth-child(2)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
.to(".content4 > div:nth-child(3)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
.to(".content4 .container > div:first-child .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.2")
|
||||
.to(".content4 .container > .right .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > div:first-child .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > .right .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6");
|
||||
.to(".content4 > div:nth-child(2)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
.to(".content4 > div:nth-child(3)", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}, "-=0.4")
|
||||
.to(".content4 .container > div:first-child .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.2")
|
||||
.to(".content4 .container > .right .card:first-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > div:first-child .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6")
|
||||
.to(".content4 .container > .right .card:last-child", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8
|
||||
}, "-=0.6");
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
// 向上离开第四幕时显示
|
||||
@ -498,23 +501,23 @@ watch(
|
||||
ease: "power2.in"
|
||||
}
|
||||
})
|
||||
.to(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
stagger: {
|
||||
each: 0.1,
|
||||
from: "end"
|
||||
}
|
||||
})
|
||||
.to([
|
||||
".content4 > div:nth-child(3)",
|
||||
".content4 > div:nth-child(2)",
|
||||
".content4 > div:nth-child(1)"
|
||||
], {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
stagger: 0.1
|
||||
}, "-=0.3");
|
||||
.to(".content4 .container .card", {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
stagger: {
|
||||
each: 0.1,
|
||||
from: "end"
|
||||
}
|
||||
})
|
||||
.to([
|
||||
".content4 > div:nth-child(3)",
|
||||
".content4 > div:nth-child(2)",
|
||||
".content4 > div:nth-child(1)"
|
||||
], {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
stagger: 0.1
|
||||
}, "-=0.3");
|
||||
}
|
||||
});
|
||||
}, main.value);
|
||||
@ -525,24 +528,9 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
|
||||
{{ t('home.nav.home') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'company' }" @click="handleTabClick('company')">
|
||||
{{ t('home.nav.company') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
|
||||
{{ t('home.nav.business') }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main ref="main">
|
||||
<div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
|
||||
<div class="scroll-down" :class="{ hide: !scrollDownVisible }">{{ t('home.scroll.tip') }}</div>
|
||||
<section className="panel first-panel">
|
||||
|
||||
<n-carousel autoplay :interval="5000" class="no-hover">
|
||||
@ -594,7 +582,8 @@ watch(
|
||||
<div class="text-[#455363] text-[16px] mt-[31px] mr-[30px]">
|
||||
<img class="w-[180px] h-[180px]" src="@/assets/image/jj1.png" alt="logo" />
|
||||
<div class="line"></div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.data.title') }}</div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
|
||||
t('home.section3.features.data.title') }}</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
|
||||
{{ t('home.section3.features.data.desc') }}
|
||||
</div>
|
||||
@ -602,7 +591,8 @@ watch(
|
||||
<div class="text-[#455363] text-[16px] mt-[31px] mr-[30px]">
|
||||
<img class="w-[180px] h-[180px]" src="@/assets/image/jj2.png" alt="logo" />
|
||||
<div class="line"></div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.ai.title') }}</div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.ai.title')
|
||||
}}</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
|
||||
{{ t('home.section3.features.ai.desc') }}
|
||||
</div>
|
||||
@ -610,7 +600,8 @@ watch(
|
||||
<div class="text-[#455363] text-[16px] mt-[31px] mr-[30px]">
|
||||
<img class="w-[180px] h-[180px]" src="@/assets/image/jj3.png" alt="logo" />
|
||||
<div class="line"></div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.cloud.title') }}</div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
|
||||
t('home.section3.features.cloud.title') }}</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
|
||||
{{ t('home.section3.features.cloud.desc') }}
|
||||
</div>
|
||||
@ -618,7 +609,8 @@ watch(
|
||||
<div class="text-[#455363] text-[16px] mt-[31px] mr-[30px]">
|
||||
<img class="w-[180px] h-[180px]" src="@/assets/image/jj4.png" alt="logo" />
|
||||
<div class="line"></div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.cooperation.title') }}</div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
|
||||
t('home.section3.features.cooperation.title') }}</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
|
||||
{{ t('home.section3.features.cooperation.desc') }}
|
||||
</div>
|
||||
@ -626,7 +618,8 @@ watch(
|
||||
<div class="text-[#455363] text-[16px] mt-[31px] mr-[30px]">
|
||||
<img class="w-[180px] h-[180px]" src="@/assets/image/jj5.png" alt="logo" />
|
||||
<div class="line "></div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{ t('home.section3.features.promotion.title') }}</div>
|
||||
<div class="text-[#10253E] text-[20px] max-w-[200px] break-words">{{
|
||||
t('home.section3.features.promotion.title') }}</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[14px] max-w-[200px] break-words">
|
||||
{{ t('home.section3.features.promotion.desc') }}
|
||||
</div>
|
||||
@ -700,8 +693,8 @@ watch(
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<img class="copyright" src="@/assets/image/cp.png" alt="logo" />
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@ -724,11 +717,12 @@ watch(
|
||||
animation: float 2s ease-in-out infinite;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
min-width: 122px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 122px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@ -736,20 +730,25 @@ align-items: center;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-50%, -10px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep .n-carousel__dot{
|
||||
:deep .n-carousel__dot {
|
||||
background-color: #DDDDDD !important;
|
||||
}
|
||||
:deep .n-carousel__dot--active{
|
||||
|
||||
:deep .n-carousel__dot--active {
|
||||
background-color: #8B59F7 !important;
|
||||
}
|
||||
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
@ -1017,12 +1016,14 @@ align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 23px;
|
||||
}
|
||||
.footer-content{
|
||||
|
||||
.footer-content {
|
||||
height: 90px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.copyright{
|
||||
|
||||
.copyright {
|
||||
width: 232px;
|
||||
height: 22pxpx;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user