添加头部导航栏背景图

tanghaolin

2025-04-15 9948cee88d61c45576cc4bd621cb6db719c76c7d

 src/components/AppHeader.vue

@@ -1,18 +1,18 @@
<template>
   <header class="bg-white shadow-sm flex items-center">
      <div class="flex w-full">
         <div class="flex items-center h-20 mx-auto">
   <header class="bg-white shadow-sm flex header-div">
      <div class="flex w-full h-full" style="flex-direction: column">
         <div class="flex w-full h-full header-layout-div">
            <!-- Logo -->
            <div class="flex items-center cursor-pointer">
            <div class="flex items-center cursor-pointer h-full">
               <router-link to="/">
                  <img :src="headerLogo" alt="Logo" class="h-20 w-auto" />
                  <img :src="headerLogo" alt="Logo" class="header-logo w-auto" />
               </router-link>
               <!-- <span class="text-extra-large font-bold">工业大数据平台</span> -->
            </div>

            <!-- Navigation Menu -->
            <nav class="flex ml-8">
               <el-menu mode="horizontal" :ellipsis="false" class="border-none" router :default-active="activeRoute">
            <nav class="flex ml-8 flex-1 navbar-div-style">
               <el-menu mode="horizontal" :ellipsis="false" class="border-none menu-div-sytle" router :default-active="activeRoute">
                  <el-menu-item index="/home" class="!px-4">首页</el-menu-item>
                  <el-menu-item index="/certified-products" class="!px-4">能效产品</el-menu-item>
                  <el-menu-item index="/eec-label-search" class="!px-4">证书查询</el-menu-item>
@@ -20,37 +20,39 @@
                  <el-menu-item index="/select-selpara" class="!px-4" @click="linkClick">泵选型</el-menu-item>
                  <el-menu-item index="/gb19762-2025" class="!px-4">计算工具</el-menu-item>
               </el-menu>
               <!-- Search and User Actions -->
               <div class="flex items-center space-x-8 ml-[65px] pb-[15px] ">
                  <!-- Add shopping cart icon here -->
                  <div class="flex items-center gap-4" @click="goToCart">
                     <el-badge :value="cartCount" :max="99" class="cart-badge">
                        <el-button class="flex items-center" link>
                           <el-icon class="text-lg" color="#fff" style="font-size: 20px"><ShoppingCart /></el-icon>
                        </el-button>
                     </el-badge>
                  </div>

                  <div class="flex items-center text-gray-600 text-sm text-nowrap">
                     <template v-if="!userInfo.Token">
                        <!-- <a href="#" class="hover:text-blue-500">注册</a>
                              <span class="mx-2">·</span> -->
                        <a @click="toLogin" class="hover:text-blue-500 text-white text-[20px]">登录</a>
                     </template>
                     <template v-else>
                        <span class="text-blue-500 mr-2 text-[20px] text-white">{{ userInfo.RealName }}</span>
                        <a href="#" class="hover:text-blue-500 text-[20px]" @click.prevent="handleLogout">退出</a>
                     </template>
                  </div>
               </div>
            </nav>

            <!-- Search and User Actions -->
            <div class="flex items-center space-x-8 ml-[65px]">
               <el-input v-model="searchQuery" placeholder="查证书" class="w-48" v-if="false">
                  <template #suffix>
                     <el-icon class="cursor-pointer" @click="handleSearch"><Search /></el-icon>
                  </template>
               </el-input>

               <!-- Add shopping cart icon here -->
               <div class="flex items-center gap-4" @click="goToCart">
                  <el-badge :value="cartCount" :max="99" class="cart-badge">
                     <el-button class="flex items-center" link>
                        <el-icon class="text-lg" style="font-size: 20px;"><ShoppingCart /></el-icon>
                     </el-button>
                  </el-badge>
               </div>

               <div class="flex items-center text-gray-600 text-sm text-nowrap">
                  <template v-if="!userInfo.Token">
                     <!-- <a href="#" class="hover:text-blue-500">注册</a>
                     <span class="mx-2">·</span> -->
                     <a @click="toLogin" class="hover:text-blue-500">登录</a>
                  </template>
                  <template v-else>
                     <span class="text-blue-500 mr-2">{{ userInfo.RealName }}</span>
                     <a href="#" class="hover:text-blue-500" @click.prevent="handleLogout">退出</a>
                  </template>
               </div>
         </div>
         <!-- 顶部产品搜索框 -->
         <div class="header-tool-div" v-show="false">
            <div class="search-input-div">
               <input />
               <button>搜索</button>
            </div>
            <div></div>
            <div></div>
         </div>
      </div>
   </header>
@@ -127,22 +129,86 @@
         path: '/login',
         query: { redirectPath: route.fullPath },
      });
      return
      return;
   }
	
};
</script>

<style scoped>
<style lang="scss" scoped>
:deep(.el-menu--horizontal .el-menu-item) {
   height: 64px;
   line-height: 64px;
   font-size: 14px;
   height: 16px;
   line-height: 16px;
   font-size: 20px;
}

:deep(.el-menu--horizontal > .el-menu-item.is-active){
   color: #76B432 !important;
   border-bottom: none !important;
}
:deep(.el-menu--horizontal > .el-menu-item){
   color: #fff !important;
   border-bottom: none;
}
:deep(.el-menu--horizontal) {
   border-bottom: none;
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover){
   background: transparent !important;
   color: #76B432 !important;
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus){
   background: transparent !important;
   color: #76B432 !important;
}
.header-layout-div {
   padding-left: 231px;
   height: 87px;
   width: 100%;
   box-sizing: border-box;
}

.header-logo {
   height: 68px;
}
.header-tool-div {
   padding-left: 258px;
   width: 100%;
   height: 64px;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
   border: 1px solid rgba(158, 158, 158, 0.4);
   box-sizing: border-box;
   .search-input-div {
      input {
         width: 482px;
         height: 39px;
         background: #ffffff;
         box-shadow: 0px 2px 3px 0px #ffffff, 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
         border-radius: 6px;
      }
      button {
         width: 68px;
         height: 42px;
         background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
         box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
         border: 1px solid;
         border-image: linear-gradient(180deg, #c2c2c2, #989898) 1 1;
      }
   }
}

.navbar-div-style {
   background: url('@/assets/images/navbar_background.png') no-repeat;
   background-size: 100% 100%;

   .menu-div-sytle{
      background: transparent;
      height: 100%;
      justify-content: center;
      align-items: center;
      margin-left: 100px;
      padding-bottom: 15px;
      box-sizing: border-box;
   }
}

.cart-badge :deep(.el-badge__content) {
   animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);