moblie-website/src/components/Header.vue

<template>
  <div class="navbar header-bg-color">
    <div class="navbar-start"></div>
    <div class="navbar-center flex gap-[80px]">
      <a href="https://www.sanyoubio.com.cn" class="btn btn-ghost btn-hover"
        :style="{ color: activeTag === 'about' ? '#00E5FF' : 'white' }">关于三优</a>
      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'home' ? '#00E5FF' : 'white' }" @click="goIndex">三优云试剂管家</a>
      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }" @click="goContact">联系我们</a>
    </div>
    <div class="navbar-end"></div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter } from 'vue-router';
// 接收父组件传递的 activeTag
const props = defineProps({
  activeTag: {
    type: String,
    default: "home", // 可以定义默认值
  },
});

const router = useRouter();

const goIndex = () => {
  router.push('/');
};

const goContact = () => {
  router.push('/contact');
};
</script>

<style scoped>
.header-bg-color {
  color: #fff;
  font-size: 16px;
  height: 77px;
  z-index: 111;
  position: fixed;
  background-image: url('../assets/Rectangle 85.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  top: 0;
}

.btn-hover:hover {
  color: #00e5ff !important;
}

.btn-hover {
  font-size: 18px !important;
}

/* 你可以在这里添加一些自定义的样式 */
</style>