|
|
|
|
|
|
|
|
class="job-card group cursor-pointer" |
|
|
class="job-card group cursor-pointer" |
|
|
@click="handleClick" |
|
|
@click="handleClick" |
|
|
> |
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="relative p-8 bg-zinc-800/30 backdrop-blur-sm border border-zinc-700/30 rounded-2xl transition-all duration-700 hover:border-[#35F1FF]/50 hover:bg-zinc-800/50 hover:shadow-2xl hover:shadow-[#35F1FF]/10 hover:transform hover:scale-105"> |
|
|
<div class="relative p-8 bg-zinc-800/30 backdrop-blur-sm border border-zinc-700/30 rounded-2xl transition-all duration-700 hover:border-[#35F1FF]/50 hover:bg-zinc-800/50 hover:shadow-2xl hover:shadow-[#35F1FF]/10 hover:transform hover:scale-105"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-[#35F1FF]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 rounded-2xl"></div> |
|
|
|
|
|
<div class="absolute -top-2 -right-2 w-4 h-4 bg-[#35F1FF]/20 rounded-full animate-ping group-hover:animate-pulse"></div> |
|
|
|
|
|
|
|
|
<!-- <div class="absolute inset-0 bg-gradient-to-br from-[#35F1FF]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 rounded-2xl"></div> |
|
|
|
|
|
<div class="absolute -top-2 -right-2 w-4 h-4 bg-[#35F1FF]/20 rounded-full animate-ping group-hover:animate-pulse"></div> --> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div class="relative"> |
|
|
<!-- 职位标题 --> |
|
|
<!-- 职位标题 --> |
|
|
|
|
|
|
|
|
<svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> |
|
|
</svg> |
|
|
</svg> |
|
|
工作职责 |
|
|
|
|
|
|
|
|
{{ t('careers.PositionCard.job') }} |
|
|
</h5> |
|
|
</h5> |
|
|
<div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-3"> |
|
|
<div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-3"> |
|
|
{{ formatJobDescription(job.jobResponsibilities) }} |
|
|
{{ formatJobDescription(job.jobResponsibilities) }} |
|
|
|
|
|
|
|
|
<svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path> |
|
|
</svg> |
|
|
</svg> |
|
|
薪资福利 |
|
|
|
|
|
|
|
|
{{ t('careers.PositionCard.CB') }} |
|
|
</h5> |
|
|
</h5> |
|
|
<div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-2"> |
|
|
<div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-2"> |
|
|
{{ formatBenefits(job.benefits) }} |
|
|
{{ formatBenefits(job.benefits) }} |
|
|
|
|
|
|
|
|
<svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> |
|
|
</svg> |
|
|
</svg> |
|
|
工作时间 |
|
|
|
|
|
|
|
|
{{ t('careers.PositionCard.workingHours') }} |
|
|
</h5> |
|
|
</h5> |
|
|
<div class="text-zinc-300/80 text-sm leading-relaxed"> |
|
|
<div class="text-zinc-300/80 text-sm leading-relaxed"> |
|
|
{{ formatWorkTime(job.workTime) }} |
|
|
{{ formatWorkTime(job.workTime) }} |
|
|
|
|
|
|
|
|
<!-- 申请按钮 --> |
|
|
<!-- 申请按钮 --> |
|
|
<div class="flex justify-between items-center pt-4 border-t border-zinc-700/30"> |
|
|
<div class="flex justify-between items-center pt-4 border-t border-zinc-700/30"> |
|
|
<div class="text-xs text-zinc-500"> |
|
|
<div class="text-xs text-zinc-500"> |
|
|
{{ formatDate(job.updateTime) }} 更新 |
|
|
|
|
|
|
|
|
{{ formatDate(job.updateTime) }} {{ t('careers.PositionCard.update') }} |
|
|
</div> |
|
|
</div> |
|
|
<button |
|
|
<button |
|
|
class="inline-flex items-center px-6 py-2 bg-[#35F1FF]/10 text-[#35F1FF] text-sm font-medium rounded-lg border border-[#35F1FF]/30 hover:bg-[#35F1FF]/20 hover:border-[#35F1FF]/50 transition-all duration-300 group-hover:scale-105" |
|
|
class="inline-flex items-center px-6 py-2 bg-[#35F1FF]/10 text-[#35F1FF] text-sm font-medium rounded-lg border border-[#35F1FF]/30 hover:bg-[#35F1FF]/20 hover:border-[#35F1FF]/50 transition-all duration-300 group-hover:scale-105" |
|
|
@click.stop="handleApply" |
|
|
@click.stop="handleApply" |
|
|
> |
|
|
> |
|
|
<span class="mr-2">立即申请</span> |
|
|
|
|
|
|
|
|
<span class="mr-2">{{ t('careers.PositionCard.JobDetails') }}</span> |
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> |
|
|
</svg> |
|
|
</svg> |
|
|
|
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> |
|
|
</svg> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-2">投递简历</h3> |
|
|
|
|
|
<p class="text-zinc-400 text-sm">请将您的简历发送至以下邮箱</p> |
|
|
|
|
|
|
|
|
<h3 class="text-xl font-semibold text-white mb-2">{{ t('careers.jobs.button') }}</h3> |
|
|
|
|
|
<p class="text-zinc-400 text-sm">{{ t('contact.submit') }}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 职位信息 --> |
|
|
<!-- 职位信息 --> |
|
|
<div class="bg-zinc-800/50 rounded-xl p-4 mb-6"> |
|
|
<div class="bg-zinc-800/50 rounded-xl p-4 mb-6"> |
|
|
<div class="text-sm text-zinc-400 mb-2">申请职位</div> |
|
|
|
|
|
|
|
|
<div class="text-sm text-zinc-400 mb-2">{{ t('careers.jobs.title') }}</div> |
|
|
<div class="text-white font-medium">{{ job.name }}</div> |
|
|
<div class="text-white font-medium">{{ job.name }}</div> |
|
|
<div class="text-xs text-zinc-500 mt-1">ID: {{ job.id }}</div> |
|
|
<div class="text-xs text-zinc-500 mt-1">ID: {{ job.id }}</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 邮箱信息 --> |
|
|
<!-- 邮箱信息 --> |
|
|
<div class="bg-zinc-800/50 rounded-xl p-4 mb-6"> |
|
|
<div class="bg-zinc-800/50 rounded-xl p-4 mb-6"> |
|
|
<div class="text-sm text-zinc-400 mb-2">投递邮箱</div> |
|
|
|
|
|
|
|
|
<div class="text-sm text-zinc-400 mb-2">{{ t('contact.email') }}</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="text-[#35F1FF] font-medium break-all">{{ job.email }}</div> |
|
|
<div class="text-[#35F1FF] font-medium break-all">{{ job.email }}</div> |
|
|
<button @click="copyEmail" class="ml-3 px-3 py-1 bg-[#35F1FF]/10 text-[#35F1FF] text-xs rounded-lg hover:bg-[#35F1FF]/20 transition-colors flex-shrink-0"> |
|
|
<button @click="copyEmail" class="ml-3 px-3 py-1 bg-[#35F1FF]/10 text-[#35F1FF] text-xs rounded-lg hover:bg-[#35F1FF]/20 transition-colors flex-shrink-0"> |
|
|
{{ copied ? '已复制' : '复制' }} |
|
|
|
|
|
|
|
|
{{ copied ? t('common.copied') : t('common.copy') }} |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 操作按钮 --> |
|
|
<!-- 操作按钮 --> |
|
|
<div class="flex gap-3"> |
|
|
<div class="flex gap-3"> |
|
|
<button @click="closeModal" class="flex-1 px-4 py-2 bg-zinc-800/80 text-zinc-300 rounded-lg hover:bg-zinc-700/80 transition-colors"> |
|
|
<button @click="closeModal" class="flex-1 px-4 py-2 bg-zinc-800/80 text-zinc-300 rounded-lg hover:bg-zinc-700/80 transition-colors"> |
|
|
关闭 |
|
|
|
|
|
|
|
|
{{ t('common.close') }} |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import type { Job } from '~/data/jobs' |
|
|
import type { Job } from '~/data/jobs' |
|
|
import { locationMap, workTypeMap } from '~/data/jobs' |
|
|
import { locationMap, workTypeMap } from '~/data/jobs' |
|
|
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* 组件属性 |
|
|
* 组件属性 |
|
|
|
|
|
|
|
|
* @returns 工作类型 |
|
|
* @returns 工作类型 |
|
|
*/ |
|
|
*/ |
|
|
const getWorkType = (webSite: number): string => { |
|
|
const getWorkType = (webSite: number): string => { |
|
|
return workTypeMap[webSite] || '全职' |
|
|
|
|
|
|
|
|
// 假设 1 代表全职,其他值可以扩展 |
|
|
|
|
|
return workTypeMap[webSite] || t('careers.workType.fullTime') |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
|
|
|
}, 2000) |
|
|
}, 2000) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* 打开邮箱客户端 |
|
|
|
|
|
*/ |
|
|
|
|
|
const openEmailClient = () => { |
|
|
|
|
|
const subject = encodeURIComponent(`应聘申请 - ${props.job.name}`) |
|
|
|
|
|
const body = encodeURIComponent(`您好,我对贵公司的${props.job.name}职位很感兴趣,希望能够申请这个职位。\n\n职位ID: ${props.job.id}\n职位名称: ${props.job.name}\n\n请查收我的简历,期待您的回复。`) |
|
|
|
|
|
|
|
|
|
|
|
window.open(`mailto:${props.job.email}?subject=${subject}&body=${body}`) |
|
|
|
|
|
closeModal() |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |