104 lines
2.8 KiB
Vue
104 lines
2.8 KiB
Vue
<template>
|
|
<div class="header-container">
|
|
<NuxtLink to="/" class="logo-section">
|
|
<el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
|
|
</NuxtLink>
|
|
|
|
<!-- 导航菜单 -->
|
|
<el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
|
|
<el-menu-item index="/productions">
|
|
<span class="title">{{ $t('productions') }}</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/solutions">
|
|
<span class="title">{{ $t('solutions') }}</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/support">
|
|
<span class="title">{{ $t('support') }}</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/about">
|
|
<span class="title">{{ $t('about-us') }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
|
|
<!-- 右侧功能区 -->
|
|
<div class="header-actions">
|
|
<el-input
|
|
v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
|
|
:prefix-icon="Search" clearable @keyup.enter="handleSearch" />
|
|
<el-dropdown @command="setLocale">
|
|
<el-link type="info" :underline="false">
|
|
<el-icon class="mdi mdi-translate translate-link" />
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Search } from '@element-plus/icons-vue';
|
|
|
|
const { setLocale } = useI18n();
|
|
|
|
const searchQuery = ref('')
|
|
|
|
const handleSearch = () => {
|
|
if (searchQuery.value.trim()) {
|
|
// 这里可以添加搜索逻辑，例如导航到搜索结果页面
|
|
console.log('Searching for:', searchQuery.value);
|
|
// 示例：导航到搜索结果页面
|
|
// router.push({ path: '/search', query: { q: searchQuery.value } });
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-container {
|
|
margin: 0 auto;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.logo-section {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
.website-logo {
|
|
height: 64px;
|
|
width: auto;
|
|
}
|
|
|
|
.header-menu {
|
|
margin-right: 40px;
|
|
border-bottom: none !important;
|
|
width: auto;
|
|
}
|
|
|
|
.header-menu .el-menu-item {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 200px;
|
|
}
|
|
|
|
.translate-link {
|
|
font-size: 20px;
|
|
}
|
|
</style>
|