From 9bee4f48db0c5b99b5683545fac737856d94d082 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 23 四月 2025 11:34:39 +0800
Subject: [PATCH] 修改联系我们
---
src/components/AppHeader.vue | 294 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 246 insertions(+), 48 deletions(-)
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index e38f385..d7ff553 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,53 +1,66 @@
<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>
+ <span class="w-[20px] h-full gap-style">|</span>
<el-menu-item index="/certified-products" class="!px-4">鑳芥晥浜у搧</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
<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>
+ <span class="w-[20px] h-full gap-style">|</span>
+ <!-- <el-menu-item index="/news-detail/99" class="!px-4">鏀跨瓥鏂囦欢</el-menu-item> -->
+ <el-menu-item index="/policy-info" class="!px-4">鏀跨瓥鏂囦欢</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
+ <el-menu-item index="/select-selpara" class="!px-4" @click="linkClick">鏅鸿兘閫夊瀷</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
<el-menu-item index="/gb19762-2025" class="!px-4">璁＄畻宸ュ叿</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
+ <el-menu-item index="/contact-us" class="!px-4">鑱旂郴鎴戜滑</el-menu-item>
</el-menu>
</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">
+ </div>
+ <!-- 椤堕儴浜у搧鎼滅储妗� -->
+ <div class="header-tool-div">
+ <div class="search-input-div">
+ <input v-model="searchQuery" placeholder="鍏ㄩ儴鍟嗗搧|璇疯緭鍏ュ叕鍙稿悕绉�/鍨嬪彿/浜у搧鍚嶇О" />
+ <button @click="handleSearch">鎼滅储</button>
+ </div>
+ <span class="text-[20px] text-[#000] gap-div"></span>
+ <!-- 鐪佷唤閫夋嫨 -->
+ <div>
+ <el-cascader v-model="AreaValue" :options="options" @change="handleChange">
+ </el-cascader>
+ </div>
+ <span class="text-[20px] text-[#000] gap-div"></span>
+ <div class="flex gap-[22px]">
+ <button class="flex items-center gap-[10px]">
+ <div class="flex items-center gap-4" @click="goToCart">
+ <el-badge :value="cartCount" :max="99" class="cart-badge">
+ <el-icon class="text-lg" color="#000" style="font-size: 20px"><ShoppingCart /></el-icon>
+ </el-badge>
+ </div>
+ 鎴戠殑璐墿杞�
+ </button>
+ <button>鎵归噺涓嬪崟</button>
+ <button>鎴戠殑璁㈠崟</button>
+ <div class="flex items-center">
<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>
+ <button @click="toLogin">鐧诲綍</button>
</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>
+ <span class="text-blue-500 mr-2 text-[20px] text-[#000]" style="line-height: 1;">{{ userInfo.RealName }}</span>
+ <a href="#" class="hover:text-blue-500 text-[20px]" style="line-height: 1;" @click.prevent="handleLogout">閫�鍑�</a>
</template>
</div>
</div>
@@ -71,12 +84,49 @@
const route = useRoute();
const router = useRouter();
const searchQuery = ref('');
-const handleSearch = () => {
- if (!searchQuery.value) {
- searchQuery.value = '鏌ヨ瘉涔�';
- }
- router.push(`/eec-label-search`);
+
+const AreaValue = ref(null);
+const props = {
+ expandTrigger: 'hover' as const,
};
+
+const handleChange = (value) => {
+ console.log(value);
+};
+
+const options = [
+ {
+ value: 'shanghai',
+ label: '涓婃捣甯�',
+ children: [
+ {
+ value: 'minhang',
+ label: '闂佃鍖�',
+ },
+ {
+ value: 'pudongxinqu',
+ label: '娴︿笢鏂板尯',
+ },
+ {
+ value: 'huanpuqu',
+ label: '榛勬郸鍖�',
+ },
+ {
+ value: 'hongkouqu',
+ label: '铏瑰彛鍖�',
+ },
+ {
+ value: 'fengxian',
+ label: '濂夎搐鍖�',
+ },
+ {
+ value: 'jingan',
+ label: '闈欏畨鍖�',
+ },
+ ],
+ },
+];
+
const activeRoute = computed(() => route.path);
// 鑾峰彇鐢ㄦ埛淇℃伅
@@ -127,27 +177,175 @@
path: '/login',
query: { redirectPath: route.fullPath },
});
- return
+ return;
}
-
+};
+
+const handleSearch = () => {
+ router.push({
+ path: '/certified-products',
+ query: {
+ keywords: searchQuery.value,
+ },
+ });
};
</script>
-<style scoped>
+<style lang="scss" scoped>
:deep(.el-menu--horizontal .el-menu-item) {
- height: 64px;
- line-height: 64px;
- font-size: 14px;
+ height: 69px;
+ line-height: 69px;
+ font-size: 20px;
+ width: 130px;
}
-
+: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;
}
-
-.cart-badge :deep(.el-badge__content) {
- animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+: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 {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ padding-left: 240px;
+ width: 100%;
+ height: 69px;
+ background: rgb(242, 242, 242);
+ border: 1px solid rgba(158, 158, 158, 0.4);
+ box-sizing: border-box;
+ .search-input-div {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ :deep(.el-input__wrapper) {
+ width: 237px;
+ height: 39px;
+ background: transparent;
+ box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 3px 0px rgba(0, 0, 0, 0.4) !important;
+ border-radius: 6px;
+ border: none;
+ padding: 0 15px;
+ font-size: 16px;
+ outline: none;
+ box-sizing: border-box;
+ }
+ :deep(.el-input__inner) {
+ height: 39px;
+ background: transparent;
+ font-size: 16px;
+ outline: none;
+ box-sizing: border-box;
+ // &:focus {
+ // box-shadow:inset -1px -1px 3px 0px #ffffff,inset 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
+ // }
+ }
+
+ input {
+ width: 482px;
+ height: 39px;
+ background: #d3d3d3;
+ box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
+ border-radius: 6px;
+ border: none;
+ padding: 0 15px;
+ font-size: 16px;
+ outline: none;
+ box-sizing: border-box;
+ &:focus {
+ box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
+ }
+ }
+ button {
+ min-width: 68px;
+ height: 39px;
+ background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
+ border: 1px solid #c2c2c2;
+ border-radius: 6px;
+ color: #333333;
+ font-size: 16px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(180deg, #f5f5f5 0%, #d5d5d5 100%);
+ }
+
+ &:active {
+ background: linear-gradient(180deg, #e0e0e0 0%, #cccccc 100%);
+ box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
+ }
+ }
+}
+
+.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{
+ display: flex;
+ :deep(.el-badge__content) {
+ // animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+}
+.gap-style {
+ font-size: 20px;
+ color: #ffffff;
+ font-family: 寰蒋闆呴粦;
+ font-weight: 500;
+ line-height: 69px;
+}
+.gap-div{
+ height: 69px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 20px;
+ &::before{
+ content: "";
+ display: block;
+ width: 2px;
+ height: 65%;
+ background: #D3D3D3;
+ }
+}
@keyframes cartBadgeAnimation {
0% {
transform: scale(0);
--
Gitblit v1.9.3