feat: 公司详情跳转、公司大楼照片、求职者中心布局优化
- 职位详情页单位信息卡片点击跳转公司详情 - 公司介绍页集团名称点击跳转公司详情 - 公司详情页添加大楼照片展示 - 求职者中心布局改为视口固定,侧边栏和内容区独立,消除双滚动条 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
26c910f804
commit
bb896f8922
Binary file not shown.
|
After Width: | Height: | Size: 880 KiB |
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<el-container style="min-height: 100vh;">
|
<div class="seeker-layout">
|
||||||
<el-aside width="200px" style="background:#fff;border-right:1px solid #eee;">
|
<aside class="seeker-aside">
|
||||||
<div style="padding:20px;font-weight:bold;font-size:16px;">求职者中心</div>
|
<div class="aside-title">求职者中心</div>
|
||||||
<el-menu router :default-active="$route.path">
|
<el-menu router :default-active="$route.path">
|
||||||
<el-menu-item index="/seeker/resume">我的简历</el-menu-item>
|
<el-menu-item index="/seeker/resume">我的简历</el-menu-item>
|
||||||
<el-menu-item index="/seeker/applications">我的投递</el-menu-item>
|
<el-menu-item index="/seeker/applications">我的投递</el-menu-item>
|
||||||
|
|
@ -9,8 +9,40 @@
|
||||||
<el-menu-item index="/seeker/profile">账号设置</el-menu-item>
|
<el-menu-item index="/seeker/profile">账号设置</el-menu-item>
|
||||||
<el-menu-item index="/home">返回主页</el-menu-item>
|
<el-menu-item index="/home">返回主页</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-aside>
|
</aside>
|
||||||
<el-main><router-view /></el-main>
|
<main class="seeker-main">
|
||||||
</el-container>
|
<router-view />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup></script>
|
<script setup></script>
|
||||||
|
<style scoped>
|
||||||
|
.seeker-layout {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.seeker-aside {
|
||||||
|
width: 200px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.aside-title {
|
||||||
|
padding: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.seeker-main {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f6fa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,9 @@
|
||||||
<el-card>
|
<el-card>
|
||||||
<template #header><h2>{{ org.name }}</h2></template>
|
<template #header><h2>{{ org.name }}</h2></template>
|
||||||
<p>{{ org.description }}</p>
|
<p>{{ org.description }}</p>
|
||||||
|
<div class="company-photo">
|
||||||
|
<img src="/images/company-building.png" alt="公司大楼" />
|
||||||
|
</div>
|
||||||
<p>联系邮箱:{{ org.email }}</p>
|
<p>联系邮箱:{{ org.email }}</p>
|
||||||
</el-card>
|
</el-card>
|
||||||
<h3 style="margin-top:24px">在招职位</h3>
|
<h3 style="margin-top:24px">在招职位</h3>
|
||||||
|
|
@ -33,3 +36,15 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.company-photo {
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.company-photo img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<div v-else class="logo-placeholder">{{ group.name?.charAt(0) }}</div>
|
<div v-else class="logo-placeholder">{{ group.name?.charAt(0) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<h1 class="hero-name">{{ group.name }}</h1>
|
<h1 class="hero-name hero-name-link" @click="$router.push(`/companies/${group.id}`)">{{ group.name }}</h1>
|
||||||
<div class="hero-meta">
|
<div class="hero-meta">
|
||||||
<span v-if="group.email">
|
<span v-if="group.email">
|
||||||
<el-icon><Message /></el-icon> {{ group.email }}
|
<el-icon><Message /></el-icon> {{ group.email }}
|
||||||
|
|
@ -186,6 +186,13 @@ onMounted(async () => {
|
||||||
margin: 0 0 12px;
|
margin: 0 0 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
.hero-name-link {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.hero-name-link:hover {
|
||||||
|
color: #c9a84c;
|
||||||
|
}
|
||||||
.hero-meta {
|
.hero-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
|
||||||
|
|
@ -95,7 +95,7 @@
|
||||||
<!-- 公司信息 -->
|
<!-- 公司信息 -->
|
||||||
<div class="company-card">
|
<div class="company-card">
|
||||||
<div class="company-card-header">单位信息</div>
|
<div class="company-card-header">单位信息</div>
|
||||||
<div class="company-logo-row">
|
<div class="company-logo-row company-link" @click="router.push({ name: 'CompanyDetail', params: { id: job.organization?.id } })">
|
||||||
<div class="company-logo">
|
<div class="company-logo">
|
||||||
<img v-if="job.organization?.logo" :src="job.organization.logo" alt="logo" />
|
<img v-if="job.organization?.logo" :src="job.organization.logo" alt="logo" />
|
||||||
<div v-else class="logo-placeholder">{{ job.organization?.name?.charAt(0) }}</div>
|
<div v-else class="logo-placeholder">{{ job.organization?.name?.charAt(0) }}</div>
|
||||||
|
|
@ -428,6 +428,19 @@ async function handleApply() {
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
.company-link {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px;
|
||||||
|
margin: -6px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.company-link:hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
.company-link:hover .company-name {
|
||||||
|
color: #e63329;
|
||||||
|
}
|
||||||
.company-logo {
|
.company-logo {
|
||||||
width: 52px;
|
width: 52px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue