659 lines
19 KiB
Vue
659 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<div class="page-container">
|
|||
|
|
<n-divider class="divider1" vertical />
|
|||
|
|
<n-divider class="divider5" vertical />
|
|||
|
|
<AppHeader />
|
|||
|
|
|
|||
|
|
<main>
|
|||
|
|
<section style="background: #ffffff" className="relative">
|
|||
|
|
<div class="relative section-first h-[2221px] box-contain pt-[775px]">
|
|||
|
|
<div
|
|||
|
|
class="title ml-[188px]"
|
|||
|
|
:ref="
|
|||
|
|
(el) => {
|
|||
|
|
moveRefs[0].value = el;
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div>投资者关系</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
:ref="
|
|||
|
|
(el) => {
|
|||
|
|
moveRefs[1].value = el;
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
class="text-[35px] text-[#8B59F7] w-[735px] ml-[188px] mt-[50px]"
|
|||
|
|
>
|
|||
|
|
Minim（纳斯达克股票代码：MINM）财务状况
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<div class="flex flex-wrap justify-center">
|
|||
|
|
<div class="w-full px-[188px] mt-[222px]">
|
|||
|
|
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full title mt-[58px] px-[188px]">
|
|||
|
|
<div>最新动态</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-6"
|
|||
|
|
>
|
|||
|
|
<div ref="carouselTrack" class="carousel-track">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, idx) in getVisibleItems()"
|
|||
|
|
:key="idx"
|
|||
|
|
class="carousel-item"
|
|||
|
|
>
|
|||
|
|
<img class="carousel-image" :src="item.imgUrl" />
|
|||
|
|
<div class="carousel-title flex justify-between">
|
|||
|
|
<div>{{ item.title }}</div>
|
|||
|
|
<div v-if="item.date" class="text-[#9F9F9F] text-[35px]">
|
|||
|
|
{{ item.date }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="carousel-subtitle">
|
|||
|
|
<div>{{ item.subTitle }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="carousel-link flex items-center"
|
|||
|
|
@click="handleLink(item.linkUrl)"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
class="w-[30px] h-[30px] mr-[10px]"
|
|||
|
|
src="@/assets/image/investor/768/icon-l.png"
|
|||
|
|
/>
|
|||
|
|
<div>{{ item.link }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="bg-[#F8F9FF]">
|
|||
|
|
<div class="flex flex-wrap justify-center">
|
|||
|
|
<div class="w-full px-[188px] mt-[222px]">
|
|||
|
|
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full title mt-[58px] mb-[145px] px-[188px]">
|
|||
|
|
<div>财务数据</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="w-full px-[158px] mb-[57px]">
|
|||
|
|
<div
|
|||
|
|
class="bg-[#fff] flex w-full text-[40px] pa-[6px] shadow-[0_7px_50px_3px_rgba(0,0,0,0.16)] rounded-[20px]"
|
|||
|
|
>
|
|||
|
|
<div class="w-1/3 text-[#10263E] font-semibold">
|
|||
|
|
<div
|
|||
|
|
class="bg-[#fff] ma-[6px] px-[25px] py-[30px] min-h-[118px]"
|
|||
|
|
></div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
收益报告
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
财报电话会议
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
10-Q/10-K
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
年度报告
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
年度会议
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
特别股东大会
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
委托书
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-2/3 font-normal text-[#9F9F9F]">
|
|||
|
|
<div
|
|||
|
|
class="bg-[#C6ACFF] color-[#fff] ma-[6px] px-[25px] py-[30px] font-semibold"
|
|||
|
|
>
|
|||
|
|
<div>2023年</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
|
|||
|
|
>
|
|||
|
|
<div>Q1</div>
|
|||
|
|
<div>Q2</div>
|
|||
|
|
<div>Q3</div>
|
|||
|
|
<div>Q4</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
|
|||
|
|
>
|
|||
|
|
<div>Q1</div>
|
|||
|
|
<div>Q2</div>
|
|||
|
|
<div>Q3</div>
|
|||
|
|
<div>Q4</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
|
|||
|
|
>
|
|||
|
|
<div>Q1</div>
|
|||
|
|
<div>Q2</div>
|
|||
|
|
<div>Q3</div>
|
|||
|
|
<div>Q4</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
|
|||
|
|
>
|
|||
|
|
<div>Q1</div>
|
|||
|
|
<div>Q2</div>
|
|||
|
|
<div>Q3</div>
|
|||
|
|
<div>Q4</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
<div>2023年</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
<div>2023年</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
|||
|
|
<div>2023年</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
class="bg-[#8B59F7] mb-[228px] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
|
|||
|
|
@click="
|
|||
|
|
handleLink('https://www.minim.com/investor-relations/financials/')
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
投资者沟通指南
|
|||
|
|
<img
|
|||
|
|
class="w-[23px] h-[43px] ml-[50px]"
|
|||
|
|
src="@/assets/image/investor/768/icon-r-o.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<section class="section-four h-[2933px] color-[#D1D1D1] text-[40px]">
|
|||
|
|
<div class="flex flex-wrap justify-center">
|
|||
|
|
<div class="w-full px-[188px] mt-[222px]">
|
|||
|
|
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="w-full title mt-[58px] mb-[145px] px-[188px] color-[#D1D1D1]"
|
|||
|
|
>
|
|||
|
|
<div>行情走势</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="w-full px-[188px] mb-[57px]">
|
|||
|
|
SEC文件是提交给美国证券交易委员会（SEC）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full px-[188px] mb-[57px]">
|
|||
|
|
通过在下面进行选择，您将离开Minim网站。Minim对您可以通过此网站访问的任何其他网站不作任何陈述。当您访问非Minim网站时，即使是可能包含Minim徽标的网站，请理解它独立于Minim，Minim无法控制该网站上的内容。此外，链接到非Minim网站并不意味着Minim认可或接受对该网站的内容或使用的任何责任。
|
|||
|
|
</div>
|
|||
|
|
<div class="px-[188px] mb-[175px] flex flex-start w-full">
|
|||
|
|
<div
|
|||
|
|
class="bg-[#8B59F7] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
|
|||
|
|
@click="
|
|||
|
|
handleLink(
|
|||
|
|
'https://www.minim.com/investor-relations/financials/'
|
|||
|
|
)
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
查看所有SEC文件
|
|||
|
|
<img
|
|||
|
|
class="w-[23px] h-[43px] ml-[50px]"
|
|||
|
|
src="@/assets/image/investor/768/icon-r-o.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="overflow-hidden">
|
|||
|
|
<img
|
|||
|
|
class="w-[1608px] h-[1010px]"
|
|||
|
|
src="@/assets/image/investor/768/imageshow-6.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<div class="flex flex-wrap justify-center">
|
|||
|
|
<div class="w-full px-[188px] mt-[222px]">
|
|||
|
|
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full title mt-[58px] px-[188px]">
|
|||
|
|
<div>董事会</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="w-full flex justify-between mt-[140px] mb-[230px] px-[188px]"
|
|||
|
|
>
|
|||
|
|
<div class="w-[745px] h-[433px] div-bg3 flex flex-wrap">
|
|||
|
|
<div class="text-[50px] text-[#fff] font-semibold">
|
|||
|
|
帕特里克·里瓦德
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full text-[38px] text-[#EBEBEB] tracking-[4px]">
|
|||
|
|
董事会董事
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full text-[38px] text-[#EBEBEB] truncate">
|
|||
|
|
美国财富保护公司合伙人兼首席财务官
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-[745px] h-[433px] div-bg4 flex flex-wrap">
|
|||
|
|
<div class="text-[50px] text-[#10253E] font-semibold">
|
|||
|
|
安德鲁·帕帕尼科劳
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full text-[38px] text-[#455363] tracking-[4px]">
|
|||
|
|
董事会董事
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full text-[38px] text-[#455363] tracking-[4px]">
|
|||
|
|
雷神公司财务经理
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="bg-[#F8F9FF]">
|
|||
|
|
<div class="flex flex-wrap justify-center">
|
|||
|
|
<div class="w-full px-[188px] mt-[220px]">
|
|||
|
|
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full title mt-[58px] px-[188px]">
|
|||
|
|
<div>治理、多样性和委员会章程</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full flex flex-wrap mt-[105px] mb-[230px] px-[188px]">
|
|||
|
|
<div
|
|||
|
|
v-for="item in state.linkArr"
|
|||
|
|
:key="item.title"
|
|||
|
|
class="w-full bg-[#fff] pl-[16px] rounded-[20px] mt-[38px] before-line"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="w-full flex items-center justify-between px-[25px] py-[20px] font-semibold text-[40px] tracking-[4px]"
|
|||
|
|
@click="handleLink(item.link)"
|
|||
|
|
>
|
|||
|
|
{{ item.title }}
|
|||
|
|
|
|||
|
|
<img
|
|||
|
|
class="w-[23px] h-[43px]"
|
|||
|
|
src="@/assets/image/investor/768/icon-r.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section
|
|||
|
|
style="background: #fff"
|
|||
|
|
className="flex flex-wrap justify-center"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
class="w-[580px] h-[55px] my-[85px]"
|
|||
|
|
src="@/assets/image/image-footer.png"
|
|||
|
|
alt="logo"
|
|||
|
|
/>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { NDivider } from "naive-ui";
|
|||
|
|
import { onUnmounted, ref, onMounted, reactive, watch, nextTick } from "vue";
|
|||
|
|
import gsap from "gsap";
|
|||
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|||
|
|
import AppHeader from "@/components/AppHeader/index.vue";
|
|||
|
|
import { useTransitionComposable } from "@/composables/transition-composable";
|
|||
|
|
|
|||
|
|
// 定义组件的自定义事件
|
|||
|
|
defineEmits(["sendCode"]);
|
|||
|
|
|
|||
|
|
// 注册 ScrollTrigger 插件
|
|||
|
|
gsap.registerPlugin(ScrollTrigger);
|
|||
|
|
|
|||
|
|
import { useI18n } from "vue-i18n";
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const { transitionState } = useTransitionComposable();
|
|||
|
|
|
|||
|
|
const moveRefs = ref(
|
|||
|
|
Array(27)
|
|||
|
|
.fill(null)
|
|||
|
|
.map(() => ref(null))
|
|||
|
|
);
|
|||
|
|
let ctx;
|
|||
|
|
|
|||
|
|
// 导入图片
|
|||
|
|
import imageshow1 from "@/assets/image/investor/768/imageshow-1.png";
|
|||
|
|
import imageshow2 from "@/assets/image/investor/768/imageshow-2.png";
|
|||
|
|
import imageshow3 from "@/assets/image/investor/768/imageshow-3.png";
|
|||
|
|
|
|||
|
|
const state = reactive({
|
|||
|
|
marqueeArr: [
|
|||
|
|
{
|
|||
|
|
title: "最新财务",
|
|||
|
|
subTitle: "2022年第四季度和2022年全年收益结果",
|
|||
|
|
date: "2023年3月29日",
|
|||
|
|
link: "收益公布",
|
|||
|
|
imgUrl: imageshow1,
|
|||
|
|
linkUrl: "https://www.minim.com/investor-relations/financials/",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "最近的事件",
|
|||
|
|
subTitle: "Minim宣布与e2Companies达成合并协议",
|
|||
|
|
date: "2024年3月13日",
|
|||
|
|
link: "合并协议-新闻稿最终稿2024年12月3日",
|
|||
|
|
imgUrl: imageshow2,
|
|||
|
|
linkUrl: "https://www.minim.com/investor-relations/financials/",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "股票报价",
|
|||
|
|
subTitle: "TradingView的MINM报价",
|
|||
|
|
link: "MINM报价",
|
|||
|
|
imgUrl: imageshow3,
|
|||
|
|
linkUrl: "https://www.minim.com/investor-relations/financials/",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
linkArr: [
|
|||
|
|
{
|
|||
|
|
title: "高级财务人员道德守则",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "冲突矿产声明",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "道德和商业行为准则",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "审计委员会章程",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "举报人政策",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "薪酬委员会章程",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "关联方交易政策",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "提名和治理委员会章程",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "2022年多样性矩阵",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "2023年多样性矩阵",
|
|||
|
|
link: "",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const carouselTrack = ref(null);
|
|||
|
|
let carouselAnimation = null; // 存储 GSAP 动画实例
|
|||
|
|
|
|||
|
|
const getVisibleItems = () => {
|
|||
|
|
const items = state.marqueeArr;
|
|||
|
|
// 复制两组用于无缝滚动
|
|||
|
|
return [...items, ...items];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 监听窗口大小变化
|
|||
|
|
onMounted(() => {
|
|||
|
|
ctx = gsap.context(() => {
|
|||
|
|
moveRefs.value.forEach((moveRef, index) => {
|
|||
|
|
if (moveRef.value) {
|
|||
|
|
// 修改初始状态设置
|
|||
|
|
gsap.set(moveRef.value, {
|
|||
|
|
opacity: 0,
|
|||
|
|
// 使用 translateX 替代 x，并且初始位置设置在元素自身宽度范围内
|
|||
|
|
transform: `translateX(${index % 2 === 0 ? "-100%" : "100%"})`,
|
|||
|
|
// 添加 overflow: hidden 确保不会影响布局
|
|||
|
|
overflow: "hidden",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 修改动画设置
|
|||
|
|
gsap.to(moveRef.value, {
|
|||
|
|
opacity: 1,
|
|||
|
|
transform: "translateX(0)", // 使用 transform 替代 x
|
|||
|
|
duration: 1.2,
|
|||
|
|
ease: "power2.out",
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: moveRef.value,
|
|||
|
|
start: "top 80%",
|
|||
|
|
end: "top 40%",
|
|||
|
|
toggleActions: "play none none reverse",
|
|||
|
|
markers: false,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始化轮播动画
|
|||
|
|
nextTick(() => {
|
|||
|
|
if (carouselTrack.value) {
|
|||
|
|
const firstItem = carouselTrack.value.querySelector(".carousel-item");
|
|||
|
|
if (!firstItem) return;
|
|||
|
|
|
|||
|
|
const itemWidth = firstItem.offsetWidth;
|
|||
|
|
const itemMargin = parseInt(
|
|||
|
|
window.getComputedStyle(firstItem).marginRight
|
|||
|
|
);
|
|||
|
|
const slideWidth = itemWidth + itemMargin;
|
|||
|
|
const totalWidth = slideWidth * state.marqueeArr.length;
|
|||
|
|
|
|||
|
|
// 创建无限滚动动画
|
|||
|
|
carouselAnimation = gsap.to(carouselTrack.value, {
|
|||
|
|
x: -totalWidth,
|
|||
|
|
duration: 20,
|
|||
|
|
ease: "none",
|
|||
|
|
repeat: -1,
|
|||
|
|
onRepeat: () => {
|
|||
|
|
gsap.set(carouselTrack.value, { x: 0 });
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
if (ctx) {
|
|||
|
|
ctx.revert();
|
|||
|
|
}
|
|||
|
|
ScrollTrigger.killAll();
|
|||
|
|
if (carouselAnimation) {
|
|||
|
|
carouselAnimation.kill();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
import { useRouter } from "vue-router";
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
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,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const handleLink = (url) => {
|
|||
|
|
window.open(url);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.page-container {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 85px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-first {
|
|||
|
|
width: 100%;
|
|||
|
|
background-image: url("@/assets/image/investor/768/bg-1.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: bottom;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
.section-four {
|
|||
|
|
background: url("@/assets/image/investor/768/bg-2.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
.div-bg3 {
|
|||
|
|
background: url("@/assets/image/investor/768/bg-3.png");
|
|||
|
|
background-size: contain;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
padding: 0px 45px 50px 45px;
|
|||
|
|
align-content: end;
|
|||
|
|
box-shadow: 0 20px 41px 10px rgba(0, 0, 0, 0.16);
|
|||
|
|
border-radius: 40px;
|
|||
|
|
}
|
|||
|
|
.div-bg4 {
|
|||
|
|
background: url("@/assets/image/investor/768/bg-4.png");
|
|||
|
|
background-size: contain;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
padding: 0px 45px 50px 45px;
|
|||
|
|
align-content: end;
|
|||
|
|
box-shadow: 0 10px 41px 5px rgba(0, 0, 0, 0.16);
|
|||
|
|
border-radius: 40px;
|
|||
|
|
}
|
|||
|
|
.icon-langmul {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -80px;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
.carousel-container {
|
|||
|
|
width: 96%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow-btn {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-track {
|
|||
|
|
display: flex;
|
|||
|
|
will-change: transform;
|
|||
|
|
cursor: grab;
|
|||
|
|
user-select: none;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
cursor: grabbing;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-item {
|
|||
|
|
width: 785px;
|
|||
|
|
margin-right: 73px;
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
display: block; // 改为 block 布局
|
|||
|
|
padding: 23px 20px 83px 20px;
|
|||
|
|
border-radius: 30px;
|
|||
|
|
box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-image {
|
|||
|
|
width: 748px;
|
|||
|
|
height: 563px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-content {
|
|||
|
|
padding: 0 20px 0 60px;
|
|||
|
|
margin-top: 38px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-title {
|
|||
|
|
font-size: 50px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-top: 48px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carousel-subtitle {
|
|||
|
|
margin-top: 23px;
|
|||
|
|
color: #455363;
|
|||
|
|
font-size: 40px;
|
|||
|
|
}
|
|||
|
|
.carousel-link {
|
|||
|
|
margin-top: 25px;
|
|||
|
|
color: #8b59fa;
|
|||
|
|
font-size: 35px;
|
|||
|
|
}
|
|||
|
|
// 添加一个通用的溢出控制类
|
|||
|
|
.overflow-hidden {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.divider1 {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 3;
|
|||
|
|
left: 142px;
|
|||
|
|
width: 1px;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: rgba(230, 234, 238, 0.5) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider5 {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 3;
|
|||
|
|
right: 142px;
|
|||
|
|
width: 1px;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: rgba(230, 234, 238, 0.5) !important;
|
|||
|
|
}
|
|||
|
|
.line-2 {
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
max-height: calc(1.5em * 2);
|
|||
|
|
}
|
|||
|
|
.before-line {
|
|||
|
|
position: relative;
|
|||
|
|
&::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
width: 16px;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #c6acff;
|
|||
|
|
border-radius: 20px 0 0 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|