109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { jobOpenings } from '~/data/company'
|
||
|
||
useSeo({
|
||
title: '人才招聘',
|
||
description: '查看岸基科技当前开放岗位与招聘方向，了解我们正在寻找的团队伙伴。',
|
||
keywords: '岸基科技,人才招聘,技术岗位,项目经理,开发工程师',
|
||
canonicalPath: '/company/joinus'
|
||
})
|
||
|
||
const breadcrumbItems = [
|
||
{ label: '首页', to: '/' },
|
||
{ label: '人才招聘' }
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<SectionBanner
|
||
title="我们正在寻找"
|
||
description="有梦想、有实力、有担当的你。"
|
||
background-image="/images/page-title4.webp"
|
||
/>
|
||
<Breadcrumb :items="breadcrumbItems" />
|
||
<CompanySectionNav />
|
||
|
||
<main class="joinus-page">
|
||
<section class="jobs-grid">
|
||
<article v-for="job in jobOpenings" :key="job.title" class="job-card">
|
||
<div class="job-header">
|
||
<img :src="job.image" :alt="job.title">
|
||
<div>
|
||
<h2>{{ job.title }}</h2>
|
||
<p>{{ job.count }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="job-section">
|
||
<h3>岗位职责</h3>
|
||
<ul>
|
||
<li v-for="item in job.responsibilities" :key="item">{{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="job-section">
|
||
<h3>任职资格</h3>
|
||
<ul>
|
||
<li v-for="item in job.qualifications" :key="item">{{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="cta-card">
|
||
<h2>我们招人了，你勇敢投简历了吗？</h2>
|
||
<p>绩效、效益奖金、七险一金、周末双休、午餐住宿、生日礼物、节日福利、旅游团建与培训晋升，我们希望你来一起把事情做成。</p>
|
||
<a href="mailto:agsoft@china-coast.com" class="cta-link">发送简历到 agsoft@china-coast.com</a>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.joinus-page {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 24px 20px 64px;
|
||
display: grid;
|
||
gap: 24px;
|
||
}
|
||
|
||
.jobs-grid {
|
||
display: grid;
|
||
gap: 24px;
|
||
}
|
||
|
||
.job-card,
|
||
.cta-card {
|
||
background: #fff;
|
||
border-radius: 18px;
|
||
box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
|
||
padding: 24px;
|
||
}
|
||
|
||
.job-header {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.job-header img {
|
||
width: 72px;
|
||
height: 72px;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.job-section ul {
|
||
padding-left: 18px;
|
||
}
|
||
|
||
.cta-link {
|
||
display: inline-block;
|
||
margin-top: 12px;
|
||
font-weight: 700;
|
||
}
|
||
</style>
|