171 lines
4.1 KiB
Vue
171 lines
4.1 KiB
Vue
<template>
|
|
<header class="header-container">
|
|
<div class="logo-section">
|
|
<NuxtLink :to="$localePath('/')" class="logo-link">
|
|
<el-image
|
|
class="website-logo"
|
|
src="/jinshen-logo.png"
|
|
alt="Jinshen Logo"
|
|
fit="contain"
|
|
/>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="header-menu-section">
|
|
<!-- 导航菜单 -->
|
|
<el-menu
|
|
:default-active="activeName"
|
|
class="header-menu"
|
|
mode="horizontal"
|
|
:ellipsis="false"
|
|
:persistent="false"
|
|
router
|
|
>
|
|
<el-menu-item index="products" :route="$localePath('/products')">
|
|
<span class="title">{{ $t('navigation.products') }}</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="solutions" :route="$localePath('/solutions')">
|
|
<span class="title">{{ $t('navigation.solutions') }}</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="support" :route="$localePath('/support')">
|
|
<span class="title">{{ $t('navigation.support') }}</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="about" :route="$localePath('/about')">
|
|
<span class="title">{{ $t('navigation.about-us') }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
|
|
<!-- 右侧功能区 -->
|
|
<div class="header-actions">
|
|
<el-link
|
|
class="search-link"
|
|
:underline="false"
|
|
type="info"
|
|
@click="navigateTo(localePath('/search'))"
|
|
>
|
|
<el-icon class="mdi mdi-magnify action-icon" />
|
|
</el-link>
|
|
|
|
<el-link
|
|
type="info"
|
|
:underline="false"
|
|
href="http://cal.jinshen.cn"
|
|
target="_blank"
|
|
>
|
|
<el-icon class="mdi mdi-calculator action-icon" />
|
|
</el-link>
|
|
|
|
<el-dropdown @command="setLocale">
|
|
<el-link type="info" :underline="false">
|
|
<el-icon class="mdi mdi-translate action-icon" />
|
|
</el-link>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="zh">简体中文</el-dropdown-item>
|
|
<el-dropdown-item command="en">English</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const router = useRouter();
|
|
const localePath = useLocalePath();
|
|
|
|
const { setLocale } = useI18n();
|
|
|
|
const activeName = ref<string | undefined>(undefined);
|
|
|
|
const refreshMenu = () => {
|
|
const path = router.currentRoute.value.path;
|
|
if (path.startsWith('/products')) {
|
|
activeName.value = 'products';
|
|
} else if (path.startsWith('/solutions')) {
|
|
activeName.value = 'solutions';
|
|
} else if (path.startsWith('/support')) {
|
|
activeName.value = 'support';
|
|
} else if (path.startsWith('/about')) {
|
|
activeName.value = 'about';
|
|
} else {
|
|
activeName.value = undefined; // 默认不激活任何菜单项
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
refreshMenu();
|
|
// 监听路由变化以更新激活状态
|
|
router.afterEach(() => {
|
|
refreshMenu();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-container {
|
|
padding: 0 10px;
|
|
display: flex;
|
|
height: 80px;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.logo-section {
|
|
display: flex;
|
|
flex: 1;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.website-logo {
|
|
height: 64px;
|
|
width: auto;
|
|
}
|
|
|
|
.header-menu-section {
|
|
flex: 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.header-menu {
|
|
margin-right: 40px;
|
|
border-bottom: none !important;
|
|
width: auto;
|
|
--el-menu-horizontal-height: 100%;
|
|
}
|
|
|
|
.header-menu .el-menu-item {
|
|
font-size: 16px;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.header-menu .el-menu-item.is-active {
|
|
border-bottom: 2.5px solid var(--el-color-primary-dark-2);
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
.header-menu .el-menu-item:hover {
|
|
border-bottom: 2.5px solid var(--el-color-primary);
|
|
}
|
|
|
|
.header-actions {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.action-icon {
|
|
font-size: 24px;
|
|
}
|
|
</style>
|