diff --git a/src/assets/image/1440bg.png b/src/assets/image/1440bg.png index c6a7cb8..e8b0f7c 100644 Binary files a/src/assets/image/1440bg.png and b/src/assets/image/1440bg.png differ diff --git a/src/assets/image/tzgbg.png b/src/assets/image/tzgbg.png index e290b6b..ae675b3 100644 Binary files a/src/assets/image/tzgbg.png and b/src/assets/image/tzgbg.png differ diff --git a/src/views/investor/size1440/index.vue b/src/views/investor/size1440/index.vue index 443292c..10f62b3 100644 --- a/src/views/investor/size1440/index.vue +++ b/src/views/investor/size1440/index.vue @@ -1,11 +1,5 @@ <script setup> -import { - onUnmounted, - ref, - watch, - reactive, - onMounted -} from "vue"; +import { onUnmounted, ref, watch, reactive, onMounted } from "vue"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import { useHome } from "@/store/home/index.js"; @@ -18,8 +12,7 @@ import { useLanguage } from "@/utils/changeLanguage.js"; gsap.registerPlugin(ScrollTrigger); const { currentTab } = useHome(); const router = useRouter(); -const { transitionState } = - useTransitionComposable(); +const { transitionState } = useTransitionComposable(); const main = ref(); let ctx; const { @@ -30,7 +23,7 @@ const { initLanguage, currentLang, currentBannerImages, - t + t, } = useLanguage(); const handleTabClick = (tab) => { currentTab.value = tab; @@ -78,7 +71,7 @@ onMounted(() => { }); // 内容上浮动画 - gsap.utils.toArray('.float-up').forEach((element) => { + gsap.utils.toArray(".float-up").forEach((element) => { gsap.from(element, { y: 100, opacity: 0, @@ -86,16 +79,16 @@ onMounted(() => { ease: "back.out(1.2)", scrollTrigger: { trigger: element, - start: 'top 100%', + start: "top 100%", toggleActions: "play none none reverse", immediateRender: false, once: false, - } + }, }); }); // 卡片上升动画 - const cards = gsap.utils.toArray('.carousel-item'); + const cards = gsap.utils.toArray(".carousel-item"); cards.forEach((card, index) => { gsap.from(card, { y: 100, @@ -105,16 +98,16 @@ onMounted(() => { ease: "back.out(1.2)", scrollTrigger: { trigger: card, - start: 'top 85%', + start: "top 85%", toggleActions: "play none none reverse", immediateRender: false, once: false, - } + }, }); }); // 表格行依次淡入动画 - gsap.utils.toArray('.content2 .n-grid .n-gi').forEach((row, index) => { + gsap.utils.toArray(".content2 .n-grid .n-gi").forEach((row, index) => { gsap.from(row, { opacity: 0, y: 30, @@ -127,12 +120,12 @@ onMounted(() => { toggleActions: "play none none reverse", immediateRender: false, once: false, - } + }, }); }); // 治理章程列表动画 - gsap.from('.content5 .n-grid .n-gi', { + gsap.from(".content5 .n-grid .n-gi", { opacity: 0, y: 50, duration: 0.8, @@ -142,12 +135,12 @@ onMounted(() => { }, ease: "back.out(1.2)", scrollTrigger: { - trigger: '.content5', + trigger: ".content5", start: "top 85%", toggleActions: "play none none none", immediateRender: false, - once: true - } + once: true, + }, }); // 强制刷新ScrollTrigger以正确计算位置 @@ -160,16 +153,16 @@ onUnmounted(() => { ctx?.revert(); // <- Easy Cleanup! }); const handleClick = (linkUrl) => { - window.open(linkUrl, '_blank'); + window.open(linkUrl, "_blank"); }; const handleQClick = (type, year, subType) => { - console.log(type, year, subType, state.qLink?.[type]?.[year]?.[subType]) + console.log(type, year, subType, state.qLink?.[type]?.[year]?.[subType]); if (state.qLink?.[type]?.[year]?.[subType]) { window.open(state.qLink[type][year][subType]); } }; const handleYClick = (type, year) => { - console.log(type, year, state.yLink?.[type]?.[year]) + console.log(type, year, state.yLink?.[type]?.[year]); if (state.yLink?.[type]?.[year]) { window.open(state.yLink[type][year]); } @@ -177,7 +170,8 @@ const handleYClick = (type, year) => { const state = reactive({ marqueeArr: [ { - linkUrl: "https://spaces.hightail.com/receive/RpIYgWf2p0", + linkUrl: + "https://hello.minim.co/hubfs/docs/MINM-Q4-FY22-Earnings-Results.pdf?__hstc=56173940.2f10611562d9d3c76f0809f1a47d2275.1680104200211.1680104200211.1680104200211.1&__hssc=56173940.1.1680104200211&__hsfp=1592164616&hsLang=en", }, { linkUrl: @@ -313,40 +307,48 @@ const state = reactive({ <img src="@/assets/image/logo.png" alt="logo" /> </div> <div class="tabs"> - <div class="tab-item" :class="{ - active: currentTab === 'home', - }" @click="handleTabClick('home')"> + <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' - ) - "> + <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') - "> + <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') - "> + <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"> + <n-popselect + v-model:value="currentLanguage" + :options="languageOptions" + @update:value="changeLanguage" + > <div class="language-display"> {{ currentLanguageLabel }} <span class="language-arrow">▼</span> @@ -357,134 +359,191 @@ const state = reactive({ </header> <main ref="main" class="height-full"> <div class="head relative"> + <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/1440bg.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 text-animate" + > + {{ t("investor.title") }} </div> - <div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate"> - Minim(纳斯达克股票代码:MINM)财务状况 + <div + class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate" + > + {{ t("investor.subtitle") }} </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"> + <div + class="content1 bg-#FFFFFF relative flex justify-center z-4 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 text-animate"> - 最新动态 + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate" + > + {{ t("investor.latest_news.title") }} </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-item z-8"> + <img + class="carousel-image relative" + 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>{{ t("investor.latest_news.financial.title") }}</div> + <div class="text-[#9F9F9F] text-[14px]"> + {{ t("investor.latest_news.financial.date") }} + </div> </div> <div class="carousel-subtitle"> - <div>2022年第四季度和2022年全年收益结果</div> + <div>{{ t("investor.latest_news.financial.content") }}</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 @click="handleClick(state.marqueeArr[0].linkUrl)" class="text-[#8B59F7] text-[14px] relative z-10">收益公布</div> + <img + class="w-[12px] h-[12px]" + src="@/assets/image/downlink.png" + alt="cl" + /> + <div + @click="handleClick(state.marqueeArr[0].linkUrl)" + class="text-[#8B59F7] text-[14px] relative z-10" + > + {{ t("investor.latest_news.financial.link") }} + </div> </div> </div> </div> - <div class="carousel-item"> - <img class="carousel-image relative z-10" src="@/assets/image/dt2.png" /> + <div class="carousel-item z-8"> + <img + class="carousel-image relative" + 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>{{ t("investor.latest_news.events.title") }}</div> + <div class="text-[#9F9F9F] text-[14px]"> + {{ t("investor.latest_news.events.date") }} + </div> </div> <div class="carousel-subtitle"> - <div>Minim宣布与e2Companies达成合并协议</div> + <div>{{ t("investor.latest_news.events.content") }}</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 @click="handleClick(state.marqueeArr[1].linkUrl)" class="text-[#8B59F7] text-[14px] relative z-10"> - 合并协议-新闻稿最终稿2024年12月3日</div> + <img + class="w-[12px] h-[12px]" + src="@/assets/image/downlink.png" + alt="cl" + /> + <div + @click="handleClick(state.marqueeArr[1].linkUrl)" + class="text-[#8B59F7] text-[14px] relative z-10" + > + {{ t("investor.latest_news.events.link") }} + </div> </div> </div> </div> - <div class="carousel-item"> - <img class="carousel-image relative z-10" src="@/assets/image/dt3.png" /> + <div class="carousel-item z-8"> + <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>{{ t("investor.latest_news.stock.title") }}</div> </div> <div class="carousel-subtitle"> - <div>TradingView的MINM报价</div> + <div>{{ t("investor.latest_news.stock.content") }}</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 @click="handleClick(state.marqueeArr[2].linkUrl)" class="text-[#8B59F7] text-[14px] relative z-10">MINM报价 - + <img + class="w-[12px] h-[12px]" + src="@/assets/image/downlink.png" + alt="cl" + /> + <div + @click="handleClick(state.marqueeArr[2].linkUrl)" + class="text-[#8B59F7] text-[14px] relative z-10" + > + {{ t("investor.latest_news.stock.link") }} </div> </div> </div> </div> </div> </div> - </div> - <div class="content2 relative flex items-center pb-[120px] pt-[148px] bg-[#F8F9FF] float-up"> + <div + class="content2 bg-[#fff] 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="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 text-animate"> - 财务数据 - </div> + <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 text-animate" + > + {{ t("investor.financial_data.title") }} </div> - <div class="ml-[494px] w-920px min-h-473px bg-[#fff] mt-[55px] float-up" - style="box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.16);border-radius: 8px;padding: 5px;"> + <div + class="mt-[46px]" + 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 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]" + > + {{ t("investor.financial_data.years.year2023") }} </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年 + class="font-bold bg-[#8B59F7] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]" + > + {{ t("investor.financial_data.years.year2022") }} </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年 + class="font-bold bg-[#6520FA] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]" + > + {{ t("investor.financial_data.years.year2021") }} </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]"> - 利润报告 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.profit_report") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -493,33 +552,68 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q4')" + >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 class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q4')" + >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]"> - 收益报告 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.earnings_report") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -528,33 +622,64 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2022', 'Q3')">Q3</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2022', 'Q3')" + >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 class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q4')" + >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]"> - 财报电话会议 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.earnings_call") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -563,33 +688,64 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2022', 'Q3')">Q3</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2022', 'Q3')" + >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 class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q4')" + >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 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.sec_filings") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -598,200 +754,287 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q4')" + >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 class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q4')" + >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]"> - 年度报告 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.annual_report") }} </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年 + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > + {{ t("investor.financial_data.years.year2023") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Report', '2022')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - 2022年 + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + {{ t("investor.financial_data.years.year2022") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Report', '2021')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - 2021年 + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + {{ t("investor.financial_data.years.year2021") }} </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]"> - 年度会议 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.annual_meeting") }} </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年 + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > + {{ t("investor.financial_data.years.year2023") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Meeting', '2022')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - 2022年 + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + {{ t("investor.financial_data.years.year2022") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Meeting', '2021')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - 2021年 + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + {{ t("investor.financial_data.years.year2021") }} </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]"> - 特别股东大会 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.special_meeting") }} </div> </n-gi> <n-gi> <div - @click="handleYClick('Special Meeting', '2023')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - 2023年 + @click="handleYClick('Special Shareholder Meeting', '2023')" + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + {{ t("investor.financial_data.years.year2023") }} </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年 + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > + {{ t("investor.financial_data.years.year2022") }} </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年 + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > + {{ t("investor.financial_data.years.year2021") }} </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]"> - 委托书 + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > + {{ t("investor.financial_data.reports.proxy_statement") }} </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年 + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > + {{ t("investor.financial_data.years.year2023") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Proxy Statement', '2022')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - 2022年 + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + {{ t("investor.financial_data.years.year2022") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Proxy Statement', '2021')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - 2021年 + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + {{ t("investor.financial_data.years.year2021") }} </div> </n-gi> </n-grid> - </div> <div - @click="handleClick('https://ir.minim.com/contact')" - 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 float-up"> + @click="handleClick('/investorhandbook')" + 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 float-up z-8 relative" + > <div class="flex items-center"> - 投资者沟通指南 <span class="ml-[20px]">></span> + <div class="max-w-[180px] truncate"> + {{ t("investor.financial_data.investor_guide") }} + </div> + <span class="ml-[20px]">></span> </div> </div> </div> </div> - <div class="content4 relative bg-[#fff] pb-[146px] overflow-hidden float-up"> + <div + class="content4 relative bg-[#fff] pb-[146px] overflow-hidden float-up z-4" + > <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/tzls.png" alt="cl" /> - <div class="absolute top-[86px] pl-[505px] pr-[490px] z-4 flex justify-between items-center"> + <div + class="absolute top-[86px] pl-[505px] pr-[490px] z-4 flex justify-between items-center z-8" + > <div class="w-[407px]"> - <div class="w-52px h-7px bg-[#8B59F7]"> - </div> - <div class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold text-animate"> - 行情走势 + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold text-animate" + > + {{ t("investor.market_trends.title") }} </div> - <div class="text-[#D1D1D1] text-[14px] mt-[56px] max-w-[407px] text-animate"> - SEC文件是提交给美国证券交易委员会(SEC)的文 件。上市公司和某些内部人士必须定期向美国证券交易 委员会提交文件。这些文件可以通过美国证券交易委员 会的在线数据库获得。 + <div + class="text-[#D1D1D1] text-[14px] mt-[56px] max-w-[407px] text-animate" + > + {{ t("investor.market_trends.sec_description1") }} </div> - <div class="text-[#D1D1D1] text-[14px] mt-[20px] max-w-[407px] text-animate"> - 通过在下面进行选择,您将离开Minim网站。Minim对您 可以通过此网站访问的任何其他网站不作任何陈述。当 您访问非Minim网站时,即使是可能包含Minim徽标的网 - 站,请理解它独立于Minim,Minim无法控制该网站上的 内容。此外,链接到非Minim网站并不意味着Minim认可 或接受对该网站的内容或使用的任何责任。 + <div + class="text-[#D1D1D1] text-[14px] mt-[20px] max-w-[407px] text-animate" + > + {{ t("investor.market_trends.sec_description2") }} </div> <div - @click="handleClick('https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=0001467761&owner=include&count=40&hidefilings=0')" - class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center float-up"> + @click=" + handleClick( + 'https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=0001467761&owner=include&count=40&hidefilings=0' + ) + " + class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center float-up" + > <div class="flex items-center"> - 查看所有SEC文件 <span class="ml-[20px]">></span> + <div class="max-w-[180px] truncate"> + {{ t("investor.market_trends.view_all_sec") }} + </div> + <span class="ml-[20px]">></span> </div> </div> </div> <div class="ml-[42px] image-animate"> - <img class="w-[465px] h-[473px]" src="@/assets/image/dbs.png" alt="cl" /> + <img + class="w-[465px] h-[473px]" + src="@/assets/image/dbs.png" + alt="cl" + /> </div> </div> <div class="pl-[505px] pr-[490px] z-4"> - <div class="w-52px h-7px bg-[#8B59F7]"> + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate" + > + {{ t("investor.board_of_directors.title") }} </div> - <div class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate"> - 董事会 - </div> - <div class="flex items-center mt-[55px]"> - <div class="w-[438px] h-[157px] relative float-up"> + <div class="flex justify-around items-center mt-[55px]"> + <div + class="w-[438px] h-[157px] relative float-up z-8 shadow-[0_8px_16px_3px_rgba(0,0,0,0.16)] rounded-[20px]" + > <img src="@/assets/image/pxr.png" alt="cl" /> - <div class="text-[#fff] text-[20px] font-bold absolute bottom-[50px] left-[18px]">帕特里克·里瓦德</div> - <div class="text-[#EBEBEB] text-[16px] absolute bottom-[20px] left-[18px]">董事会董事、美国财富保护公司合伙人兼首席财务官</div> + <div + class="text-[#fff] text-[20px] font-bold absolute bottom-[50px] left-[18px]" + > + {{ t("investor.board_of_directors.directors.patrick.name") }} + </div> + <div + class="text-[#EBEBEB] text-[16px] absolute bottom-[20px] left-[18px]" + > + {{ t("investor.board_of_directors.pxr_description") }} + </div> </div> - <div class="w-[438px] h-[157px] relative ml-[28px] float-up"> + <div + class="w-[438px] h-[157px] relative float-up z-8 shadow-[0_8px_16px_3px_rgba(0,0,0,0.16)] rounded-[20px]" + > <img src="@/assets/image/bxr.png" alt="cl" /> - <div class="text-[#10253E] text-[20px] font-bold absolute bottom-[50px] left-[18px]">安德鲁·帕帕尼科劳</div> - <div class="text-[#455363] text-[16px] absolute bottom-[20px] left-[18px]">董事会董事、雷神公司财务经理</div> + <div + class="text-[#10253E] text-[20px] font-bold absolute bottom-[50px] left-[18px]" + > + {{ t("investor.board_of_directors.directors.andrew.name") }} + </div> + <div + class="text-[#455363] text-[16px] absolute bottom-[20px] left-[18px]" + > + {{ t("investor.board_of_directors.bxr_description") }} + </div> </div> - </div> </div> </div> @@ -801,146 +1044,238 @@ const state = reactive({ <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="w-52px h-7px bg-[#8B59F7]"> + <div + class="mt-[93px] pb-[103px] carousel-container pl-[505px] pr-[490px] z-4" + > + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate" + > + {{ t("investor.governance_diversity_committee.title") }} </div> - <div class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate"> - 治理、多样性和委员会章程 - </div> - <div class="mt-[50px]"> + <div class="mt-[50px] mb-[120px]"> <n-grid x-gap="15" y-gap="16" :cols="2"> <n-gi> <div @click="handleClick(state.linkArr[0].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 高级财务人员道德守则 + {{ t("investor.governance.documents.ethics_code") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[1].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 冲突矿产声明 + {{ t("investor.governance.documents.conflict_minerals") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[2].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 道德和商业行为准则 + {{ t("investor.governance.documents.business_conduct") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[3].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 审计委员会章程 + {{ t("investor.governance.documents.audit_committee") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> - <n-gi> <div @click="handleClick(state.linkArr[4].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 举报人政策 + {{ t("investor.governance.documents.whistleblower") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[5].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 薪酬委员会章程 + {{ + t( + "investor.governance.documents.compensation_committee" + ) + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[6].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 关联方交易政策 + {{ t("investor.governance.documents.related_party") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[7].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 提名和治理委员会章程 + {{ + t("investor.governance.documents.nomination_committee") + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[8].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 2022年多样性矩阵 + {{ + t("investor.governance.documents.diversity_matrix_2022") + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[9].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - 2023年多样性矩阵 + {{ + t("investor.governance.documents.diversity_matrix_2023") + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> </n-grid> @@ -956,8 +1291,6 @@ const state = reactive({ </footer> </template> - - <style lang="scss" scoped> .header { width: 100%; @@ -1036,9 +1369,11 @@ const state = reactive({ left: 720px; width: 1px; height: 100vw; - background-image: linear-gradient(to bottom, - rgba(230, 234, 238, 0.5), - transparent 50%); + background-image: linear-gradient( + to bottom, + rgba(230, 234, 238, 0.5), + transparent 50% + ); background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } @@ -1049,9 +1384,11 @@ const state = reactive({ left: 952px; width: 1px; height: 100vw; - background-image: linear-gradient(to bottom, - rgba(230, 234, 238, 0.5), - transparent 50%); + background-image: linear-gradient( + to bottom, + rgba(230, 234, 238, 0.5), + transparent 50% + ); background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } @@ -1062,9 +1399,11 @@ const state = reactive({ left: 1182px; width: 1px; height: 100vw; - background-image: linear-gradient(to bottom, - rgba(230, 234, 238, 0.5), - transparent 50%); + background-image: linear-gradient( + to bottom, + rgba(230, 234, 238, 0.5), + transparent 50% + ); background-size: 1px 15px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } @@ -1152,7 +1491,6 @@ const state = reactive({ overflow: hidden; text-overflow: ellipsis; line-height: 1.5; - } // 添加一个通用的溢出控制类 @@ -1168,11 +1506,11 @@ const state = reactive({ .language-arrow { font-size: 12px; margin-left: 4px; - color: #10263E; + color: #10263e; transition: transform 0.3s ease; } .tab-item:hover .language-arrow { - color: #8B59F7; + color: #8b59f7; } </style> diff --git a/src/views/investor/size1920/index.vue b/src/views/investor/size1920/index.vue index 33aa118..aaa23b1 100644 --- a/src/views/investor/size1920/index.vue +++ b/src/views/investor/size1920/index.vue @@ -1,11 +1,5 @@ <script setup> -import { - onUnmounted, - ref, - watch, - reactive, - onMounted -} from "vue"; +import { onUnmounted, ref, watch, reactive, onMounted } from "vue"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import { useHome } from "@/store/home/index.js"; @@ -18,8 +12,7 @@ import { useLanguage } from "@/utils/changeLanguage.js"; gsap.registerPlugin(ScrollTrigger); const { currentTab } = useHome(); const router = useRouter(); -const { transitionState } = - useTransitionComposable(); +const { transitionState } = useTransitionComposable(); const main = ref(); let ctx; const { @@ -30,7 +23,7 @@ const { initLanguage, currentLang, currentBannerImages, - t + t, } = useLanguage(); const handleTabClick = (tab) => { currentTab.value = tab; @@ -78,7 +71,7 @@ onMounted(() => { }); // 内容上浮动画 - gsap.utils.toArray('.float-up').forEach((element) => { + gsap.utils.toArray(".float-up").forEach((element) => { gsap.from(element, { y: 100, opacity: 0, @@ -86,16 +79,16 @@ onMounted(() => { ease: "back.out(1.2)", scrollTrigger: { trigger: element, - start: 'top 100%', + start: "top 100%", toggleActions: "play none none reverse", immediateRender: false, once: false, - } + }, }); }); // 卡片上升动画 - const cards = gsap.utils.toArray('.carousel-item'); + const cards = gsap.utils.toArray(".carousel-item"); cards.forEach((card, index) => { gsap.from(card, { y: 100, @@ -105,16 +98,16 @@ onMounted(() => { ease: "back.out(1.2)", scrollTrigger: { trigger: card, - start: 'top 105%', + start: "top 105%", toggleActions: "play none none reverse", immediateRender: false, once: false, - } + }, }); }); // 表格行依次淡入动画 - gsap.utils.toArray('.content2 .n-grid .n-gi').forEach((row, index) => { + gsap.utils.toArray(".content2 .n-grid .n-gi").forEach((row, index) => { gsap.from(row, { opacity: 0, y: 30, @@ -127,12 +120,12 @@ onMounted(() => { toggleActions: "play none none reverse", immediateRender: false, once: false, - } + }, }); }); // 治理章程列表动画 - gsap.from('.content5 .n-grid .n-gi', { + gsap.from(".content5 .n-grid .n-gi", { opacity: 0, y: 50, duration: 0.8, @@ -142,12 +135,12 @@ onMounted(() => { }, ease: "back.out(1.2)", scrollTrigger: { - trigger: '.content5', + trigger: ".content5", start: "top 105%", toggleActions: "play none none none", immediateRender: false, - once: true - } + once: true, + }, }); // 强制刷新ScrollTrigger以正确计算位置 @@ -160,16 +153,16 @@ onUnmounted(() => { ctx?.revert(); // <- Easy Cleanup! }); const handleClick = (linkUrl) => { - window.open(linkUrl, '_blank'); + window.open(linkUrl, "_blank"); }; const handleQClick = (type, year, subType) => { - console.log(type, year, subType, state.qLink?.[type]?.[year]?.[subType]) + console.log(type, year, subType, state.qLink?.[type]?.[year]?.[subType]); if (state.qLink?.[type]?.[year]?.[subType]) { window.open(state.qLink[type][year][subType]); } }; const handleYClick = (type, year) => { - console.log(type, year, state.yLink?.[type]?.[year]) + console.log(type, year, state.yLink?.[type]?.[year]); if (state.yLink?.[type]?.[year]) { window.open(state.yLink[type][year]); } @@ -177,7 +170,8 @@ const handleYClick = (type, year) => { const state = reactive({ marqueeArr: [ { - linkUrl: "https://spaces.hightail.com/receive/RpIYgWf2p0", + linkUrl: + "https://hello.minim.co/hubfs/docs/MINM-Q4-FY22-Earnings-Results.pdf?__hstc=56173940.2f10611562d9d3c76f0809f1a47d2275.1680104200211.1680104200211.1680104200211.1&__hssc=56173940.1.1680104200211&__hsfp=1592164616&hsLang=en", }, { linkUrl: @@ -313,40 +307,48 @@ const state = reactive({ <img src="@/assets/image/logo.png" alt="logo" /> </div> <div class="tabs"> - <div class="tab-item" :class="{ - active: currentTab === 'home', - }" @click="handleTabClick('home')"> + <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' - ) - "> + <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') - "> + <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') - "> + <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"> + <n-popselect + v-model:value="currentLanguage" + :options="languageOptions" + @update:value="changeLanguage" + > <div class="language-display"> {{ currentLanguageLabel }} <span class="language-arrow">▼</span> @@ -357,63 +359,105 @@ const state = reactive({ </header> <main ref="main" class="height-full"> <div class="head relative"> + <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/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 text-animate" + > {{ t("investor.title") }} </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] text-animate" + > {{ t("investor.subtitle") }} </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"> + <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 text-animate"> + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate" + > {{ t("investor.latest_news.title") }} </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-item z-8"> + <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>{{ t("investor.latest_news.financial.title") }}</div> - <div class="text-[#9F9F9F] text-[14px]">{{ t("investor.latest_news.financial.date") }}</div> + <div class="text-[#9F9F9F] text-[14px]"> + {{ t("investor.latest_news.financial.date") }} + </div> </div> <div class="carousel-subtitle"> <div>{{ t("investor.latest_news.financial.content") }}</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 @click="handleClick(state.marqueeArr[0].linkUrl)" class="text-[#8B59F7] text-[14px] relative z-10">{{ t("investor.latest_news.financial.link") }}</div> + <img + class="w-[12px] h-[12px]" + src="@/assets/image/downlink.png" + alt="cl" + /> + <div + @click="handleClick(state.marqueeArr[0].linkUrl)" + class="text-[#8B59F7] text-[14px] relative z-10" + > + {{ t("investor.latest_news.financial.link") }} + </div> </div> </div> </div> - <div class="carousel-item"> - <img class="carousel-image relative z-10" src="@/assets/image/dt2.png" /> + <div class="carousel-item z-8"> + <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>{{ t("investor.latest_news.events.title") }}</div> - <div class="text-[#9F9F9F] text-[14px]">{{ t("investor.latest_news.events.date") }}</div> + <div class="text-[#9F9F9F] text-[14px]"> + {{ t("investor.latest_news.events.date") }} + </div> </div> <div class="carousel-subtitle"> <div>{{ t("investor.latest_news.events.content") }}</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 @click="handleClick(state.marqueeArr[1].linkUrl)" class="text-[#8B59F7] text-[14px] relative z-10"> - {{ t("investor.latest_news.events.link") }}</div> + <img + class="w-[12px] h-[12px]" + src="@/assets/image/downlink.png" + alt="cl" + /> + <div + @click="handleClick(state.marqueeArr[1].linkUrl)" + class="text-[#8B59F7] text-[14px] relative z-10" + > + {{ t("investor.latest_news.events.link") }} + </div> </div> </div> </div> - <div class="carousel-item"> - <img class="carousel-image relative z-10" src="@/assets/image/dt3.png" /> + <div class="carousel-item z-8"> + <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>{{ t("investor.latest_news.stock.title") }}</div> @@ -422,17 +466,26 @@ const state = reactive({ <div>{{ t("investor.latest_news.stock.content") }}</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 @click="handleClick(state.marqueeArr[2].linkUrl)" class="text-[#8B59F7] text-[14px] relative z-10">{{ t("investor.latest_news.stock.link") }} + <img + class="w-[12px] h-[12px]" + src="@/assets/image/downlink.png" + alt="cl" + /> + <div + @click="handleClick(state.marqueeArr[2].linkUrl)" + class="text-[#8B59F7] text-[14px] relative z-10" + > + {{ t("investor.latest_news.stock.link") }} </div> </div> </div> </div> </div> </div> - </div> - <div class="content2 relative flex items-center pb-[120px] pt-[148px] bg-[#F8F9FF] float-up"> + <div + class="content2 relative flex items-center pb-[120px] pt-[148px] bg-[#F8F9FF] float-up" + > <n-divider class="divider1" vertical /> <div class="divider2" style=""></div> <div class="divider3" style=""></div> @@ -440,48 +493,58 @@ const state = reactive({ <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 text-animate"> + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate" + > {{ t("investor.financial_data.title") }} </div> </div> - <div class="ml-[494px] w-920px min-h-473px bg-[#fff] mt-[55px] float-up" - style="box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.16);border-radius: 8px;padding: 5px;"> + <div + class="ml-[494px] w-920px min-h-473px bg-[#fff] mt-[55px] float-up" + 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> + <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]"> + class="font-bold bg-[#C6ACFF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]" + > {{ t("investor.financial_data.years.year2023") }} </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]"> + class="font-bold bg-[#8B59F7] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]" + > {{ t("investor.financial_data.years.year2022") }} </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]"> + class="font-bold bg-[#6520FA] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#fff] text-[18px]" + > {{ t("investor.financial_data.years.year2021") }} </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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.profit_report") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -490,33 +553,68 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2022', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2022', 'Q4')" + >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 class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Release', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Release', '2021', 'Q4')" + >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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.earnings_report") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -525,33 +623,64 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2022', 'Q3')">Q3</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2022', 'Q3')" + >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 class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Presentation', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Presentation', '2021', 'Q4')" + >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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.earnings_call") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -560,33 +689,64 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2022', 'Q3')">Q3</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2022', 'Q3')" + >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 class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('Earnings Call', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('Earnings Call', '2021', 'Q4')" + >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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.sec_filings") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + 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> @@ -595,202 +755,288 @@ const state = reactive({ </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2022', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2022', 'Q4')" + >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 class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q1')">Q1</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q2')">Q2</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q3')">Q3</span> - <span class="cursor-pointer" @click="handleQClick('10-Q/10-K', '2021', 'Q4')">Q4</span> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q1')" + >Q1</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q2')" + >Q2</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q3')" + >Q3</span + > + <span + class="cursor-pointer" + @click="handleQClick('10-Q/10-K', '2021', 'Q4')" + >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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.annual_report") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > {{ t("investor.financial_data.years.year2023") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Report', '2022')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > {{ t("investor.financial_data.years.year2022") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Report', '2021')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > {{ t("investor.financial_data.years.year2021") }} </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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.annual_meeting") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > {{ t("investor.financial_data.years.year2023") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Meeting', '2022')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > {{ t("investor.financial_data.years.year2022") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Annual Meeting', '2021')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > {{ t("investor.financial_data.years.year2021") }} </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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.special_meeting") }} </div> </n-gi> <n-gi> <div - @click="handleYClick('Special Meeting', '2023')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> + @click="handleYClick('Special Shareholder Meeting', '2023')" + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > {{ t("investor.financial_data.years.year2023") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > {{ t("investor.financial_data.years.year2022") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > {{ t("investor.financial_data.years.year2021") }} </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]"> + class="font-bold bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center p-l-10px text-[#10263E] text-[18px]" + > {{ t("investor.financial_data.reports.proxy_statement") }} </div> </n-gi> <n-gi> <div - class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]"> + class="bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#9F9F9F] text-[18px]" + > {{ t("investor.financial_data.years.year2023") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Proxy Statement', '2022')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > {{ t("investor.financial_data.years.year2022") }} </div> </n-gi> <n-gi> <div @click="handleYClick('Proxy Statement', '2021')" - class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]"> + class="cursor-pointer bg-[#F8F9FF] h-[47px] rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]" + > {{ t("investor.financial_data.years.year2021") }} </div> </n-gi> </n-grid> - </div> - <div class="w-98vw flex items-center justify-center"> - <div - @click="handleClick('/investorhandbook')" - class="rounded-[24px] cursor-pointer justify-center p-[13px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center float-up"> - <div class="flex items-center"> - {{ t("investor.financial_data.investor_guide") }} <span class="ml-[20px]">></span> + <div class="w-98vw flex items-center justify-center"> + <div + @click="handleClick('/investorhandbook')" + class="rounded-[24px] cursor-pointer justify-center p-[13px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center float-up z-8" + > + <div class="flex items-center"> + {{ t("investor.financial_data.investor_guide") }} + <span class="ml-[20px]">></span> + </div> </div> </div> </div> - </div> </div> - <div class="content4 relative bg-[#fff] pb-[146px] overflow-hidden float-up"> + <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/tzls.png" alt="cl" /> - <div class="absolute top-[86px] pl-[505px] pr-[490px] z-4 flex justify-between items-center"> + <div + class="absolute top-[86px] pl-[505px] pr-[490px] z-4 flex justify-between items-center z-8" + > <div class="w-[407px]"> - <div class="w-52px h-7px bg-[#8B59F7]"> - </div> - <div class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold text-animate"> + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold text-animate" + > {{ t("investor.market_trends.title") }} </div> - <div class="text-[#D1D1D1] text-[14px] mt-[56px] max-w-[407px] text-animate"> + <div + class="text-[#D1D1D1] text-[14px] mt-[56px] max-w-[407px] text-animate" + > {{ t("investor.market_trends.sec_description1") }} </div> - <div class="text-[#D1D1D1] text-[14px] mt-[20px] max-w-[407px] text-animate"> + <div + class="text-[#D1D1D1] text-[14px] mt-[20px] max-w-[407px] text-animate" + > {{ t("investor.market_trends.sec_description2") }} </div> <div - style="width: fit-content;" - @click="handleClick('https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=0001467761&owner=include&count=40&hidefilings=0')" - class="rounded-[24px] cursor-pointer justify-center p-[13px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center float-up"> + style="width: fit-content" + @click=" + handleClick( + 'https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=0001467761&owner=include&count=40&hidefilings=0' + ) + " + class="rounded-[24px] cursor-pointer justify-center p-[13px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center float-up" + > <div class="flex items-center"> - {{ t("investor.market_trends.view_all_sec") }} <span class="ml-[20px]">></span> + {{ t("investor.market_trends.view_all_sec") }} + <span class="ml-[20px]">></span> </div> </div> </div> <div class="ml-[42px] image-animate"> - <img class="w-[465px] h-[473px]" src="@/assets/image/dbs.png" alt="cl" /> + <img + class="w-[465px] h-[473px]" + src="@/assets/image/dbs.png" + alt="cl" + /> </div> </div> <div class="pl-[505px] pr-[490px] z-4"> - <div class="w-52px h-7px bg-[#8B59F7]"> - </div> - <div class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate"> + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate" + > {{ t("investor.board_of_directors.title") }} </div> - <div class="flex items-center mt-[55px]"> - <div class="w-[438px] h-[157px] relative float-up"> + <div class="flex justify-around items-center mt-[55px]"> + <div + class="w-[438px] h-[157px] relative float-up z-8 shadow-[0_10px_20px_5px_rgba(0,0,0,0.16)] rounded-[20px]" + > <img src="@/assets/image/pxr.png" alt="cl" /> - <div class="text-[#fff] text-[20px] font-bold absolute bottom-[50px] left-[18px]">{{ t("investor.board_of_directors.directors.patrick.name") }}</div> - <div class="text-[#EBEBEB] text-[16px] absolute bottom-[20px] left-[18px]">{{ t("investor.board_of_directors.directors.patrick.position") }}</div> + <div + class="text-[#fff] text-[20px] font-bold absolute bottom-[50px] left-[18px]" + > + {{ t("investor.board_of_directors.directors.patrick.name") }} + </div> + <div + class="text-[#EBEBEB] text-[16px] absolute bottom-[20px] left-[18px]" + > + {{ + t("investor.board_of_directors.directors.patrick.position") + }} + </div> </div> - <div class="w-[438px] h-[157px] relative ml-[28px] float-up"> + <div + class="w-[438px] h-[157px] relative float-up z-8 shadow-[0_10px_20px_5px_rgba(0,0,0,0.16)] rounded-[20px]" + > <img src="@/assets/image/bxr.png" alt="cl" /> - <div class="text-[#10253E] text-[20px] font-bold absolute bottom-[50px] left-[18px]">{{ t("investor.board_of_directors.directors.andrew.name") }}</div> - <div class="text-[#455363] text-[16px] absolute bottom-[20px] left-[18px]">{{ t("investor.board_of_directors.directors.andrew.position") }}</div> + <div + class="text-[#10253E] text-[20px] font-bold absolute bottom-[50px] left-[18px]" + > + {{ t("investor.board_of_directors.directors.andrew.name") }} + </div> + <div + class="text-[#455363] text-[16px] absolute bottom-[20px] left-[18px]" + > + {{ t("investor.board_of_directors.directors.andrew.position") }} + </div> </div> - </div> </div> </div> @@ -800,10 +1046,13 @@ const state = reactive({ <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="w-52px h-7px bg-[#8B59F7]"> - </div> - <div class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate"> + <div + class="mt-[93px] pb-[103px] carousel-container pl-[505px] pr-[490px] z-4" + > + <div class="w-52px h-7px bg-[#8B59F7]"></div> + <div + class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate" + > {{ t("investor.governance.title") }} </div> <div class="mt-[50px]"> @@ -811,134 +1060,224 @@ const state = reactive({ <n-gi> <div @click="handleClick(state.linkArr[0].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> {{ t("investor.governance.documents.ethics_code") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[1].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> {{ t("investor.governance.documents.conflict_minerals") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> - <div + <div @click="handleClick(state.linkArr[2].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> {{ t("investor.governance.documents.business_conduct") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[3].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> {{ t("investor.governance.documents.audit_committee") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[4].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> {{ t("investor.governance.documents.whistleblower") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[5].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - {{ t("investor.governance.documents.compensation_committee") }} + {{ + t( + "investor.governance.documents.compensation_committee" + ) + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[6].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> {{ t("investor.governance.documents.related_party") }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[7].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - {{ t("investor.governance.documents.nomination_committee") }} + {{ + t("investor.governance.documents.nomination_committee") + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[8].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - {{ t("investor.governance.documents.diversity_matrix_2022") }} + {{ + t("investor.governance.documents.diversity_matrix_2022") + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> <n-gi> <div @click="handleClick(state.linkArr[9].link)" - class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up"> + class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up" + > <div class="flex items-center"> - <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div> + <div + class="w-5px h-37px bg-[#C6ACFF]" + style="border-radius: 8px 0 0 8px" + ></div> <div class="text-[#10253E] text-[18px] font-bold ml-[10px]"> - {{ t("investor.governance.documents.diversity_matrix_2023") }} + {{ + t("investor.governance.documents.diversity_matrix_2023") + }} </div> </div> - <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" /> + <img + class="w-[9px] h-[17px] mr-[15px]" + src="@/assets/image/nstep.png" + alt="cl" + /> </div> </n-gi> </n-grid> @@ -954,8 +1293,6 @@ const state = reactive({ </footer> </template> - - <style lang="scss" scoped> .header { width: 100%; @@ -1034,9 +1371,11 @@ const state = reactive({ left: 720px; width: 1px; height: 100vw; - background-image: linear-gradient(to bottom, - rgba(230, 234, 238, 0.5), - transparent 50%); + background-image: linear-gradient( + to bottom, + rgba(230, 234, 238, 0.5), + transparent 50% + ); background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } @@ -1047,9 +1386,11 @@ const state = reactive({ left: 952px; width: 1px; height: 100vw; - background-image: linear-gradient(to bottom, - rgba(230, 234, 238, 0.5), - transparent 50%); + background-image: linear-gradient( + to bottom, + rgba(230, 234, 238, 0.5), + transparent 50% + ); background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } @@ -1060,9 +1401,11 @@ const state = reactive({ left: 1182px; width: 1px; height: 100vw; - background-image: linear-gradient(to bottom, - rgba(230, 234, 238, 0.5), - transparent 50%); + background-image: linear-gradient( + to bottom, + rgba(230, 234, 238, 0.5), + transparent 50% + ); background-size: 1px 15px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } @@ -1150,7 +1493,6 @@ const state = reactive({ overflow: hidden; text-overflow: ellipsis; line-height: 1.5; - } // 添加一个通用的溢出控制类 @@ -1166,11 +1508,11 @@ const state = reactive({ .language-arrow { font-size: 12px; margin-left: 4px; - color: #10263E; + color: #10263e; transition: transform 0.3s ease; } .tab-item:hover .language-arrow { - color: #8B59F7; + color: #8b59f7; } </style> diff --git a/src/views/investor/size375/index.vue b/src/views/investor/size375/index.vue index 80e766e..a4b4901 100644 --- a/src/views/investor/size375/index.vue +++ b/src/views/investor/size375/index.vue @@ -102,7 +102,7 @@ <div class="w-full px-[158px] mb-[118px]"> <div - class="bg-[#fff] flex w-full text-[72px] pa-[13px] shadow-[0_15px_102px_5px_rgba(0,0,0,0.16)] rounded-[41px]" + class="bg-[#fff] flex w-full text-[72px] pa-[6px] shadow-[0_15px_102px_5px_rgba(0,0,0,0.16)] rounded-[41px]" > <div class="w-4/10 text-[#10263E] font-semibold" @@ -179,8 +179,7 @@ " > <div v-if="!isAnimating"> - {{ state.activeYear - }}{{ + {{ t("investor.financial_data.years.year" + state.activeYear) }} </div> @@ -304,8 +303,7 @@ @click="handleYClick('Annual Report')" > <div> - {{ state.activeYear - }}{{ + {{ t("investor.financial_data.years.year" + state.activeYear) }} </div> @@ -316,8 +314,7 @@ @click="handleYClick('Annual Meeting')" > <div> - {{ state.activeYear - }}{{ + {{ t("investor.financial_data.years.year" + state.activeYear) }} </div> @@ -328,8 +325,7 @@ @click="handleYClick('Special Shareholder Meeting')" > <div> - {{ state.activeYear - }}{{ + {{ t("investor.financial_data.years.year" + state.activeYear) }} </div> @@ -340,8 +336,7 @@ @click="handleYClick('Proxy Statement')" > <div> - {{ state.activeYear - }}{{ + {{ t("investor.financial_data.years.year" + state.activeYear) }} </div> @@ -608,7 +603,8 @@ const state = reactive({ date: t("investor.latest_news.financial.date"), link: t("investor.latest_news.financial.link"), imgUrl: imageshow1, - linkUrl: "https://spaces.hightail.com/receive/RpIYgWf2p0", + linkUrl: + "https://hello.minim.co/hubfs/docs/MINM-Q4-FY22-Earnings-Results.pdf?__hstc=56173940.2f10611562d9d3c76f0809f1a47d2275.1680104200211.1680104200211.1680104200211.1&__hssc=56173940.1.1680104200211&__hsfp=1592164616&hsLang=en", }, { title: t("investor.latest_news.events.title"), @@ -1275,9 +1271,9 @@ const calcYLinkClass = (type) => { will-change: transform, opacity; } .link-Q { - color: #036c85; + color: #8b59fa; } .link-Y { - color: #036c85; + color: #8b59fa; } </style> diff --git a/src/views/investor/size768/index.vue b/src/views/investor/size768/index.vue index 4d15bca..e1aaf8e 100644 --- a/src/views/investor/size768/index.vue +++ b/src/views/investor/size768/index.vue @@ -46,7 +46,7 @@ <div>{{ t("investor.latest_news.title") }}</div> </div> <div - class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-6" + class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-8" @mouseenter="pauseCarouselAnimation" @mouseleave="resumeCarouselAnimation" @touchstart="pauseCarouselAnimation" @@ -59,7 +59,7 @@ class="carousel-item" > <img class="carousel-image" :src="item.imgUrl" /> - <div class="carousel-title flex justify-between"> + <div class="carousel-title flex justify-between z-8"> <div>{{ item.title }}</div> <div v-if="item.date" class="text-[#9F9F9F] text-[35px]"> {{ item.date }} @@ -179,8 +179,7 @@ " > <div v-if="!isAnimating"> - {{ state.activeYear - }}{{ + {{ t("investor.financial_data.years.year" + state.activeYear) }} </div> @@ -303,28 +302,44 @@ :class="calcYLinkClass('Annual Report')" @click="handleYClick('Annual Report')" > - <div>{{ state.activeYear }}年</div> + <div> + {{ + t("investor.financial_data.years.year" + state.activeYear) + }} + </div> </div> <div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]" :class="calcYLinkClass('Annual Meeting')" @click="handleYClick('Annual Meeting')" > - <div>{{ state.activeYear }}年</div> + <div> + {{ + t("investor.financial_data.years.year" + state.activeYear) + }} + </div> </div> <div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]" :class="calcYLinkClass('Special Shareholder Meeting')" @click="handleYClick('Special Shareholder Meeting')" > - <div>{{ state.activeYear }}年</div> + <div> + {{ + t("investor.financial_data.years.year" + state.activeYear) + }} + </div> </div> <div class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]" :class="calcYLinkClass('Proxy Statement')" @click="handleYClick('Proxy Statement')" > - <div>{{ state.activeYear }}年</div> + <div> + {{ + t("investor.financial_data.years.year" + state.activeYear) + }} + </div> </div> </div> </div> @@ -578,7 +593,8 @@ const state = reactive({ date: t("investor.latest_news.financial.date"), link: t("investor.latest_news.financial.link"), imgUrl: imageshow1, - linkUrl: "https://spaces.hightail.com/receive/RpIYgWf2p0", + linkUrl: + "https://hello.minim.co/hubfs/docs/MINM-Q4-FY22-Earnings-Results.pdf?__hstc=56173940.2f10611562d9d3c76f0809f1a47d2275.1680104200211.1680104200211.1680104200211.1&__hssc=56173940.1.1680104200211&__hsfp=1592164616&hsLang=en", }, { title: t("investor.latest_news.events.title"), @@ -1244,9 +1260,9 @@ const calcYLinkClass = (type) => { will-change: transform, opacity; } .link-Q { - color: #036c85; + color: #8b59fa; } .link-Y { - color: #036c85; + color: #8b59fa; } </style> diff --git a/src/views/investorhandbook/size1440/index.vue b/src/views/investorhandbook/size1440/index.vue index 6c77029..55918be 100644 --- a/src/views/investorhandbook/size1440/index.vue +++ b/src/views/investorhandbook/size1440/index.vue @@ -1,57 +1,121 @@ <template> <div class="page-container"> - <n-divider class="divider1" vertical /> - <n-divider class="divider5" vertical /> - <AppHeader /> - - <main> - <section className="section-first" style="background: #fff"> + <header className="header"> + <div class="logo"> + <img src="@/assets/image/logo.png" alt="logo" /> + </div> + <div class="tabs"> <div - class="flex flex-wrap justify-center tracking-[4px] leading-[75px]" + class="tab-item" + :class="{ + active: currentTab === 'home', + }" + @click="handleTabClick('home')" > - <div class="w-full title mt-[298px] px-[180px] text-center"> - 与投资者社区的最低沟通指南 + {{ 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> + <section className="section-first relative" style="background: #fff"> + <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-wrap justify-center tracking-[4px] leading-[40px]" + > + <div class="w-full title mt-[108px] px-[400px] text-center"> + {{ t("investorhandbook.title") }} </div> <div - class="w-full flex flex-wrap px-[188px] text-[#455363] text-[40px] mb-[275px]" + class="w-full flex flex-wrap px-[363px] text-[#455363] text-[21px] mb-[275px]" > - <div class="w-full font-semibold mt-[63px] text-[45px]"> + <div class="w-full font-semibold mt-[63px] text-[24px]"> <img - class="w-[30px] h-[30px] mr-[4px]" + class="w-[16px] h-[16px] mr-[4px]" src="@/assets/image/icon-c.png" alt="logo" /> - 授权发言人 + {{ t("investorhandbook.authorized_speakers.title") }} </div> - <div class="w-full mt-[50px]"> - 以下Minim代表有权与分析师、股票经纪人、个人和机构股东的投资界进行沟通: + <div class="w-full mt-[27px]"> + {{ t("investorhandbook.authorized_speakers.desc") }} </div> - <div class="w-full">· 总裁</div> - <div class="w-full">· 总裁兼首席营销官</div> - <div class="w-full">· 首席财务官</div> - <div class="w-full">在本指南中,这些代表被称为“授权IR联系人”</div> - <div class="w-full font-semibold mt-[100px] text-[45px]"> + <div class="w-full"> + · {{ t("investorhandbook.authorized_speakers.items.0") }} + </div> + <div class="w-full"> + · {{ t("investorhandbook.authorized_speakers.items.1") }} + </div> + <div class="w-full"> + · {{ t("investorhandbook.authorized_speakers.items.2") }} + </div> + <div class="w-full"> + {{ t("investorhandbook.authorized_speakers.note") }} + </div> + <div class="w-full font-semibold mt-[53px] text-[24px]"> <img - class="w-[30px] h-[30px] mr-[4px]" + class="w-[16px] h-[16px] mr-[4px]" src="@/assets/image/icon-c.png" alt="logo" /> - 季度末沟通和会议 + {{ t("investorhandbook.quarterly_communications.title") }} </div> - <div class="w-full mt-[50px]"> - 1.静默期——公司遵守“静默期”,从季度末日期开始,到收益发布时结束。在此期间,企业管理层将不会与分析师或投资者进行1:1的会面。然而,根据要求,可向投资者提供基于事实的公共信息,并由授权投资者关系联系人进行分析。 + <div class="w-full mt-[27px]"> + {{ t("investorhandbook.quarterly_communications.items.0") }} </div> - <div class="w-full mt-[50px]"> - 2.分析师会议/电话会议——所有讨论季度、年度财务和业务信息的分析师会议或通话应通过互联网或电话会议同时向所有感兴趣的公众广播。会议的适当提前通知和同步广播应通过新闻稿或符合FD条例的其他通信方式进行。 + <div class="w-full mt-[27px]"> + {{ t("investorhandbook.quarterly_communications.items.1") }} </div> - <div class="w-full mt-[50px]"> - 3.收益新闻稿——收益新闻稿将在投资者关系部和首席财务官确定的会议或电话会议开始时或之前,按照适用的美国证券交易委员会和纳斯达克规则,在新闻专线上发布,以8-K表格的形式提供给美国证券交易会,并发布在公司网站上。 + <div class="w-full mt-[27px]"> + {{ t("investorhandbook.quarterly_communications.items.2") }} </div> - <div class="w-full mt-[50px]"> - 4.有关年度首次认购收入和每股收益范围的指导意见,可在收益新闻稿中提供,如有必要,可在每个季度的收益新闻稿上提供对指导意见的修改。一般来说,公司不会在本季度更新本指南或提供额外指南,除非财务副总裁/首席财务官认为有必要,并且只能根据FD条例在公开论坛上提供。 + <div class="w-full mt-[27px]"> + {{ t("investorhandbook.quarterly_communications.items.3") }} </div> - <div class="w-full mt-[50px]"> - 收到媒体、市场专业人士或股东任何询问的Minim代表(授权发言人除外)不得回复此类询问,但应将提问者转介给授权发言人。然而,分配给Minim投资者关系和营销团队的Minim代表可以按照授权发言人不时制定的指导方针,对公开信息的例行询问作出回应。 + <div class="w-full mt-[27px]"> + {{ t("investorhandbook.quarterly_communications.note") }} </div> </div> </div> @@ -62,7 +126,7 @@ className="flex flex-wrap justify-center" > <img - class="w-[580px] h-[55px] my-[85px]" + class="w-[309px] h-[29px] my-[85px]" src="@/assets/image/image-footer.png" alt="logo" /> @@ -72,7 +136,6 @@ </template> <script setup> -import { NDivider } from "naive-ui"; import { onUnmounted, ref, @@ -82,47 +145,189 @@ import { watch, onBeforeMount, } from "vue"; -import AppHeader from "@/components/AppHeader/index.vue"; +import { NDivider, NPopselect, NGrid, NGi, NButton } from "naive-ui"; +import { useTransitionComposable } from "@/composables/transition-composable"; import { useHome } from "@/store/home/index.js"; - +import { useLanguage } from "@/utils/changeLanguage.js"; import { useRoute, useRouter } from "vue-router"; import { useI18n } from "vue-i18n"; -const { t } = useI18n(); +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); +}; onBeforeMount(() => {}); onMounted(() => {}); onUnmounted(() => {}); </script> <style scoped lang="scss"> -.page-container { +.header { width: 100%; - overflow-x: hidden; - position: relative; + 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; } -.title { - font-size: 85px; - font-weight: 600; - line-height: 110px; - color: #10253e; +.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; - background-color: rgba(230, 234, 238, 0.5) !important; - left: 116px; - width: 1px; + left: 482px; + width: 2px; height: 100%; + background-color: rgba(230, 234, 238, 0.5) !important; +} + +.divider2 { + position: absolute; + z-index: 3; + left: 720px; + width: 2px; + height: 100%; + background-image: linear-gradient( + to bottom, + rgb(150 165 181 / 50%), + transparent 50% + ); + background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) + background-repeat: repeat-y; +} + +.divider3 { + position: absolute; + z-index: 3; + left: 952px; + width: 2px; + height: 100%; + background-image: linear-gradient( + to bottom, + rgb(150 165 181 / 50%), + transparent 50% + ); + background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) + background-repeat: repeat-y; +} + +.divider4 { + position: absolute; + z-index: 3; + left: 1182px; + width: 2px; + height: 100%; + background-image: linear-gradient( + to bottom, + rgb(150 165 181 / 50%), + transparent 50% + ); + background-size: 1px 15px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) + background-repeat: repeat-y; } .divider5 { position: absolute; z-index: 3; - background-color: rgba(230, 234, 238, 0.5) !important; - right: 116px; - width: 1px; + left: 1406px; + width: 2px; height: 100%; + 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; + } +} + +.page-container { + width: 100%; + overflow: hidden; + position: relative; +} + +.title { + font-size: 53px; + font-weight: 600; + line-height: 110px; + color: #10253e; +} + +.page-container { + width: 100%; + overflow-x: hidden; + position: relative; } </style> diff --git a/src/views/investorhandbook/size1920/index.vue b/src/views/investorhandbook/size1920/index.vue index d73685e..4fb0e46 100644 --- a/src/views/investorhandbook/size1920/index.vue +++ b/src/views/investorhandbook/size1920/index.vue @@ -1,50 +1,52 @@ <template> <div class="page-container"> - <n-divider class="divider1" vertical /> - - <div class="divider3" style=""></div> - - <n-divider class="divider5" vertical /> - <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')"> + <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' - ) - "> + <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') - "> + <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') - "> + <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"> + <n-popselect + v-model:value="currentLanguage" + :options="languageOptions" + @update:value="changeLanguage" + > <div class="language-display"> {{ currentLanguageLabel }} <span class="language-arrow">▼</span> @@ -54,12 +56,15 @@ </div> </header> <main> - <section className="section-first" style="background: #fff"> - + <section className="section-first relative" style="background: #fff"> + <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-wrap justify-center tracking-[4px] leading-[40px]" > - <div class="w-full title mt-[108px] px-[180px] text-center"> {{ t("investorhandbook.title") }} </div> @@ -77,10 +82,18 @@ <div class="w-full mt-[27px]"> {{ t("investorhandbook.authorized_speakers.desc") }} </div> - <div class="w-full">· {{ t("investorhandbook.authorized_speakers.items.0") }}</div> - <div class="w-full">· {{ t("investorhandbook.authorized_speakers.items.1") }}</div> - <div class="w-full">· {{ t("investorhandbook.authorized_speakers.items.2") }}</div> - <div class="w-full">{{ t("investorhandbook.authorized_speakers.note") }}</div> + <div class="w-full"> + · {{ t("investorhandbook.authorized_speakers.items.0") }} + </div> + <div class="w-full"> + · {{ t("investorhandbook.authorized_speakers.items.1") }} + </div> + <div class="w-full"> + · {{ t("investorhandbook.authorized_speakers.items.2") }} + </div> + <div class="w-full"> + {{ t("investorhandbook.authorized_speakers.note") }} + </div> <div class="w-full font-semibold mt-[53px] text-[24px]"> <img class="w-[16px] h-[16px] mr-[4px]" @@ -123,7 +136,6 @@ </template> <script setup> - import { onUnmounted, ref, @@ -142,8 +154,7 @@ import { useI18n } from "vue-i18n"; const { currentTab } = useHome(); const router = useRouter(); -const { transitionState } = - useTransitionComposable(); +const { transitionState } = useTransitionComposable(); const main = ref(); let ctx; const { @@ -154,7 +165,7 @@ const { initLanguage, currentLang, currentBannerImages, - t + t, } = useLanguage(); const handleTabClick = (tab) => { currentTab.value = tab; @@ -239,61 +250,72 @@ onUnmounted(() => {}); line-height: 110px; color: #10253e; } + .divider1 { position: absolute; - - left: 477px; + z-index: 3; + left: 482px; width: 1px; height: 100%; - + background-color: rgba(230, 234, 238, 0.5) !important; } .divider2 { position: absolute; - - left: 715px; + z-index: 3; + left: 720px; width: 1px; height: 100%; - background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%); - background-size: 1px 15px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) + background-image: linear-gradient( + to bottom, + rgb(150 165 181 / 50%), + transparent 50% + ); + background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } .divider3 { position: absolute; - - left: 950px; + z-index: 3; + left: 952px; width: 1px; height: 100%; - background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%); - background-size: 1px 15px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) + background-image: linear-gradient( + to bottom, + rgb(150 165 181 / 50%), + transparent 50% + ); + background-size: 1px 12px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } .divider4 { position: absolute; - - left: 1186px; + z-index: 3; + left: 1182px; width: 1px; height: 100%; - background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%); + background-image: linear-gradient( + to bottom, + rgb(150 165 181 / 50%), + transparent 50% + ); background-size: 1px 15px; // 第一个值是宽度,第二个值是虚线的总长度(实线+空白) background-repeat: repeat-y; } .divider5 { position: absolute; - - left: 1410px; + z-index: 3; + left: 1406px; width: 1px; height: 100%; + background-color: rgba(230, 234, 238, 0.5) !important; } .page-container { width: 100%; overflow-x: hidden; position: relative; } - - - </style>