remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 调整页首布局

Browse Source 
- 将菜单栏置于中央
This commit is contained in:
R2m1liA
2025-09-09 16:45:08 +08:00
parent b3a45db9bf
commit 607ea47d72
1 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/JinshenHeader.vue
View File

@ -6,9 +6,9 @@
</NuxtLink> </NuxtLink>
</div> </div>
<div class="header-menu-section">
<!-- 导航菜单 --> <!-- 导航菜单 -->
<el-menu <el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
:default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
:persistent="false" router> :persistent="false" router>
<el-menu-item index="productions" :route="$localePath('/productions')"> <el-menu-item index="productions" :route="$localePath('/productions')">
<span class="title">{{ $t('navigation.productions') }}</span> <span class="title">{{ $t('navigation.productions') }}</span>
@ -23,11 +23,13 @@
<span class="title">{{ $t('navigation.about-us') }}</span> <span class="title">{{ $t('navigation.about-us') }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</div>
<!-- 右侧功能区 --> <!-- 右侧功能区 -->
<div class="header-actions"> <div class="header-actions">
<el-input <el-input v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
:prefix-icon="Search" clearable @keyup.enter="handleSearch" /> :prefix-icon="Search" clearable @keyup.enter="handleSearch" />
<el-dropdown @command="setLocale"> <el-dropdown @command="setLocale">
<el-link type="info" :underline="false"> <el-link type="info" :underline="false">
@ -90,7 +92,6 @@ onMounted(() => {
<style scoped> <style scoped>
.header-container { .header-container {
margin: 0 auto;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
height: 80px; height: 80px;
@ -101,7 +102,6 @@ onMounted(() => {
.logo-section { .logo-section {
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center;
margin-left: 20px; margin-left: 20px;
} }
@ -116,6 +116,14 @@ onMounted(() => {
width: auto; width: auto;
} }
.header-menu-section {
flex: 2;
display: flex;
justify-content: center;
height: 100%;
}
.header-menu { .header-menu {
margin-right: 40px; margin-right: 40px;
border-bottom: none !important; border-bottom: none !important;
@ -138,8 +146,9 @@ onMounted(() => {
} }
.header-actions { .header-actions {
flex: 1;
justify-content: flex-end;
display: flex; display: flex;
align-items: center;
gap: 16px; gap: 16px;
} }