xinyang5yuan-web/components/AppHeader.vue

<template>
  <div class="box_32 flex-col">
    <div class="section_1 flex-row justify-center"
      :style="!isMobile ? 'padding-top: 25px;height: 110px;' : 'padding-top: 0;height: 50px;'">
      <!-- <div class="box_1 flex-col"></div> -->
      <div class="text_1">信阳市第五人民医院</div>
      <!-- 手机端菜单按钮 -->
      <div v-if="isMobile" class="mobile-menu-button" @click="toggleMobileMenu">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </div>
    </div>

    <!-- 桌面端菜单 -->
    <div v-if="!isMobile" class="section_2 flex-row">

      <NuxtLink to="/">
        <div :class="isLinl == '/' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_2">首页</span>
          <div v-if="isLinl == '/'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/about">
        <div :class="isLinl == '/about' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">医院概况</span>
          <div v-if="isLinl == '/about'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/-3">
        <div :class="isLinl == '/list/-3' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">医生团队</span>
          <div v-if="isLinl == '/list/-3'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/89">
        <div :class="isLinl == '/list/89' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">党建工作</span>
          <div v-if="isLinl == '/list/89'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/34">
        <div :class="isLinl == '/list/34' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">科室介绍</span>
          <div v-if="isLinl == '/list/34'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/19">
        <div :class="isLinl == '/list/19' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">招聘信息</span>
          <div v-if="isLinl == '/list/19'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/22">
        <div :class="isLinl == '/list/22' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">健康科普</span>
          <div v-if="isLinl == '/list/22'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/88">
        <div :class="isLinl == '/list/88' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">院务公开</span>
          <div v-if="isLinl == '/list/88'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/23">
        <div :class="isLinl == '/list/23' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">患者服务</span>
          <div v-if="isLinl == '/list/23'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/87">
        <div :class="isLinl == '/list/87' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">紧急服务</span>
          <div v-if="isLinl == '/list/87'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>
      <NuxtLink to="/list/18">
        <div :class="isLinl == '/list/18' ? 'group_2 flex-col' : 'group_4 flex-col'">
          <span class="text_3">科研成果</span>
          <div v-if="isLinl == '/list/18'" class="group_3 flex-col"></div>
        </div>
      </NuxtLink>

    </div>

    <!-- 手机端菜单 -->
    <div v-if="isMobile && mobileMenuOpen" class="mobile-menu">
      <NuxtLink to="/">
        <div class="mobile-menu-item" :class="{ 'active': isLinl == '/phone_index' }" @click="selectMenuItem(0)">首页</div>
      </NuxtLink>
      <NuxtLink to="/about">
        <div class="mobile-menu-item" :class="{ 'active': isLinl == '/phone_about' }" @click="selectMenuItem(1)">医院概况</div>
      </NuxtLink>
      <NuxtLink v-for="(item, index) in groupList" :key="item.id" :to="'/phone_list/' + item.id">
        <div class="mobile-menu-item" :class="{ 'active': isLinl == '/phone_list/' + item.id }" @click="mobileMenuOpen = false">{{ item.name }}</div>
      </NuxtLink>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const store = useStore()
const route = useRoute()
const isMenuOpen = ref(false)
const { locale } = useI18n()
const isLinl = ref('/')
import $api from '@/service/webRequest'
// 手机端相关变量和函数
const isMobile = ref(false)
const mobileMenuOpen = ref(false)
const router = useRouter()
// 检测是否为手机端
const checkIfMobile = () => {
  console.log(window.innerWidth);
  // 判断是否是手机端
  const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  if (coMobile) {
    isMobile.value = true
  } else {
    isMobile.value = false
  }
}

// 切换手机端菜单显示状态
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

// 选择菜单项并关闭手机端菜单
const selectMenuItem = (index: number) => {
  isLinl.value = index
  if (isMobile.value) {
    mobileMenuOpen.value = false
  }
  if (index == 0) {
    sessionStorage.setItem('group_id', '0')
    router.push('/');
  } else {
    sessionStorage.setItem('group_id', '-1')
    window.location.href = `/about`
  }
}

watch(route, (newRoute) => {
  console.log(newRoute);
  isLinl.value = newRoute.path
}, { immediate: true })
// 监听窗口大小变化
onMounted(() => {
  //console.log(route);

  // if (route.path == '/about') {
  //   isLinl.value = -1
  // } else {
  //   isLinl.value = Number(sessionStorage.getItem('group_id'))
  // }

  checkIfMobile()
  window.addEventListener('resize', checkIfMobile)
  getGroupList()
})

onUnmounted(() => {
  window.removeEventListener('resize', checkIfMobile)
})
const groupList = ref([])
const getGroupList = () => {
  $api.post("/api/news/group", { flag: 'top' })
    .then((res: any) => {
      console.log(res)
      groupList.value = res.data.data;
      //在第三个位置加上一个
      groupList.value.splice(0, 0, { id: -3, name: '医生团队' });
    })
    .catch((err) => {
      console.dir(err)
    })
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/index.css";

/* 响应式样式 */
.mobile-menu-button {
  position: absolute;
  right: 20px;
  top: 13px;
  cursor: pointer;
  z-index: 100;
}

.mobile-menu {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.mobile-menu-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  cursor: pointer;
}

.mobile-menu-item.active {
  color: #3788ff;
  font-weight: bold;
}

/* 媒体查询 */
@media (max-width: 768px) {
  .section_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .text_1 {
    font-size: 20px;
  }
}
</style>