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

<template>
  <div class="page-container">
    <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 />
    <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>
  </header>
    <main class="px-[490px] ">
      <section
        className="section-first "
        v-if="state.pageTitle === t('companyprofildetail.article1.title')"
        style="background: #fff"
      >

        <div class="flex flex-wrap justify-center relative z-10 relative z-10">
          <div
            class="w-full title mt-[158px]  text-center"
          >
            {{ t('companyprofildetail.article1.title') }}
          </div>
          <div
            class="w-full text-center mt-[9px] text-[#455363] text-[16px]"
          >
            {{ t('companyprofildetail.article1.date') }}
          </div>
          <div class="mt-[63px] ">
            <img
              class="w-[930px] h-[574px]"
              src="@/assets/image/companyprofil/768/carouselShow-1.png"
            />
          </div>
          <div
            class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
          >
            <div v-if="state.pageTitle === t('companyprofildetail.article1.title')">
              <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>
        </div>
      </section>

      <section
        className="section-sec"
        v-if="state.pageTitle === t('companyprofildetail.article2.title')"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center relative z-10 relative z-10">
          <div
            class="w-full title mt-[158px] text-center"
          >
            {{ t('companyprofildetail.article2.title') }}
          </div>
          <div
            class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
          >
            {{ t('companyprofildetail.article2.date') }}
          </div>
          <div class="mt-[63px] overflow-hidden">
            <img
              class="w-[930px] h-[574px]"
              src="@/assets/image/companyprofil/768/carouselShow-2.png"
            />
          </div>
          <div
            class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
          >
            <div v-if="state.pageTitle === t('companyprofildetail.article2.title')">
              <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>
        </div>
      </section>

      <section
        className="section-third"
        v-if="state.pageTitle === t('companyprofildetail.article3.title')"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center relative z-10 relative z-10">
          <div
            class="w-full title mt-[158px]  text-center"
          >
            {{ t('companyprofildetail.article3.title') }}
          </div>
          <div
            class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
          >
            {{ t('companyprofildetail.article3.date') }}
          </div>
          <div class="mt-[63px] overflow-hidden">
            <img
              class="w-[930px] h-[574px]"
              src="@/assets/image/companyprofil/768/carouselShow-3.png"
            />
          </div>
          <div
            class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
          >
            <div v-if="state.pageTitle === t('companyprofildetail.article3.title')">
              <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>
        </div>
      </section>

      <section
        className="section-four"
        v-if="state.pageTitle === t('companyprofildetail.article4.title')"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center relative z-10 relative z-10">
          <div
            class="w-full title mt-[158px]  text-center"
          >
            {{ t('companyprofildetail.article4.title') }}
          </div>
          <div
            class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
          >
            {{ t('companyprofildetail.article4.date') }}
          </div>
          <div class="mt-[63px] overflow-hidden">
            <img
              class="w-[930px] h-[574px]"
              src="@/assets/image/companyprofil/768/carouselShow-4.png"
            />
          </div>
          <div
            class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
          >
            <div v-if="state.pageTitle === t('companyprofildetail.article4.title')">
              <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>
        </div>
      </section>

      <section
        className="section-five"
        v-if="state.pageTitle === t('companyprofildetail.article5.title')"
        style="background: #fff"
      >
        <div class="flex flex-wrap justify-center relative z-10 relative z-10">
          <div
            class="w-full title mt-[158px]  text-center"
          >
            {{ t('companyprofildetail.article5.title') }}
          </div>
          <div
            class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
          >
            {{ t('companyprofildetail.article5.date') }}
          </div>
          <div class="mt-[63px] overflow-hidden">
            <img
              class="w-[930px] h-[574px]"
              src="@/assets/image/companyprofil/768/carouselShow-5.png"
            />
          </div>
          <div
            class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
          >
            <div v-if="state.pageTitle === t('companyprofildetail.article5.title')">
              <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>
              <p>{{ t('companyprofildetail.article5.content[9]') }}</p>
            </div>
          </div>
        </div>
      </section>

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

<script setup>
import {
  onUnmounted,
  ref,
  onMounted,
  reactive,
  nextTick,
  onBeforeMount,
  computed,
} from "vue";
import {  NDivider } from 'naive-ui'
import { useHome } from "@/store/home/index.js";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router"; 
const router = useRouter();
const { t } = useI18n();
const state = reactive({
  pageTitle: "",
});

const currentArticleContent = computed(() => {
  const messages = t('companyprofildetail', {}, { resolveComponent: false });
  if (state.pageTitle === messages.article1.title) {
    return messages.article1.content;
  } else if (state.pageTitle === messages.article2.title) {
    return messages.article2.content;
  } else if (state.pageTitle === messages.article3.title) {
    return messages.article3.content;
  } else if (state.pageTitle === messages.article4.title) {
    return messages.article4.content;
  } else if (state.pageTitle === messages.article5.title) {
    return messages.article5.content;
  }
  return [];
});

const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push('/' + tab);
}
const { currentTab } = useHome();
const route = useRoute();
onBeforeMount(() => {
  state.pageTitle = route.query.title;
});
onMounted(() => {
  window.scrollTo(0, 0);
});
onUnmounted(() => {});
</script>

<style scoped lang="scss">
.divider1 {
  position: absolute;
  z-index: 3;
  left: 477px;
  width: 1px;
  height: 100vw;

}

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

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

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

.divider5 {
  position: absolute;
  z-index: 3;
  left: 1410px;
  width: 1px;
  height: 100vw;
}
.page-container {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.header {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 10rem;
  background-color: transparent;
}

.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;
  }
}

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

.div-indent {
  text-indent: 2em; // Adjust the value as needed for the desired indent

}
.title {
  // line-height: 110px;
  color: #10253e;
}
</style>