375 768 investor gsap效果
This commit is contained in:
张 元山
parent
e815717407
commit
fdca54133f
@ -6,9 +6,9 @@
|
||||
|
||||
<main>
|
||||
<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
|
||||
class="title ml-[188px]"
|
||||
class="title ml-[184px]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[0].value = el;
|
||||
@ -23,7 +23,7 @@
|
||||
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）财务状况
|
||||
</div>
|
||||
@ -32,46 +32,53 @@
|
||||
|
||||
<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 class="w-full px-[184px] mt-[502px]">
|
||||
<div class="w-[189px] h-[26px] bg-[#8B59F7]"></div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-6"
|
||||
@mouseenter="pauseCarouselAnimation"
|
||||
@mouseleave="resumeCarouselAnimation"
|
||||
@touchstart="pauseCarouselAnimation"
|
||||
@touchend="resumeCarouselAnimation"
|
||||
class="w-full title mt-[102px] px-[184px]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[2].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<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
|
||||
v-for="(item, idx) in getVisibleItems()"
|
||||
:key="idx"
|
||||
class="carousel-item"
|
||||
class="carousel-title flex justify-between truncate pl-[31px]"
|
||||
>
|
||||
<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>{{ item.title }}</div>
|
||||
<div v-if="item.date" class="text-[#9F9F9F] text-[61px]">
|
||||
{{ item.date }}
|
||||
</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>
|
||||
@ -79,45 +86,78 @@
|
||||
|
||||
<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 class="w-full px-[184px] mt-[222px]">
|
||||
<div class="w-[189px] h-[26px] bg-[#8B59F7]"></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 class="w-full px-[158px] mb-[57px]">
|
||||
<div class="w-full px-[158px] mb-[118px]">
|
||||
<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
|
||||
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 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 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] ma-[6px] px-[25px] py-[30px]">
|
||||
<div
|
||||
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
|
||||
>
|
||||
10-Q/10-K
|
||||
</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] ma-[6px] px-[25px] py-[30px]">
|
||||
<div
|
||||
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
|
||||
>
|
||||
年度会议
|
||||
</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] ma-[6px] px-[25px] py-[30px]">
|
||||
<div
|
||||
class="bg-[#F8F9FF] my-[13px] ml-[13px] px-[51px] py-[72px] truncate"
|
||||
>
|
||||
委托书
|
||||
</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"
|
||||
@mouseenter="pauseYearInterval"
|
||||
@mouseleave="resumeYearInterval"
|
||||
@ -129,7 +169,7 @@
|
||||
@mousemove="handleMouseMove"
|
||||
>
|
||||
<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="
|
||||
state.activeYear === 2021
|
||||
? 'bg-[#6520FA]'
|
||||
@ -142,7 +182,7 @@
|
||||
<div v-else> </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>Q2</div>
|
||||
@ -150,7 +190,7 @@
|
||||
<div>Q4</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>Q2</div>
|
||||
@ -158,7 +198,7 @@
|
||||
<div>Q4</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>Q2</div>
|
||||
@ -166,20 +206,23 @@
|
||||
<div>Q4</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>Q2</div>
|
||||
<div>Q3</div>
|
||||
<div>Q4</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-[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-[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>
|
||||
</div>
|
||||
@ -187,37 +230,68 @@
|
||||
</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')"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[5].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
投资者沟通指南
|
||||
<img
|
||||
class="w-[23px] h-[43px] ml-[50px]"
|
||||
src="@/assets/image/investor/768/icon-r-o.png"
|
||||
class="w-[23px] h-[43px] ml-[87px]"
|
||||
src="@/assets/image/investor/375/icon-r-o.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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="w-full px-[188px] mt-[222px]">
|
||||
<div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
|
||||
<div class="w-full px-[184px] mt-[222px]">
|
||||
<div class="w-[189px] h-[26px] bg-[#8B59F7]"></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 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）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。
|
||||
</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认可或接受对该网站的内容或使用的任何责任。
|
||||
</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
|
||||
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="
|
||||
handleLink(
|
||||
'https://www.minim.com/investor-relations/financials/'
|
||||
@ -226,16 +300,23 @@
|
||||
>
|
||||
查看所有SEC文件
|
||||
<img
|
||||
class="w-[23px] h-[43px] ml-[50px]"
|
||||
src="@/assets/image/investor/768/icon-r-o.png"
|
||||
class="w-[47px] h-[87px] ml-[87px]"
|
||||
src="@/assets/image/investor/375/icon-r-o.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden">
|
||||
<div
|
||||
class="overflow-hidden z-4 relative"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[10].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<img
|
||||
class="w-[1608px] h-[1010px]"
|
||||
src="@/assets/image/investor/768/imageshow-6.png"
|
||||
class="w-[1810px] h-[1326px]"
|
||||
src="@/assets/image/investor/375/imageshow-6.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -243,34 +324,59 @@
|
||||
|
||||
<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 class="w-full px-[184px] mt-[222px]">
|
||||
<div class="w-[189px] h-[26px] bg-[#8B59F7]"></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 class="text-[50px] text-[#fff] font-semibold">
|
||||
<div>董事会</div>
|
||||
</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 class="w-full text-[38px] text-[#EBEBEB] tracking-[4px]">
|
||||
<div
|
||||
class="w-full text-[72px] text-[#EBEBEB] tracking-[4px] truncate"
|
||||
>
|
||||
董事会董事
|
||||
</div>
|
||||
<div class="w-full text-[38px] text-[#EBEBEB] truncate">
|
||||
<div class="w-full text-[72px] 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
|
||||
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 class="w-full text-[38px] text-[#455363] tracking-[4px]">
|
||||
<div
|
||||
class="w-full text-[72px] text-[#455363] tracking-[4px] truncate"
|
||||
>
|
||||
董事会董事
|
||||
</div>
|
||||
<div class="w-full text-[38px] text-[#455363] tracking-[4px]">
|
||||
<div
|
||||
class="w-full text-[72px] text-[#455363] tracking-[4px] truncate"
|
||||
>
|
||||
雷神公司财务经理
|
||||
</div>
|
||||
</div>
|
||||
@ -280,27 +386,34 @@
|
||||
|
||||
<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 class="w-full px-[184px] mt-[369px]">
|
||||
<div class="w-[189px] h-[26px] bg-[#8B59F7]"></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 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
|
||||
v-for="item in state.linkArr"
|
||||
: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
|
||||
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)"
|
||||
>
|
||||
{{ item.title }}
|
||||
|
||||
<img
|
||||
class="w-[23px] h-[43px]"
|
||||
src="@/assets/image/investor/768/icon-r.png"
|
||||
class="w-[37px] h-[69px]"
|
||||
src="@/assets/image/investor/375/icon-r.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -313,7 +426,7 @@
|
||||
className="flex flex-wrap justify-center"
|
||||
>
|
||||
<img
|
||||
class="w-[580px] h-[55px] my-[85px]"
|
||||
class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
|
||||
src="@/assets/image/image-footer.png"
|
||||
alt="logo"
|
||||
/>
|
||||
@ -348,9 +461,9 @@ const moveRefs = ref(
|
||||
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";
|
||||
import imageshow1 from "@/assets/image/investor/375/imageshow-1.png";
|
||||
import imageshow2 from "@/assets/image/investor/375/imageshow-2.png";
|
||||
import imageshow3 from "@/assets/image/investor/375/imageshow-3.png";
|
||||
|
||||
const state = reactive({
|
||||
marqueeArr: [
|
||||
@ -778,42 +891,42 @@ const resumeCarouselAnimation = () => {
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 85px;
|
||||
font-size: 123px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-first {
|
||||
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-position: bottom;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.section-four {
|
||||
background: url("@/assets/image/investor/768/bg-2.png");
|
||||
background: url("@/assets/image/investor/375/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: url("@/assets/image/investor/375/bg-3.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0px 45px 50px 45px;
|
||||
padding: 0px 92px 102px 92px;
|
||||
align-content: end;
|
||||
box-shadow: 0 20px 41px 10px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
border-radius: 66px;
|
||||
}
|
||||
.div-bg4 {
|
||||
background: url("@/assets/image/investor/768/bg-4.png");
|
||||
background: url("@/assets/image/investor/375/bg-4.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0px 45px 50px 45px;
|
||||
padding: 0px 92px 102px 92px;
|
||||
align-content: end;
|
||||
box-shadow: 0 10px 41px 5px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
border-radius: 66px;
|
||||
}
|
||||
.icon-langmul {
|
||||
position: absolute;
|
||||
@ -842,42 +955,41 @@ const resumeCarouselAnimation = () => {
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
width: 785px;
|
||||
margin-right: 73px;
|
||||
width: 1680px;
|
||||
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);
|
||||
padding: 46px 36px 174px 51px;
|
||||
border-radius: 61px;
|
||||
box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
width: 748px;
|
||||
height: 563px;
|
||||
width: 100%;
|
||||
height: 1152px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-content {
|
||||
padding: 0 20px 0 60px;
|
||||
padding: 0 20px 0 123px;
|
||||
margin-top: 38px;
|
||||
}
|
||||
|
||||
.carousel-title {
|
||||
font-size: 50px;
|
||||
font-size: 92px;
|
||||
font-weight: 500;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.carousel-subtitle {
|
||||
margin-top: 23px;
|
||||
margin-top: 72px;
|
||||
color: #455363;
|
||||
font-size: 40px;
|
||||
font-size: 72px;
|
||||
}
|
||||
.carousel-link {
|
||||
margin-top: 25px;
|
||||
margin-top: 51px;
|
||||
color: #8b59fa;
|
||||
font-size: 35px;
|
||||
font-size: 72px;
|
||||
}
|
||||
// 添加一个通用的溢出控制类
|
||||
.overflow-hidden {
|
||||
@ -886,7 +998,7 @@ const resumeCarouselAnimation = () => {
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 142px;
|
||||
left: 64px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: rgba(230, 234, 238, 0.5) !important;
|
||||
@ -895,7 +1007,7 @@ const resumeCarouselAnimation = () => {
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 142px;
|
||||
right: 64px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: rgba(230, 234, 238, 0.5) !important;
|
||||
@ -916,10 +1028,10 @@ const resumeCarouselAnimation = () => {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
width: 26px;
|
||||
height: 100%;
|
||||
background: #c6acff;
|
||||
border-radius: 20px 0 0 20px;
|
||||
border-radius: 41px 0 0 41px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -35,7 +35,14 @@
|
||||
<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
|
||||
class="w-full title mt-[58px] px-[188px]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[2].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div>最新动态</div>
|
||||
</div>
|
||||
<div
|
||||
@ -82,7 +89,14 @@
|
||||
<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
|
||||
class="w-full title mt-[58px] mb-[145px] px-[188px]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[3].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div>财务数据</div>
|
||||
</div>
|
||||
|
||||
@ -90,29 +104,39 @@
|
||||
<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="w-1/3 text-[#10263E] font-semibold"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[4].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<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 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 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] ma-[6px] px-[25px] py-[30px]">
|
||||
<div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
|
||||
10-Q/10-K
|
||||
</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] ma-[6px] px-[25px] py-[30px]">
|
||||
<div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
|
||||
年度会议
|
||||
</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] ma-[6px] px-[25px] py-[30px]">
|
||||
<div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px]">
|
||||
委托书
|
||||
</div>
|
||||
</div>
|
||||
@ -182,6 +206,9 @@
|
||||
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
||||
<div>{{ state.activeYear }}年</div>
|
||||
</div>
|
||||
<div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]">
|
||||
<div>{{ state.activeYear }}年</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -189,6 +216,11 @@
|
||||
<div
|
||||
class="bg-[#8B59F7] mb-[228px] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
|
||||
@click="handlePageLink('/investorhandbook')"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[5].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
投资者沟通指南
|
||||
<img
|
||||
@ -205,17 +237,43 @@
|
||||
</div>
|
||||
<div
|
||||
class="w-full title mt-[58px] mb-[145px] px-[188px] color-[#D1D1D1]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[6].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<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）的文件。上市公司和某些内部人士必须定期向美国证券交易委员会提交文件。这些文件可以通过美国证券交易委员会的在线数据库获得。
|
||||
</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认可或接受对该网站的内容或使用的任何责任。
|
||||
</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
|
||||
class="bg-[#8B59F7] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
|
||||
@click="
|
||||
@ -232,7 +290,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden">
|
||||
<div
|
||||
class="overflow-hidden"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[10].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<img
|
||||
class="w-[1608px] h-[1010px]"
|
||||
src="@/assets/image/investor/768/imageshow-6.png"
|
||||
@ -246,13 +311,27 @@
|
||||
<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
|
||||
class="w-full title mt-[58px] px-[188px]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[11].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<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="w-[745px] h-[433px] div-bg3 flex flex-wrap"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[12].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="text-[50px] text-[#fff] font-semibold">
|
||||
帕特里克·里瓦德
|
||||
</div>
|
||||
@ -263,7 +342,14 @@
|
||||
美国财富保护公司合伙人兼首席财务官
|
||||
</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>
|
||||
@ -283,7 +369,14 @@
|
||||
<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
|
||||
class="w-full title mt-[58px] px-[188px]"
|
||||
:ref="
|
||||
(el) => {
|
||||
moveRefs[14].value = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div>治理、多样性和委员会章程</div>
|
||||
</div>
|
||||
<div class="w-full flex flex-wrap mt-[105px] mb-[230px] px-[188px]">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user