From c3e1f5cbc66bd2d3661edd8ffec890cf7f533638 Mon Sep 17 00:00:00 2001 From: tanghaolin <1723298894@qq.com> Date: 星期五, 14 二月 2025 11:18:02 +0800 Subject: [PATCH] 修改element组件的默认语言为中文,替换能效图片 --- src/components/AppHeader.vue | 74 ++++++++++++++++++++++++++---------- 1 files changed, 53 insertions(+), 21 deletions(-) diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 7d9c7e9..2cb4e10 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -1,37 +1,44 @@ <template> - <header class="bg-white shadow-sm"> - <div class="container mx-auto px-4"> - <div class="flex items-center justify-between h-16"> + <header class="bg-white shadow-sm flex items-center"> + <div class="flex w-full"> + <div class="flex items-center h-20 mx-auto"> <!-- Logo --> - <div class="flex items-center"> + <div class="flex items-center cursor-pointer"> <router-link to="/"> - <img src="/logo.svg" alt="Logo" class="h-8 w-auto" /> + <img :src="headerLogo" alt="Logo" class="h-20 w-auto" /> </router-link> + <!-- <span class="text-extra-large font-bold">宸ヤ笟澶ф暟鎹钩鍙�</span> --> </div> <!-- Navigation Menu --> - <nav class="flex-1 ml-8"> + <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">宸ヤ笟杞欢|宸ヤ笟APP</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> + <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 class="!px-4" @click="linkClick(' http://www.xpump.net/web/#/CN/Index')">鏌ユ车缃�</el-menu-item> </el-menu> </nav> <!-- Search and User Actions --> - <div class="flex items-center space-x-4"> - <el-input v-model="searchQuery" placeholder="鎵惧伐涓�/鎵惧ぇ鏁版嵁" class="w-48"> + <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> + <el-icon class="cursor-pointer" @click="handleSearch"><Search /></el-icon> </template> </el-input> - <div class="flex items-center text-gray-600 text-sm"> - <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"> + <a href="#" class="hover:text-blue-500">娉ㄥ唽</a> + <span class="mx-2">路</span> + <router-link to="/login" class="hover:text-blue-500">鐧诲綍</router-link> + </template> + <template v-else> + <span class="text-blue-500 mr-2">{{ userInfo.username }}</span> + <a href="#" class="hover:text-blue-500" @click.prevent="handleLogout">閫�鍑�</a> + </template> </div> </div> </div> @@ -40,14 +47,39 @@ </template> <script setup lang="ts"> -import { ref, computed } from 'vue'; -import { useRoute } from 'vue-router'; +import headerLogo from '@/assets/logo/header_logo.png'; import { Search } from '@element-plus/icons-vue'; +import { ElMessage } from 'element-plus'; +import { computed, ref } from 'vue'; +import { useRoute, useRouter } from 'vue-router'; 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 info = localStorage.getItem('userInfo'); + return info ? JSON.parse(info) : null; +}); + +// 澶勭悊鐧诲嚭 +const handleLogout = () => { + localStorage.removeItem('userInfo'); + ElMessage.success('宸查��鍑虹櫥褰�'); + router.push('/login'); +}; + +const linkClick = (url) => { + window.open(url, '_blank'); +}; </script> <style scoped> -- Gitblit v1.9.3