Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/officialWebsite

src/views/investor/size1920/index.vue

@@ -39,8 +39,121 @@ const handleTabClick = (tab) => {
 
 onMounted(() => {
   window.scrollTo(0, 0);
+  
+  // 添加延迟，确保DOM完全渲染并且滚动位置重置
+  setTimeout(() => {
+    ctx = gsap.context((self) => {
+      // 文本从左侧滑入动画
+      gsap.utils.toArray(".text-animate").forEach((text) => {
+        gsap.from(text, {
+          x: -100,
+          opacity: 0,
+          duration: 0.8,
+          ease: "back.out(1.2)",
+          scrollTrigger: {
+            trigger: text,
+            start: "top 85%",
+            toggleActions: "play none none reverse",
+            immediateRender: false,
+            once: false,
+          },
+        });
+      });
 
+      // 图片从右侧滑入动画
+      gsap.utils.toArray(".image-animate").forEach((image) => {
+        gsap.from(image, {
+          x: 100,
+          opacity: 0,
+          duration: 0.8,
+          ease: "back.out(1.2)",
+          scrollTrigger: {
+            trigger: image,
+            start: "top 85%",
+            toggleActions: "play none none reverse",
+            immediateRender: false,
+            once: false,
+          },
+        });
+      });
 
+      // 内容上浮动画
+      gsap.utils.toArray('.float-up').forEach((element) => {
+        gsap.from(element, {
+          y: 100,
+          opacity: 0,
+          duration: 0.8,
+          ease: "back.out(1.2)",
+          scrollTrigger: {
+            trigger: element,
+            start: 'top 100%',
+            toggleActions: "play none none reverse",
+            immediateRender: false,
+            once: false,
+          }
+        });
+      });
+
+      // 卡片上升动画
+      const cards = gsap.utils.toArray('.carousel-item');
+      cards.forEach((card, index) => {
+        gsap.from(card, {
+          y: 100,
+          opacity: 0,
+          duration: 0.8,
+          delay: index * 0.2,
+          ease: "back.out(1.2)",
+          scrollTrigger: {
+            trigger: card,
+            start: 'top 85%',
+            toggleActions: "play none none reverse",
+            immediateRender: false,
+            once: false,
+          }
+        });
+      });
+
+      // 表格行依次淡入动画
+      gsap.utils.toArray('.content2 .n-grid .n-gi').forEach((row, index) => {
+        gsap.from(row, {
+          opacity: 0,
+          y: 30,
+          duration: 0.5,
+          delay: index * 0.1,
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: row,
+            start: "top 85%",
+            toggleActions: "play none none reverse",
+            immediateRender: false,
+            once: false,
+          }
+        });
+      });
+
+      // 治理章程列表动画
+      gsap.from('.content5 .n-grid .n-gi', {
+        opacity: 0,
+        y: 50,
+        duration: 0.8,
+        stagger: {
+          amount: 1,
+          from: "start",
+        },
+        ease: "back.out(1.2)",
+        scrollTrigger: {
+          trigger: '.content5',
+          start: "top 85%",
+          toggleActions: "play none none none",
+          immediateRender: false,
+          once: true
+        }
+      });
+      
+      // 强制刷新ScrollTrigger以正确计算位置
+      ScrollTrigger.refresh();
+    }, main.value);
+  }, 100); // 短暂延迟确保DOM已渲染
 });
 
 onUnmounted(() => {
@@ -99,10 +212,10 @@ onUnmounted(() => {
   <main ref="main" class="height-full">
     <div class="head relative">
       <img src="@/assets/image/tzgbg.png" alt="head" />
-      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold ">
+      <div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
         投资者关系
       </div>
-      <div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] ">
+      <div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
         Minim（纳斯达克股票代码：MINM）财务状况
       </div>
     </div>
@@ -117,7 +230,7 @@ onUnmounted(() => {
         <div class="pl-[505px] pr-[490px]">
           <div class="w-52px h-7px bg-[#8B59F7]">
           </div>
-          <div class="text-[#10253E] text-[40px] mt-[17px] font-bold">
+          <div class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate">
             最新动态
           </div>
           <div class="flex mt-[46px]">
@@ -175,7 +288,7 @@ onUnmounted(() => {
         </div>
 
       </div>
-      <div class="content2 relative flex items-center pb-[120px] pt-[148px] bg-[#F8F9FF]">
+      <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>
@@ -185,11 +298,11 @@ onUnmounted(() => {
           <div class="pl-[505px] pr-[490px] z-3">
             <div class="w-52px h-7px bg-[#8B59F7]">
             </div>
-            <div class="text-[#10253E] text-[40px] mt-[17px] font-bold">
+            <div class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate">
               财务数据
             </div>
           </div>
-          <div class="ml-[494px] w-920px min-h-473px  bg-[#fff] mt-[55px] "
+          <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>
@@ -463,9 +576,8 @@ onUnmounted(() => {
             </n-grid>
 
           </div>
-          <div
+          <div class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] ml-60% flex items-center float-up">
-            class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] ml-60% flex items-center">
+            <div class="flex items-center">
-            <div class="flex items-center ">
               投资者沟通指南 <span class="ml-[20px]">></span>
             </div>
           </div>
@@ -478,39 +590,51 @@ onUnmounted(() => {
         <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">
           <div class="w-[407px]">
             <div class="w-52px h-7px bg-[#8B59F7]">
             </div>
-            <div class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold">
+            <div class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold text-animate">
               行情走势
             </div>
 
-            <div class="text-[#D1D1D1] text-[14px] mt-[56px] max-w-[407px] ">
+            <div class="text-[#D1D1D1] text-[14px] mt-[56px] max-w-[407px] text-animate">
               SEC文件是提交给美国证券交易委员会（SEC）的文 件。上市公司和某些内部人士必须定期向美国证券交易 委员会提交文件。这些文件可以通过美国证券交易委员 会的在线数据库获得。
             </div>
 
-            <div class="text-[#D1D1D1] text-[14px] mt-[20px] max-w-[407px] ">
+            <div class="text-[#D1D1D1] text-[14px] mt-[20px] max-w-[407px] text-animate">
               通过在下面进行选择，您将离开Minim网站。Minim对您 可以通过此网站访问的任何其他网站不作任何陈述。当 您访问非Minim网站时，即使是可能包含Minim徽标的网
               站，请理解它独立于Minim，Minim无法控制该网站上的 内容。此外，链接到非Minim网站并不意味着Minim认可 或接受对该网站的内容或使用的任何责任。
             </div>
-            <div
+            <div class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center float-up">
-              class="rounded-[24px] cursor-pointer justify-center w-[240px] pt-[3px] h-[47px] bg-[#8B59F7] text-[#fff] text-[18px] mt-[28px] flex items-center">
+              <div class="flex items-center">
-              <div class="flex items-center ">
                 查看所有SEC文件 <span class="ml-[20px]">></span>
               </div>
             </div>
           </div>
-          <div class="ml-[42px]">
+          <div class="ml-[42px] image-animate">
             <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">
+          <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">
+              <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>
+            <div class="w-[438px] h-[157px] relative ml-[28px] float-up">
+              <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>
+
+          </div>
         </div>
       </div>
       <div class="content5 relative bg-[#F8F9FF] overflow-hidden float-up">
@@ -519,51 +643,130 @@ onUnmounted(() => {
         <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="mt-[93px] pb-[103px] carousel-container pl-[505px] pr-[490px] z-4">
-          <div class="text-[#8B59F7] text-[22px]  font-bold">
+          <div class="w-52px h-7px bg-[#8B59F7]">
-            {{ t('businessintroduction.exposure.title') }}
           </div>
-
+          <div class="text-[#10253E] text-[40px] mt-[17px] font-bold text-animate">
-          <div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] ">
+            治理、多样性和委员会章程
-            {{ t('businessintroduction.exposure.desc') }}
           </div>
+          <div class="mt-[50px]">
+            <n-grid x-gap="15" y-gap="16" :cols="2">
+              <n-gi>
+                <div 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="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      高级财务人员道德守则
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
+                </div>
+              </n-gi>
+              <n-gi>
+                <div 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="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      冲突矿产声明
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
+                </div>
+              </n-gi>
 
-          <div class="flex">
+              <n-gi>
-            <div class="carousel-item cursor-pointer">
+                <div class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up">
-              <img class="carousel-image" src="@/assets/image/fp1.png" />
+                  <div class="flex items-center">
-              <div class="carousel-content">
+                    <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div>
-                <div class="carousel-title font-bold">
+                    <div class="text-[#10253E] text-[18px] font-bold ml-[10px]">
-                  <div>{{ t('businessintroduction.exposure.timeline.year2025.title') }}</div>
+                      道德和商业行为准则
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
                 </div>
-                <div class="carousel-subtitle">
+              </n-gi>
-                  <div>{{ t('businessintroduction.exposure.timeline.year2025.desc') }}</div>
+              <n-gi>
+                <div 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="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      审计委员会章程
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
                 </div>
-              </div>
+              </n-gi>
-            </div>
+
-            <div class="carousel-item cursor-pointer">
+              <n-gi>
-              <img class="carousel-image" src="@/assets/image/fp2.png" />
+                <div class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up">
-              <div class="carousel-content">
+                  <div class="flex items-center">
-                <div class="carousel-title font-bold">
+                    <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div>
-                  <div>{{ t('businessintroduction.exposure.timeline.year2026.title') }}</div>
+                    <div class="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      举报人政策
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
                 </div>
-                <div class="carousel-subtitle">
+              </n-gi>
-                  <div>{{ t('businessintroduction.exposure.timeline.year2026.desc') }}</div>
+              <n-gi>
+                <div 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="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      薪酬委员会章程
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
                 </div>
-              </div>
+              </n-gi>
-            </div>
+
-            <div class="carousel-item cursor-pointer">
+              <n-gi>
-              <img class="carousel-image" src="@/assets/image/fp3.png" />
+                <div class="cursor-pointer w-438px h-37px bg-[#fff] rounded-[8px] flex items-center justify-between float-up">
-              <div class="carousel-content">
+                  <div class="flex items-center">
-                <div class="carousel-title font-bold  ">
+                    <div class="w-5px h-37px bg-[#C6ACFF]" style="border-radius: 8px 0 0 8px;"></div>
-                  <div>{{ t('businessintroduction.exposure.timeline.year2027.title') }}</div>
+                    <div class="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      关联方交易政策
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
                 </div>
-                <div class="carousel-subtitle">
+              </n-gi>
-                  <div>{{ t('businessintroduction.exposure.timeline.year2027.desc') }}</div>
+              <n-gi>
+                <div 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="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      提名和治理委员会章程
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
                 </div>
-              </div>
+              </n-gi>
-            </div>
+
+              <n-gi>
+                <div 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="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      2022年多样性矩阵
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
+                </div>
+              </n-gi>
+              <n-gi>
+                <div 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="text-[#10253E] text-[18px] font-bold ml-[10px]">
+                      2023年多样性矩阵
+                    </div>
+                  </div>
+                  <img class="w-[9px] h-[17px] mr-[15px]" src="@/assets/image/nstep.png" alt="cl" />
+                </div>
+              </n-gi>
+            </n-grid>
           </div>
-
         </div>
       </div>
     </div>