556 lines
18 KiB
Vue
556 lines
18 KiB
Vue
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
onUnmounted,
|
|||
|
|
ref,
|
|||
|
|
watch,
|
|||
|
|
reactive,
|
|||
|
|
onMounted
|
|||
|
|
} from "vue";
|
|||
|
|
import gsap from "gsap";
|
|||
|
|
import ScrollTrigger from "gsap/ScrollTrigger";
|
|||
|
|
import { useHome } from "@/store/home/index.js";
|
|||
|
|
import { useI18n } from "vue-i18n";
|
|||
|
|
import { useTransitionComposable } from "@/composables/transition-composable";
|
|||
|
|
import { useRouter } from "vue-router";
|
|||
|
|
import { NDivider, NPopselect } from "naive-ui";
|
|||
|
|
import { useLanguage } from "@/utils/changeLanguage.js";
|
|||
|
|
// 注册 ScrollTrigger 插件
|
|||
|
|
gsap.registerPlugin(ScrollTrigger);
|
|||
|
|
const { currentTab } = useHome();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const { transitionState } =
|
|||
|
|
useTransitionComposable();
|
|||
|
|
const main = ref();
|
|||
|
|
let ctx;
|
|||
|
|
const {
|
|||
|
|
languageOptions,
|
|||
|
|
currentLanguage,
|
|||
|
|
currentLanguageLabel,
|
|||
|
|
changeLanguage,
|
|||
|
|
initLanguage,
|
|||
|
|
currentLang,
|
|||
|
|
currentBannerImages,
|
|||
|
|
t
|
|||
|
|
} = useLanguage();
|
|||
|
|
const handleTabClick = (tab) => {
|
|||
|
|
currentTab.value = tab;
|
|||
|
|
router.push("/" + tab);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
window.scrollTo(0, 0);
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
ctx?.revert(); // <- Easy Cleanup!
|
|||
|
|
});
|
|||
|
|
</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 ===
|
|||
|
|
'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 class="tab-item" :class="{
|
|||
|
|
active:
|
|||
|
|
currentTab === 'investor',
|
|||
|
|
}" @click="
|
|||
|
|
handleTabClick('investor')
|
|||
|
|
">
|
|||
|
|
{{ t("home.nav.investor") }}
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-item">
|
|||
|
|
<n-popselect v-model:value="currentLanguage" :options="languageOptions" @update:value="changeLanguage">
|
|||
|
|
<div class="language-display">
|
|||
|
|
{{ currentLanguageLabel }}
|
|||
|
|
<span class="language-arrow">▼</span>
|
|||
|
|
</div>
|
|||
|
|
</n-popselect>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<main ref="main" class="height-full">
|
|||
|
|
<div class="head relative">
|
|||
|
|
<img src="@/assets/image/tzgbg.png" alt="head" />
|
|||
|
|
<div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
|
|||
|
|
投资者关系
|
|||
|
|
</div>
|
|||
|
|
<div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
|
|||
|
|
Minim（纳斯达克股票代码：MINM）财务状况
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bg-[#F8F9FF]">
|
|||
|
|
<div class="content1 bg-#FFFFFF relative flex justify-center z-3 pb-[100px] flex-col pr-[10px] float-up">
|
|||
|
|
<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>
|
|||
|
|
<div class="content2 relative flex items-center pb-[120px] pt-[168px] bg-[#fff] float-up">
|
|||
|
|
<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="pl-[505px] pr-[490px] flex z-3">
|
|||
|
|
<div class="">
|
|||
|
|
<div class="text-[#8B59F7] text-[16px] text-animate">{{ t('businessintroduction.solution.label') }}</div>
|
|||
|
|
<div class="text-[#10253E] text-[40px] mt-[17px] text-animate font-bold">{{
|
|||
|
|
t('businessintroduction.solution.title') }}</div>
|
|||
|
|
<div class="flex justify-between items-center mt-[97px]">
|
|||
|
|
<div class="max-w-[412px] float-up">
|
|||
|
|
<img class="w-[64px] h-[48px]" src="@/assets/image/jxgb.png" alt="cl" />
|
|||
|
|
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
|||
|
|
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
|||
|
|
background-color: #8b59f7;
|
|||
|
|
" vertical />{{ t('businessintroduction.solution.features.precision.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
|||
|
|
{{ t('businessintroduction.solution.features.precision.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-animate">
|
|||
|
|
<img class="w-[495px] h-[212px] ml-[20px]" src="@/assets/image/xb.png" alt="cl" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex mt-[112px]">
|
|||
|
|
<div class="max-w-[412px] float-up">
|
|||
|
|
<img class="w-[58px] h-[50px]" src="@/assets/image/gz.png" alt="cl" />
|
|||
|
|
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
|||
|
|
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
|||
|
|
background-color: #8b59f7;
|
|||
|
|
" vertical />{{ t('businessintroduction.solution.features.monetization.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
|||
|
|
{{ t('businessintroduction.solution.features.monetization.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="max-w-[412px] ml-[55px] float-up">
|
|||
|
|
<img class="w-[46px] h-[46px]" src="@/assets/image/3dy.png" alt="cl" />
|
|||
|
|
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
|||
|
|
<n-divider class="absolute left-[-28px] top-[6px]" style="
|
|||
|
|
background-color: #8b59f7;
|
|||
|
|
" vertical />{{ t('businessintroduction.solution.features.interaction.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
|||
|
|
{{ t('businessintroduction.solution.features.interaction.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content3 relative overflow-hidden float-up">
|
|||
|
|
<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="relative bg-[#F8F9FF] flex flex-col mt-[119px]">
|
|||
|
|
<div class=" pl-[505px] pr-[490px] ">
|
|||
|
|
<div class="text-[#8B59F7] text-[16px] text-animate">
|
|||
|
|
{{ t('businessintroduction.vision.label') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#10253E] text-[40px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.vision.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
|
|||
|
|
{{ t('businessintroduction.vision.desc') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#8B59F7] text-[22px] mt-[64px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.vision.community.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
|
|||
|
|
{{ t('businessintroduction.vision.community.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="pl-[493px] pr-[490px]">
|
|||
|
|
<img class="w-[930px] h-[379px] mt-[30px] relative z-24" src="@/assets/image/qq.png" alt="cl" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="content4 relative bg-[#fff] pb-[146px] overflow-hidden float-up">
|
|||
|
|
<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 src="@/assets/image/dq.png" alt="cl" />
|
|||
|
|
<div class="absolute top-[86px] pl-[505px] pr-[490px] flex z-4 flex-col">
|
|||
|
|
<div class="text-[#FFFFFF] text-[22px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.cooperation.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#FFFFFF] text-[22px] mt-[100px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.cooperation.timeline.year2025.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
|
|||
|
|
{{ t('businessintroduction.cooperation.timeline.year2025.desc') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#FFFFFF] text-[22px] mt-[30px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.cooperation.timeline.year2026.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
|
|||
|
|
{{ t('businessintroduction.cooperation.timeline.year2026.desc') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#FFFFFF] text-[22px] mt-[30px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.cooperation.timeline.year2027.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
|
|||
|
|
{{ t('businessintroduction.cooperation.timeline.year2027.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex pl-[505px] pr-[490px] flex z-4">
|
|||
|
|
<div class="mr-[60px]">
|
|||
|
|
<div class="text-[#8B59F7] text-[22px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.incubation.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#8B59F7] text-[22px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.incubation.subtitle') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] text-[16px] max-w-[402px] mt-[50px] text-animate">
|
|||
|
|
{{ t('businessintroduction.incubation.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="max-w-[202px]">
|
|||
|
|
<img class="w-[58px] h-[50px]" src="@/assets/image/gpz.png" alt="cl" />
|
|||
|
|
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
|||
|
|
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
|||
|
|
background-color: #8b59f7;
|
|||
|
|
" vertical />{{ t('businessintroduction.incubation.features.fans.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
|||
|
|
{{ t('businessintroduction.incubation.features.fans.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="max-w-[202px] ml-[30px]">
|
|||
|
|
<img class="w-[58px] h-[50px]" src="@/assets/image/sm.png" alt="cl" />
|
|||
|
|
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
|||
|
|
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
|||
|
|
background-color: #8b59f7;
|
|||
|
|
" vertical />{{ t('businessintroduction.incubation.features.kol.title') }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
|||
|
|
{{ t('businessintroduction.incubation.features.kol.desc') }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="content5 relative bg-[#F8F9FF] overflow-hidden float-up">
|
|||
|
|
<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="mt-[93px] pb-[103px] carousel-container pl-[505px] pr-[490px] z-4">
|
|||
|
|
<div class="text-[#8B59F7] text-[22px] text-animate font-bold">
|
|||
|
|
{{ t('businessintroduction.exposure.title') }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
|
|||
|
|
{{ t('businessintroduction.exposure.desc') }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex">
|
|||
|
|
<div class="carousel-item cursor-pointer">
|
|||
|
|
<img class="carousel-image" src="@/assets/image/fp1.png" />
|
|||
|
|
<div class="carousel-content">
|
|||
|
|
<div class="carousel-title font-bold">
|
|||
|
|
<div>{{ t('businessintroduction.exposure.timeline.year2025.title') }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="carousel-subtitle">
|
|||
|
|
<div>{{ t('businessintroduction.exposure.timeline.year2025.desc') }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="carousel-item cursor-pointer">
|
|||
|
|
<img class="carousel-image" src="@/assets/image/fp2.png" />
|
|||
|
|
<div class="carousel-content">
|
|||
|
|
<div class="carousel-title font-bold">
|
|||
|
|
<div>{{ t('businessintroduction.exposure.timeline.year2026.title') }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="carousel-subtitle">
|
|||
|
|
<div>{{ t('businessintroduction.exposure.timeline.year2026.desc') }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="carousel-item cursor-pointer">
|
|||
|
|
<img class="carousel-image" src="@/assets/image/fp3.png" />
|
|||
|
|
<div class="carousel-content">
|
|||
|
|
<div class="carousel-title font-bold ">
|
|||
|
|
<div>{{ t('businessintroduction.exposure.timeline.year2027.title') }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="carousel-subtitle">
|
|||
|
|
<div>{{ t('businessintroduction.exposure.timeline.year2027.desc') }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
<footer>
|
|||
|
|
<div class="footer-content">
|
|||
|
|
<img class="copyright" src="@/assets/image/cp.png" alt="logo" />
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</template>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.header {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 65px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 10;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding: 0 10rem;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
background-color: rgba(230, 234, 238, 0.5) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider2 {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 3;
|
|||
|
|
left: 720px;
|
|||
|
|
width: 1px;
|
|||
|
|
height: 100vw;
|
|||
|
|
background-image: linear-gradient(to bottom,
|
|||
|
|
rgba(230, 234, 238, 0.5),
|
|||
|
|
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,
|
|||
|
|
rgba(230, 234, 238, 0.5),
|
|||
|
|
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,
|
|||
|
|
rgba(230, 234, 238, 0.5),
|
|||
|
|
transparent 50%);
|
|||
|
|
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
|||
|
|
background-repeat: repeat-y;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider5 {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 3;
|
|||
|
|
left: 1406px;
|
|||
|
|
width: 1px;
|
|||
|
|
height: 100vw;
|
|||
|
|
background-color: rgba(230, 234, 238, 0.5) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-content {
|
|||
|
|
height: 90px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.copyright {
|
|||
|
|
width: 232px;
|
|||
|
|
height: 22pxpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-container {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow-btn {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-track {
|
|||
|
|
display: flex;
|
|||
|
|
transition: transform 0.5s ease-in-out;
|
|||
|
|
will-change: transform;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-item {
|
|||
|
|
width: 287px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-right: 18px;
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
display: block;
|
|||
|
|
padding: 8px 8px 18px 8px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 3px 14px 1px rgba(0, 0, 0, 0.16);
|
|||
|
|
will-change: transform, opacity; // 优化动画性能
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-image {
|
|||
|
|
width: 428px;
|
|||
|
|
height: 259px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-content {
|
|||
|
|
padding: 0;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 1;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
max-height: calc(1.5em * 5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-subtitle {
|
|||
|
|
color: #455363;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 5;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加一个通用的溢出控制类
|
|||
|
|
.overflow-hidden {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 为所有可能需要动画的容器添加溢出隐藏
|
|||
|
|
[ref*="moveRef"] {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.language-arrow {
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
color: #10263E;
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item:hover .language-arrow {
|
|||
|
|
color: #8B59F7;
|
|||
|
|
}
|
|||
|
|
</style>
|