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">
      
      <div :class="isLinl==0?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=0">
        <span class="text_2">首页</span>
        <div v-if="isLinl==0" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==1?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=1">
        <span class="text_3">医院概况</span>
        <div v-if="isLinl==1" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==2?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=2">
        <span class="text_3">党建工作</span>
        <div v-if="isLinl==2" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==3?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=3">
        <span class="text_3">医生团队</span>
        <div v-if="isLinl==3" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==4?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=4">
        <span class="text_3">科室介绍</span>
        <div v-if="isLinl==4" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==5?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=5">
        <span class="text_3">招聘信息</span>
        <div v-if="isLinl==5" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==6?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=6">
        <span class="text_3">健康科普</span>
        <div v-if="isLinl==6" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==7?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=7">
        <span class="text_3">院务公开</span>
        <div v-if="isLinl==7" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==8?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=8">
        <span class="text_3">患者服务</span>
        <div v-if="isLinl==8" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==9?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=9">
        <span class="text_3">紧急服务</span>
        <div v-if="isLinl==9" class="group_3 flex-col"></div>
      </div>
      <div :class="isLinl==10?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=10">
        <span class="text_3">科研成果</span>
        <div v-if="isLinl==10" class="group_3 flex-col"></div>
      </div>
    </div>
    
    <!-- 手机端菜单 -->
    <div v-if="isMobile && mobileMenuOpen" class="mobile-menu">
      <div class="mobile-menu-item" :class="{'active': isLinl == 0}" @click="selectMenuItem(0)">首页</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 1}" @click="selectMenuItem(1)">医院概况</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 2}" @click="selectMenuItem(2)">党建工作</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 3}" @click="selectMenuItem(3)">医生团队</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 4}" @click="selectMenuItem(4)">科室介绍</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 5}" @click="selectMenuItem(5)">招聘信息</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 6}" @click="selectMenuItem(6)">健康科普</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 7}" @click="selectMenuItem(7)">院务公开</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 8}" @click="selectMenuItem(8)">患者服务</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 9}" @click="selectMenuItem(9)">紧急服务</div>
      <div class="mobile-menu-item" :class="{'active': isLinl == 10}" @click="selectMenuItem(10)">科研成果</div>
    </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(0)

// 手机端相关变量和函数
const isMobile = ref(false)
const mobileMenuOpen = ref(false)

// 检测是否为手机端
const checkIfMobile = () => {
  console.log(window.innerWidth);
  
  // 判断是否是手机端
  const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  if (coMobile) {
    console.log('访问自手机端或平板');
    isMobile.value = true
  } else {
    console.log('访问自PC端');
    isMobile.value = false
  }
}

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

// 选择菜单项并关闭手机端菜单
const selectMenuItem = (index: number) => {
  isLinl.value = index
  if (isMobile.value) {
    mobileMenuOpen.value = false
  }
}

// 监听窗口大小变化
onMounted(() => {
  checkIfMobile()
  window.addEventListener('resize', checkIfMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkIfMobile)
})
</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>