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

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

    <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-[298px] px-[180px] text-center">
            {{ $t("companyprofildetail.article1.title") }}
          </div>
          <div class="w-full text-center mt-[28px] text-[#455363] text-[40px]">
            {{ $t("companyprofildetail.article1.date") }}
          </div>
          <div class="mt-[63px] 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-[40px] div-indent mt-[118px] mb-[275px]"
          >
            <div>{{ $t("companyprofildetail.article1.content[0]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[1]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[2]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[3]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[4]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[5]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[6]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[7]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[8]") }}</div>
            <div>{{ $t("companyprofildetail.article1.content[9]") }}</div>
          </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-[180px] text-center">
            {{ $t("companyprofildetail.article2.title") }}
          </div>
          <div class="w-full text-center mt-[28px] text-[#455363] text-[40px]">
            {{ $t("companyprofildetail.article2.date") }}
          </div>
          <div class="mt-[63px] 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-[40px] div-indent mt-[118px] mb-[275px]"
          >
            <div>{{ $t("companyprofildetail.article2.content[0]") }}</div>
            <div>{{ $t("companyprofildetail.article2.content[1]") }}</div>
            <div>{{ $t("companyprofildetail.article2.content[2]") }}</div>
            <div>{{ $t("companyprofildetail.article2.content[3]") }}</div>
            <div>{{ $t("companyprofildetail.article2.content[4]") }}</div>
            <div>{{ $t("companyprofildetail.article2.content[5]") }}</div>
            <div>{{ $t("companyprofildetail.article2.content[6]") }}</div>
            <div>{{ $t("companyprofildetail.article2.content[7]") }}</div>
          </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-[180px] text-center">
            {{ $t("companyprofildetail.article3.title") }}
          </div>
          <div class="w-full text-center mt-[28px] text-[#455363] text-[40px]">
            {{ $t("companyprofildetail.article3.date") }}
          </div>
          <div class="mt-[63px] 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-[40px] div-indent mt-[118px] mb-[275px]"
          >
            <div>{{ $t("companyprofildetail.article3.content[0]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[1]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[2]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[3]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[4]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[5]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[6]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[7]") }}</div>
            <div>{{ $t("companyprofildetail.article3.content[8]") }}</div>
          </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-[180px] text-center">
            {{ $t("companyprofildetail.article4.title") }}
          </div>
          <div class="w-full text-center mt-[28px] text-[#455363] text-[40px]">
            {{ $t("companyprofildetail.article4.date") }}
          </div>
          <div class="mt-[63px] 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-[40px] div-indent mt-[118px] mb-[275px]"
          >
            <div>{{ $t("companyprofildetail.article4.content[0]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[1]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[2]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[3]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[4]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[5]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[6]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[7]") }}</div>
            <div>{{ $t("companyprofildetail.article4.content[8]") }}</div>
          </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-[180px] text-center">
            {{ $t("companyprofildetail.article5.title") }}
          </div>
          <div class="w-full text-center mt-[28px] text-[#455363] text-[40px]">
            {{ $t("companyprofildetail.article5.date") }}
          </div>
          <div class="mt-[63px] 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-[40px] div-indent mt-[118px] mb-[275px]"
          >
            <div>{{ $t("companyprofildetail.article5.content[0]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[1]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[2]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[3]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[4]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[5]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[6]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[7]") }}</div>
            <div>{{ $t("companyprofildetail.article5.content[8]") }}</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,
  nextTick,
  watch,
  onBeforeMount,
} from "vue";
import AppHeader from "@/components/AppHeader/index.vue";
import { useHome } from "@/store/home/index.js";
const state = reactive({
  pageTitleNo: "",
});
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();

onBeforeMount(() => {
  state.pageTitleNo = route.query.titleNo;
});
onMounted(() => {});
onUnmounted(() => {});
</script>

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

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

.div-indent {
  text-indent: 2em;
  line-height: 75px;
}
.title {
  line-height: 110px;
  color: #10253e;
}
.divider1 {
  position: absolute;
  z-index: 3;
  background-color: rgba(230, 234, 238, 0.5) !important;
  left: 116px;
  width: 1px;
  height: 100%;
}

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