fix(layout): 全局布局铺满优化,顶部导航固定置顶

- 移除 #app 和 body 的居中限制,页面铺满全屏
- SplashView 移除各区域 max-width 限制,内容铺满两侧
- PortalLayout 顶部导航固定在页面顶部,不随滚动移动
- 移除 top-bar 中未登录时重复的登录/注册链接
- HomeView 双栏面板高度撑满视口,去除上下间距

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
TianyangZhang 2026-03-26 16:03:16 +08:00
parent 93f5622894
commit 26c910f804
4 changed files with 36 additions and 39 deletions

View File

@ -1,27 +1,24 @@
<template>
<div class="portal-wrap">
<!-- 顶部公告条 -->
<div class="top-bar">
<div class="top-bar-inner">
<span class="top-bar-left">欢迎访问集团人才招募平台</span>
<div class="top-bar-right">
<template v-if="auth.isLoggedIn">
<router-link v-if="auth.isSeeker" to="/seeker/applications" class="top-link">我的投递</router-link>
<router-link v-else to="/admin/jobs" class="top-link">管理后台</router-link>
<span class="top-divider">|</span>
<span class="top-link clickable" @click="logout">退出登录</span>
</template>
<template v-else>
<router-link to="/login" class="top-link">登录</router-link>
<span class="top-divider">|</span>
<router-link to="/register" class="top-link">注册</router-link>
</template>
<!-- 固定顶部 -->
<div class="fixed-top">
<!-- 顶部公告条 -->
<div class="top-bar">
<div class="top-bar-inner">
<span class="top-bar-left">欢迎访问集团人才招募平台</span>
<div class="top-bar-right">
<template v-if="auth.isLoggedIn">
<router-link v-if="auth.isSeeker" to="/seeker/applications" class="top-link">我的投递</router-link>
<router-link v-else to="/admin/jobs" class="top-link">管理后台</router-link>
<span class="top-divider">|</span>
<span class="top-link clickable" @click="logout">退出登录</span>
</template>
</div>
</div>
</div>
</div>
<!-- 主导航 -->
<header class="main-header">
<!-- 主导航 -->
<header class="main-header">
<div class="header-inner">
<!-- Logo 区域 -->
<router-link to="/home" class="logo-area">
@ -67,6 +64,7 @@
<div class="underline-fill"></div>
</div>
</header>
</div>
<!-- 内容区 -->
<main class="portal-main">
@ -116,6 +114,15 @@ a { text-decoration: none; }
font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
/* 固定顶部容器 */
.fixed-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
/* 顶部公告条 */
.top-bar {
background: #1A1A1A;
@ -146,9 +153,6 @@ a { text-decoration: none; }
.main-header {
background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
max-width: 1280px;
@ -278,13 +282,13 @@ a { text-decoration: none; }
background: linear-gradient(90deg, #C8973A 0%, #D4AF37 100%);
}
/* 内容区 */
/* 内容区 — top-bar(~28px) + header(72px) + underline(3px) = ~103px */
.portal-main {
flex: 1;
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 24px 32px;
padding: 100px 32px 0;
}
/* 页脚 */

View File

@ -24,8 +24,6 @@ a:hover {
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
@ -59,10 +57,7 @@ button:focus-visible {
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
width: 100%;
}
@media (prefers-color-scheme: light) {

View File

@ -418,8 +418,7 @@ const router = useRouter()
padding: 48px 0;
}
.stats-inner {
max-width: 1000px;
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
@ -447,7 +446,7 @@ const router = useRouter()
background: #0d0d0d;
padding: 96px 48px;
}
.features-inner { max-width: 1100px; margin: 0 auto; }
.features-inner { width: 100%; }
.section-label {
text-align: center;
font-size: 13px;
@ -506,8 +505,7 @@ const router = useRouter()
padding: 32px 48px;
}
.footer-inner {
max-width: 1100px;
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;

View File

@ -174,12 +174,12 @@ onMounted(async () => {
--muted: #3A3A3A;
display: flex;
height: calc(100vh - 220px);
height: calc(100vh - 97px);
min-height: 520px;
overflow: hidden;
border-radius: 6px;
border: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
border-radius: 0;
border: none;
box-shadow: none;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}