epmet-asd-pc/src/components/AppHeader.vue

<template>
  <nav style="background-color: #1b77ff;" class="shadow-lg fixed w-full top-0 z-50">
    <div class="">
      <div class=" pl-36 flex  items-center py-4">
        <!-- Logo -->
        <!-- Desktop Navigation -->
        <div class="text-white text-3xl font-semibold">青岛市免租金住宿保障平台</div>
        <div class="hidden md:flex items-center space-x-8  pl-20">

          <router-link v-for="item in navigationConfig" :key="item.key" :to="item.path"
            class=" text-white  font-medium transition-colors duration-200" @click.prevent="handleClick(item)"
            :class="{ 'text-yellow-400': $route.path === item.path }">
            {{ item.name }}
          </router-link>

          <!-- Language Switcher -->
          <!-- <div class="relative">
            <button @click="toggleLanguageMenu"
              class="flex items-center space-x-1 text-gray-600  font-medium transition-colors duration-200">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129">
                </path>
              </svg>

            </button>

            <div v-show="showLanguageMenu" class="absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg py-1 z-10">
              <button @click="changeLanguage('zh')"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                :class="{ 'bg-blue-50 text-blue-600': currentLanguage === 'zh' }">

              </button>
              <button @click="changeLanguage('en')"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                :class="{ 'bg-blue-50 text-blue-600': currentLanguage === 'en' }">

              </button>
            </div>
          </div> -->
        </div>

        <!-- Mobile menu button -->
        <button @click="toggleMobileMenu"
          class="md:hidden flex items-center px-3 py-2 border rounded text-gray-600 border-gray-200 hover:text-blue-600 hover:border-blue-600">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20">
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </button>
      </div>

      <!-- Mobile Navigation -->
      <div v-show="showMobileMenu" class="md:hidden bg-white border-t border-gray-200">
        <div class="px-2 pt-2 pb-3 space-y-1">
          <router-link v-for="item in navigationConfig" :key="item.key" :to="item.path" @click="closeMobileMenu"
            class="block px-3 py-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200"
            :class="{ 'text-blue-600 bg-blue-50': $route.path === item.path }">
            {{ item.name }}
          </router-link>

          <!-- Mobile Language Switcher -->
          <div class="border-t border-gray-200 pt-2 mt-2">
            <div class="px-3 py-2 text-sm text-gray-500"></div>
            <button @click="changeLanguage('zh')"
              class="block w-full text-left px-3 py-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200"
              :class="{ 'text-blue-600 bg-blue-50': currentLanguage === 'zh' }">

            </button>
            <button @click="changeLanguage('en')"
              class="block w-full text-left px-3 py-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200"
              :class="{ 'text-blue-600 bg-blue-50': currentLanguage === 'en' }">

            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <ImagePreview v-model:visible="showImagePreview" @close="showImagePreview = false" :image-url="imageUrl" :image-alt="previewImageAlt" />
</template>

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { switchLanguage } from '@/i18n'
import { useRouter, useRoute } from 'vue-router';
import ImagePreview from '@/components/ImagePreview.vue';
import imageUrl from '@/assets/images/guide.png';
const route = useRoute();
const router = useRouter();
const { locale } = useI18n()

const showMobileMenu = ref(false)
const showLanguageMenu = ref(false)
const showImagePreview = ref(false)
const navigationConfig = [
  {
    name: '首页',
    path: '/',
    key: 'home'
  },
  {
    name: '信息公告',
    path: '/policy',
    key: 'policy'
  },
  {
    name: '看房',
    path: '/Showings',
    key: 'Showings'
  },
  {
    name: '选房指南',
    path: '',
    key: 'guide'
  }, {
    name: '学历汇',
    path: '',
    key: 'renewal'
  },
]
const currentLanguage = computed(() => locale.value)

const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

const closeMobileMenu = () => {
  showMobileMenu.value = false
}

const toggleLanguageMenu = () => {
  showLanguageMenu.value = !showLanguageMenu.value
}

const changeLanguage = (lang: string) => {
  switchLanguage(lang)
  showLanguageMenu.value = false
}
function handleClick(item) {
  if (item.key === 'renewal') {
    // alert('功能正在开发中')]
    ElNotification({
      title: '功能还未开放',
      message: "",
    })
  } else if (item.key === 'guide') {
    // alert('功能正在开发中')]
    showImagePreview.value = true
  } else {
    router.push(item.path)
  }
}
onMounted(() => {
})

</script>

<style scoped>
/* 自定义样式 */
</style>