officialWebsite/src/views/companyprofildetail/size768/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 class="tab-item" @click="handleLanguageChange">
          {{ currentLanguageLabel }}
          <img
            src="@/assets/image/home/768/icon-language.png"
            alt="language"
            class="w-[18px] ml-[13px]"
          />
        </div>
      </div>
    </header>
    <!-- 语言选择模态框 - 使用纯div实现 -->
    <div
      v-if="showLanguageModal"
      class="language-modal"
      @touchmove.prevent.stop
    >
      <div class="language-modal-backdrop" @click="closeLanguageModal"></div>
      <div class="language-modal-content">
        <div class="modal-header font-semibold flex items-center">
          {{ t("home.nav.please_select") }}
          <img
            src="@/assets/image/home/375/icon-close.png"
            alt="close"
            class="close-btn w-[51px]"
            @click="closeLanguageModal"
          />
        </div>
        <div class="language-modal-body" @wheel.stop @touchmove.stop>
          <div
            v-for="option in languageOptions"
            :key="option.value"
            class="language-option"
            :class="{ active: selectedLanguage === option.value }"
            @click="selectedLanguage = option.value"
          >
            {{ option.label }}
          </div>
        </div>
        <div class="language-modal-footer">
          <button class="confirm-btn" @click="confirmLanguageChange">
            {{ t("home.nav.confirm_select") }}
          </button>
        </div>
      </div>
    </div>
    <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 { 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();
const { currentTab } = useHome();
import { useLanguage } from "@/utils/changeLanguage.js";
const {
  languageOptions,
  currentLanguageLabel,
  changeLanguage,
  initLanguage,
  currentLang,
} = useLanguage();

onBeforeMount(() => {
  state.pageTitleNo = route.query.titleNo;
});
onMounted(() => {});
onUnmounted(() => {});
const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push("/" + tab);
};

// 语言选择模态框相关变量
const showLanguageModal = ref(false);
// 默认选中的语言，从localStorage获取，如果没有则默认为简体中文
const selectedLanguage = ref(localStorage.getItem("language") || "zh");

// 打开语言选择模态框
const handleLanguageChange = () => {
  showLanguageModal.value = true;
  // 打开时设置当前选中的语言
  selectedLanguage.value = localStorage.getItem("language") || "zh";
  // 禁止背景滚动
  document.body.style.overflow = "hidden";
};

const currentLanguage = ref(localStorage.getItem("language") || "zh");

// 添加语言变化的监听
watch(
  () => localStorage.getItem("language"),
  (newLang) => {
    if (newLang) {
      currentLanguage.value = newLang;
    }
  },
  { immediate: true }
);

// 确认语言选择
const confirmLanguageChange = () => {
  changeLanguage(selectedLanguage.value);
  // 更新轮播图
  currentLanguage.value = selectedLanguage.value;
  // 关闭模态框
  showLanguageModal.value = false;
  // 恢复背景滚动
  document.body.style.overflow = "";
};

// 关闭语言选择模态框
const closeLanguageModal = () => {
  showLanguageModal.value = false;
  // 恢复背景滚动
  document.body.style.overflow = "";
};
</script>

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

.header {
  width: 100%;
  height: 155px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 200px 0 188px;
  background-color: #fff;
}
.logo {
  img {
    width: 270px;
    height: 83px;
  }
}
.tabs {
  display: flex;
  gap: 32px;
  margin-right: 32px;
}

.tab-item {
  font-size: 30px;
  color: #000000;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px 8px;

  &.active {
    color: #8b59fa;
  }

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

.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%;
}
/* 语言选择模态框样式 */
.language-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  touch-action: none; /* 防止触摸事件影响背景 */
}

.language-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

.language-modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 90vh; /* 最大高度为视口高度的90% */
  background-color: #fff;
  z-index: 1002;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 内容溢出隐藏 */
}

.modal-header {
  padding: 33px 38px 55px 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 40px;
  color: #000000;
  position: relative;
  flex-shrink: 0; /* 不允许头部收缩 */
}

.close-btn {
  cursor: pointer;
}

.language-modal-body {
  padding: 10px 0;
  overflow-y: auto; /* 只有内容区域可滚动 */
  -webkit-overflow-scrolling: touch; /* 为iOS设备提供平滑滚动 */
  flex: 1; /* 内容区域填充剩余空间 */
  overscroll-behavior: contain; /* 阻止滚动穿透 */
}

.language-option {
  padding: 30px 0;
  font-size: 40px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.language-option:hover,
.language-option.active {
  background-color: #f5f5f5;
  color: #8b59f7;
}

.language-modal-footer {
  padding: 40px 38px;
  display: flex;
  justify-content: center;
  flex-shrink: 0; /* 不允许底部收缩 */
}

.confirm-btn {
  background-color: #8b59f7;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 23px 0;
  width: 100%;
  font-size: 40px;
  cursor: pointer;
}

.confirm-btn:hover {
  background-color: #7a48e6;
}
</style>