hjyd/src/components/TopNav/index.vue

<template>
  <div
    :class="
      activeIndex == 0 ? 'header_container' : 'header_container not_first'
    "
  >
    <img :src="logo()" alt="logo" />
    <ul :class="fontColor()">
      <li :class="getActiveClass(0)" @click="scrollToPage(0)">首页</li>
      <li :class="getActiveClass(3)" @click="scrollToPage(3)">工业设计</li>
      <li :class="getActiveClass(5)" @click="scrollToPage(5)">软硬件研发</li>
      <li :class="getActiveClass(10)" @click="scrollToPage(10)">结构开发</li>
      <li :class="getActiveClass(13)" @click="scrollToPage(13)">企业文化</li>
      <li :class="getActiveClass(14)" @click="scrollToPage(14)">加入我们</li>
      <li :class="getActiveClass(15)" @click="scrollToPage(15)">联系我们</li>
    </ul>
  </div>
</template>

<script setup>
import Logo1 from '@/assets/img/banner/logo1.png'
import Logo from '@/assets/img/banner/logo.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 (swiperStore.activeIndex == index) {
    return 'active'
  }
  return ''
}

const scrollToPage = index => {
  // 让数字动
  swiperStore.swiper.slideTo(index, 1000, 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 Logo1
  }
  return Logo
}

const fontColor = () => {
  if (swiperStore.activeIndex == 0) {
    if ([2, 3, 4].includes(swiperStore.headerIndex)) {
      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;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-size: 18px;
  li {
    margin: 0 30px;
  }
}
.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>