BigStickNewOfficialWebsite-V2/components/site/SiteHeader.vue

<script setup>
const route = useRoute()
const mobileOpen = ref(false)
const { openConsultation } = useConsultation()

const navItems = [
  { label: '首页', to: '/' },
  { label: '营销增长服务', to: '/services' },
  { label: '行业解决方案', to: '/solutions' },
  { label: '客户案例', to: '/cases' },
  { label: '核心优势', to: '/advantages' },
  { label: '增长洞察', to: '/insights' },
  { label: '关于我们', to: '/about' }
]

function isActive(item) {
  if (item.to.includes('#')) return false
  if (item.to === '/') return route.path === '/'
  return route.path === item.to || route.path.startsWith(`${item.to}/`)
}

function requestDiagnosis() {
  mobileOpen.value = false
  const current = navItems.find((item) => {
    if (item.to === '/') return route.path === '/'
    return route.path === item.to || route.path.startsWith(`${item.to}/`)
  })
  openConsultation({
    title: '预约免费 GEO 诊断',
    source: `${current?.label || '全站'}页顶部导航`
  })
}

watch(
  () => route.fullPath,
  () => {
    mobileOpen.value = false
  }
)
</script>

<template>
  <header class="subsite-header" :class="{ 'is-interior': route.path !== '/' }">
    <div class="page-width subsite-header-inner">
      <NuxtLink to="/" class="subsite-brand" aria-label="大马棒云途全域 GEO 首页">
        <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
      </NuxtLink>

      <nav class="subsite-nav" aria-label="主导航">
        <NuxtLink
          v-for="item in navItems"
          :key="item.label"
          :to="item.to"
          :class="{ active: isActive(item) }"
        >
          {{ item.label }}
        </NuxtLink>
      </nav>

      <button class="header-consult" type="button" @click="requestDiagnosis">
        <AppIcon name="message" />
        <span>免费诊断</span>
      </button>
      <button
        class="subsite-menu"
        type="button"
        :aria-expanded="mobileOpen"
        aria-controls="subsite-mobile-navigation"
        :aria-label="mobileOpen ? '关闭导航' : '打开导航'"
        @click="mobileOpen = !mobileOpen"
      >
        <AppIcon :name="mobileOpen ? 'close' : 'menu'" />
      </button>
    </div>

    <Transition name="mobile-navigation">
      <nav
        v-if="mobileOpen"
        id="subsite-mobile-navigation"
        class="subsite-mobile-nav"
        aria-label="移动端导航"
      >
        <div class="page-width">
          <NuxtLink
            v-for="item in navItems"
            :key="`mobile-${item.label}`"
            :to="item.to"
            :class="{ active: isActive(item) }"
          >
            <span>{{ item.label }}</span>
            <AppIcon name="arrow-right" />
          </NuxtLink>
          <button type="button" @click="requestDiagnosis">
            <span>预约免费诊断</span>
            <AppIcon name="arrow-right" />
          </button>
        </div>
      </nav>
    </Transition>
  </header>
</template>

<style scoped>
.subsite-header {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 64px;
  border-bottom: 1px solid rgba(84, 142, 216, 0.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(61, 116, 185, 0.06);
  backdrop-filter: blur(18px) saturate(1.16);
}
.subsite-header.is-interior {
  border-bottom-color: rgba(84, 142, 216, 0.12);
  background: rgba(250, 253, 255, 0.88);
  box-shadow:
    0 12px 32px rgba(61, 116, 185, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(1.12);
}
.subsite-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.subsite-brand {
  width: 190px;
  flex: 0 0 auto;
}
.is-interior .subsite-brand {
  padding: 6px 8px;
  border-radius: 5px;
  transition:
    background 0.22s ease,
    transform 0.22s ease;
}
.is-interior .subsite-brand:hover {
  background: rgba(228, 241, 255, 0.72);
  transform: translateY(-1px);
}
.subsite-brand img {
  display: block;
  width: 100%;
  height: auto;
}
.subsite-nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(15px, 1.8vw, 34px);
  margin-left: auto;
}
.subsite-nav a {
  position: relative;
  display: grid;
  height: 100%;
  place-items: center;
  color: #44546a;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s;
}
.subsite-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: '';
  background: #287cf9;
  transform: scaleX(0);
  transition: transform 0.24s ease;
}
.is-interior .subsite-nav a::after {
  right: 20%;
  left: 20%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #287cf9, #61c4ee);
}
.subsite-nav a:hover,
.subsite-nav a.active {
  color: #2078eb;
  font-weight: 600;
}
.subsite-nav a:hover::after,
.subsite-nav a.active::after {
  transform: scaleX(1);
}
.header-consult {
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 17px;
  border-radius: 6px;
  color: #fff;
  background: #087dfb;
  box-shadow: 0 6px 15px rgba(30, 127, 255, 0.2);
  font-size: 13px;
  font-weight: 600;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.is-interior .header-consult {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  background: linear-gradient(105deg, #1877ee, #2e9def);
  box-shadow: 0 8px 18px rgba(30, 127, 255, 0.2);
}
.header-consult:hover {
  background: #056ee2;
  box-shadow: 0 9px 20px rgba(30, 127, 255, 0.28);
  transform: translateY(-1px);
}
.header-consult:active {
  transform: translateY(1px) scale(0.98);
}
.subsite-menu,
.subsite-mobile-nav {
  display: none;
}
@media (max-width: 1080px) {
  .subsite-nav {
    gap: 14px;
  }
  .subsite-nav a {
    font-size: 13px;
  }
  .subsite-brand {
    width: 165px;
  }
}
@media (max-width: 820px) {
  .subsite-header {
    height: 58px;
    overflow: visible;
  }
  .subsite-brand {
    width: 158px;
  }
  .subsite-nav,
  .header-consult {
    display: none;
  }
  .subsite-menu {
    position: relative;
    width: 42px;
    height: 42px;
    margin-left: auto;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #287cf9;
    background: #edf6ff;
  }
  .is-interior .subsite-menu {
    border: 1px solid rgba(61, 137, 225, 0.12);
    border-radius: 5px;
  }
  .subsite-menu :deep(.app-icon) {
    width: 20px;
    height: 20px;
  }
  .subsite-mobile-nav {
    position: absolute;
    z-index: 29;
    top: 100%;
    right: 0;
    left: 0;
    display: block;
    height: calc(100dvh - 58px);
    overflow-y: auto;
    border-top: 1px solid rgba(48, 112, 192, 0.08);
    background: rgba(247, 251, 255, 0.98);
    box-shadow: 0 18px 34px rgba(61, 116, 185, 0.12);
    backdrop-filter: blur(20px);
  }
  .subsite-mobile-nav .page-width {
    display: grid;
    padding-top: 20px;
    padding-bottom: 28px;
  }
  .subsite-mobile-nav a,
  .subsite-mobile-nav button {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border-bottom: 1px solid rgba(48, 112, 192, 0.1);
    color: #4b5c72;
    background: transparent;
    font-size: 16px;
    text-decoration: none;
  }
  .subsite-mobile-nav a.active {
    color: #1478fb;
    font-weight: 700;
  }
  .subsite-mobile-nav button {
    min-height: 50px;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding: 0 20px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(100deg, #453cff, #00adf6);
  }
}
.mobile-navigation-enter-active,
.mobile-navigation-leave-active {
  transition:
    opacity 0.22s,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-navigation-enter-from,
.mobile-navigation-leave-to {
  opacity: 0;
  transform: translateY(-12px);
}
</style>