添加投资者

This commit is contained in:
齐斌 2025-03-14 15:24:47 +08:00
parent b54df2d490
commit 883eb6193b
9 changed files with 1186 additions and 135 deletions

BIN
src/assets/image/dbs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 815 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 B

BIN
src/assets/image/dt1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 KiB

BIN
src/assets/image/dt2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 263 KiB

BIN
src/assets/image/dt3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

BIN
src/assets/image/tzls.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

View File

@ -5,6 +5,7 @@ import { useWindowSize } from "@vueuse/core";
import size1920 from "@/views/investor/size1920/index.vue";
import size1440 from "@/views/investor/size1440/index.vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

View File

@ -0,0 +1,811 @@
<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, NGrid, NGi } 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 ">
投资者关系
</div>
<div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] ">
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 class="pl-[505px] pr-[490px]">
<div class="w-52px h-7px bg-[#8B59F7]">
</div>
<div class="text-[#10253E] text-[40px] mt-[17px] font-bold">
最新动态
</div>
<div class="flex mt-[46px]">
<div class="carousel-item">
<img class="carousel-image relative z-10" src="@/assets/image/dt1.png" />
<div class="carousel-content">
<div class="carousel-title font-bold flex justify-between">
<div>最新财务</div>
<div class="text-[#9F9F9F] text-[14px]">2023年3月29日</div>
</div>
<div class="carousel-subtitle">
<div>2022年第四季度和2022年全年收益结果</div>
</div>
<div class="flex items-center mt-[10px] cursor-pointer">
<img class="w-[12px] h-[12px]" src="@/assets/image/downlink.png" alt="cl" />
<div class="text-[#8B59F7] text-[14px] relative z-10">收益公布</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="carousel-image relative z-10" src="@/assets/image/dt2.png" />
<div class="carousel-content">
<div class="carousel-title font-bold flex justify-between">
<div>最近的事件</div>
<div class="text-[#9F9F9F] text-[14px]">2024年3月13日</div>
</div>
<div class="carousel-subtitle">
<div>Minim宣布与e2Companies达成合并协议</div>
</div>
<div class="flex items-center mt-[10px] cursor-pointer">
<img class="w-[12px] h-[12px]" src="@/assets/image/downlink.png" alt="cl" />
<div class="text-[#8B59F7] text-[14px] relative z-10">合并协议-新闻稿最终稿2024年12月3日</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="carousel-image relative z-10" src="@/assets/image/dt3.png" />
<div class="carousel-content">
<div class="carousel-title font-bold flex justify-between">
<div>股票报价</div>
</div>
<div class="carousel-subtitle">
<div>TradingView的MINM报价</div>
</div>
<div class="flex items-center mt-[10px] cursor-pointer">
<img class="w-[12px] h-[12px]" src="@/assets/image/downlink.png" alt="cl" />
<div class="text-[#8B59F7] text-[14px] relative z-10">MINM报价
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content2 relative flex items-center pb-[120px] pt-[168px] bg-[#F8F9FF]">
<n-divider class="divider1" vertical />
<div class="divider2" style=""></div>
<div class="divider3" style=""></div>
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="flex flex-col">
<div class="pl-[505px] pr-[490px] z-3">
<div class="w-52px h-7px bg-[#8B59F7]">
</div>
<div class="text-[#10253E] text-[40px] mt-[17px] font-bold">
财务数据
</div>
</div>
<div class="ml-[494px] w-920px min-h-473px bg-[#fff] mt-[55px] "
style="box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.16);border-radius: 8px;padding: 5px;">
<n-grid x-gap="4" y-gap="5" :cols="4">
<n-gi>
<div class="font-bold bg-[#fff] h-[47px] rounded-[4px]">
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#C6ACFF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#8B59F7] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#6520FA] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]">
2021
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
利润报告
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
收益报告
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span class="text-[#9F9F9F]">Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
财报电话会议
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span class="text-[#9F9F9F]">Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
10-Q/10-K
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
年度报告
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2021
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
年度会议
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2021
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
特别股东大会
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2021
</div>
</n-gi>
<n-gi>
<div class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
委托书
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2021
</div>
</n-gi>
</n-grid>
</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] ">
{{ t('businessintroduction.vision.label') }}
</div>
<div class="text-[#10253E] text-[40px] font-bold">
{{ t('businessintroduction.vision.title') }}
</div>
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] ">
{{ t('businessintroduction.vision.desc') }}
</div>
<div class="text-[#8B59F7] text-[22px] mt-[64px] font-bold">
{{ t('businessintroduction.vision.community.title') }}
</div>
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] ">
{{ 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] font-bold">
{{ t('businessintroduction.cooperation.title') }}
</div>
<div class="text-[#FFFFFF] text-[22px] mt-[100px] font-bold">
{{ t('businessintroduction.cooperation.timeline.year2025.title') }}
</div>
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] ">
{{ t('businessintroduction.cooperation.timeline.year2025.desc') }}
</div>
<div class="text-[#FFFFFF] text-[22px] mt-[30px] font-bold">
{{ t('businessintroduction.cooperation.timeline.year2026.title') }}
</div>
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] ">
{{ t('businessintroduction.cooperation.timeline.year2026.desc') }}
</div>
<div class="text-[#FFFFFF] text-[22px] mt-[30px] font-bold">
{{ t('businessintroduction.cooperation.timeline.year2027.title') }}
</div>
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] ">
{{ 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] font-bold">
{{ t('businessintroduction.incubation.title') }}
</div>
<div class="text-[#8B59F7] text-[22px] font-bold">
{{ t('businessintroduction.incubation.subtitle') }}
</div>
<div class="text-[#455363] text-[16px] max-w-[402px] mt-[50px] ">
{{ 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] ">
{{ 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] ">
{{ 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] font-bold">
{{ t('businessintroduction.exposure.title') }}
</div>
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] ">
{{ 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;
width: 100%;
align-items: end;
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>

View File

@ -12,7 +12,7 @@ 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 { NDivider, NPopselect, NGrid, NGi, NButton } from "naive-ui";
import { useLanguage } from "@/utils/changeLanguage.js";
// ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
@ -99,10 +99,10 @@ onUnmounted(() => {
<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 class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold ">
投资者关系
</div>
<div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
<div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] ">
Minim纳斯达克股票代码MINM财务状况
</div>
</div>
@ -114,96 +114,362 @@ onUnmounted(() => {
<div class="divider3" style=""></div>
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="pl-[505px] pr-[490px]">
<div class="w-52px h-7px bg-[#8B59F7]">
</div>
<div class="text-[#10253E] text-[40px] mt-[17px] font-bold">
最新动态
</div>
<div class="flex mt-[46px]">
<div class="carousel-item">
<img class="carousel-image relative z-10" src="@/assets/image/dt1.png" />
<div class="carousel-content">
<div class="carousel-title font-bold flex justify-between">
<div>最新财务</div>
<div class="text-[#9F9F9F] text-[14px]">2023年3月29日</div>
</div>
<div class="carousel-subtitle">
<div>2022年第四季度和2022年全年收益结果</div>
</div>
<div class="flex items-center mt-[10px] cursor-pointer">
<img class="w-[12px] h-[12px]" src="@/assets/image/downlink.png" alt="cl" />
<div class="text-[#8B59F7] text-[14px] relative z-10">收益公布</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="carousel-image relative z-10" src="@/assets/image/dt2.png" />
<div class="carousel-content">
<div class="carousel-title font-bold flex justify-between">
<div>最近的事件</div>
<div class="text-[#9F9F9F] text-[14px]">2024年3月13日</div>
</div>
<div class="carousel-subtitle">
<div>Minim宣布与e2Companies达成合并协议</div>
</div>
<div class="flex items-center mt-[10px] cursor-pointer">
<img class="w-[12px] h-[12px]" src="@/assets/image/downlink.png" alt="cl" />
<div class="text-[#8B59F7] text-[14px] relative z-10">合并协议-新闻稿最终稿2024年12月3日</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="carousel-image relative z-10" src="@/assets/image/dt3.png" />
<div class="carousel-content">
<div class="carousel-title font-bold flex justify-between">
<div>股票报价</div>
</div>
<div class="carousel-subtitle">
<div>TradingView的MINM报价</div>
</div>
<div class="flex items-center mt-[10px] cursor-pointer">
<img class="w-[12px] h-[12px]" src="@/assets/image/downlink.png" alt="cl" />
<div class="text-[#8B59F7] text-[14px] relative z-10">MINM报价
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content2 relative flex items-center pb-[120px] pt-[168px] bg-[#fff] float-up">
<div class="content2 relative flex items-center pb-[120px] pt-[148px] bg-[#F8F9FF]">
<n-divider class="divider1" vertical />
<div class="divider2" style=""></div>
<div class="divider3" style=""></div>
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="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 class="flex flex-col">
<div class="pl-[505px] pr-[490px] z-3">
<div class="w-52px h-7px bg-[#8B59F7]">
</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 class="text-[#10253E] text-[40px] mt-[17px] font-bold">
财务数据
</div>
</div>
<div class="ml-[494px] w-920px min-h-473px bg-[#fff] mt-[55px] "
style="box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.16);border-radius: 8px;padding: 5px;">
<n-grid x-gap="4" y-gap="5" :cols="4">
<n-gi>
<div class="font-bold bg-[#fff] h-[47px] rounded-[4px]">
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#C6ACFF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#8B59F7] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#6520FA] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]">
2021
</div>
</n-gi>
</div>
</div>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
利润报告
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<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>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
收益报告
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span class="text-[#9F9F9F]">Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
财报电话会议
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span class="text-[#9F9F9F]">Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
10-Q/10-K
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
<span>Q1</span>
<span>Q2</span>
<span>Q3</span>
<span>Q4</span>
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
年度报告
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2021
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
年度会议
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2021
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
特别股东大会
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2021
</div>
</n-gi>
<n-gi>
<div
class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]">
委托书
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]">
2023
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2022
</div>
</n-gi>
<n-gi>
<div
class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
2021
</div>
</n-gi>
</n-grid>
</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
class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] ml-60% flex items-center">
<div class="flex items-center ">
投资者沟通指南 <span class="ml-[20px]">></span>
</div>
</div>
</div>
</div>
<div class="content4 relative bg-[#fff] pb-[146px] overflow-hidden float-up">
<n-divider class="divider1" vertical />
@ -211,67 +477,41 @@ onUnmounted(() => {
<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') }}
<img src="@/assets/image/tzls.png" alt="cl" />
<div class="absolute top-[86px] pl-[505px] pr-[490px] z-4 flex justify-between items-center">
<div class="w-[407px]">
<div class="w-52px h-7px bg-[#8B59F7]">
</div>
<div class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold">
行情走势
</div>
<div class="text-[#D1D1D1] text-[14px] mt-[56px] max-w-[407px] ">
SEC文件是提交给美国证券交易委员会SEC的文 上市公司和某些内部人士必须定期向美国证券交易 委员会提交文件这些文件可以通过美国证券交易委员 会的在线数据库获得
</div>
<div class="text-[#D1D1D1] text-[14px] mt-[20px] max-w-[407px] ">
通过在下面进行选择您将离开Minim网站Minim对您 可以通过此网站访问的任何其他网站不作任何陈述 您访问非Minim网站时即使是可能包含Minim徽标的网
请理解它独立于MinimMinim无法控制该网站上的 内容此外链接到非Minim网站并不意味着Minim认可 或接受对该网站的内容或使用的任何责任
</div>
<div
class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center">
<div class="flex items-center ">
查看所有SEC文件 <span class="ml-[20px]">></span>
</div>
</div>
</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 class="ml-[42px]">
<img class="w-[465px] h-[473px]" src="@/assets/image/dbs.png" alt="cl" />
</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 class="pl-[505px] pr-[490px] z-4">
<div class="w-52px h-7px bg-[#8B59F7]">
</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 class="text-[#10253E] text-[40px] mt-[17px] font-bold">
董事会
</div>
</div>
</div>
<div class="content5 relative bg-[#F8F9FF] overflow-hidden float-up">
<n-divider class="divider1" vertical />
@ -280,11 +520,11 @@ onUnmounted(() => {
<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">
<div class="text-[#8B59F7] text-[22px] font-bold">
{{ t('businessintroduction.exposure.title') }}
</div>
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] ">
{{ t('businessintroduction.exposure.desc') }}
</div>
@ -509,10 +749,9 @@ onUnmounted(() => {
.carousel-title {
font-size: 20px;
width: 100%;
align-items: end;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;