R2m1liA
30ffc7e557
All checks were successful
deploy to server / build-and-deploy (push) Successful in 3m1s
351 lines
8.8 KiB
Vue
351 lines
8.8 KiB
Vue
<template>
|
||
<header class="header-container">
|
||
<!-- Logo -->
|
||
<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
|
||
class="hide-on-mobile"
|
||
type="info"
|
||
:underline="false"
|
||
href="http://cal.jinshen.cn"
|
||
target="_blank"
|
||
>
|
||
<el-icon class="mdi mdi-calculator action-icon" />
|
||
</el-link>
|
||
|
||
<el-dropdown class="hide-on-mobile" @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-item command="es"
|
||
>Español(Machine Translate)</el-dropdown-item
|
||
>
|
||
<el-dropdown-item command="ru"
|
||
>Русский(Machine Translate)</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
|
||
<!-- 汉堡按钮（仅移动端显示） -->
|
||
<el-link type="info" :underline="false">
|
||
<el-icon
|
||
class="mdi mdi-menu mobile-menu-button"
|
||
@click="mobileMenuVisible = true"
|
||
/>
|
||
</el-link>
|
||
|
||
<!-- Drawer 抽屉菜单 -->
|
||
<client-only>
|
||
<el-drawer
|
||
v-model="mobileMenuVisible"
|
||
class="mobile-drawer"
|
||
direction="rtl"
|
||
size="70%"
|
||
>
|
||
<template #header>
|
||
<div class="drawer-header">
|
||
<h1>{{ $t('mobile-menu.title') }}</h1>
|
||
</div>
|
||
</template>
|
||
<div>
|
||
<h2>{{ $t('mobile-menu.navigation') }}</h2>
|
||
<el-menu
|
||
:default-active="activeName"
|
||
class="mobile-menu"
|
||
mode="vertical"
|
||
router
|
||
@select="mobileMenuVisible = false"
|
||
>
|
||
<el-menu-item index="products" :route="$localePath('/products')">
|
||
{{ $t('navigation.products') }}
|
||
</el-menu-item>
|
||
<el-menu-item
|
||
index="solutions"
|
||
:route="$localePath('/solutions')"
|
||
>
|
||
{{ $t('navigation.solutions') }}
|
||
</el-menu-item>
|
||
<el-menu-item index="support" :route="$localePath('/support')">
|
||
{{ $t('navigation.support') }}
|
||
</el-menu-item>
|
||
<el-menu-item index="about" :route="$localePath('/about')">
|
||
{{ $t('navigation.about-us') }}
|
||
</el-menu-item>
|
||
</el-menu>
|
||
|
||
<h2>{{ $t('mobile-menu.utilities') }}</h2>
|
||
<el-menu
|
||
:default-active="activeName"
|
||
class="mobile-menu"
|
||
mode="vertical"
|
||
@select="mobileMenuVisible = false"
|
||
>
|
||
<el-menu-item @click="openExternalLink('http://cal.jinshen.cn')">
|
||
{{ $t('navigation.calculator') }}
|
||
</el-menu-item>
|
||
</el-menu>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-dropdown @command="setLocale">
|
||
<el-link type="info" :underline="false">
|
||
<el-icon class="mdi mdi-translate mobile-menu-button" />
|
||
</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-item command="es"
|
||
>Español(Machine Translate)</el-dropdown-item
|
||
>
|
||
<el-dropdown-item command="ru"
|
||
>Русский(Machine Translate)</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-drawer>
|
||
</client-only>
|
||
</div>
|
||
</header>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const router = useRouter();
|
||
const localePath = useLocalePath();
|
||
|
||
const { setLocale } = useI18n();
|
||
|
||
const activeName = ref<string | undefined>(undefined);
|
||
const mobileMenuVisible = ref(false);
|
||
|
||
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; // 默认不激活任何菜单项
|
||
}
|
||
};
|
||
|
||
const openExternalLink = (url: string) => {
|
||
window.open(url, '_blank');
|
||
};
|
||
|
||
onMounted(() => {
|
||
refreshMenu();
|
||
// 监听路由变化以更新激活状态
|
||
router.afterEach(() => {
|
||
refreshMenu();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.header-container {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 80px;
|
||
padding: 0 20px;
|
||
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;
|
||
}
|
||
|
||
.mobile-menu-button {
|
||
display: none; /* 默认隐藏汉堡按钮 */
|
||
}
|
||
|
||
.drawer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
:deep(.el-drawer__header) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
:deep(.el-drawer__body) {
|
||
padding: 20px;
|
||
}
|
||
|
||
.mobile-drawer h1 {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.mobile-drawer h2 {
|
||
font-size: 20px;
|
||
margin-bottom: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.mobile-menu {
|
||
border: none;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.mobile-menu .el-menu-item {
|
||
font-size: 16px;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.mobile-menu .el-menu-item.is-active {
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
.mobile-menu .el-menu-item:hover {
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.header-container {
|
||
height: 70px;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.website-logo {
|
||
height: 48px;
|
||
}
|
||
|
||
.header-menu-section .header-menu .el-menu-item {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.header-menu-section {
|
||
display: none; /* 隐藏横向菜单 */
|
||
}
|
||
|
||
.hide-on-mobile {
|
||
display: none; /* 隐藏部分图标 */
|
||
}
|
||
|
||
.header-actions {
|
||
gap: 12px;
|
||
}
|
||
|
||
.mobile-menu-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style>
|