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:
parent
93f5622894
commit
26c910f804
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 页脚 */
|
/* 页脚 */
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue