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

<template>
  <div class="page-container">
    <n-divider class="divider1" vertical />
    <n-divider class="divider5" vertical />
    <header className="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
        className="section-first"
        v-if="state.pageTitleNo === '1'"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center">
          <div class="w-full title mt-[543px] px-[205px] text-center">
            {{ $t("companyprofildetail.article1.title") }}
          </div>
          <div class="w-full text-center mt-[31px] text-[#455363] text-[72px]">
            {{ $t("companyprofildetail.article1.date") }}
          </div>
          <div class="mt-[164px] overflow-hidden">
            <img
              class="w-[1625px] h-[1003px]"
              src="@/assets/image/companyprofil/768/carouselShow-1.png"
            />
          </div>
          <div
            class="w-full px-[188px] text-[#455363] text-[72px] div-indent mt-[241px] mb-[445px]"
          >
            <p>{{ $t("companyprofildetail.article1.content[0]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[1]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[2]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[3]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[4]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[5]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[6]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[7]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[8]") }}</p>
            <p>{{ $t("companyprofildetail.article1.content[9]") }}</p>
          </div>
        </div>
      </section>

      <section
        className="section-sec"
        v-if="state.pageTitleNo === '2'"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center">
          <div class="w-full title mt-[298px] px-[205px] text-center">
            {{ $t("companyprofildetail.article2.title") }}
          </div>
          <div class="w-full text-center mt-[31px] text-[#455363] text-[72px]">
            {{ $t("companyprofildetail.article2.date") }}
          </div>
          <div class="mt-[164px] overflow-hidden">
            <img
              class="w-[1625px] h-[1003px]"
              src="@/assets/image/companyprofil/768/carouselShow-2.png"
            />
          </div>
          <div
            class="w-full px-[188px] text-[#455363] text-[72px] div-indent mt-[241px] mb-[445px]"
          >
            <p>{{ $t("companyprofildetail.article2.content[0]") }}</p>
            <p>{{ $t("companyprofildetail.article2.content[1]") }}</p>
            <p>{{ $t("companyprofildetail.article2.content[2]") }}</p>
            <p>{{ $t("companyprofildetail.article2.content[3]") }}</p>
            <p>{{ $t("companyprofildetail.article2.content[4]") }}</p>
            <p>{{ $t("companyprofildetail.article2.content[5]") }}</p>
            <p>{{ $t("companyprofildetail.article2.content[6]") }}</p>
            <p>{{ $t("companyprofildetail.article2.content[7]") }}</p>
          </div>
        </div>
      </section>

      <section
        className="section-third"
        v-if="state.pageTitleNo === '3'"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center">
          <div class="w-full title mt-[298px] px-[205px] text-center">
            {{ $t("companyprofildetail.article3.title") }}
          </div>
          <div class="w-full text-center mt-[31px] text-[#455363] text-[72px]">
            {{ $t("companyprofildetail.article3.date") }}
          </div>
          <div class="mt-[164px] overflow-hidden">
            <img
              class="w-[1625px] h-[1003px]"
              src="@/assets/image/companyprofil/768/carouselShow-3.png"
            />
          </div>
          <div
            class="w-full px-[188px] text-[#455363] text-[72px] div-indent mt-[241px] mb-[445px]"
          >
            <p>{{ $t("companyprofildetail.article3.content[0]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[1]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[2]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[3]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[4]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[5]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[6]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[7]") }}</p>
            <p>{{ $t("companyprofildetail.article3.content[8]") }}</p>
          </div>
        </div>
      </section>

      <section
        className="section-four"
        v-if="state.pageTitleNo === '4'"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center">
          <div class="w-full title mt-[298px] px-[205px] text-center">
            {{ $t("companyprofildetail.article4.title") }}
          </div>
          <div class="w-full text-center mt-[31px] text-[#455363] text-[72px]">
            {{ $t("companyprofildetail.article4.date") }}
          </div>
          <div class="mt-[164px] overflow-hidden">
            <img
              class="w-[1625px] h-[1003px]"
              src="@/assets/image/companyprofil/768/carouselShow-4.png"
            />
          </div>
          <div
            class="w-full px-[188px] text-[#455363] text-[72px] div-indent mt-[241px] mb-[445px]"
          >
            <p>{{ $t("companyprofildetail.article4.content[0]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[1]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[2]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[3]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[4]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[5]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[6]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[7]") }}</p>
            <p>{{ $t("companyprofildetail.article4.content[8]") }}</p>
          </div>
        </div>
      </section>

      <section
        className="section-five"
        v-if="state.pageTitleNo === '5'"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center">
          <div class="w-full title mt-[298px] px-[205px] text-center">
            {{ $t("companyprofildetail.article5.title") }}
          </div>
          <div class="w-full text-center mt-[31px] text-[#455363] text-[72px]">
            {{ $t("companyprofildetail.article5.date") }}
          </div>
          <div class="mt-[164px] overflow-hidden">
            <img
              class="w-[1625px] h-[1003px]"
              src="@/assets/image/companyprofil/768/carouselShow-5.png"
            />
          </div>
          <div
            class="w-full px-[188px] text-[#455363] text-[72px] div-indent mt-[241px] mb-[445px]"
          >
            <p>{{ $t("companyprofildetail.article5.content[0]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[1]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[2]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[3]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[4]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[5]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[6]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[7]") }}</p>
            <p>{{ $t("companyprofildetail.article5.content[8]") }}</p>
          </div>
        </div>
      </section>

      <section
        style="background: #fff"
        className="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,
  onBeforeMount,
} from "vue";
import { useHome } from "@/store/home/index.js";
import { useRoute, useRouter } from "vue-router";

const state = reactive({
  pageTitleNo: "",
});

const { currentTab } = useHome();
const router = useRouter();
const route = useRoute();
onBeforeMount(() => {
  state.pageTitleNo = route.query.titleNo;
});
onMounted(() => {});
onUnmounted(() => {});

const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push("/" + tab);
};
</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;
}

.tab-item {
  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;
}
.div-indent {
  text-indent: 2em; // Adjust the value as needed for the desired indent
  line-height: 143px;
}
.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>