修改头部样式

tanghaolin

2025-04-15 2cd9933de2efc913449412512a2e2f4568adde20

修改头部样式

 src/components/AppHeader.vue

@@ -1,6 +1,6 @@
<template>
    <header class="bg-white shadow-sm flex  header-div">
        <div class="flex w-full h-full" style="flex-direction: column;">
    <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 h-full">
@@ -11,8 +11,8 @@
                </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,30 @@
                        <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>
            <!-- 顶部产品搜索框 -->
            <div class="header-tool-div" v-show="false">
@@ -136,57 +129,85 @@
            path: '/login',
            query: { redirectPath: route.fullPath },
        });
        return
        return;
    }
	
};
</script>

<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;
}
.header-layout-div{
: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;
    height: 87px;
    width: 100%;
    box-sizing: border-box;
}

.header-logo{
.header-logo {
    height: 68px;
}
.header-tool-div{
.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{
    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);
            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);
            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;
            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) {