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

<template>
  <div class="page-container">
    <n-divider class="divider1" vertical />
    <n-divider class="divider5" vertical />
    <AppHeader />

    <main>
      <section style="background: #ffffff" className="relative">
        <div class="relative section-first h-[2221px] box-contain pt-[775px]">
          <div
            class="title ml-[188px]"
            :ref="
              (el) => {
                moveRefs[0].value = el;
              }
            "
          >
            <div>{{ t("investor.title") }}</div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[1].value = el;
              }
            "
            class="text-[35px] text-[#8B59F7] w-[735px] ml-[188px] mt-[50px]"
          >
            {{ t("investor.subtitle") }}
          </div>
        </div>
      </section>

      <section>
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[188px] mt-[222px]">
            <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
          </div>
          <div
            class="w-full title mt-[58px] px-[188px]"
            :ref="
              (el) => {
                moveRefs[2].value = el;
              }
            "
          >
            <div>{{ t("investor.latest_news.title") }}</div>
          </div>
          <div
            class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-6"
            @mouseenter="pauseCarouselAnimation"
            @mouseleave="resumeCarouselAnimation"
            @touchstart="pauseCarouselAnimation"
            @touchend="resumeCarouselAnimation"
          >
            <div ref="carouselTrack" class="carousel-track">
              <div
                v-for="(item, idx) in getVisibleItems()"
                :key="idx"
                class="carousel-item"
              >
                <img class="carousel-image" :src="item.imgUrl" />
                <div class="carousel-title flex justify-between">
                  <div>{{ item.title }}</div>
                  <div v-if="item.date" class="text-[#9F9F9F] text-[35px]">
                    {{ item.date }}
                  </div>
                </div>
                <div class="carousel-subtitle">
                  <div>{{ item.subTitle }}</div>
                </div>
                <div
                  class="carousel-link flex items-center"
                  @click="handleLink(item.linkUrl)"
                >
                  <img
                    class="w-[30px] h-[30px] mr-[10px]"
                    src="@/assets/image/investor/768/icon-l.png"
                  />
                  <div>{{ item.link }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="bg-[#F8F9FF]">
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[188px] mt-[222px]">
            <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
          </div>
          <div
            class="w-full title mt-[58px] mb-[145px] px-[188px]"
            :ref="
              (el) => {
                moveRefs[3].value = el;
              }
            "
          >
            <div>{{ t("investor.financial_data.title") }}</div>
          </div>

          <div class="w-full px-[158px] mb-[57px]">
            <div
              class="bg-[#fff] flex w-full text-[40px] pa-[6px] shadow-[0_7px_50px_3px_rgba(0,0,0,0.16)] rounded-[20px]"
            >
              <div
                class="w-1/3 text-[#10263E] font-semibold"
                :ref="
                  (el) => {
                    moveRefs[4].value = el;
                  }
                "
              >
                <div
                  class="bg-[#fff] my-[6px] ml-[6px] px-[25px] py-[30px] min-h-[124px]"
                ></div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.profit_report") }}
                </div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.earnings_report") }}
                </div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.earnings_call") }}
                </div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.sec_filings") }}
                </div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.annual_report") }}
                </div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.annual_meeting") }}
                </div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.special_meeting") }}
                </div>
                <div class="bg-[#F8F9FF] my-[6px] ml-[6px] px-[25px] py-[30px] truncate">
                  {{ t("investor.financial_data.reports.proxy_statement") }}
                </div>
              </div>
              <div
                class="w-2/3 font-normal text-[#9F9F9F] year-content-animation"
                ref="yearContent"
                @mouseenter="pauseYearInterval"
                @mouseleave="resumeYearInterval"
                @touchstart="handleTouchStart"
                @touchend="handleTouchEnd"
                @touchmove="handleTouchMove"
                @mousedown="handleMouseDown"
                @mouseup="handleMouseUp"
                @mousemove="handleMouseMove"
              >
                <div
                  class="color-[#fff] ma-[6px] px-[25px] py-[30px] font-semibold"
                  :class="
                    state.activeYear === 2021
                      ? 'bg-[#6520FA]'
                      : state.activeYear === 2022
                      ? 'bg-[#8B59F7]'
                      : 'bg-[#C6ACFF]'
                  "
                >
                  <div v-if="!isAnimating">
                    {{ state.activeYear
                    }}{{
                      t("investor.financial_data.years.year" + state.activeYear)
                    }}
                  </div>
                  <div v-else>&nbsp;</div>
                </div>
                <div
                  class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
                >
                  <div
                    :class="calcQLinkClass('Earnings Release', 'Q1')"
                    @click="handleQClick('Earnings Release', 'Q1')"
                  >
                    Q1
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Release', 'Q2')"
                    @click="handleQClick('Earnings Release', 'Q2')"
                  >
                    Q2
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Release', 'Q3')"
                    @click="handleQClick('Earnings Release', 'Q3')"
                  >
                    Q3
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Release', 'Q4')"
                    @click="handleQClick('Earnings Release', 'Q4')"
                  >
                    Q4
                  </div>
                </div>
                <div
                  class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
                >
                  <div
                    :class="calcQLinkClass('Earnings Presentation', 'Q1')"
                    @click="handleQClick('Earnings Presentation', 'Q1')"
                  >
                    Q1
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Presentation', 'Q2')"
                    @click="handleQClick('Earnings Presentation', 'Q2')"
                  >
                    Q2
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Presentation', 'Q3')"
                    @click="handleQClick('Earnings Presentation', 'Q3')"
                  >
                    Q3
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Presentation', 'Q4')"
                    @click="handleQClick('Earnings Presentation', 'Q4')"
                  >
                    Q4
                  </div>
                </div>
                <div
                  class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
                >
                  <div
                    :class="calcQLinkClass('Earnings Call', 'Q1')"
                    @click="handleQClick('Earnings Call', 'Q1')"
                  >
                    Q1
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Call', 'Q2')"
                    @click="handleQClick('Earnings Call', 'Q2')"
                  >
                    Q2
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Call', 'Q3')"
                    @click="handleQClick('Earnings Call', 'Q3')"
                  >
                    Q3
                  </div>
                  <div
                    :class="calcQLinkClass('Earnings Call', 'Q4')"
                    @click="handleQClick('Earnings Call', 'Q4')"
                  >
                    Q4
                  </div>
                </div>
                <div
                  class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px] flex justify-between"
                >
                  <div
                    :class="calcQLinkClass('10-Q/10-K', 'Q1')"
                    @click="handleQClick('10-Q/10-K', 'Q1')"
                  >
                    Q1
                  </div>
                  <div
                    :class="calcQLinkClass('10-Q/10-K', 'Q2')"
                    @click="handleQClick('10-Q/10-K', 'Q2')"
                  >
                    Q2
                  </div>
                  <div
                    :class="calcQLinkClass('10-Q/10-K', 'Q3')"
                    @click="handleQClick('10-Q/10-K', 'Q3')"
                  >
                    Q3
                  </div>
                  <div
                    :class="calcQLinkClass('10-Q/10-K', 'Q4')"
                    @click="handleQClick('10-Q/10-K', 'Q4')"
                  >
                    Q4
                  </div>
                </div>
                <div
                  class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"
                  :class="calcYLinkClass('Annual Report')"
                  @click="handleYClick('Annual Report')"
                >
                  <div>{{ 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>
                <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>
                <div
                  class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"
                  :class="calcYLinkClass('Proxy Statement')"
                  @click="handleYClick('Proxy Statement')"
                >
                  <div>{{ state.activeYear }}年</div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="bg-[#8B59F7] mb-[228px] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
            @click="handlePageLink('/investorhandbook')"
            :ref="
              (el) => {
                moveRefs[5].value = el;
              }
            "
          >
            {{ t("investor.financial_data.investor_guide") }}
            <img
              class="w-[23px] h-[43px] ml-[50px]"
              src="@/assets/image/investor/768/icon-r-o.png"
            />
          </div>
        </div>
      </section>
      <section class="section-four h-[2933px] color-[#D1D1D1] text-[40px]">
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[188px] mt-[222px]">
            <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
          </div>
          <div
            class="w-full title mt-[58px] mb-[145px] px-[188px] color-[#D1D1D1]"
            :ref="
              (el) => {
                moveRefs[6].value = el;
              }
            "
          >
            <div>{{ t("investor.market_trends.title") }}</div>
          </div>

          <div
            class="w-full px-[188px] mb-[57px]"
            :ref="
              (el) => {
                moveRefs[7].value = el;
              }
            "
          >
            {{ t("investor.market_trends.sec_description1") }}
          </div>
          <div
            class="w-full px-[188px] mb-[57px]"
            :ref="
              (el) => {
                moveRefs[8].value = el;
              }
            "
          >
            {{ t("investor.market_trends.sec_description2") }}
          </div>
          <div
            class="px-[188px] mb-[175px] flex flex-start w-full"
            :ref="
              (el) => {
                moveRefs[9].value = el;
              }
            "
          >
            <div
              class="bg-[#8B59F7] rounded-[60px] text-[#fff] text-[45px] font-semibold px-[103px] py-[27px] flex items-center"
              @click="
                handleLink(
                  'https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=0001467761&owner=include&count=40&hidefilings=0'
                )
              "
            >
              {{ t("investor.market_trends.view_all_sec") }}
              <img
                class="w-[23px] h-[43px] ml-[50px]"
                src="@/assets/image/investor/768/icon-r-o.png"
              />
            </div>
          </div>

          <div
            class="overflow-hidden"
            :ref="
              (el) => {
                moveRefs[10].value = el;
              }
            "
          >
            <img
              class="w-[1608px] h-[1010px]"
              src="@/assets/image/investor/768/imageshow-6.png"
            />
          </div>
        </div>
      </section>

      <section>
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[188px] mt-[222px]">
            <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
          </div>
          <div
            class="w-full title mt-[58px] px-[188px]"
            :ref="
              (el) => {
                moveRefs[11].value = el;
              }
            "
          >
            <div>{{ t("investor.board_of_directors.title") }}</div>
          </div>
          <div
            class="w-full flex justify-between mt-[140px] mb-[230px] px-[188px]"
          >
            <div
              class="w-[745px] h-[433px] div-bg3 flex flex-wrap"
              :ref="
                (el) => {
                  moveRefs[12].value = el;
                }
              "
            >
              <div class="text-[50px] text-[#fff] font-semibold">
                {{ t("investor.board_of_directors.directors.patrick.name") }}
              </div>
              <div class="w-full text-[38px] text-[#EBEBEB] tracking-[4px]">
                {{
                  t(
                    "investor.board_of_directors.directors.patrick.position1"
                  )
                }}
              </div>
              <div class="w-full text-[38px] text-[#EBEBEB] truncate">
                {{
                  t(
                    "investor.board_of_directors.directors.patrick.position2"
                  )
                }}
              </div>
            </div>
            <div
              class="w-[745px] h-[433px] div-bg4 flex flex-wrap"
              :ref="
                (el) => {
                  moveRefs[13].value = el;
                }
              "
            >
              <div class="text-[50px] text-[#10253E] font-semibold">
                {{ t("investor.board_of_directors.directors.andrew.name") }}
              </div>
              <div class="w-full text-[38px] text-[#455363] tracking-[4px]">
                {{
                  t(
                    "investor.board_of_directors.directors.andrew.position1"
                  )
                }}
              </div>
              <div class="w-full text-[38px] text-[#455363] tracking-[4px]">
                {{
                  t(
                    "investor.board_of_directors.directors.andrew.position2"
                  )
                }}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="bg-[#F8F9FF]">
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[188px] mt-[220px]">
            <div class="w-[130px] h-[18px] bg-[#8B59F7]"></div>
          </div>
          <div
            class="w-full title mt-[58px] px-[188px]"
            :ref="
              (el) => {
                moveRefs[14].value = el;
              }
            "
          >
            <div>{{ t("investor.governance.title") }}</div>
          </div>
          <div class="w-full flex flex-wrap mt-[105px] mb-[230px] px-[188px]">
            <div
              v-for="item in state.linkArr"
              :key="item.title"
              class="w-full bg-[#fff] pl-[16px] rounded-[20px] mt-[38px] before-line"
            >
              <div
                class="w-full flex items-center justify-between px-[25px] py-[20px] font-semibold text-[40px] tracking-[4px]"
                @click="handleLink(item.link)"
              >
                {{ item.title }}

                <img
                  class="w-[23px] h-[43px]"
                  src="@/assets/image/investor/768/icon-r.png"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section
        style="background: #fff"
        className="flex flex-wrap justify-center"
      >
        <img
          class="w-[580px] h-[55px] my-[85px]"
          src="@/assets/image/image-footer.png"
          alt="logo"
        />
      </section>
    </main>
  </div>
</template>

<script setup>
import { NDivider } from "naive-ui";
import { onUnmounted, ref, onMounted, reactive, watch, nextTick } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import AppHeader from "@/components/AppHeader/index.vue";
import { useTransitionComposable } from "@/composables/transition-composable";

// 定义组件的自定义事件
defineEmits(["sendCode"]);

// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);

import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { transitionState } = useTransitionComposable();

const moveRefs = ref(
  Array(27)
    .fill(null)
    .map(() => ref(null))
);
let ctx;

// 导入图片
import imageshow1 from "@/assets/image/investor/768/imageshow-1.png";
import imageshow2 from "@/assets/image/investor/768/imageshow-2.png";
import imageshow3 from "@/assets/image/investor/768/imageshow-3.png";

const state = reactive({
  marqueeArr: [
    {
      title: t("investor.latest_news.financial.title"),
      subTitle: t("investor.latest_news.financial.content"),
      date: t("investor.latest_news.financial.date"),
      link: t("investor.latest_news.financial.link"),
      imgUrl: imageshow1,
      linkUrl: "https://spaces.hightail.com/receive/RpIYgWf2p0",
    },
    {
      title: t("investor.latest_news.events.title"),
      subTitle: t("investor.latest_news.events.content"),
      date: t("investor.latest_news.events.date"),
      link: t("investor.latest_news.events.link"),
      imgUrl: imageshow2,
      linkUrl:
        "https://hello.minim.co/hubfs/Merger%20Agreement%20-%20Press%20Release%20Final%203-12-2024.pdf?hsLang=en",
    },
    {
      title: t("investor.latest_news.stock.title"),
      subTitle: t("investor.latest_news.stock.content"),
      link: t("investor.latest_news.stock.link"),
      imgUrl: imageshow3,
      linkUrl:
        "https://www.tradingview.com/symbols/NASDAQ-MINM/?utm_campaign=single-quote&utm_medium=widget_new&utm_source=ir.minim.com",
    },
  ],
  qLink: {
    "Earnings Release": {
      2021: {
        Q1: "https://hello.minim.com/hubfs/docs/MINM-Q1-2021-Earnings-Release.pdf?hsLang=en",
        Q2: "https://finance.yahoo.com/news/minim-reports-accelerating-revenue-growth-113000630.html",
        Q3: "https://www.globenewswire.com/en/news-release/2021/11/02/2325230/0/en/Minim-Reports-Revenue-Growth-of-25.html",
        Q4: "https://hello.minim.com/hubfs/docs/MINM-Q4-2021-Earnings-Release.pdf?hsLang=en",
      },
      2022: {
        Q1: "https://hello.minim.com/hubfs/docs/MINM-Q1-2022-Earnings-Results.pdf?hsLang=en",
        Q2: "https://hello.minim.com/hubfs/docs/MINM-Q2-2022-Earnings-Results.pdf?hsLang=en",
        Q3: "https://finance.yahoo.com/news/minim-reports-third-quarter-2022-123000213.html",
        Q4: "https://hello.minim.co/hubfs/docs/MINM-Q4-FY22-Earnings-Results.pdf?hsLang=en",
      },
    },
    "Earnings Presentation": {
      2021: {
        Q1: "https://hello.minim.com/hubfs/docs/Minim-Q12021-Earnings-Presentation.pdf?hsLang=en",
        Q2: "https://hello.minim.com/hubfs/docs/Minim-Q22021-Earnings-Presentation-v1.pdf?hsLang=en",
        Q3: "https://hello.minim.com/hubfs/docs/Minim-Q3-2021-Earnings-Presentation.pdf?hsLang=en",
        Q4: "https://hello.minim.com/hubfs/docs/MINM-Q4-2021-Earnings-Presentation.pdf?hsLang=en",
      },
      2022: {
        Q1: "https://hello.minim.com/hubfs/docs/MINM-Q1-2022-Earnings-Presentation.pdf?hsLang=en",
        Q2: "https://hello.minim.com/hubfs/docs/MINM-Q2-2022-Earnings-Presentation.pdf?hsLang=en",
        Q3: "https://hello.minim.com/hubfs/docs/MINM-Q3-2022-Earnings-Presentation.pdf?hsLang=en",
      },
    },
    "Earnings Call": {
      2021: {
        Q1: "https://hello.minim.com/hubfs/docs/Minim-Q1-2021-EarningsCall.mp3?hsLang=en",
        Q2: "https://hello.minim.com/hubfs/docs/MINM-Q2-2021-EarningsCall.mp3?hsLang=en",
        Q3: "https://hello.minim.com/hubfs/docs/MINM-Q3-2021-EarningsCall.mp3?hsLang=en",
        Q4: "https://hello.minim.com/hubfs/docs/MINM-Q4-2021-EarningsCall.mp3?hsLang=en",
      },
      2022: {
        Q1: "https://hello.minim.com/hubfs/docs/MINM-Q1-2022-EarningsCall.mp3?hsLang=en",
        Q2: "https://hello.minim.com/hubfs/docs/MINM-Q2-2022-EarningsCall.mp3?hsLang=en",
        Q3: "https://hello.minim.com/hubfs/docs/MINM-Q3-2022-EarningsCall.mp3?hsLang=en",
      },
    },
    "10-Q/10-K": {
      2021: {
        Q1: "https://hello.minim.com/hubfs/docs/MINM-Q1-2021-10Q-Filing.pdf?hsLang=en",
        Q2: "https://hello.minim.com/hubfs/docs/MINM-Q2-2021-10Q-Filing.pdf?hsLang=en",
        Q3: "https://hello.minim.com/hubfs/docs/MINM-Q3-2021-10Q-Filing.pdf?hsLang=en",
        Q4: "https://hello.minim.com/hubfs/docs/MINM-2021-10KA-Filing.pdf?hsLang=en",
      },
      2022: {
        Q1: "https://hello.minim.com/hubfs/docs/MINM-Q1-2022-10QA-Filing.pdf?hsLang=en",
        Q2: "https://hello.minim.co/hubfs/docs/MINM-Q2-2022-10Q-Filing.pdf?hsLang=en",
        Q3: "https://hello.minim.co/hubfs/docs/MINM-Q3-2022-10Q-Filing.pdf?hsLang=en",
        Q4: "https://hello.minim.co/hubfs/docs/MINM-2022-10K-Filing.pdf?hsLang=en",
      },
    },
  },
  yLink: {
    "Annual Report": {
      2021: "https://hello.minim.com/hubfs/docs/MINM-2021-Annual-Report-Restated.pdf?hsLang=en",
      2022: "https://hello.minim.co/hubfs/docs/MINM-2022-Annual-Report.pdf?hsLang=en",
    },
    "Annual Meeting": {
      2021: "https://hello.minim.com/hubfs/investor/Minim-2021-Annual-Meeting.mp4?hsLang=en",
      2022: "https://east.virtualshareholdermeeting.com/vsm/web?pvskey=MINM2022",
    },
    "Special Shareholder Meeting": {
      2023: "https://central.virtualshareholdermeeting.com/vsm/web?pvskey=MINM2023SM",
    },
    "Proxy Statement": {
      2021: "https://hello.minim.com/hubfs/docs/MINM-2021-Proxy-Statement.pdf?hsLang=en",
      2022: "https://hello.minim.com/hubfs/docs/MINM-2022-Proxy-Statement.pdf?hsLang=en",
    },
  },
  linkArr: [
    {
      title: t("investor.governance.documents.ethics_code"),
      link: "https://hello.minim.com/hubfs/docs/MINM-Code-of-Ethics-for-Senior-Financial-Officers_Jan-2022.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.conflict_minerals"),
      link: "https://hello.minim.co/hubfs/docs/MINM-Conflict-Mineral-Report-FY22.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.business_conduct"),
      link: "https://hello.minim.com/hubfs/docs/MINM-Code-of-Ethics-and-Business-Conduct_Jan-2022.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.audit_committee"),
      link: "https://hello.minim.com/hubfs/docs/MINM-Audit-Committe-Charter_Jan-2021.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.whistleblower"),
      link: "https://hello.minim.com/hubfs/docs/MINM-Whistleblower-Policy_Jan-2022.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.compensation_committee"),
      link: "https://hello.minim.com/hubfs/docs/MINM-Compensation-Committee-Charter_Oct-2022.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.related_party"),
      link: "https://hello.minim.com/hubfs/docs/MINM-Related-Party-Transactions-Policy_Jan-2022.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.nomination_committee"),
      link: "https://hello.minim.com/hubfs/docs/MINM-Nominating-and-Governance-Committee-Charter_%20Jan-2021.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.diversity_matrix_2022"),
      link: "https://hello.minim.co/hubfs/2022%20Diversity%20Matrix.pdf?hsLang=en",
    },
    {
      title: t("investor.governance.documents.diversity_matrix_2023"),
      link: "https://hello.minim.co/hubfs/2023%20Diversity%20Matrxi.pdf?hsLang=en",
    },
  ],
  activeYear: 2023,
});

// 添加年份内容区域的引用
const yearContent = ref(null);

// 添加动画状态控制变量
const isAnimating = ref(false);

// 添加滑动方向变量
const slideDirection = ref("left"); // 默认向左滑动

// 添加当前年份索引
const currentYearIndex = ref(0);
const yearArray = [2021, 2022, 2023];

// 添加触摸和鼠标事件相关变量
const isPaused = ref(false);
const touchStartX = ref(0);
const mouseStartX = ref(0);
const isMouseDown = ref(false);
let interval = null;
let pauseTimeout = null;

// 根据滑动方向创建动画并在完成后更新年份
const animateYearChange = (direction, targetYear) => {
  if (!yearContent.value) return;

  // 设置动画状态为进行中
  isAnimating.value = true;

  const tl = gsap.timeline();

  if (direction === "left") {
    // 向左滑动效果：从右向左
    tl.to(yearContent.value, {
      opacity: 0,
      x: -50,
      duration: 0.3,
      ease: "power2.inOut",
    })
      .set(yearContent.value, {
        x: 50,
      })
      .add(() => {
        // 在动画中间点更新年份值
        state.activeYear = targetYear;
      })
      .to(yearContent.value, {
        opacity: 1,
        x: 0,
        duration: 0.3,
        ease: "power2.out",
        onComplete: () => {
          // 动画完成后，设置动画状态为完成
          isAnimating.value = false;
        },
      });
  } else {
    // 向右滑动效果：从左向右
    tl.to(yearContent.value, {
      opacity: 0,
      x: 50,
      duration: 0.3,
      ease: "power2.inOut",
    })
      .set(yearContent.value, {
        x: -50,
      })
      .add(() => {
        // 在动画中间点更新年份值
        state.activeYear = targetYear;
      })
      .to(yearContent.value, {
        opacity: 1,
        x: 0,
        duration: 0.3,
        ease: "power2.out",
        onComplete: () => {
          // 动画完成后，设置动画状态为完成
          isAnimating.value = false;
        },
      });
  }
};

// 开始年份切换定时器
const startYearInterval = () => {
  if (interval) clearInterval(interval);
  interval = setInterval(() => {
    if (!isPaused.value) {
      nextYear();
    }
  }, 5000);
};

// 切换到下一个年份
const nextYear = () => {
  slideDirection.value = "left"; // 设置滑动方向为左滑
  const nextIndex = (currentYearIndex.value + 1) % yearArray.length;
  const nextYearValue = yearArray[nextIndex];

  // 先执行动画，动画完成后会更新 activeYear
  animateYearChange("left", nextYearValue);

  // 更新索引
  currentYearIndex.value = nextIndex;
};

// 切换到上一个年份
const prevYear = () => {
  slideDirection.value = "right"; // 设置滑动方向为右滑
  const prevIndex =
    (currentYearIndex.value - 1 + yearArray.length) % yearArray.length;
  const prevYearValue = yearArray[prevIndex];

  // 先执行动画，动画完成后会更新 activeYear
  animateYearChange("right", prevYearValue);

  // 更新索引
  currentYearIndex.value = prevIndex;
};

// 暂停年份切换
const pauseYearInterval = () => {
  isPaused.value = true;
};

// 恢复年份切换
const resumeYearInterval = () => {
  isPaused.value = false;
};

// 暂停一段时间后恢复
const pauseForDuration = (duration = 3000) => {
  pauseYearInterval();

  // 清除之前的定时器（如果存在）
  if (pauseTimeout) {
    clearTimeout(pauseTimeout);
  }

  // 设置新的定时器
  pauseTimeout = setTimeout(() => {
    resumeYearInterval();
  }, duration);
};

// 处理触摸开始事件
const handleTouchStart = (event) => {
  pauseYearInterval();
  touchStartX.value = event.touches[0].clientX;
};

// 处理触摸结束事件
const handleTouchEnd = () => {
  // 不立即恢复，而是等待一段时间
  // resumeYearInterval();
};

// 处理触摸移动事件
const handleTouchMove = (event) => {
  if (touchStartX.value === 0) return;

  const touchEndX = event.touches[0].clientX;
  const diffX = touchEndX - touchStartX.value;

  // 如果滑动距离足够大，切换年份
  if (Math.abs(diffX) > 50) {
    if (diffX < 0) {
      // 向左滑动，下一年
      slideDirection.value = "left";
      nextYear();
    } else {
      // 向右滑动，上一年
      slideDirection.value = "right";
      prevYear();
    }
    touchStartX.value = 0; // 重置起始位置，防止连续触发

    // 滑动切换后暂停一段时间
    pauseForDuration();
  }
};

// 处理鼠标按下事件
const handleMouseDown = (event) => {
  isMouseDown.value = true;
  mouseStartX.value = event.clientX;
  pauseYearInterval();
};

// 处理鼠标抬起事件
const handleMouseUp = () => {
  isMouseDown.value = false;
  // 不立即恢复，等待一段时间后恢复
  // resumeYearInterval();
};

// 处理鼠标移动事件
const handleMouseMove = (event) => {
  if (!isMouseDown.value || mouseStartX.value === 0) return;

  const mouseEndX = event.clientX;
  const diffX = mouseEndX - mouseStartX.value;

  // 如果滑动距离足够大，切换年份
  if (Math.abs(diffX) > 50) {
    if (diffX < 0) {
      // 向左滑动，下一年
      slideDirection.value = "left";
      nextYear();
    } else {
      // 向右滑动，上一年
      slideDirection.value = "right";
      prevYear();
    }
    mouseStartX.value = 0; // 重置起始位置，防止连续触发

    // 滑动切换后暂停一段时间
    pauseForDuration();
  }
};

// 启动年份切换定时器
startYearInterval();

const carouselTrack = ref(null);
let carouselAnimation = null; // 存储 GSAP 动画实例

const getVisibleItems = () => {
  const items = state.marqueeArr;
  // 复制两组用于无缝滚动
  return [...items, ...items];
};

// 监听窗口大小变化
onMounted(() => {
  ctx = gsap.context(() => {
    moveRefs.value.forEach((moveRef, index) => {
      if (moveRef.value) {
        // 修改初始状态设置
        gsap.set(moveRef.value, {
          opacity: 0,
          // 使用 translateX 替代 x，并且初始位置设置在元素自身宽度范围内
          transform: `translateX(${index % 2 === 0 ? "-100%" : "100%"})`,
          // 添加 overflow: hidden 确保不会影响布局
          overflow: "hidden",
        });

        // 修改动画设置
        gsap.to(moveRef.value, {
          opacity: 1,
          transform: "translateX(0)", // 使用 transform 替代 x
          duration: 1.2,
          ease: "power2.out",
          scrollTrigger: {
            trigger: moveRef.value,
            start: "top 80%",
            end: "top 40%",
            toggleActions: "play none none reverse",
            markers: false,
          },
        });
      }
    });

    // 初始化轮播动画
    nextTick(() => {
      if (carouselTrack.value) {
        const firstItem = carouselTrack.value.querySelector(".carousel-item");
        if (!firstItem) return;

        const itemWidth = firstItem.offsetWidth;
        const itemMargin = parseInt(
          window.getComputedStyle(firstItem).marginRight
        );
        const slideWidth = itemWidth + itemMargin;
        const totalWidth = slideWidth * state.marqueeArr.length;

        // 创建无限滚动动画
        carouselAnimation = gsap.to(carouselTrack.value, {
          x: -totalWidth,
          duration: 20,
          ease: "none",
          repeat: -1,
          onRepeat: () => {
            gsap.set(carouselTrack.value, { x: 0 });
          },
        });
      }
    });
  });
});

onUnmounted(() => {
  if (ctx) {
    ctx.revert();
  }
  ScrollTrigger.killAll();
  if (carouselAnimation) {
    carouselAnimation.kill();
  }
  if (interval) {
    clearInterval(interval);
  }
  if (pauseTimeout) {
    clearTimeout(pauseTimeout);
  }
});

import { useRouter } from "vue-router";
const router = useRouter();

const goToSection = (i) => {
  ctx.data.forEach((e) => {
    if (e.vars && e.vars.id === "scrollTween") {
      e.kill();
    }
  });
  ctx.add(() => {
    scrollTween = gsap.to(window, {
      scrollTo: { y: i * window.innerHeight, autoKill: false },
      duration: 1,
      id: "scrollTween",
      onComplete: () => (scrollTween = null),
      overwrite: true,
    });
  });
};
const handleLink = (url) => {
  window.open(url);
};
const handlePageLink = (link) => {
  router.push(link);
};
// 添加轮播动画暂停和恢复函数
const pauseCarouselAnimation = () => {
  if (carouselAnimation) {
    carouselAnimation.pause();
  }
};

const resumeCarouselAnimation = () => {
  if (carouselAnimation) {
    carouselAnimation.play();
  }
};
const handleQClick = (type, subType) => {
  if (state.qLink?.[type]?.[state.activeYear]?.[subType]) {
    window.open(state.qLink[type][state.activeYear][subType]);
  }
};
const handleYClick = (type) => {
  if (state.yLink?.[type]?.[state.activeYear]) {
    window.open(state.yLink[type][state.activeYear]);
  }
};
const calcQLinkClass = (type, subType) => {
  if (state.qLink?.[type]?.[state.activeYear]?.[subType]) {
    return "link-Q";
  }
  return "";
};
const calcYLinkClass = (type) => {
  if (state.yLink?.[type]?.[state.activeYear]) {
    return "link-Y";
  }
  return "";
};
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.title {
  font-size: 85px;
  font-weight: 600;
}

.section-first {
  width: 100%;
  background-image: url("@/assets/image/investor/768/bg-1.png");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}
.section-four {
  background: url("@/assets/image/investor/768/bg-2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.div-bg3 {
  background: url("@/assets/image/investor/768/bg-3.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px 45px 50px 45px;
  align-content: end;
  box-shadow: 0 20px 41px 10px rgba(0, 0, 0, 0.16);
  border-radius: 40px;
}
.div-bg4 {
  background: url("@/assets/image/investor/768/bg-4.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px 45px 50px 45px;
  align-content: end;
  box-shadow: 0 10px 41px 5px rgba(0, 0, 0, 0.16);
  border-radius: 40px;
}
.icon-langmul {
  position: absolute;
  bottom: -80px;
  right: 0;
}
.carousel-container {
  width: 96%;
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  cursor: pointer;
}

.carousel-track {
  display: flex;
  will-change: transform;
  cursor: grab;
  user-select: none;

  &:active {
    cursor: grabbing;
  }
}

.carousel-item {
  width: 785px;
  margin-right: 73px;
  flex: 0 0 auto;
  display: block; // 改为 block 布局
  padding: 23px 20px 83px 20px;
  border-radius: 30px;
  box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
}

.carousel-image {
  width: 748px;
  height: 563px;
  object-fit: cover;
  display: block;
}

.carousel-content {
  padding: 0 20px 0 60px;
  margin-top: 38px;
}

.carousel-title {
  font-size: 50px;
  font-weight: 500;
  margin-top: 48px;
}

.carousel-subtitle {
  margin-top: 23px;
  color: #455363;
  font-size: 40px;
}
.carousel-link {
  margin-top: 25px;
  color: #8b59fa;
  font-size: 35px;
}
// 添加一个通用的溢出控制类
.overflow-hidden {
  overflow: hidden;
}
.divider1 {
  position: absolute;
  z-index: 3;
  left: 142px;
  width: 1px;
  height: 100%;
  background-color: rgba(230, 234, 238, 0.5) !important;
}

.divider5 {
  position: absolute;
  z-index: 3;
  right: 142px;
  width: 1px;
  height: 100%;
  background-color: rgba(230, 234, 238, 0.5) !important;
}
.line-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.5em * 2);
}
.before-line {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 100%;
    background: #c6acff;
    border-radius: 20px 0 0 20px;
  }
}

// 添加过渡样式
.year-content-animation {
  position: relative;
  will-change: transform, opacity;
}
.link-Q {
  color: #036c85;
}
.link-Y {
  color: #036c85;
}
</style>