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><router-link to="/index">首页</router-link></li>
      <li><router-link to="/case">工业设计</router-link></li>
      <li><router-link to="/soft-hardware">软硬件研发</router-link></li>
      <li><router-link to="/culture">企业文化</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
      <li><router-link to="/about">招聘</router-link></li>
      <li><router-link to="/contact">联系</router-link></li>
    </ul>
  </div>
</template>

<script setup>
import Logo1 from '@/assets/img/banner/logo1.png'
import Logo from '@/assets/img/banner/logo.png'
import { useSwiperStore } from '@/store'
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
const swiperStore = useSwiperStore()
const { activeIndex } = storeToRefs(swiperStore)
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;
  li {
    a {
      color: $default_color;
    }
    .router-link-active {
      color: $theme_color;
    }
    .white {
      color: #fff;
    }
  }
}
.font_change {
  li {
    a {
      color: $point_default;
    }
  }
}
.not_first {
  background: #fff;
}
</style>