officialWebsite/src/views/businessintroduction/size375/index.vue

<template>
  <div class="page-container">
    <n-divider class="divider1" vertical />
    <n-divider class="divider5" vertical />
    <header class="header flex items-center justify-between">
      <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>
    </header>
    <main>
      <section class="relative pb-[1020px]">
        <div class="absolute top-[0px] right-[0px]">
          <img
            src="@/assets/image/businessintroduction/375/bg-6.png"
            class="w-[1920px]"
          />
        </div>

        <div class="pt-[2345px]">
          <div
            class="w-full title ml-[188px]"
            :ref="
              (el) => {
                moveRefs[0].value = el;
              }
            "
          >
            <div>{{ $t("businessintroduction.hero.title1") }}</div>
            <div>{{ $t("businessintroduction.hero.title2") }}</div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[1].value = el;
              }
            "
            class="text-[51px] text-[#8B59F7] w-[1413px] ml-[188px] mt-[55px]"
          >
            {{ $t("businessintroduction.hero.desc") }}
          </div>
        </div>

        <div class="absolute bottom-[-260px] left-[0px]">
          <img
            src="@/assets/image/businessintroduction/375/bg-7.png"
            class="w-[1405px] h-[1428px]"
          />
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[3].value = el;
            }
          "
          class="absolute bottom-[-376px] right-[0px] z-4"
        >
          <img
            src="@/assets/image/businessintroduction/375/bg-2.png"
            class="w-[1039px]"
          />
        </div>
      </section>

      <section class="section-sec relative">
        <div class="flex flex-wrap justify-center pt-[480px]">
          <div class="w-full px-[184px]">
            <div class="text-[#8B59F7] text-[72px] font-semibold">
              {{ $t("businessintroduction.industry.label") }}
            </div>
          </div>
          <div class="w-full title mt-[87px] px-[184px]">
            <div>
              {{ $t("businessintroduction.industry.title").split("，")[0] }}
            </div>
            <div>
              {{ $t("businessintroduction.industry.title").split("，")[1] }}
            </div>
          </div>
          <div class="w-full px-[184px] mt-[159px]">
            <div
              :ref="
                (el) => {
                  moveRefs[4].value = el;
                }
              "
              class="text-[#455363] text-[72px] pr-[139px]"
            >
              {{ $t("businessintroduction.industry.desc") }}
            </div>
          </div>

          <div
            class="w-full mt-[287px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
          >
            <div>
              {{ $t("businessintroduction.industry.challenges.title") }}
            </div>
          </div>

          <div class="w-full px-[184px] flex flex-wrap">
            <div
              v-for="(item, index) in challengeItems"
              :key="index"
              :ref="
                (el) => {
                  moveRefs[5 + index].value = el;
                }
              "
              class="w-full mt-[154px] flex flex-wrap text-[72px]"
            >
              <div
                class="w-full font-semibold text-[82px] text-[#455363] flex flex-wrap items-center"
              >
                <img
                  class="w-[82px] h-[82px] mr-[51px]"
                  src="@/assets/image/businessintroduction/375/icon-y.png"
                />
                {{ item.title }}
              </div>
              <div class="w-full mt-[15px] pl-[133px] text-[#455363]">
                {{ item.desc }}
              </div>
            </div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[9].value = el;
              }
            "
            class="w-full mt-[160px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
          >
            <div>
              {{
                $t("businessintroduction.industry.opportunity.title").split(
                  "："
                )[0]
              }}：
            </div>
            <div>
              {{
                $t("businessintroduction.industry.opportunity.title").split(
                  "："
                )[1]
              }}
            </div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[10].value = el;
              }
            "
            class="w-full mt-[154px] px-[184px] text-[72px] text-[#455363] leading-[102px] mb-[379px]"
          >
            <div>
              {{ $t("businessintroduction.industry.opportunity.desc") }}
            </div>
          </div>
        </div>
      </section>

      <section class="relative" style="background: #fff">
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[184px] mt-[369px]">
            <div class="text-[#8B59F7] text-[72px] font-semibold">
              {{ $t("businessintroduction.solution.label") }}
            </div>
          </div>
          <div class="w-full title mt-[87px] px-[184px]">
            <div>
              {{ $t("businessintroduction.solution.title").split("，")[0] }}
            </div>
            <div>
              {{ $t("businessintroduction.solution.title").split("，")[1] }}
            </div>
          </div>

          <div class="mt-[230px] mb-[399px] overflow-hidden">
            <img
              :ref="
                (el) => {
                  moveRefs[11].value = el;
                }
              "
              class="w-[1715px]"
              src="@/assets/image/businessintroduction/375/imageshow-2.png"
            />
          </div>
          <div class="w-full px-[184px]">
            <img
              class="w-[306px] h-[229px]"
              src="@/assets/image/businessintroduction/375/icon-l.png"
            />

            <div
              class="w-full mt-[102px] text-[#10253E] text-[82px] font-semibold"
            >
              {{ $t("businessintroduction.solution.features.precision.title") }}
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[12].value = el;
                }
              "
              class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
            >
              {{ $t("businessintroduction.solution.features.precision.desc") }}
            </div>
          </div>
          <div class="w-full px-[184px] mt-[410px]">
            <img
              class="w-[222px] h-[198px]"
              src="@/assets/image/businessintroduction/375/icon-k.png"
            />

            <div
              class="w-full mt-[128px] text-[#10253E] text-[82px] font-semibold"
            >
              {{
                $t("businessintroduction.solution.features.monetization.title")
              }}
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[13].value = el;
                }
              "
              class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
            >
              {{
                $t("businessintroduction.solution.features.monetization.desc")
              }}
            </div>
          </div>
          <div class="w-full px-[184px] mt-[410px] mb-[379px]">
            <img
              class="w-[227px] h-[222px]"
              src="@/assets/image/businessintroduction/375/icon-h.png"
            />

            <div
              class="w-full mt-[123px] text-[#10253E] text-[82px] font-semibold"
            >
              {{
                $t("businessintroduction.solution.features.interaction.title")
              }}
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[14].value = el;
                }
              "
              class="mt-[87px] text-[#455363] text-[72px] pr-[112px]"
            >
              {{
                $t("businessintroduction.solution.features.interaction.desc")
              }}
            </div>
          </div>
        </div>
      </section>

      <section class="relative" style="background: #f8f9ff">
        <div class="flex flex-wrap justify-center relative pb-[875px]">
          <div class="w-full px-[184px] mt-[379px]">
            <div class="text-[#8B59F7] text-[72px]">
              {{ $t("businessintroduction.vision.label") }}
            </div>
          </div>
          <div class="w-full title mt-[87px] px-[184px]">
            <div>{{ $t("businessintroduction.vision.title") }}</div>
          </div>
          <div class="w-full px-[184px] mt-[159px]">
            <div
              :ref="
                (el) => {
                  moveRefs[15].value = el;
                }
              "
              class="text-[#455363] text-[72px] pr-[112px]"
            >
              {{ $t("businessintroduction.vision.desc") }}
            </div>
          </div>

          <div
            class="w-full mt-[287px] px-[184px] font-semibold text-[92px] text-[#8B59F7]"
          >
            <div>{{ $t("businessintroduction.vision.community.title") }}</div>
          </div>
          <div
            :ref="
              (el) => {
                moveRefs[16].value = el;
              }
            "
            class="w-full mt-[154px] px-[184px] text-[72px] text-[#455363]"
          >
            <div>
              {{ $t("businessintroduction.vision.community.desc") }}
            </div>
          </div>

          <div class="absolute bottom-[-180px]">
            <img
              :ref="
                (el) => {
                  moveRefs[17].value = el;
                }
              "
              class="w-[1715px]"
              src="@/assets/image/businessintroduction/375/imageshow-1.png"
            />
          </div>
        </div>
      </section>

      <section class="section-five h-[4562px] pt-[379px] relative">
        <div class="w-full px-[184px]">
          <div class="text-[#fff] text-[92px] font-semibold">
            <div>
              {{ $t("businessintroduction.cooperation.title").split(",")[0] }}
            </div>
            <div>
              {{ $t("businessintroduction.cooperation.title").split(",")[1] }}
            </div>
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[18].value = el;
            }
          "
          class="w-full px-[184px]"
        >
          <div class="w-full mt-[288px] text-[#fff] text-[82px]">
            {{ $t("businessintroduction.cooperation.timeline.year2025.title") }}
          </div>
          <div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
            {{ $t("businessintroduction.cooperation.timeline.year2025.desc") }}
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[19].value = el;
            }
          "
          class="w-full px-[184px] mt-[80px]"
        >
          <div class="w-full mt-[159px] text-[#fff] text-[82px]">
            {{ $t("businessintroduction.cooperation.timeline.year2026.title") }}
          </div>
          <div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
            {{ $t("businessintroduction.cooperation.timeline.year2026.desc") }}
          </div>
        </div>
        <div
          :ref="
            (el) => {
              moveRefs[20].value = el;
            }
          "
          class="w-full px-[184px] mt-[80px]"
        >
          <div class="w-full mt-[154px] text-[#fff] text-[82px]">
            {{ $t("businessintroduction.cooperation.timeline.year2027.title") }}
          </div>
          <div class="mt-[87px] text-[#D1D1D1] text-[72px] w-[1431px]">
            {{ $t("businessintroduction.cooperation.timeline.year2027.desc") }}
          </div>
        </div>

        <div class="absolute bottom-[-10px] right-[0px]">
          <img
            src="@/assets/image/businessintroduction/375/bg-5.png"
            class="h-[361px]"
          />
        </div>
      </section>
      <section>
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-[184px] mt-[300px]">
            <div class="text-[#8B59F7] text-[92px] font-semibold">
              {{ $t("businessintroduction.incubation.title") }}
            </div>
            <div class="text-[#8B59F7] text-[92px] font-semibold">
              {{ $t("businessintroduction.incubation.subtitle") }}
            </div>
          </div>

          <div class="w-full px-[184px] mt-[130px]">
            <div
              :ref="
                (el) => {
                  moveRefs[21].value = el;
                }
              "
              class="text-[#455363] text-[72px] pr-[57px] leading-[102px]"
            >
              {{ $t("businessintroduction.incubation.desc") }}
            </div>
          </div>

          <div
            class="w-full px-[184px] flex flex-wrap justify-between mt-[440px] mb-[384px]"
          >
            <div
              :ref="
                (el) => {
                  moveRefs[22].value = el;
                }
              "
              class="w-full flex flex-wrap text-[72px]"
            >
              <div class="w-full">
                <img
                  class="w-[229px] h-[222px]"
                  src="@/assets/image/businessintroduction/375/icon-s.png"
                />
              </div>
              <div
                class="w-full font-semibold mt-[123px] text-[#10253E] text-[82px]"
              >
                {{ $t("businessintroduction.incubation.features.fans.title") }}
              </div>
              <div class="mt-[87px]">
                {{ $t("businessintroduction.incubation.features.fans.desc") }}
              </div>
            </div>
            <div
              :ref="
                (el) => {
                  moveRefs[23].value = el;
                }
              "
              class="w-full flex flex-wrap text-[72px]"
            >
              <div class="w-full mt-[410px]">
                <img
                  class="w-[218px] h-[222px]"
                  src="@/assets/image/businessintroduction/375/icon-c.png"
                />
              </div>

              <div
                class="w-full font-semibold mt-[123px] text-[#10253E] text-[82px]"
              >
                {{ $t("businessintroduction.incubation.features.kol.title") }}
              </div>
              <div class="mt-[87px]">
                {{ $t("businessintroduction.incubation.features.kol.desc") }}
              </div>
            </div>
          </div>
        </div>
      </section>
      <section style="background: #f8f9ff">
        <div class="flex flex-wrap justify-center">
          <div
            :ref="
              (el) => {
                moveRefs[24].value = el;
              }
            "
            class="w-full px-[184px] mt-[364px]"
          >
            <div class="text-[#8B59F7] text-[92px] font-semibold">
              <div>{{ $t("businessintroduction.exposure.title") }}</div>
            </div>
          </div>

          <div
            :ref="
              (el) => {
                moveRefs[25].value = el;
              }
            "
            class="w-full px-[184px] mt-[154px]"
          >
            <div class="text-[#455363] text-[72px] pr-[57px]">
              {{ $t("businessintroduction.exposure.desc") }}
            </div>
          </div>
          <div class="mt-[46px] mb-[246px] px-[108px]">
            <div
              v-for="(item, idx) in state.marqueeArr"
              :key="idx"
              class="w-full flex flex-wrap justify-center carousel-item"
            >
              <img class="carousel-image" :src="item.imgUrl" />
              <div class="carousel-title w-full">
                <div>{{ item.title }}</div>
              </div>
              <div class="carousel-subtitle">
                <div>{{ item.subTitle }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style="background: #fff" class="flex flex-wrap justify-center">
        <img
          class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
          src="@/assets/image/image-footer.png"
          alt="logo"
        />
      </section>
    </main>
  </div>
</template>

<script setup>
import { NDivider } from "naive-ui";
import { onUnmounted, ref, onMounted, reactive, nextTick, computed } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useHome } from "@/store/home/index.js";
import { useTransitionComposable } from "@/composables/transition-composable";
import { useI18n } from "vue-i18n";

// Define component custom events
defineEmits(["sendCode"]);

// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);

const { t } = useI18n();
const { transitionState } = useTransitionComposable();

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

// Import images
import imageshow3 from "@/assets/image/businessintroduction/375/imageshow-3.png";
import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
import imageshow5 from "@/assets/image/businessintroduction/375/imageshow-5.png";

const state = reactive({
  marqueeArr: computed(() => [
    {
      title: t("businessintroduction.exposure.timeline.year2025.title"),
      subTitle: t("businessintroduction.exposure.timeline.year2025.desc"),
      imgUrl: imageshow3,
    },
    {
      title: t("businessintroduction.exposure.timeline.year2026.title"),
      subTitle: t("businessintroduction.exposure.timeline.year2026.desc"),
      imgUrl: imageshow4,
    },
    {
      title: t("businessintroduction.exposure.timeline.year2027.title"),
      subTitle: t("businessintroduction.exposure.timeline.year2027.desc"),
      imgUrl: imageshow5,
    },
  ]),
});

let carouselAnimation = null; // Store GSAP animation instance

// Listen for window size changes
onMounted(() => {
  ctx = gsap.context(() => {
    moveRefs.value.forEach((moveRef, index) => {
      if (moveRef.value) {
        // Modify initial state settings
        gsap.set(moveRef.value, {
          opacity: 0,
          // Use translateX instead of x, and set initial position within element's own width
          transform: `translateX(${index % 2 === 0 ? "-100%" : "100%"})`,
          // Add overflow: hidden to ensure it doesn't affect layout
          overflow: "hidden",
        });

        // Modify animation settings
        gsap.to(moveRef.value, {
          opacity: 1,
          transform: "translateX(0)", // Use transform instead of x
          duration: 1.2,
          ease: "power2.out",
          scrollTrigger: {
            trigger: moveRef.value,
            start: "top 80%",
            end: "top 40%",
            toggleActions: "play none none reverse",
            markers: false,
          },
        });
      }
    });
  });
});

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

import { useRouter } from "vue-router";
const router = useRouter();
const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push("/" + tab);
};

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,
    });
  });
};

// Prepare challenge items data
const challengeItems = computed(() => [
  {
    title: t("businessintroduction.industry.challenges.items.0.title"),
    desc: t("businessintroduction.industry.challenges.items.0.desc"),
  },
  {
    title: t("businessintroduction.industry.challenges.items.1.title"),
    desc: t("businessintroduction.industry.challenges.items.1.desc"),
  },
  {
    title: t("businessintroduction.industry.challenges.items.2.title"),
    desc: t("businessintroduction.industry.challenges.items.2.desc"),
  },
  {
    title: t("businessintroduction.industry.challenges.items.3.title"),
    desc: t("businessintroduction.industry.challenges.items.3.desc"),
  },
]);
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
.header {
  width: 100%;
  height: 260px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 138px;
  background-color: transparent;
}
.logo {
  img {
    width: 399px;
    height: 128px;
  }
}

.tabs {
  display: flex;
  gap: 128px;
  margin-right: 32px;
  margin-left: 60px;
}

.tab-item {
  display: flex;
  align-items: center;
  font-size: 61px;
  color: #000000;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;

  &.active {
    color: #8b59fa;
  }

  &:hover {
    color: #8b59fa;
  }
}

.title {
  font-size: 113px;
  font-weight: 600;
  color: #10253e;
  line-height: 143px;
}
.subTitle {
  line-height: 102px;
}
.section-first {
  width: 100%;
  background: url("@/assets/image/businessintroduction/375/bg-6.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-sec {
  z-index: 2;
  background: url("@/assets/image/businessintroduction/375/bg-12.png");
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}

.section-five {
  background: url("@/assets/image/businessintroduction/375/bg-1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.icon-langmul {
  position: absolute;
  bottom: -80px;
  right: 0;
}

.arrow-btn {
  cursor: pointer;
}

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

  &:active {
    cursor: grabbing;
  }
}

.carousel-item {
  margin-top: 154px;
  padding: 46px 36px 118px 51px;
  border-radius: 61px;
  box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16);
}

.carousel-image {
  width: 1623px;
  object-fit: cover;
  display: block;
}

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

.carousel-title {
  text-align: left;
  font-size: 92px;
  font-weight: 500;
  margin-top: 87px;
}

.carousel-subtitle {
  margin-top: 51px;
  color: #455363;
  font-size: 72px;
}

// Add a generic overflow control class
.overflow-hidden {
  overflow: hidden;
}
.divider1 {
  position: absolute;
  z-index: 3;
  left: 64px;
  width: 1px;
  height: 100%;
  background-color: rgba(230, 234, 238, 0.5) !important;
}

.divider5 {
  position: absolute;
  z-index: 3;
  right: 60px;
  width: 1px;
  height: 100%;
  background-color: rgba(230, 234, 238, 0.5) !important;
}
</style>