feat(frontend): 门户导航重设计，采用央企视觉体系
- 导航栏采用深蓝底色 + 金色点缀，体现央企庄重感 - 新增顶部公告条，快速链接登录/注册 - Logo 采用金色圆圈徽章 + 公司名设计 - 导航链接动画效果（下划线滑出） - 新增用户信息展示区（头像 + 用户名） - 页脚带红色分割线，强化视觉层级 - 配色：深蓝 #0E1E3D + 朱红 #B5272C + 金色 #C8973A Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
11d1cec192
commit
88c0bb223c
|
|
@ -1,28 +1,91 @@
|
||||||
<template>
|
<template>
|
||||||
<el-container class="portal-layout">
|
<div class="portal-wrap">
|
||||||
<el-header>
|
<!-- 顶部公告条 -->
|
||||||
<div class="header-inner">
|
<div class="top-bar">
|
||||||
<router-link to="/" class="logo">集团招聘</router-link>
|
<div class="top-bar-inner">
|
||||||
<nav>
|
<span class="top-bar-left">欢迎访问集团人才招募平台</span>
|
||||||
<router-link to="/jobs">职位列表</router-link>
|
<div class="top-bar-right">
|
||||||
<router-link to="/companies">公司介绍</router-link>
|
|
||||||
</nav>
|
|
||||||
<div class="header-actions">
|
|
||||||
<template v-if="auth.isLoggedIn">
|
<template v-if="auth.isLoggedIn">
|
||||||
<router-link v-if="auth.isSeeker" to="/seeker/applications">我的投递</router-link>
|
<router-link v-if="auth.isSeeker" to="/seeker/applications" class="top-link">我的投递</router-link>
|
||||||
<router-link v-else to="/admin/jobs">管理后台</router-link>
|
<router-link v-else to="/admin/jobs" class="top-link">管理后台</router-link>
|
||||||
<el-button text @click="logout">退出</el-button>
|
<span class="top-divider">|</span>
|
||||||
|
<span class="top-link clickable" @click="logout">退出登录</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<router-link to="/login"><el-button>登录</el-button></router-link>
|
<router-link to="/login" class="top-link">登录</router-link>
|
||||||
<router-link to="/register"><el-button type="primary">注册</el-button></router-link>
|
<span class="top-divider">|</span>
|
||||||
|
<router-link to="/register" class="top-link">注册</router-link>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</div>
|
||||||
<el-main><router-view /></el-main>
|
|
||||||
<el-footer>© 集团招聘平台</el-footer>
|
<!-- 主导航 -->
|
||||||
</el-container>
|
<header class="main-header">
|
||||||
|
<div class="header-inner">
|
||||||
|
<!-- Logo 区域 -->
|
||||||
|
<router-link to="/home" class="logo-area">
|
||||||
|
<div class="logo-emblem">
|
||||||
|
<div class="emblem-ring">
|
||||||
|
<span class="emblem-char">招</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="logo-text-block">
|
||||||
|
<span class="logo-title">集团招聘平台</span>
|
||||||
|
<span class="logo-sub">GROUP TALENT RECRUITMENT</span>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<!-- 导航 -->
|
||||||
|
<nav class="main-nav">
|
||||||
|
<router-link to="/home" class="nav-link" active-class="active">首页</router-link>
|
||||||
|
<router-link to="/jobs" class="nav-link" active-class="active">职位列表</router-link>
|
||||||
|
<router-link to="/companies" class="nav-link" active-class="active">公司介绍</router-link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 操作区 -->
|
||||||
|
<div class="header-actions">
|
||||||
|
<template v-if="!auth.isLoggedIn">
|
||||||
|
<router-link to="/login">
|
||||||
|
<button class="btn-ghost">登录</button>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/register">
|
||||||
|
<button class="btn-primary">立即注册</button>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="user-badge">
|
||||||
|
<span class="user-avatar">{{ auth.user?.username?.[0]?.toUpperCase() }}</span>
|
||||||
|
<span class="user-name">{{ auth.user?.username }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 红色底线 -->
|
||||||
|
<div class="header-underline">
|
||||||
|
<div class="underline-fill"></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 内容区 -->
|
||||||
|
<main class="portal-main">
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="portal-footer">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div class="footer-logo">
|
||||||
|
<div class="f-emblem">招</div>
|
||||||
|
<span>集团招聘平台</span>
|
||||||
|
</div>
|
||||||
|
<div class="footer-copy">
|
||||||
|
Copyright © 集团招聘平台 · All Rights Reserved · 为国家建设输送优秀人才
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
@ -34,11 +97,224 @@ const logout = () => { auth.logout(); router.push('/') }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.portal-layout { min-height: 100vh; }
|
:root {
|
||||||
.el-header { display: flex; align-items: center; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
|
--c-red: #B5272C;
|
||||||
.header-inner { display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; }
|
--c-dark: #0E1E3D;
|
||||||
.logo { font-size: 20px; font-weight: bold; color: #409eff; text-decoration: none; margin-right: 32px; }
|
--c-gold: #C8973A;
|
||||||
nav { display: flex; gap: 24px; flex: 1; }
|
--c-cream: #F8F4EF;
|
||||||
nav a { text-decoration: none; color: #333; }
|
--c-border: #E2D9D0;
|
||||||
.header-actions { display: flex; gap: 12px; align-items: center; }
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
a { text-decoration: none; }
|
||||||
|
|
||||||
|
.portal-wrap {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #F0EDE8;
|
||||||
|
font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部公告条 */
|
||||||
|
.top-bar {
|
||||||
|
background: #0E1E3D;
|
||||||
|
color: rgba(255,255,255,0.65);
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.top-bar-inner {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 6px 32px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.top-bar-left::before {
|
||||||
|
content: '★';
|
||||||
|
color: #C8973A;
|
||||||
|
margin-right: 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.top-bar-right { display: flex; align-items: center; gap: 6px; }
|
||||||
|
.top-link { color: rgba(255,255,255,0.65); transition: color 0.2s; }
|
||||||
|
.top-link:hover, .clickable:hover { color: #C8973A; cursor: pointer; }
|
||||||
|
.top-divider { color: rgba(255,255,255,0.25); }
|
||||||
|
|
||||||
|
/* 主导航 */
|
||||||
|
.main-header {
|
||||||
|
background: linear-gradient(180deg, #12264F 0%, #0E1E3D 100%);
|
||||||
|
box-shadow: 0 4px 20px rgba(14,30,61,0.4);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.header-inner {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 32px;
|
||||||
|
height: 72px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo */
|
||||||
|
.logo-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.logo-emblem { position: relative; }
|
||||||
|
.emblem-ring {
|
||||||
|
width: 48px; height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #C8973A;
|
||||||
|
background: linear-gradient(135deg, rgba(200,151,58,0.15), rgba(200,151,58,0.05));
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
box-shadow: 0 0 16px rgba(200,151,58,0.3), inset 0 0 8px rgba(200,151,58,0.1);
|
||||||
|
}
|
||||||
|
.emblem-char {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #C8973A;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
.logo-text-block { display: flex; flex-direction: column; }
|
||||||
|
.logo-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.logo-sub {
|
||||||
|
font-size: 9px;
|
||||||
|
color: rgba(200,151,58,0.7);
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航链接 */
|
||||||
|
.main-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 20px;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
transition: color 0.2s;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4px; left: 50%; right: 50%;
|
||||||
|
height: 2px;
|
||||||
|
background: #C8973A;
|
||||||
|
border-radius: 1px;
|
||||||
|
transition: left 0.25s ease, right 0.25s ease;
|
||||||
|
}
|
||||||
|
.nav-link:hover { color: #fff; }
|
||||||
|
.nav-link:hover::after, .nav-link.active::after { left: 20%; right: 20%; }
|
||||||
|
.nav-link.active { color: #C8973A; font-weight: 600; }
|
||||||
|
|
||||||
|
/* 操作区 */
|
||||||
|
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
||||||
|
.btn-ghost {
|
||||||
|
padding: 7px 20px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid rgba(255,255,255,0.35);
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.btn-ghost:hover { border-color: #C8973A; color: #C8973A; }
|
||||||
|
.btn-primary {
|
||||||
|
padding: 7px 20px;
|
||||||
|
background: #B5272C;
|
||||||
|
border: 1px solid #B5272C;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: #9A2024; border-color: #9A2024; }
|
||||||
|
.user-badge {
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
padding: 6px 14px;
|
||||||
|
background: rgba(255,255,255,0.08);
|
||||||
|
border: 1px solid rgba(255,255,255,0.15);
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
.user-avatar {
|
||||||
|
width: 26px; height: 26px;
|
||||||
|
background: #B5272C;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 12px; font-weight: 700; color: #fff;
|
||||||
|
}
|
||||||
|
.user-name { color: rgba(255,255,255,0.85); font-size: 13px; }
|
||||||
|
|
||||||
|
/* 红色底线装饰 */
|
||||||
|
.header-underline { height: 3px; background: #0E1E3D; }
|
||||||
|
.underline-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #B5272C 0%, #E63329 40%, #C8973A 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区 */
|
||||||
|
.portal-main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 1280px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页脚 */
|
||||||
|
.portal-footer {
|
||||||
|
background: #0E1E3D;
|
||||||
|
border-top: 3px solid #B5272C;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
.footer-inner {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.footer-logo {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
font-size: 14px; letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
.f-emblem {
|
||||||
|
width: 28px; height: 28px; border-radius: 50%;
|
||||||
|
border: 1px solid #C8973A;
|
||||||
|
color: #C8973A; font-weight: 900; font-size: 13px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
}
|
||||||
|
.footer-copy {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255,255,255,0.35);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue