moblie-website/src/components/Header.vue

<template>
  <div class="navbar header-bg-color">
    <div class="navbar-start"></div>
    <div class="navbar-center">
      <a 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' }">三优云试剂管家</a>
      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
    </div>
    <div class="navbar-end"></div>
  </div>
</template>

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

<style scoped>
.header-bg-color {
  color: #fff;
  font-size: 16px;
  height: 77px;
  z-index: 111;
  position: relative;
}
.btn-hover:hover {
  color: #00E5FF !important;
}
/* 你可以在这里添加一些自定义的样式 */
</style>