hjyd/src/components/TopNav/index.vue

<template>
  <div
    :class="
      [0, 15].includes(activeIndex)
        ? 'header_container'
        : 'header_container not_first'
    "
  >
    <img v-lazy="logo()" alt="logo" class="logo" @click="scrollToPage(0)" />
    <ul :class="fontColor()">
      <li :class="getActiveClass([0])" @click="scrollToPage(0)">首页</li>
      <li :class="getActiveClass([3, 4])" @click="scrollToPage(3)">工业设计</li>
      <li :class="getActiveClass([5, 6, 7, 8])" @click="scrollToPage(5)">
        软硬件研发
      </li>
      <li :class="getActiveClass([11])" @click="scrollToPage(11)">结构开发</li>
      <li :class="getActiveClass([13])" @click="scrollToPage(13)">企业文化</li>
      <li :class="getActiveClass([14])" @click="scrollToPage(14)">加入我们</li>
      <li :class="getActiveClass([16])" @click="scrollToPage(16)">联系我们</li>
    </ul>
  </div>
</template>

<script setup>
import Logo1 from '@/assets/img/banner/logo1.png'
import Logo from '@/assets/img/banner/logo.png'
import LogoWhite from '@/assets/img/banner/logo3.png'
import { useSwiperStore, useCountStore } from '@/store'
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
const swiperStore = useSwiperStore()
const countStore = useCountStore()
const { activeIndex } = storeToRefs(swiperStore)

const getActiveClass = index => {
  if (index.includes(swiperStore.activeIndex)) {
    return 'active'
  }
  return ''
}

const scrollToPage = index => {
  // 让数字动
  swiperStore.swiper.slideTo(index, 0, false)
  if (index == 3) {
    setTimeout(() => {
      countStore.countAdd()
    })
  }
  if (index == 5) {
    setTimeout(() => {
      countStore.countAddI()
    })
  }
}

const logo = () => {
  if (swiperStore.activeIndex == 0) {
    if ([4].includes(swiperStore.headerIndex)) return LogoWhite
  }
  return Logo
}

const fontColor = () => {
  if (swiperStore.activeIndex == 0) {
    if ([2, 3, 4].includes(swiperStore.headerIndex)) {
      return 'flex_center white'
    }
  }
  if (swiperStore.activeIndex == 15) {
    return 'flex_center white'
  }
  return 'flex_center font_change'
}
</script>

<style scoped lang="scss">
.header_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  background: none;
  padding: 0 87px;
  height: $header_height;
  min-height: $header_height;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-size: 18px;
  li {
    margin: 0 30px;
    transition-property: all;
    transition-duration: 0.3s;
    animation-fill-mode: forwards;
  }
  li:hover {
    transform: scale(1.1);
    color: rgb(40, 63, 231, 0.6);
  }
  .logo {
    height: 40px;
    width: auto;
    cursor: pointer;
  }
}
.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $default_color;
  li {
    cursor: pointer;
  }
  .active {
    color: $theme_color;
  }
  .white {
    color: #fff;
  }
}
.font_change {
  li {
    color: $point_default;
  }
}
.not_first {
  background: #fff;
}
</style>