836 lines
23 KiB
Vue
836 lines
23 KiB
Vue
<template>
|
||
<div class="page-container">
|
||
<n-divider class="divider1" vertical />
|
||
<n-divider class="divider5" vertical />
|
||
<header className="header flex items-center justify-between">
|
||
<div class="logo">
|
||
<img src="@/assets/image/logo.png" alt="logo" />
|
||
</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 === 'businessintroduction' }"
|
||
@click="handleTabClick('businessintroduction')"
|
||
>
|
||
{{ $t("home.nav.businessintroduction") }}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<section class="relative pb-[1020px]">
|
||
<div class="absolute top-[0px] right-[0px]">
|
||
<img
|
||
src="@/assets/image/businessintroduction/375/bg-6.png"
|
||
class="w-[1920px]"
|
||
/>
|
||
</div>
|
||
|
||
<div class="pt-[2345px]">
|
||
<div
|
||
class="w-full title ml-[188px]"
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[0].value = el;
|
||
}
|
||
"
|
||
>
|
||
<div>{{ $t("businessintroduction.hero.title1") }}</div>
|
||
<div>{{ $t("businessintroduction.hero.title2") }}</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[1].value = el;
|
||
}
|
||
"
|
||
class="text-[51px] text-[#8B59F7] w-[1413px] ml-[188px] mt-[55px]"
|
||
>
|
||
{{ $t("businessintroduction.hero.desc") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute bottom-[-260px] left-[0px]">
|
||
<img
|
||
src="@/assets/image/businessintroduction/375/bg-7.png"
|
||
class="w-[1405px] h-[1428px]"
|
||
/>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[3].value = el;
|
||
}
|
||
"
|
||
class="absolute bottom-[-376px] right-[0px] z-4"
|
||
>
|
||
<img
|
||
src="@/assets/image/businessintroduction/375/bg-2.png"
|
||
class="w-[1039px]"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-sec relative">
|
||
<div class="flex flex-wrap justify-center pt-[480px]">
|
||
<div class="w-full px-[184px]">
|
||
<div class="text-[#8B59F7] text-[72px] font-semibold">
|
||
{{ $t("businessintroduction.industry.label") }}
|
||
</div>
|
||
</div>
|
||
<div class="w-full title mt-[87px] px-[184px]">
|
||
<div>
|
||
{{ $t("businessintroduction.industry.title").split("，")[0] }}
|
||
</div>
|
||
<div>
|
||
{{ $t("businessintroduction.industry.title").split("，")[1] }}
|
||
</div>
|
||
</div>
|
||
<div class="w-full px-[184px] mt-[159px]">
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[4].value = el;
|
||
}
|
||
"
|
||
class="text-[#455363] text-[72px] pr-[139px]"
|
||
>
|
||
{{ $t("businessintroduction.industry.desc") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="w-full mt-[287px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
|
||
>
|
||
<div>
|
||
{{ $t("businessintroduction.industry.challenges.title") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full px-[184px] flex flex-wrap">
|
||
<div
|
||
v-for="(item, index) in challengeItems"
|
||
:key="index"
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[5 + index].value = el;
|
||
}
|
||
"
|
||
class="w-full mt-[154px] flex flex-wrap text-[72px]"
|
||
>
|
||
<div
|
||
class="w-full font-semibold text-[82px] text-[#455363] flex flex-wrap items-center"
|
||
>
|
||
<img
|
||
class="w-[82px] h-[82px] mr-[51px]"
|
||
src="@/assets/image/businessintroduction/375/icon-y.png"
|
||
/>
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="w-full mt-[15px] pl-[133px] text-[#455363]">
|
||
{{ item.desc }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[9].value = el;
|
||
}
|
||
"
|
||
class="w-full mt-[160px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
|
||
>
|
||
<div>
|
||
{{
|
||
$t("businessintroduction.industry.opportunity.title").split(
|
||
"："
|
||
)[0]
|
||
}}：
|
||
</div>
|
||
<div>
|
||
{{
|
||
$t("businessintroduction.industry.opportunity.title").split(
|
||
"："
|
||
)[1]
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[10].value = el;
|
||
}
|
||
"
|
||
class="w-full mt-[154px] px-[184px] text-[72px] text-[#455363] leading-[102px] mb-[379px]"
|
||
>
|
||
<div>
|
||
{{ $t("businessintroduction.industry.opportunity.desc") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="relative" style="background: #fff">
|
||
<div class="flex flex-wrap justify-center">
|
||
<div class="w-full px-[184px] mt-[369px]">
|
||
<div class="text-[#8B59F7] text-[72px] font-semibold">
|
||
{{ $t("businessintroduction.solution.label") }}
|
||
</div>
|
||
</div>
|
||
<div class="w-full title mt-[87px] px-[184px]">
|
||
<div>
|
||
{{ $t("businessintroduction.solution.title").split("，")[0] }}
|
||
</div>
|
||
<div>
|
||
{{ $t("businessintroduction.solution.title").split("，")[1] }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-[230px] mb-[399px] overflow-hidden">
|
||
<img
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[11].value = el;
|
||
}
|
||
"
|
||
class="w-[1715px]"
|
||
src="@/assets/image/businessintroduction/375/imageshow-2.png"
|
||
/>
|
||
</div>
|
||
<div class="w-full px-[184px]">
|
||
<img
|
||
class="w-[306px] h-[229px]"
|
||
src="@/assets/image/businessintroduction/375/icon-l.png"
|
||
/>
|
||
|
||
<div
|
||
class="w-full mt-[102px] text-[#10253E] text-[82px] font-semibold"
|
||
>
|
||
{{ $t("businessintroduction.solution.features.precision.title") }}
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[12].value = el;
|
||
}
|
||
"
|
||
class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
|
||
>
|
||
{{ $t("businessintroduction.solution.features.precision.desc") }}
|
||
</div>
|
||
</div>
|
||
<div class="w-full px-[184px] mt-[410px]">
|
||
<img
|
||
class="w-[222px] h-[198px]"
|
||
src="@/assets/image/businessintroduction/375/icon-k.png"
|
||
/>
|
||
|
||
<div
|
||
class="w-full mt-[128px] text-[#10253E] text-[82px] font-semibold"
|
||
>
|
||
{{
|
||
$t("businessintroduction.solution.features.monetization.title")
|
||
}}
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[13].value = el;
|
||
}
|
||
"
|
||
class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
|
||
>
|
||
{{
|
||
$t("businessintroduction.solution.features.monetization.desc")
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="w-full px-[184px] mt-[410px] mb-[379px]">
|
||
<img
|
||
class="w-[227px] h-[222px]"
|
||
src="@/assets/image/businessintroduction/375/icon-h.png"
|
||
/>
|
||
|
||
<div
|
||
class="w-full mt-[123px] text-[#10253E] text-[82px] font-semibold"
|
||
>
|
||
{{
|
||
$t("businessintroduction.solution.features.interaction.title")
|
||
}}
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[14].value = el;
|
||
}
|
||
"
|
||
class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
|
||
>
|
||
{{
|
||
$t("businessintroduction.solution.features.interaction.desc")
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="relative" style="background: #f8f9ff">
|
||
<div class="flex flex-wrap justify-center relative pb-[875px]">
|
||
<div class="w-full px-[184px] mt-[379px]">
|
||
<div class="text-[#8B59F7] text-[72px]">
|
||
{{ $t("businessintroduction.vision.label") }}
|
||
</div>
|
||
</div>
|
||
<div class="w-full title mt-[87px] px-[184px]">
|
||
<div>{{ $t("businessintroduction.vision.title") }}</div>
|
||
</div>
|
||
<div class="w-full px-[184px] mt-[159px]">
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[15].value = el;
|
||
}
|
||
"
|
||
class="text-[#455363] text-[72px] pr-[112px]"
|
||
>
|
||
{{ $t("businessintroduction.vision.desc") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="w-full mt-[287px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
|
||
>
|
||
<div>{{ $t("businessintroduction.vision.community.title") }}</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[16].value = el;
|
||
}
|
||
"
|
||
class="w-full mt-[154px] px-[184px] text-[72px] text-[#455363]"
|
||
>
|
||
<div>
|
||
{{ $t("businessintroduction.vision.community.desc") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute bottom-[-180px]">
|
||
<img
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[17].value = el;
|
||
}
|
||
"
|
||
class="w-[1715px]"
|
||
src="@/assets/image/businessintroduction/375/imageshow-1.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-five h-[4562px] pt-[379px] relative">
|
||
<div class="w-full px-[184px]">
|
||
<div class="text-[#fff] text-[92px] font-semibold">
|
||
<div>
|
||
{{ $t("businessintroduction.cooperation.title").split(",")[0] }}
|
||
</div>
|
||
<div>
|
||
{{ $t("businessintroduction.cooperation.title").split(",")[1] }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[18].value = el;
|
||
}
|
||
"
|
||
class="w-full px-[184px]"
|
||
>
|
||
<div class="w-full mt-[288px] text-[#fff] text-[82px]">
|
||
{{ $t("businessintroduction.cooperation.timeline.year2025.title") }}
|
||
</div>
|
||
<div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
|
||
{{ $t("businessintroduction.cooperation.timeline.year2025.desc") }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[19].value = el;
|
||
}
|
||
"
|
||
class="w-full px-[184px] mt-[80px]"
|
||
>
|
||
<div class="w-full mt-[159px] text-[#fff] text-[82px]">
|
||
{{ $t("businessintroduction.cooperation.timeline.year2026.title") }}
|
||
</div>
|
||
<div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
|
||
{{ $t("businessintroduction.cooperation.timeline.year2026.desc") }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[20].value = el;
|
||
}
|
||
"
|
||
class="w-full px-[184px] mt-[80px]"
|
||
>
|
||
<div class="w-full mt-[154px] text-[#fff] text-[82px]">
|
||
{{ $t("businessintroduction.cooperation.timeline.year2027.title") }}
|
||
</div>
|
||
<div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
|
||
{{ $t("businessintroduction.cooperation.timeline.year2027.desc") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute bottom-[-10px] right-[0px] z-5">
|
||
<img
|
||
src="@/assets/image/businessintroduction/375/bg-5.png"
|
||
class="h-[361px]"
|
||
/>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<div class="flex flex-wrap justify-center">
|
||
<div class="w-full px-[184px] mt-[300px]">
|
||
<div class="text-[#8B59F7] text-[92px] font-semibold">
|
||
{{ $t("businessintroduction.incubation.title") }}
|
||
</div>
|
||
<div class="text-[#8B59F7] text-[92px] font-semibold">
|
||
{{ $t("businessintroduction.incubation.subtitle") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full px-[184px] mt-[130px]">
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[21].value = el;
|
||
}
|
||
"
|
||
class="text-[#455363] text-[72px] pr-[57px] leading-[102px]"
|
||
>
|
||
{{ $t("businessintroduction.incubation.desc") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="w-full px-[184px] flex flex-wrap justify-between mt-[440px] mb-[384px]"
|
||
>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[22].value = el;
|
||
}
|
||
"
|
||
class="w-full flex flex-wrap text-[72px]"
|
||
>
|
||
<div class="w-full">
|
||
<img
|
||
class="w-[229px] h-[222px]"
|
||
src="@/assets/image/businessintroduction/375/icon-s.png"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="w-full font-semibold mt-[123px] text-[#10253E] text-[82px]"
|
||
>
|
||
{{ $t("businessintroduction.incubation.features.fans.title") }}
|
||
</div>
|
||
<div class="mt-[87px]">
|
||
{{ $t("businessintroduction.incubation.features.fans.desc") }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[23].value = el;
|
||
}
|
||
"
|
||
class="w-full flex flex-wrap text-[72px]"
|
||
>
|
||
<div class="w-full mt-[410px]">
|
||
<img
|
||
class="w-[218px] h-[222px]"
|
||
src="@/assets/image/businessintroduction/375/icon-c.png"
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
class="w-full font-semibold mt-[123px] text-[#10253E] text-[82px]"
|
||
>
|
||
{{ $t("businessintroduction.incubation.features.kol.title") }}
|
||
</div>
|
||
<div class="mt-[87px]">
|
||
{{ $t("businessintroduction.incubation.features.kol.desc") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section style="background: #f8f9ff">
|
||
<div class="flex flex-wrap justify-center">
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[24].value = el;
|
||
}
|
||
"
|
||
class="w-full px-[184px] mt-[364px]"
|
||
>
|
||
<div class="text-[#8B59F7] text-[92px] font-semibold">
|
||
<div>{{ $t("businessintroduction.exposure.title") }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
:ref="
|
||
(el) => {
|
||
moveRefs[25].value = el;
|
||
}
|
||
"
|
||
class="w-full px-[184px] mt-[154px]"
|
||
>
|
||
<div class="text-[#455363] text-[72px] pr-[57px]">
|
||
{{ $t("businessintroduction.exposure.desc") }}
|
||
</div>
|
||
</div>
|
||
<div class="mt-[46px] mb-[246px] px-[108px]">
|
||
<div
|
||
v-for="(item, idx) in state.marqueeArr"
|
||
:key="idx"
|
||
class="w-full flex flex-wrap justify-center carousel-item"
|
||
>
|
||
<img class="carousel-image" :src="item.imgUrl" />
|
||
<div class="carousel-title w-full">
|
||
<div>{{ item.title }}</div>
|
||
</div>
|
||
<div class="carousel-subtitle">
|
||
<div>{{ item.subTitle }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section style="background: #fff" class="flex flex-wrap justify-center">
|
||
<img
|
||
class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
|
||
src="@/assets/image/image-footer.png"
|
||
alt="logo"
|
||
/>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { NDivider } from "naive-ui";
|
||
import { onUnmounted, ref, onMounted, reactive, nextTick, computed } from "vue";
|
||
import gsap from "gsap";
|
||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||
import { useHome } from "@/store/home/index.js";
|
||
import { useTransitionComposable } from "@/composables/transition-composable";
|
||
import { useI18n } from "vue-i18n";
|
||
|
||
// Define component custom events
|
||
defineEmits(["sendCode"]);
|
||
|
||
// Register ScrollTrigger plugin
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
const { t } = useI18n();
|
||
const { transitionState } = useTransitionComposable();
|
||
|
||
const moveRefs = ref(
|
||
Array(27)
|
||
.fill(null)
|
||
.map(() => ref(null))
|
||
);
|
||
const { currentTab } = useHome();
|
||
let ctx;
|
||
|
||
// Import images
|
||
import imageshow3 from "@/assets/image/businessintroduction/375/imageshow-3.png";
|
||
import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
|
||
import imageshow5 from "@/assets/image/businessintroduction/375/imageshow-5.png";
|
||
|
||
const state = reactive({
|
||
marqueeArr: computed(() => [
|
||
{
|
||
title: t("businessintroduction.exposure.timeline.year2025.title"),
|
||
subTitle: t("businessintroduction.exposure.timeline.year2025.desc"),
|
||
imgUrl: imageshow3,
|
||
},
|
||
{
|
||
title: t("businessintroduction.exposure.timeline.year2026.title"),
|
||
subTitle: t("businessintroduction.exposure.timeline.year2026.desc"),
|
||
imgUrl: imageshow4,
|
||
},
|
||
{
|
||
title: t("businessintroduction.exposure.timeline.year2027.title"),
|
||
subTitle: t("businessintroduction.exposure.timeline.year2027.desc"),
|
||
imgUrl: imageshow5,
|
||
},
|
||
]),
|
||
});
|
||
|
||
let carouselAnimation = null; // Store GSAP animation instance
|
||
|
||
// Listen for window size changes
|
||
onMounted(() => {
|
||
ctx = gsap.context(() => {
|
||
moveRefs.value.forEach((moveRef, index) => {
|
||
if (moveRef.value) {
|
||
// Modify initial state settings
|
||
gsap.set(moveRef.value, {
|
||
opacity: 0,
|
||
// Use translateX instead of x, and set initial position within element's own width
|
||
transform: `translateX(${index % 2 === 0 ? "-100%" : "100%"})`,
|
||
// Add overflow: hidden to ensure it doesn't affect layout
|
||
overflow: "hidden",
|
||
});
|
||
|
||
// Modify animation settings
|
||
gsap.to(moveRef.value, {
|
||
opacity: 1,
|
||
transform: "translateX(0)", // Use transform instead of x
|
||
duration: 1.2,
|
||
ease: "power2.out",
|
||
scrollTrigger: {
|
||
trigger: moveRef.value,
|
||
start: "top 80%",
|
||
end: "top 40%",
|
||
toggleActions: "play none none reverse",
|
||
markers: false,
|
||
},
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
if (ctx) {
|
||
ctx.revert();
|
||
}
|
||
ScrollTrigger.killAll();
|
||
if (carouselAnimation) {
|
||
carouselAnimation.kill();
|
||
}
|
||
});
|
||
|
||
import { useRouter } from "vue-router";
|
||
const router = useRouter();
|
||
const handleTabClick = (tab) => {
|
||
currentTab.value = tab;
|
||
router.push("/" + tab);
|
||
};
|
||
|
||
const goToSection = (i) => {
|
||
ctx.data.forEach((e) => {
|
||
if (e.vars && e.vars.id === "scrollTween") {
|
||
e.kill();
|
||
}
|
||
});
|
||
ctx.add(() => {
|
||
scrollTween = gsap.to(window, {
|
||
scrollTo: { y: i * window.innerHeight, autoKill: false },
|
||
duration: 1,
|
||
id: "scrollTween",
|
||
onComplete: () => (scrollTween = null),
|
||
overwrite: true,
|
||
});
|
||
});
|
||
};
|
||
|
||
// Prepare challenge items data
|
||
const challengeItems = computed(() => [
|
||
{
|
||
title: t("businessintroduction.industry.challenges.items.0.title"),
|
||
desc: t("businessintroduction.industry.challenges.items.0.desc"),
|
||
},
|
||
{
|
||
title: t("businessintroduction.industry.challenges.items.1.title"),
|
||
desc: t("businessintroduction.industry.challenges.items.1.desc"),
|
||
},
|
||
{
|
||
title: t("businessintroduction.industry.challenges.items.2.title"),
|
||
desc: t("businessintroduction.industry.challenges.items.2.desc"),
|
||
},
|
||
{
|
||
title: t("businessintroduction.industry.challenges.items.3.title"),
|
||
desc: t("businessintroduction.industry.challenges.items.3.desc"),
|
||
},
|
||
]);
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-container {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
}
|
||
.header {
|
||
width: 100%;
|
||
height: 260px;
|
||
position: fixed;
|
||
z-index: 10;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 0 138px;
|
||
background-color: #fff;
|
||
}
|
||
.logo {
|
||
img {
|
||
width: 399px;
|
||
height: 128px;
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
gap: 128px;
|
||
margin-right: 32px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 61px;
|
||
color: #000000;
|
||
cursor: pointer;
|
||
transition: color 0.3s ease;
|
||
padding: 4px 8px;
|
||
|
||
&.active {
|
||
color: #8b59fa;
|
||
}
|
||
|
||
&:hover {
|
||
color: #8b59fa;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 113px;
|
||
font-weight: 600;
|
||
color: #10253e;
|
||
line-height: 143px;
|
||
}
|
||
.subTitle {
|
||
line-height: 102px;
|
||
}
|
||
.section-first {
|
||
width: 100%;
|
||
background: url("@/assets/image/businessintroduction/375/bg-6.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.section-sec {
|
||
z-index: 2;
|
||
background: url("@/assets/image/businessintroduction/375/bg-12.png");
|
||
background-size: cover;
|
||
background-position: right;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.section-five {
|
||
background: url("@/assets/image/businessintroduction/375/bg-1.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.icon-langmul {
|
||
position: absolute;
|
||
bottom: -80px;
|
||
right: 0;
|
||
}
|
||
|
||
.arrow-btn {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.carousel-track {
|
||
display: flex;
|
||
will-change: transform;
|
||
cursor: grab;
|
||
user-select: none;
|
||
|
||
&:active {
|
||
cursor: grabbing;
|
||
}
|
||
}
|
||
|
||
.carousel-item {
|
||
margin-top: 154px;
|
||
padding: 46px 36px 118px 51px;
|
||
border-radius: 61px;
|
||
box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
.carousel-image {
|
||
width: 1623px;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.carousel-content {
|
||
padding: 0 20px 0 60px;
|
||
margin-top: 38px;
|
||
}
|
||
|
||
.carousel-title {
|
||
text-align: left;
|
||
font-size: 92px;
|
||
font-weight: 500;
|
||
margin-top: 87px;
|
||
}
|
||
|
||
.carousel-subtitle {
|
||
margin-top: 51px;
|
||
color: #455363;
|
||
font-size: 72px;
|
||
}
|
||
|
||
// Add a generic overflow control class
|
||
.overflow-hidden {
|
||
overflow: hidden;
|
||
}
|
||
.divider1 {
|
||
position: absolute;
|
||
z-index: 3;
|
||
left: 64px;
|
||
width: 1px;
|
||
height: 100%;
|
||
background-color: rgba(230, 234, 238, 0.5) !important;
|
||
}
|
||
|
||
.divider5 {
|
||
position: absolute;
|
||
z-index: 3;
|
||
right: 60px;
|
||
width: 1px;
|
||
height: 100%;
|
||
background-color: rgba(230, 234, 238, 0.5) !important;
|
||
}
|
||
</style>
|