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

View File

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

View File

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

View File

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