From 9948cee88d61c45576cc4bd621cb6db719c76c7d Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期二, 15 四月 2025 10:13:42 +0800
Subject: [PATCH] 添加头部导航栏背景图
---
src/components/AppHeader.vue | 236 ++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 201 insertions(+), 35 deletions(-)
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index e48b8ef..31c27db 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,64 +1,230 @@
<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">
- <el-menu-item index="/" class="!px-4">棣栭〉</el-menu-item>
- <el-menu-item index="/industrial-software" class="!px-4">璁よ瘉浜у搧</el-menu-item>
- <el-menu-item index="/supply-demand" class="!px-4">璇佷功鏌ヨ</el-menu-item>
- <el-menu-item index="/application" class="!px-4">琛ヨ创鏀跨瓥</el-menu-item>
- <el-menu-item index="/public-service" class="!px-4">鏌ユ车缃�</el-menu-item>
+ <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>
+ <el-menu-item index="/news-detail/99" class="!px-4">鏀跨瓥鏂囦欢</el-menu-item>
+ <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>
- </nav>
+ <!-- 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>
- <!-- Search and User Actions -->
- <div class="flex items-center space-x-8 ml-[65px]">
- <el-input v-model="searchQuery" placeholder="鎵惧伐涓�/鎵惧ぇ鏁版嵁" class="w-48 ">
- <template #suffix>
- <el-icon><Search /></el-icon>
- </template>
- </el-input>
-
- <div class="flex items-center text-gray-600 text-sm text-nowrap ">
- <a href="#" class="hover:text-blue-500">娉ㄥ唽</a>
- <span class="mx-2">路</span>
- <a href="#" class="hover:text-blue-500">鐧诲綍</a>
+ <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>
+ </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>
</template>
<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { Search } from '@element-plus/icons-vue';
import headerLogo from '@/assets/logo/header_logo.png';
-const route = useRoute();
-const searchQuery = ref('');
+import { Search, ShoppingCart } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useLogin } from '@/stores/useLogin';
+import { useCartStore } from '@/stores/useCartStore';
+const loginStore = useLogin();
+const cartStore = useCartStore();
+
+const route = useRoute();
+const router = useRouter();
+const searchQuery = ref('');
+const handleSearch = () => {
+ if (!searchQuery.value) {
+ searchQuery.value = '鏌ヨ瘉涔�';
+ }
+ router.push(`/eec-label-search`);
+};
const activeRoute = computed(() => route.path);
+
+// 鑾峰彇鐢ㄦ埛淇℃伅
+const userInfo = computed(() => {
+ const UserInfo = loginStore.getUserInfo();
+ return UserInfo ? UserInfo : null;
+});
+
+const toLogin = () => {
+ router.replace({
+ path: '/login',
+ query: {
+ redirectPath: route.fullPath,
+ },
+ });
+};
+// 澶勭悊鐧诲嚭
+const handleLogout = () => {
+ loginStore.logOut();
+ ElMessage.success('宸查��鍑虹櫥褰�');
+ router.replace({
+ path: '/login',
+ query: { redirectPath: route.fullPath },
+ });
+};
+
+const linkClick = () => {
+ if (userInfo.value.Token) {
+ router.push('/select-selpara');
+ } else {
+ loginStore.logOut();
+ router.replace({
+ path: '/login',
+ query: { redirectPath: route.fullPath },
+ });
+ }
+};
+
+// 浠� Pinia store 鑾峰彇璐墿杞︽暟閲�
+const cartCount = computed(() => cartStore.cartItemCount);
+
+const goToCart = () => {
+ if (userInfo.value.Token) {
+ router.push('/cart');
+ } else {
+ loginStore.logOut();
+ router.replace({
+ path: '/login',
+ query: { redirectPath: route.fullPath },
+ });
+ 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);
+}
+
+@keyframes cartBadgeAnimation {
+ 0% {
+ transform: scale(0);
+ opacity: 0;
+ }
+ 50% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
</style>
--
Gitblit v1.9.3