officialWebsite/src/views/investor/size1920/index.vue

<script setup>
import {
  onUnmounted,
  ref,
  watch,
  reactive,
  onMounted
} from "vue";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import { useHome } from "@/store/home/index.js";
import { useI18n } from "vue-i18n";
import { useTransitionComposable } from "@/composables/transition-composable";
import { useRouter } from "vue-router";
import { NDivider, NPopselect, NGrid, NGi, NButton } from "naive-ui";
import { useLanguage } from "@/utils/changeLanguage.js";
// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);
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);
};

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(() => {
  ctx?.revert(); // <- Easy Cleanup!
});
</script>

<template>
  <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')">
        {{ 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 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 text-animate">
        投资者关系
      </div>
      <div class="absolute top-340px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
        Minim（纳斯达克股票代码：MINM）财务状况
      </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">
        <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>
          <div class="flex mt-[46px]">
            <div class="carousel-item">
              <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>最新财务</div>
                  <div class="text-[#9F9F9F] text-[14px]">2023年3月29日</div>
                </div>
                <div class="carousel-subtitle">
                  <div>2022年第四季度和2022年全年收益结果</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 class="text-[#8B59F7] text-[14px] relative z-10">收益公布</div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <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>最近的事件</div>
                  <div class="text-[#9F9F9F] text-[14px]">2024年3月13日</div>
                </div>
                <div class="carousel-subtitle">
                  <div>Minim宣布与e2Companies达成合并协议</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 class="text-[#8B59F7] text-[14px] relative z-10">合并协议-新闻稿最终稿2024年12月3日</div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <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>
                <div class="carousel-subtitle">
                  <div>TradingView的MINM报价</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 class="text-[#8B59F7] text-[14px] relative z-10">MINM报价

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <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>
        <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>
          <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>
              </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年
                </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年
                </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]">
                  利润报告
                </div>
              </n-gi>
              <n-gi>
                <div
                  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>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>Q3</span>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>Q3</span>
                  <span>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]">
                  收益报告
                </div>
              </n-gi>
              <n-gi>
                <div
                  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>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>Q3</span>
                  <span>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]">
                  财报电话会议
                </div>
              </n-gi>
              <n-gi>
                <div
                  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>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>Q3</span>
                  <span>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
                </div>
              </n-gi>
              <n-gi>
                <div
                  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>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>Q3</span>
                  <span>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>Q1</span>
                  <span>Q2</span>
                  <span>Q3</span>
                  <span>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]">
                  年度报告
                </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年
                </div>
              </n-gi>
              <n-gi>
                <div
                  class="bg-[#F8F9FF] h-[47px]  rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
                  2022年
                </div>
              </n-gi>
              <n-gi>
                <div
                  class="bg-[#F8F9FF] h-[47px]  rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
                  2021年
                </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]">
                  年度会议
                </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年
                </div>
              </n-gi>
              <n-gi>
                <div
                  class="bg-[#F8F9FF] h-[47px]  rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
                  2022年
                </div>
              </n-gi>
              <n-gi>
                <div
                  class="bg-[#F8F9FF] h-[47px]  rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
                  2021年
                </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]">
                  特别股东大会
                </div>
              </n-gi>
              <n-gi>
                <div
                  class="bg-[#F8F9FF] h-[47px]  rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
                  2023年
                </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年
                </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年
                </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]">
                  委托书
                </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年
                </div>
              </n-gi>
              <n-gi>
                <div
                  class="bg-[#F8F9FF] h-[47px]  rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
                  2022年
                </div>
              </n-gi>
              <n-gi>
                <div
                  class="bg-[#F8F9FF] h-[47px]  rounded-[4px] flex items-center justify-between p-10px text-[#8B59FA] text-[18px]">
                  2021年
                </div>
              </n-gi>
            </n-grid>

          </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">
            <div class="flex items-center">
              投资者沟通指南 <span class="ml-[20px]">></span>
            </div>
          </div>
        </div>
      </div>
      <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="w-[407px]">
            <div class="w-52px h-7px bg-[#8B59F7]">
            </div>
            <div class="text-[#FFFFFF] text-[40px] mt-[17px] font-bold text-animate">
              行情走势
            </div>

            <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] text-animate">
              通过在下面进行选择，您将离开Minim网站。Minim对您 可以通过此网站访问的任何其他网站不作任何陈述。当 您访问非Minim网站时，即使是可能包含Minim徽标的网
              站，请理解它独立于Minim，Minim无法控制该网站上的 内容。此外，链接到非Minim网站并不意味着Minim认可 或接受对该网站的内容或使用的任何责任。
            </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">
              <div class="flex items-center">
                查看所有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" />
          </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>
          <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">
        <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="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>
          <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>

              <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>

              <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>

              <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>

              <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>
  </main>
  <footer>
    <div class="footer-content">
      <img class="copyright" src="@/assets/image/cp.png" alt="logo" />
    </div>
  </footer>
</template>
<style lang="scss" scoped>
.header {
  width: 100%;
  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;
}

.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;
  left: 482px;
  width: 1px;
  height: 100vw;
  background-color: rgba(230, 234, 238, 0.5) !important;
}

.divider2 {
  position: absolute;
  z-index: 3;
  left: 720px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom,
      rgba(230, 234, 238, 0.5),
      transparent 50%);
  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider3 {
  position: absolute;
  z-index: 3;
  left: 952px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom,
      rgba(230, 234, 238, 0.5),
      transparent 50%);
  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider4 {
  position: absolute;
  z-index: 3;
  left: 1182px;
  width: 1px;
  height: 100vw;
  background-image: linear-gradient(to bottom,
      rgba(230, 234, 238, 0.5),
      transparent 50%);
  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
  background-repeat: repeat-y;
}

.divider5 {
  position: absolute;
  z-index: 3;
  left: 1406px;
  width: 1px;
  height: 100vw;
  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;
  }
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  cursor: pointer;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.carousel-item {
  width: 287px;
  background-color: #fff;
  margin-right: 18px;
  flex: 0 0 auto;
  display: block;
  padding: 8px 8px 18px 8px;
  border-radius: 12px;
  box-shadow: 0 3px 14px 1px rgba(0, 0, 0, 0.16);
  will-change: transform, opacity; // 优化动画性能
}

.carousel-image {
  width: 428px;
  height: 259px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.carousel-content {
  padding: 0;
  margin-top: 10px;
}

.carousel-title {
  font-size: 20px;
  width: 100%;
  align-items: end;

  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: calc(1.5em * 5);
}

.carousel-subtitle {
  color: #455363;
  margin-top: 5px;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;

}

// 添加一个通用的溢出控制类
.overflow-hidden {
  overflow: hidden;
}

// 为所有可能需要动画的容器添加溢出隐藏
[ref*="moveRef"] {
  position: relative;
}

.language-arrow {
  font-size: 12px;
  margin-left: 4px;
  color: #10263E;
  transition: transform 0.3s ease;
}

.tab-item:hover .language-arrow {
  color: #8B59F7;
}
</style>