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="openLinl(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="openLinl(-1)">
        <span class="text_3">医院概况</span>
        <div v-if="isLinl == -1" class="group_3 flex-col"></div>
      </div>
      <div v-for="(item, index) in groupList" :key="item.id"
        :class="isLinl == item.id ? 'group_2 flex-col' : 'group_4 flex-col'" @click="isOpneLinl(item)">
        <span class="text_3">{{ item.name }}</span>
        <div v-if="isLinl == item.id" 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 v-for="(item, index) in groupList" :key="item.id" class="mobile-menu-item"
        :class="{ 'active': isLinl == item.id }" @click="isOpneLinl(item)">{{ item.name }}</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)
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`
  }
}
const isOpneLinl = (item: any) => {
  console.log(item);
  isLinl.value = item.id;
  sessionStorage.setItem('group_id', item.id)
  mobileMenuOpen.value = false
  router.push(`/list/${item.id}`)
}
const openLinl = (item) => {
  isLinl.value = item;
  mobileMenuOpen.value = false
  if (item == 0) {
    sessionStorage.setItem('group_id', '0')
    router.push('/');
  } else {
    sessionStorage.setItem('group_id', '-1')
    //在当前页面打开
    window.location.href = `/about`
  }
}
// 监听窗口大小变化
onMounted(() => {
  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>