Gary Gu
2025-04-17 77c6de2d14b0e38389e40ebd9526d5be27486d06
src/components/Header.vue
@@ -14,7 +14,7 @@
      backgroundPosition: 'center center',
      backgroundSize: '100% 100%'
    }">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full px-[16px] flex items-center justify-between">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full px-[16px] flex items-center justify-between tabWrapper" >
        <div class="flex flex-col items-center cursor-pointer relative" @click="onHomeClick('home')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'home' ? 'home_active.png' : 'home.png')" alt="">
@@ -22,6 +22,14 @@
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'home'">
        </div>
        <div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('xietong')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'xietong' ? 'xietong_active.png' : 'xietong.png')" alt="">
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{'text-[#FFBF00]': activeTab === 'xietong'}">协同平台</div>
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'xietong'">
        </div>
        <div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('zhihui')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'zhihui' ? 'zhihui_active.png' : 'zhihui.png')" alt="">
@@ -80,6 +88,7 @@
      },
      onHomeClick(tab) {
        this.activeTab = tab;
        this.$emit("onHomeClick", tab);
      },
      updateTime() {
        const now = new Date();
@@ -107,3 +116,8 @@
    }
  };
</script>
<style lang="scss" scoped>
  .tabWrapper {
    margin-left: 150px;
  }
  </style>