scout666/officialWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

375 768 investor gsap效果

Browse Source
This commit is contained in:
张 元山 2025-03-14 20:52:05 +08:00
parent e815717407
commit fdca54133f
2 changed files with 352 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
src/views/investor/size375/index.vue
View File

@ -6,9 +6,9 @@
<main> <main>
<section style="background: #ffffff" className="relative"> <section style="background: #ffffff" className="relative">
<div class="relative section-first h-[2221px] box-contain pt-[775px]"> <div class="relative section-first h-[4157px] box-contain pt-[2509px]">
<div <div
class="title ml-[188px]" class="title ml-[184px]"
:ref=" :ref="
(el) => { (el) => {
moveRefs[0].value = el; moveRefs[0].value = el;
@ -23,7 +23,7 @@
moveRefs[1].value = el; moveRefs[1].value = el;
} }
" "
class="text-[35px] text-[#8B59F7] w-[735px] ml-[188px] mt-[50px]" class="text-[51px] text-[#8B59F7] w-[1075px] ml-[184px] mt-[50px]"
> >
Minim（纳斯达克股票代码：MINM）财务状况 Minim（纳斯达克股票代码：MINM）财务状况
</div> </div>
@ -32,46 +32,53 @@
<section> <section>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
<div class="w-full px-[188px] mt-[222px]"> <div class="w-full px-[184px] mt-[502px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[189px] h-[26px] bg-[#8B59F7]"></div>
</div>
<div class="w-full title mt-[58px] px-[188px]">
<div>最新动态</div>
</div> </div>
<div <div
class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-6" class="w-full title mt-[102px] px-[184px]"
@mouseenter="pauseCarouselAnimation" :ref="
@mouseleave="resumeCarouselAnimation" (el) => {
@touchstart="pauseCarouselAnimation" moveRefs[2].value = el;
@touchend="resumeCarouselAnimation" }
"
> >
<div ref="carouselTrack" class="carousel-track"> <div>最新动态</div>
</div>
<div class="w-full mb-[246px] flex flex-wrap justify-center">
<div
v-for="(item, idx) in state.marqueeArr"
:key="idx"
class="w-full flex flex-wrap justify-center carousel-item mt-[154px]"
:ref="
(el) => {
moveRefs[15 + idx].value = el;
}
"
>
<img class="carousel-image" :src="item.imgUrl" />
<div <div
v-for="(item, idx) in getVisibleItems()" class="carousel-title flex justify-between truncate pl-[31px]"
:key="idx"
class="carousel-item"
> >
<img class="carousel-image" :src="item.imgUrl" /> <div>{{ item.title }}</div>
<div class="carousel-title flex justify-between"> <div v-if="item.date" class="text-[#9F9F9F] text-[61px]">
<div>{{ item.title }}</div> {{ item.date }}
<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 class="carousel-subtitle truncate pl-[31px]">
<div>{{ item.subTitle }}</div>
</div>
<div
class="carousel-link flex items-center pl-[31px]"
@click="handleLink(item.linkUrl)"
>
<img
class="w-[61px] h-[61px] mr-[10px]"
src="@/assets/image/investor/375/icon-l.png"
/>
<div>{{ item.link }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -79,45 +86,78 @@
<section class="bg-[#F8F9FF]"> <section class="bg-[#F8F9FF]">
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
<div class="w-full px-[188px] mt-[222px]"> <div class="w-full px-[184px] mt-[222px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[189px] h-[26px] bg-[#8B59F7]"></div>
</div> </div>
<div class="w-full title mt-[58px] mb-[145px] px-[188px]"> <div
class="w-full title mt-[102px] mb-[145px] px-[184px]"
:ref="
(el) => {
moveRefs[3].value = el;
}
"
>
<div>财务数据</div> <div>财务数据</div>
</div> </div>
<div class="w-full px-[158px] mb-[57px]"> <div class="w-full px-[158px] mb-[118px]">
<div <div
class="bg-[#fff] flex w-full text-[40px] pa-[6px] shadow-[0_7px_50px_3px_rgba(0,0,0,0.16)] rounded-[20px]" class="bg-[#fff] flex w-full text-[72px] pa-[13px] shadow-[0_15px_102px_5px_rgba(0,0,0,0.16)] rounded-[41px]"
> >
<div class="w-1/3 text-[#10263E] font-semibold"> <div
class="w-4/10 text-[#10263E] font-semibold"
:ref="
(el) => {
moveRefs[4].value = el;
}
"
>
<div <div
class="bg-[#fff] ma-[6px] px-[25px] py-[30px] min-h-[118px]" class="bg-[#fff] my-[13px] ml-[13px] px-[51px] py-[72px] min-h-[274px]"
></div> ></div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
利润报告
</div>
<div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
收益报告 收益报告
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
财报电话会议 财报电话会议
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
10-Q/10-K 10-Q/10-K
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
年度报告 年度报告
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
年度会议 年度会议
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
特别股东大会 特别股东大会
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
>
委托书 委托书
</div> </div>
</div> </div>
<div <div
class="w-2/3 font-normal text-[#9F9F9F] year-content-animation" class="w-6/10 font-normal text-[#9F9F9F] year-content-animation"
ref="yearContent" ref="yearContent"
@mouseenter="pauseYearInterval" @mouseenter="pauseYearInterval"
@mouseleave="resumeYearInterval" @mouseleave="resumeYearInterval"
@ -129,7 +169,7 @@
@mousemove="handleMouseMove" @mousemove="handleMouseMove"
> >
<div <div
class="color-[#fff] ma-[6px] px-[25px] py-[30px] font-semibold" class="color-[#fff] ma-[13px] px-[51px] py-[72px] font-semibold text-[82px]"
:class=" :class="
state.activeYear === 2021 state.activeYear === 2021
? 'bg-[#6520FA]' ? 'bg-[#6520FA]'
@ -142,7 +182,7 @@
<div v-else>&nbsp;</div> <div v-else>&nbsp;</div>
</div> </div>
<div <div
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between" class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px] flex justify-between"
> >
<div>Q1</div> <div>Q1</div>
<div>Q2</div> <div>Q2</div>
@ -150,7 +190,7 @@
<div>Q4</div> <div>Q4</div>
</div> </div>
<div <div
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between" class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px] flex justify-between"
> >
<div>Q1</div> <div>Q1</div>
<div>Q2</div> <div>Q2</div>
@ -158,7 +198,7 @@
<div>Q4</div> <div>Q4</div>
</div> </div>
<div <div
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between" class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px] flex justify-between"
> >
<div>Q1</div> <div>Q1</div>
<div>Q2</div> <div>Q2</div>
@ -166,20 +206,23 @@
<div>Q4</div> <div>Q4</div>
</div> </div>
<div <div
class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between" class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px] flex justify-between"
> >
<div>Q1</div> <div>Q1</div>
<div>Q2</div> <div>Q2</div>
<div>Q3</div> <div>Q3</div>
<div>Q4</div> <div>Q4</div>
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px]">
<div>{{ state.activeYear }}年</div> <div>{{ state.activeYear }}年</div>
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px]">
<div>{{ state.activeYear }}年</div> <div>{{ state.activeYear }}年</div>
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px]">
<div>{{ state.activeYear }}年</div>
</div>
<div class="bg-[#F8F9FF] ma-[13px] px-[51px] py-[72px]">
<div>{{ state.activeYear }}年</div> <div>{{ state.activeYear }}年</div>
</div> </div>
</div> </div>
@ -187,37 +230,68 @@
</div> </div>
<div <div
class="bg-[#8B59F7] mb-[228px] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center" class="bg-[#8B59F7] mb-[384px] rounded-[123px] text-[#fff] text-[82px] font-semibold px-[143px] py-[51px] flex items-center"
@click="handlePageLink('/investorhandbook')" @click="handlePageLink('/investorhandbook')"
:ref="
(el) => {
moveRefs[5].value = el;
}
"
> >
投资者沟通指南 投资者沟通指南
<img <img
class="w-[23px] h-[43px] ml-[50px]" class="w-[23px] h-[43px] ml-[87px]"
src="@/assets/image/investor/768/icon-r-o.png" src="@/assets/image/investor/375/icon-r-o.png"
/> />
</div> </div>
</div> </div>
</section> </section>
<section class="section-four h-[2933px] color-[#D1D1D1] text-[40px]"> <section class="section-four h-[4562px] color-[#D1D1D1] text-[72px]">
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
<div class="w-full px-[188px] mt-[222px]"> <div class="w-full px-[184px] mt-[222px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[189px] h-[26px] bg-[#8B59F7]"></div>
</div> </div>
<div <div
class="w-full title mt-[58px] mb-[145px] px-[188px] color-[#D1D1D1]" class="w-full title mt-[102px] mb-[145px] px-[184px] color-[#D1D1D1]"
:ref="
(el) => {
moveRefs[6].value = el;
}
"
> >
<div>行情走势</div> <div>行情走势</div>
</div> </div>
<div class="w-full px-[188px] mb-[57px]"> <div
class="w-full px-[184px] mb-[118px] color-[#D1D1D1]"
:ref="
(el) => {
moveRefs[7].value = el;
}
"
>
SEC文件是提交给美国证券交易委员会（SEC）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。 SEC文件是提交给美国证券交易委员会（SEC）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。
</div> </div>
<div class="w-full px-[188px] mb-[57px]"> <div
class="w-full px-[184px] mb-[118px] color-[#D1D1D1]"
:ref="
(el) => {
moveRefs[8].value = el;
}
"
>
通过在下面进行选择，您将离开Minim网站。Minim对您可以通过此网站访问的任何其他网站不作任何陈述。当您访问非Minim网站时，即使是可能包含Minim徽标的网站，请理解它独立于Minim，Minim无法控制该网站上的内容。此外，链接到非Minim网站并不意味着Minim认可或接受对该网站的内容或使用的任何责任。 通过在下面进行选择，您将离开Minim网站。Minim对您可以通过此网站访问的任何其他网站不作任何陈述。当您访问非Minim网站时，即使是可能包含Minim徽标的网站，请理解它独立于Minim，Minim无法控制该网站上的内容。此外，链接到非Minim网站并不意味着Minim认可或接受对该网站的内容或使用的任何责任。
</div> </div>
<div class="px-[188px] mb-[175px] flex flex-start w-full"> <div
class="px-[184px] mb-[287px] flex flex-start w-full"
:ref="
(el) => {
moveRefs[9].value = el;
}
"
>
<div <div
class="bg-[#8B59F7] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center" class="bg-[#8B59F7] rounded-[123px] text-[#fff] text-[82px] font-semibold px-[143px] py-[51px] flex items-center"
@click=" @click="
handleLink( handleLink(
'https://www.minim.com/investor-relations/financials/' 'https://www.minim.com/investor-relations/financials/'
@ -226,16 +300,23 @@
> >
查看所有SEC文件 查看所有SEC文件
<img <img
class="w-[23px] h-[43px] ml-[50px]" class="w-[47px] h-[87px] ml-[87px]"
src="@/assets/image/investor/768/icon-r-o.png" src="@/assets/image/investor/375/icon-r-o.png"
/> />
</div> </div>
</div> </div>
<div class="overflow-hidden"> <div
class="overflow-hidden z-4 relative"
:ref="
(el) => {
moveRefs[10].value = el;
}
"
>
<img <img
class="w-[1608px] h-[1010px]" class="w-[1810px] h-[1326px]"
src="@/assets/image/investor/768/imageshow-6.png" src="@/assets/image/investor/375/imageshow-6.png"
/> />
</div> </div>
</div> </div>
@ -243,34 +324,59 @@
<section> <section>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
<div class="w-full px-[188px] mt-[222px]"> <div class="w-full px-[184px] mt-[222px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[189px] h-[26px] bg-[#8B59F7]"></div>
</div>
<div class="w-full title mt-[58px] px-[188px]">
<div>董事会</div>
</div> </div>
<div <div
class="w-full flex justify-between mt-[140px] mb-[230px] px-[188px]" class="w-full title mt-[102px] px-[184px]"
:ref="
(el) => {
moveRefs[11].value = el;
}
"
> >
<div class="w-[745px] h-[433px] div-bg3 flex flex-wrap"> <div>董事会</div>
<div class="text-[50px] text-[#fff] font-semibold"> </div>
<div class="w-full flex flex-wrap mt-[140px] mb-[389px] px-[102px]">
<div
class="w-full h-[886px] div-bg3 flex flex-wrap"
:ref="
(el) => {
moveRefs[12].value = el;
}
"
>
<div class="text-[92px] text-[#fff] font-semibold truncate">
帕特里克·里瓦德 帕特里克·里瓦德
</div> </div>
<div class="w-full text-[38px] text-[#EBEBEB] tracking-[4px]"> <div
class="w-full text-[72px] text-[#EBEBEB] tracking-[4px] truncate"
>
董事会董事 董事会董事
</div> </div>
<div class="w-full text-[38px] text-[#EBEBEB] truncate"> <div class="w-full text-[72px] text-[#EBEBEB] truncate">
美国财富保护公司合伙人兼首席财务官 美国财富保护公司合伙人兼首席财务官
</div> </div>
</div> </div>
<div class="w-[745px] h-[433px] div-bg4 flex flex-wrap"> <div
<div class="text-[50px] text-[#10253E] font-semibold"> class="w-full h-[886px] div-bg4 flex flex-wrap mt-[154px]"
:ref="
(el) => {
moveRefs[13].value = el;
}
"
>
<div class="text-[92px] text-[#10253E] font-semibold truncate">
安德鲁·帕帕尼科劳 安德鲁·帕帕尼科劳
</div> </div>
<div class="w-full text-[38px] text-[#455363] tracking-[4px]"> <div
class="w-full text-[72px] text-[#455363] tracking-[4px] truncate"
>
董事会董事 董事会董事
</div> </div>
<div class="w-full text-[38px] text-[#455363] tracking-[4px]"> <div
class="w-full text-[72px] text-[#455363] tracking-[4px] truncate"
>
雷神公司财务经理 雷神公司财务经理
</div> </div>
</div> </div>
@ -280,27 +386,34 @@
<section class="bg-[#F8F9FF]"> <section class="bg-[#F8F9FF]">
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
<div class="w-full px-[188px] mt-[220px]"> <div class="w-full px-[184px] mt-[369px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[189px] h-[26px] bg-[#8B59F7]"></div>
</div> </div>
<div class="w-full title mt-[58px] px-[188px]"> <div
class="w-full title mt-[102px] px-[184px]"
:ref="
(el) => {
moveRefs[14].value = el;
}
"
>
<div>治理、多样性和委员会章程</div> <div>治理、多样性和委员会章程</div>
</div> </div>
<div class="w-full flex flex-wrap mt-[105px] mb-[230px] px-[188px]"> <div class="w-full flex flex-wrap mt-[159px] mb-[246px] px-[184px]">
<div <div
v-for="item in state.linkArr" v-for="item in state.linkArr"
:key="item.title" :key="item.title"
class="w-full bg-[#fff] pl-[16px] rounded-[20px] mt-[38px] before-line" class="w-full bg-[#fff] pl-[26px] rounded-[20px] mt-[61px] before-line"
> >
<div <div
class="w-full flex items-center justify-between px-[25px] py-[20px] font-semibold text-[40px] tracking-[4px]" class="w-full flex items-center justify-between px-[56px] py-[46px] font-semibold text-[72px] tracking-[4px] truncate"
@click="handleLink(item.link)" @click="handleLink(item.link)"
> >
{{ item.title }} {{ item.title }}
<img <img
class="w-[23px] h-[43px]" class="w-[37px] h-[69px]"
src="@/assets/image/investor/768/icon-r.png" src="@/assets/image/investor/375/icon-r.png"
/> />
</div> </div>
</div> </div>
@ -313,7 +426,7 @@
className="flex flex-wrap justify-center" className="flex flex-wrap justify-center"
> >
<img <img
class="w-[580px] h-[55px] my-[85px]" class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
src="@/assets/image/image-footer.png" src="@/assets/image/image-footer.png"
alt="logo" alt="logo"
/> />
@ -348,9 +461,9 @@ const moveRefs = ref(
let ctx; let ctx;
// 导入图片 // 导入图片
import imageshow1 from "@/assets/image/investor/768/imageshow-1.png"; import imageshow1 from "@/assets/image/investor/375/imageshow-1.png";
import imageshow2 from "@/assets/image/investor/768/imageshow-2.png"; import imageshow2 from "@/assets/image/investor/375/imageshow-2.png";
import imageshow3 from "@/assets/image/investor/768/imageshow-3.png"; import imageshow3 from "@/assets/image/investor/375/imageshow-3.png";
const state = reactive({ const state = reactive({
marqueeArr: [ marqueeArr: [
@ -778,42 +891,42 @@ const resumeCarouselAnimation = () => {
} }
.title { .title {
font-size: 85px; font-size: 123px;
font-weight: 600; font-weight: 600;
} }
.section-first { .section-first {
width: 100%; width: 100%;
background-image: url("@/assets/image/investor/768/bg-1.png"); background-image: url("@/assets/image/investor/375/bg-1.png");
background-size: cover; background-size: cover;
background-position: bottom; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.section-four { .section-four {
background: url("@/assets/image/investor/768/bg-2.png"); background: url("@/assets/image/investor/375/bg-2.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.div-bg3 { .div-bg3 {
background: url("@/assets/image/investor/768/bg-3.png"); background: url("@/assets/image/investor/375/bg-3.png");
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 0px 45px 50px 45px; padding: 0px 92px 102px 92px;
align-content: end; align-content: end;
box-shadow: 0 20px 41px 10px rgba(0, 0, 0, 0.16); box-shadow: 0 20px 41px 10px rgba(0, 0, 0, 0.16);
border-radius: 40px; border-radius: 66px;
} }
.div-bg4 { .div-bg4 {
background: url("@/assets/image/investor/768/bg-4.png"); background: url("@/assets/image/investor/375/bg-4.png");
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 0px 45px 50px 45px; padding: 0px 92px 102px 92px;
align-content: end; align-content: end;
box-shadow: 0 10px 41px 5px rgba(0, 0, 0, 0.16); box-shadow: 0 10px 41px 5px rgba(0, 0, 0, 0.16);
border-radius: 40px; border-radius: 66px;
} }
.icon-langmul { .icon-langmul {
position: absolute; position: absolute;
@ -842,42 +955,41 @@ const resumeCarouselAnimation = () => {
} }
.carousel-item { .carousel-item {
width: 785px; width: 1680px;
margin-right: 73px;
flex: 0 0 auto; flex: 0 0 auto;
display: block; // 改为 block 布局 display: block; // 改为 block 布局
padding: 23px 20px 83px 20px; padding: 46px 36px 174px 51px;
border-radius: 30px; border-radius: 61px;
box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16); box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16);
} }
.carousel-image { .carousel-image {
width: 748px; width: 100%;
height: 563px; height: 1152px;
object-fit: cover; object-fit: cover;
display: block; display: block;
} }
.carousel-content { .carousel-content {
padding: 0 20px 0 60px; padding: 0 20px 0 123px;
margin-top: 38px; margin-top: 38px;
} }
.carousel-title { .carousel-title {
font-size: 50px; font-size: 92px;
font-weight: 500; font-weight: 500;
margin-top: 48px; margin-top: 48px;
} }
.carousel-subtitle { .carousel-subtitle {
margin-top: 23px; margin-top: 72px;
color: #455363; color: #455363;
font-size: 40px; font-size: 72px;
} }
.carousel-link { .carousel-link {
margin-top: 25px; margin-top: 51px;
color: #8b59fa; color: #8b59fa;
font-size: 35px; font-size: 72px;
} }
// 添加一个通用的溢出控制类 // 添加一个通用的溢出控制类
.overflow-hidden { .overflow-hidden {
@ -886,7 +998,7 @@ const resumeCarouselAnimation = () => {
.divider1 { .divider1 {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
left: 142px; left: 64px;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: rgba(230, 234, 238, 0.5) !important; background-color: rgba(230, 234, 238, 0.5) !important;
@ -895,7 +1007,7 @@ const resumeCarouselAnimation = () => {
.divider5 { .divider5 {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
right: 142px; right: 64px;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: rgba(230, 234, 238, 0.5) !important; background-color: rgba(230, 234, 238, 0.5) !important;
@ -916,10 +1028,10 @@ const resumeCarouselAnimation = () => {
left: 0; left: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 16px; width: 26px;
height: 100%; height: 100%;
background: #c6acff; background: #c6acff;
border-radius: 20px 0 0 20px; border-radius: 41px 0 0 41px;
} }
} }

131
src/views/investor/size768/index.vue
View File

@ -35,7 +35,14 @@
<div class="w-full px-[188px] mt-[222px]"> <div class="w-full px-[188px] mt-[222px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
</div> </div>
<div class="w-full title mt-[58px] px-[188px]"> <div
class="w-full title mt-[58px] px-[188px]"
:ref="
(el) => {
moveRefs[2].value = el;
}
"
>
<div>最新动态</div> <div>最新动态</div>
</div> </div>
<div <div
@ -82,7 +89,14 @@
<div class="w-full px-[188px] mt-[222px]"> <div class="w-full px-[188px] mt-[222px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
</div> </div>
<div class="w-full title mt-[58px] mb-[145px] px-[188px]"> <div
class="w-full title mt-[58px] mb-[145px] px-[188px]"
:ref="
(el) => {
moveRefs[3].value = el;
}
"
>
<div>财务数据</div> <div>财务数据</div>
</div> </div>
@ -90,29 +104,39 @@
<div <div
class="bg-[#fff] flex w-full text-[40px] pa-[6px] shadow-[0_7px_50px_3px_rgba(0,0,0,0.16)] rounded-[20px]" 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="w-1/3 text-[#10263E] font-semibold"
:ref="
(el) => {
moveRefs[4].value = el;
}
"
>
<div <div
class="bg-[#fff] ma-[6px] px-[25px] py-[30px] min-h-[118px]" class="bg-[#fff] my-[6px] ml-[6px] px-[25px] py-[30px] min-h-[124px]"
></div> ></div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
利润报告
</div>
<div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
收益报告 收益报告
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
财报电话会议 财报电话会议
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
10-Q/10-K 10-Q/10-K
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
年度报告 年度报告
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
年度会议 年度会议
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
特别股东大会 特别股东大会
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
委托书 委托书
</div> </div>
</div> </div>
@ -182,6 +206,9 @@
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"> <div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
<div>{{ state.activeYear }}年</div> <div>{{ state.activeYear }}年</div>
</div> </div>
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
<div>{{ state.activeYear }}年</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -189,6 +216,11 @@
<div <div
class="bg-[#8B59F7] mb-[228px] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center" class="bg-[#8B59F7] mb-[228px] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
@click="handlePageLink('/investorhandbook')" @click="handlePageLink('/investorhandbook')"
:ref="
(el) => {
moveRefs[5].value = el;
}
"
> >
投资者沟通指南 投资者沟通指南
<img <img
@ -205,17 +237,43 @@
</div> </div>
<div <div
class="w-full title mt-[58px] mb-[145px] px-[188px] color-[#D1D1D1]" class="w-full title mt-[58px] mb-[145px] px-[188px] color-[#D1D1D1]"
:ref="
(el) => {
moveRefs[6].value = el;
}
"
> >
<div>行情走势</div> <div>行情走势</div>
</div> </div>
<div class="w-full px-[188px] mb-[57px]"> <div
class="w-full px-[188px] mb-[57px]"
:ref="
(el) => {
moveRefs[7].value = el;
}
"
>
SEC文件是提交给美国证券交易委员会（SEC）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。 SEC文件是提交给美国证券交易委员会（SEC）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。
</div> </div>
<div class="w-full px-[188px] mb-[57px]"> <div
class="w-full px-[188px] mb-[57px]"
:ref="
(el) => {
moveRefs[8].value = el;
}
"
>
通过在下面进行选择，您将离开Minim网站。Minim对您可以通过此网站访问的任何其他网站不作任何陈述。当您访问非Minim网站时，即使是可能包含Minim徽标的网站，请理解它独立于Minim，Minim无法控制该网站上的内容。此外，链接到非Minim网站并不意味着Minim认可或接受对该网站的内容或使用的任何责任。 通过在下面进行选择，您将离开Minim网站。Minim对您可以通过此网站访问的任何其他网站不作任何陈述。当您访问非Minim网站时，即使是可能包含Minim徽标的网站，请理解它独立于Minim，Minim无法控制该网站上的内容。此外，链接到非Minim网站并不意味着Minim认可或接受对该网站的内容或使用的任何责任。
</div> </div>
<div class="px-[188px] mb-[175px] flex flex-start w-full"> <div
class="px-[188px] mb-[175px] flex flex-start w-full"
:ref="
(el) => {
moveRefs[9].value = el;
}
"
>
<div <div
class="bg-[#8B59F7] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center" class="bg-[#8B59F7] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
@click=" @click="
@ -232,7 +290,14 @@
</div> </div>
</div> </div>
<div class="overflow-hidden"> <div
class="overflow-hidden"
:ref="
(el) => {
moveRefs[10].value = el;
}
"
>
<img <img
class="w-[1608px] h-[1010px]" class="w-[1608px] h-[1010px]"
src="@/assets/image/investor/768/imageshow-6.png" src="@/assets/image/investor/768/imageshow-6.png"
@ -246,13 +311,27 @@
<div class="w-full px-[188px] mt-[222px]"> <div class="w-full px-[188px] mt-[222px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
</div> </div>
<div class="w-full title mt-[58px] px-[188px]"> <div
class="w-full title mt-[58px] px-[188px]"
:ref="
(el) => {
moveRefs[11].value = el;
}
"
>
<div>董事会</div> <div>董事会</div>
</div> </div>
<div <div
class="w-full flex justify-between mt-[140px] mb-[230px] px-[188px]" 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="w-[745px] h-[433px] div-bg3 flex flex-wrap"
:ref="
(el) => {
moveRefs[12].value = el;
}
"
>
<div class="text-[50px] text-[#fff] font-semibold"> <div class="text-[50px] text-[#fff] font-semibold">
帕特里克·里瓦德 帕特里克·里瓦德
</div> </div>
@ -263,7 +342,14 @@
美国财富保护公司合伙人兼首席财务官 美国财富保护公司合伙人兼首席财务官
</div> </div>
</div> </div>
<div class="w-[745px] h-[433px] div-bg4 flex flex-wrap"> <div
class="w-[745px] h-[433px] div-bg4 flex flex-wrap"
:ref="
(el) => {
moveRefs[13].value = el;
}
"
>
<div class="text-[50px] text-[#10253E] font-semibold"> <div class="text-[50px] text-[#10253E] font-semibold">
安德鲁·帕帕尼科劳 安德鲁·帕帕尼科劳
</div> </div>
@ -283,7 +369,14 @@
<div class="w-full px-[188px] mt-[220px]"> <div class="w-full px-[188px] mt-[220px]">
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div> <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
</div> </div>
<div class="w-full title mt-[58px] px-[188px]"> <div
class="w-full title mt-[58px] px-[188px]"
:ref="
(el) => {
moveRefs[14].value = el;
}
"
>
<div>治理、多样性和委员会章程</div> <div>治理、多样性和委员会章程</div>
</div> </div>
<div class="w-full flex flex-wrap mt-[105px] mb-[230px] px-[188px]"> <div class="w-full flex flex-wrap mt-[105px] mb-[230px] px-[188px]">