lizhuang
/
hanye-website
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

feat(招聘): 新增职位卡片组件及招聘页面优化 

- 创建JobCard组件，展示职位信息，包括标题、地点、工作类型、创建时间等
- 更新职位数据结构，增加职位相关字段
- 优化招聘页面布局，增强用户体验
- 添加国际化支持，更新招聘相关翻译字段
- 实现职位申请模态框功能，提升交互性
master
lizhuang 2 天前
父节点
d491454f76
当前提交
87ffbd136c
共有 4 个文件被更改，包括 901 次插入 和 254 次删除
合并视图 显示文件统计
  1. 346
    0
      components/JobCard.vue
  2. 55
    35
      data/jobs.ts
  3. 39
    0
      i18n/locales/zh.ts
  4. 461
    219
      pages/careers.vue

+ 346
- 0
components/JobCard.vue 查看文件

<template>
<div
class="job-card group cursor-pointer"
@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="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">
<!-- 职位标题 -->
<h4 class="text-white text-xl font-semibold mb-4 line-clamp-2 group-hover:text-[#35F1FF] transition-colors duration-500">
{{ job.name }}
</h4>
<!-- 职位信息 -->
<div class="flex flex-wrap items-center gap-6 text-zinc-400 text-sm mb-6">
<span class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
{{ getLocationName(job.location) }}
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 002 2M8 6V4h8V6M8 6v2a2 2 0 002 2h4a2 2 0 002-2V6"></path>
</svg>
{{ getWorkType(job.webSite) }}
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ formatDate(job.createTime) }}
</span>
</div>

<!-- 工作职责 -->
<div class="mb-6">
<h5 class="text-white text-sm font-medium mb-3 flex items-center">
<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>
</svg>
工作职责
</h5>
<div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-3">
{{ formatJobDescription(job.jobResponsibilities) }}
</div>
</div>

<!-- 薪资福利 -->
<div class="mb-6">
<h5 class="text-white text-sm font-medium mb-3 flex items-center">
<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>
</svg>
薪资福利
</h5>
<div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-2">
{{ formatBenefits(job.benefits) }}
</div>
</div>

<!-- 工作时间 -->
<div class="mb-6">
<h5 class="text-white text-sm font-medium mb-3 flex items-center">
<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>
</svg>
工作时间
</h5>
<div class="text-zinc-300/80 text-sm leading-relaxed">
{{ formatWorkTime(job.workTime) }}
</div>
</div>

<!-- 申请按钮 -->
<div class="flex justify-between items-center pt-4 border-t border-zinc-700/30">
<div class="text-xs text-zinc-500">
{{ formatDate(job.updateTime) }} 更新
</div>
<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"
@click.stop="handleApply"
>
<span class="mr-2">立即申请</span>
<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>
</svg>
</button>
</div>
</div>
</div>
<!-- 投递邮箱弹窗 -->
<div v-if="showApplyModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click="closeModal">
<div class="relative bg-zinc-900/95 backdrop-blur-md border border-zinc-700/50 rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0"
:class="{ 'scale-100 opacity-100': showApplyModal }"
@click.stop>
<div class="absolute inset-0 bg-gradient-to-br from-[#35F1FF]/10 to-transparent rounded-2xl"></div>
<div class="relative">
<!-- 关闭按钮 -->
<button @click="closeModal" class="absolute -top-2 -right-2 w-8 h-8 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-full flex items-center justify-center text-zinc-400 hover:text-white transition-colors">
<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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<!-- 标题 -->
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 bg-[#35F1FF]/10 rounded-full mb-4">
<svg class="w-8 h-8 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
</div>
<h3 class="text-xl font-semibold text-white mb-2">投递简历</h3>
<p class="text-zinc-400 text-sm">请将您的简历发送至以下邮箱</p>
</div>
<!-- 职位信息 -->
<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-white font-medium">{{ job.name }}</div>
<div class="text-xs text-zinc-500 mt-1">ID: {{ job.id }}</div>
</div>
<!-- 邮箱信息 -->
<div class="bg-zinc-800/50 rounded-xl p-4 mb-6">
<div class="text-sm text-zinc-400 mb-2">投递邮箱</div>
<div class="flex items-center justify-between">
<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">
{{ copied ? '已复制' : '复制' }}
</button>
</div>
</div>
<!-- 操作按钮 -->
<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>
</div>
</div>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import type { Job } from '~/data/jobs'
import { locationMap, workTypeMap } from '~/data/jobs'

/**
* 组件属性
*/
interface Props {
job: Job
}

const props = defineProps<Props>()

/**
* 组件事件
*/
const emit = defineEmits<{
click: [job: Job]
}>()

/**
* 获取地点名称
* @param location 地点编码
* @returns 地点名称
*/
const getLocationName = (location: number): string => {
return locationMap[location] || 'Other'
}

/**
* 获取工作类型
* @param webSite 工作类型编码
* @returns 工作类型
*/
const getWorkType = (webSite: number): string => {
return workTypeMap[webSite] || '全职'
}

/**
* 格式化日期
* @param dateString 日期字符串
* @returns 格式化后的日期
*/
const formatDate = (dateString: string | undefined): string => {
if (!dateString) return ''
try {
const date = new Date(dateString)
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
})
} catch {
return dateString
}
}

/**
* 格式化工作描述
* @param description 工作描述
* @returns 格式化后的描述
*/
const formatJobDescription = (description: string): string => {
if (!description) return ''
// 将数字开头的项目转换为更易读的格式
return description
.replace(/(\d+\.)/g, '\n$1')
.replace(/；/g, '；\n')
.trim()
.substring(0, 200) + (description.length > 200 ? '...' : '')
}

/**
* 格式化福利待遇
* @param benefits 福利待遇
* @returns 格式化后的福利
*/
const formatBenefits = (benefits: string): string => {
if (!benefits) return ''
return benefits
.replace(/(\d+\.)/g, '\n$1')
.trim()
.substring(0, 100) + (benefits.length > 100 ? '...' : '')
}

/**
* 格式化工作时间
* @param workTime 工作时间
* @returns 格式化后的工作时间
*/
const formatWorkTime = (workTime: string): string => {
if (!workTime) return ''
return workTime
.replace(/\\n/g, '\n')
.replace(/(\d+\.)/g, '\n$1')
.trim()
}

/**
* 处理点击事件
*/
const handleClick = () => {
emit('click', props.job)
}

/**
* 模态框状态
*/
const showApplyModal = ref(false)
const copied = ref(false)

/**
* 处理申请事件
*/
const handleApply = () => {
showApplyModal.value = true
}

/**
* 关闭模态框
*/
const closeModal = () => {
showApplyModal.value = false
copied.value = false
}

/**
* 复制邮箱地址
*/
const copyEmail = async () => {
try {
await navigator.clipboard.writeText(props.job.email)
copied.value = true
setTimeout(() => {
copied.value = false
}, 2000)
} catch {
// 降级处理：使用传统方式复制
const textArea = document.createElement('textarea')
textArea.value = props.job.email
document.body.appendChild(textArea)
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
copied.value = true
setTimeout(() => {
copied.value = false
}, 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>

<style scoped>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.job-card {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-card.animate-in {
opacity: 1;
transform: translateY(0);
}
</style>

+ 55
- 35
data/jobs.ts 查看文件

export interface Job { id: number; title: string; department: string; location: string; type: string; description: string; requirements: string[]; tags: string[]; postedDate: string;}
/**
* 工作职位相关类型定义和数据
*/


export const jobs: Job[] = [ {
id: 1,
title: '製品包装設計 | 平面設計 | 美工電子商取引詳細ページ',
department: 'デザインチーム',
location: '瀋陽',
type: 'フルタイム',
description: '電子商取引製品の包装デザインと詳細ページのデザインを担当し、ユーザーエクスペリエンスと販売促進を向上させます。',
requirements: [ 'デザイン関連学科卒業、2年以上関連経験', 'Photoshop、Illustrator、Figmaなどのデザインツールに精通', '電子商取引サイトのデザイン経験者優先', 'チームワーク精神とコミュニケーション能力に優れる' ],
tags: ['デザイン', '平面設計', '電子商取引'],
postedDate: '2023-10-15'
},
{
id: 2,
title: 'フロントエンド開発エンジニア',
department: '開発チーム',
location: '北京',
type: 'フルタイム',
description: '企業Webサイトと管理システムのフロントエンド開発を担当し、ユーザーインターフェースの実装と最適化を行います。',
requirements: [ 'コンピュータ関連学科卒業、3年以上フロントエンド開発経験', 'Vue.js、Reactなどのフレームワークに精通', 'HTML/CSS/JavaScriptに深い理解がある', 'パフォーマンス最適化とクロスブラウザ互換性対応経験' ],
tags: ['フロントエンド', 'Vue.js', 'React'],
postedDate: '2023-10-10'
},
{
id: 3,
title: 'マーケティングスペシャリスト',
department: 'マーケティングチーム',
location: '上海',
type: 'フルタイム',
description: '製品のマーケティング戦略立案と実行を担当し、ブランド認知度と製品売上を向上させます。',
requirements: [ 'マーケティングまたは関連分野の学士号', '電子商取引マーケティング経験があること', 'ソーシャルメディアマーケティングとコンテンツ作成能力', 'データ分析スキルとレポート作成能力' ],
tags: ['マーケティング', 'コンテンツ', 'データ分析'],
postedDate: '2023-10-05'
}
];
/**
* 职位信息接口
*/
export interface Job {
id: string
name: string
jobResponsibilities: string
benefits: string
workTime: string
location: number
webSite: number
email: string
updateTime: string
isDisabled: string
createTime?: string
jobRequirements?: string
department?: string
salary?: string
}

/**
* API 响应接口
*/
export interface JobsApiResponse {
code: number
msg: string
total: number
rows: Job[]
}

/**
* 地点映射表
*/
export const locationMap: Record<number, string> = {
0: '沈阳'
}

/**
* 工作类型映射表
*/
export const workTypeMap: Record<number, string> = {
1: '全职',
2: '兼职',
3: '实习',
4: '合同工',
5: '远程工作'
}

/**
* 本地备用职位数据
*/
export const localJobs: Job[] = []

+ 39
- 0
i18n/locales/zh.ts 查看文件

submitSuccess: "提交成功，我们会尽快回复您！", submitSuccess: "提交成功，我们会尽快回复您！",
submitError: "提交失败，请稍后重试或直接联系我们。", submitError: "提交失败，请稍后重试或直接联系我们。",
}, },
careers: {
title: "招聘信息",
subtitle: "加入我们，共同创造存储技术的未来。我们寻找有激情的人才，与我们一起推动技术创新。",
keywords: "Hanye, 招聘, 工作机会, 人才招聘, 技术岗位",
sectionTitle: "人才招聘",
culture: {
sectionTitle: "企业文化",
title: "我们的价值观",
innovation: {
title: "创新驱动",
description: "持续技术创新，追求卓越的产品设计和解决方案，推动存储技术发展。"
},
teamwork: {
title: "团队协作",
description: "倡导开放沟通，协作共赢，营造积极向上的团队氛围。"
},
quality: {
title: "品质第一",
description: "始终坚持高品质标准，为客户提供可靠、稳定的产品和服务。"
},
growth: {
title: "共同成长",
description: "提供良好的职业发展平台，与员工共同成长，实现个人价值。"
}
},
jobs: {
sectionTitle: "职位列表",
title: "开放职位",
description: "我们正在寻找优秀的人才加入我们的团队。浏览下方职位，找到适合您的机会。",
button: "申请职位",
noPositions: "暂无招聘职位",
checkLater: "请稍后查看或联系我们了解最新职位信息"
},
cta: {
title: "没有找到合适的职位？",
description: "我们随时欢迎优秀的人才加入。如果您认为自己适合我们的团队，请随时联系我们。",
button: "联系我们"
}
},
}; };

+ 461
- 219
pages/careers.vue 查看文件

<template> <template>
<div class="careers-page">
<!-- 页面标题区域 -->
<section class="hero-section">
<div class="container mx-auto px-4 py-16 md:py-24">
<div class="breadcrumb">
<span class="text-gray-500">{{ $t('careers.breadcrumb.home') }} /</span>
<span class="ml-2">{{ $t('careers.breadcrumb.current') }}</span>
</div>
<h1 class="text-4xl md:text-5xl font-bold mt-6 mb-4 text-center">{{ $t('careers.title') }}</h1>
<p class="text-xl text-gray-600 text-center max-w-3xl mx-auto">{{ $t('careers.subtitle') }}</p>
</div>
</section>

<!-- 企业文化区域 -->
<section class="culture-section py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">{{ $t('careers.culture.title') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 创新 -->
<div class="culture-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
<div class="icon-container w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">{{ $t('careers.culture.innovation.title') }}</h3>
<p class="text-gray-600">{{ $t('careers.culture.innovation.description') }}</p>
<div class="careers-page bg-stone-950 min-h-screen">
<!-- 顶部间距 -->
<div class="w-full h-[55px] sm:h-[72px]"></div>
<!-- 面包屑导航 -->
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 pt-8">
<nav class="flex items-center space-x-2 text-sm text-zinc-400 opacity-0 animate-fade-in">
<NuxtLink
:to="homepagePath"
class="hover:text-white transition-colors duration-300 flex items-center"
>
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
{{ t('common.breadcrumb.home') }}
</NuxtLink>
<span class="text-zinc-600">/</span>
<span class="text-white flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
{{ t('common.careers') }}
</span>
</nav>
</div>
<!-- 错误边界 -->
<ErrorBoundary :error="pageError">
<!-- 页面标题区域 -->
<section class="hero-section">
<div class="w-full bg-gradient-to-b from-zinc-900 via-zinc-800/80 to-zinc-900 py-24 relative overflow-hidden">
<!-- 动态背景网格 -->
<div class="absolute inset-0 opacity-20">
<div class="absolute inset-0 bg-[linear-gradient(rgba(53,241,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(53,241,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
</div> </div>
<!-- 浮动装饰元素 -->
<div class="absolute top-20 left-10 w-2 h-2 bg-[#35F1FF] rounded-full animate-pulse opacity-60"></div>
<div class="absolute top-40 right-20 w-1 h-1 bg-[#35F1FF] rounded-full animate-pulse opacity-40"></div>
<div class="absolute bottom-20 left-1/4 w-1.5 h-1.5 bg-[#35F1FF] rounded-full animate-pulse opacity-50"></div>
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- 标题 -->
<div class="text-center space-y-6">
<div class="inline-flex items-center px-4 py-2 bg-[#35F1FF]/10 rounded-full border border-[#35F1FF]/20 backdrop-blur-sm">
<span class="text-[#35F1FF] text-xs font-bold tracking-[0.2em] uppercase">
{{ t('careers.sectionTitle') }}
</span>
</div>
<h1 class="text-white text-4xl md:text-6xl font-bold tracking-wider leading-tight">
<span class="bg-gradient-to-r from-white to-zinc-300 bg-clip-text text-transparent">
{{ t('careers.title') }}
</span>
</h1>
<div class="flex items-center justify-center space-x-4">
<div class="w-12 h-px bg-gradient-to-r from-transparent to-[#35F1FF]/60"></div>
<div class="w-2 h-2 bg-[#35F1FF] rounded-full animate-pulse"></div>
<div class="w-12 h-px bg-gradient-to-l from-transparent to-[#35F1FF]/60"></div>
</div>
<p class="text-zinc-300/80 text-lg md:text-xl max-w-4xl mx-auto leading-relaxed">
{{ t('careers.subtitle') }}
</p>


<!-- 团队合作 -->
<div class="culture-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
<div class="icon-container w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<!-- 统计数据 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 pt-12 max-w-3xl mx-auto">
<div class="text-center space-y-2">
<div class="text-2xl md:text-3xl font-bold text-[#35F1FF]">20+</div>
<div class="text-sm text-zinc-400">年企业历程</div>
</div>
<div class="text-center space-y-2">
<div class="text-2xl md:text-3xl font-bold text-[#35F1FF]">50+</div>
<div class="text-sm text-zinc-400">团队成员</div>
</div>
<div class="text-center space-y-2">
<div class="text-2xl md:text-3xl font-bold text-[#35F1FF]">100+</div>
<div class="text-sm text-zinc-400">产品型号</div>
</div>
<div class="text-center space-y-2">
<div class="text-2xl md:text-3xl font-bold text-[#35F1FF]">24/7</div>
<div class="text-sm text-zinc-400">技术支持</div>
</div>
</div>
</div> </div>
<h3 class="text-xl font-semibold mb-2">{{ $t('careers.culture.teamwork.title') }}</h3>
<p class="text-gray-600">{{ $t('careers.culture.teamwork.description') }}</p>
</div> </div>
</div>
</section>


<!-- 速度 -->
<div class="culture-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
<div class="icon-container w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<!-- 企业文化区域 -->
<section class="culture-section">
<div class="w-full bg-gradient-to-b from-indigo-900/40 via-indigo-800/20 to-indigo-900/40 py-32 relative overflow-hidden">
<!-- 背景装饰 -->
<div class="absolute top-0 left-0 w-96 h-96 bg-indigo-500/10 rounded-full transform -translate-x-1/2 -translate-y-1/2 animate-pulse"></div>
<div class="absolute bottom-0 right-0 w-96 h-96 bg-indigo-500/10 rounded-full transform translate-x-1/2 translate-y-1/2 animate-pulse"></div>
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-20">
<div class="inline-flex items-center px-4 py-2 bg-indigo-500/10 rounded-full border border-indigo-400/20 backdrop-blur-sm mb-6">
<span class="text-indigo-400 text-xs font-bold tracking-[0.2em] uppercase">
{{ t('careers.culture.sectionTitle') }}
</span>
</div>
<h3 class="text-white text-3xl md:text-4xl font-bold mb-6 tracking-wider">
{{ t('careers.culture.title') }}
</h3>
<div class="flex items-center justify-center space-x-4">
<div class="w-12 h-px bg-gradient-to-r from-transparent to-indigo-400/60"></div>
<div class="w-2 h-2 bg-indigo-400 rounded-full animate-pulse"></div>
<div class="w-12 h-px bg-gradient-to-l from-transparent to-indigo-400/60"></div>
</div>
</div> </div>
<h3 class="text-xl font-semibold mb-2">{{ $t('careers.culture.speed.title') }}</h3>
<p class="text-gray-600">{{ $t('careers.culture.speed.description') }}</p>
</div>


<!-- 品质 -->
<div class="culture-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
<div class="icon-container w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 创新驱动 -->
<div class="culture-card group">
<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="relative">
<div class="w-16 h-16 bg-[#35F1FF]/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-[#35F1FF]/20 transition-all duration-500 group-hover:rotate-12 group-hover:scale-110">
<svg class="w-8 h-8 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h4 class="text-white text-xl font-semibold mb-4 group-hover:text-[#35F1FF] transition-colors duration-500">{{ t('careers.culture.innovation.title') }}</h4>
<p class="text-zinc-300/80 text-sm leading-relaxed">{{ t('careers.culture.innovation.description') }}</p>
</div>
</div>
</div>

<!-- 团队协作 -->
<div class="culture-card group">
<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="relative">
<div class="w-16 h-16 bg-[#35F1FF]/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-[#35F1FF]/20 transition-all duration-500 group-hover:rotate-12 group-hover:scale-110">
<svg class="w-8 h-8 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<h4 class="text-white text-xl font-semibold mb-4 group-hover:text-[#35F1FF] transition-colors duration-500">{{ t('careers.culture.teamwork.title') }}</h4>
<p class="text-zinc-300/80 text-sm leading-relaxed">{{ t('careers.culture.teamwork.description') }}</p>
</div>
</div>
</div>

<!-- 品质第一 -->
<div class="culture-card group">
<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="relative">
<div class="w-16 h-16 bg-[#35F1FF]/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-[#35F1FF]/20 transition-all duration-500 group-hover:rotate-12 group-hover:scale-110">
<svg class="w-8 h-8 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h4 class="text-white text-xl font-semibold mb-4 group-hover:text-[#35F1FF] transition-colors duration-500">{{ t('careers.culture.quality.title') }}</h4>
<p class="text-zinc-300/80 text-sm leading-relaxed">{{ t('careers.culture.quality.description') }}</p>
</div>
</div>
</div>

<!-- 共同成长 -->
<div class="culture-card group">
<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="relative">
<div class="w-16 h-16 bg-[#35F1FF]/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-[#35F1FF]/20 transition-all duration-500 group-hover:rotate-12 group-hover:scale-110">
<svg class="w-8 h-8 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
</svg>
</div>
<h4 class="text-white text-xl font-semibold mb-4 group-hover:text-[#35F1FF] transition-colors duration-500">{{ t('careers.culture.growth.title') }}</h4>
<p class="text-zinc-300/80 text-sm leading-relaxed">{{ t('careers.culture.growth.description') }}</p>
</div>
</div>
</div>
</div> </div>
<h3 class="text-xl font-semibold mb-2">{{ $t('careers.culture.quality.title') }}</h3>
<p class="text-gray-600">{{ $t('careers.culture.quality.description') }}</p>
</div> </div>
</div> </div>
</div>
</section>

<!-- 职位列表区域 -->
<section class="jobs-section py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">{{ $t('careers.jobs.title') }}</h2>

<!-- 职位卡片网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 职位卡片 1 -->
<div class="job-card bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">{{ $t('careers.jobs.design.title') }}</h3>
<div class="flex items-center text-gray-500 text-sm mb-4">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
{{ $t('careers.jobs.location') }}
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
{{ $t('careers.jobs.type') }}
</section>

<!-- 职位列表区域 -->
<section class="jobs-section">
<div class="w-full bg-gradient-to-b from-zinc-900 via-zinc-800/80 to-zinc-900 py-32 relative overflow-hidden">
<!-- 背景网格pattern -->
<div class="absolute inset-0 opacity-5">
<div class="absolute inset-0 bg-[linear-gradient(rgba(53,241,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(53,241,255,0.1)_1px,transparent_1px)] bg-[size:100px_100px]"></div>
</div>
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-20">
<div class="inline-flex items-center px-4 py-2 bg-[#35F1FF]/10 rounded-full border border-[#35F1FF]/20 backdrop-blur-sm mb-6">
<span class="text-[#35F1FF] text-xs font-bold tracking-[0.2em] uppercase">
{{ t('careers.jobs.sectionTitle') }}
</span> </span>
</div> </div>
<p class="text-gray-600 mb-6">{{ $t('careers.jobs.design.description') }}</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.design') }}</span>
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.graphic') }}</span>
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.ecommerce') }}</span>
<h3 class="text-white text-3xl md:text-4xl font-bold mb-6 tracking-wider">
{{ t('careers.jobs.title') }}
</h3>
<div class="flex items-center justify-center space-x-4 mb-8">
<div class="w-12 h-px bg-gradient-to-r from-transparent to-[#35F1FF]/60"></div>
<div class="w-2 h-2 bg-[#35F1FF] rounded-full animate-pulse"></div>
<div class="w-12 h-px bg-gradient-to-l from-transparent to-[#35F1FF]/60"></div>
</div>
<p class="text-zinc-300/80 text-base md:text-lg max-w-3xl mx-auto leading-relaxed">
{{ t('careers.jobs.description') }}
</p>
<!-- 职位统计 -->
<div v-if="totalJobs > 0" class="mt-8">
<div class="inline-flex items-center px-4 py-2 bg-[#35F1FF]/5 rounded-full border border-[#35F1FF]/10">
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 002 2M8 6V4h8V6M8 6v2a2 2 0 002 2h4a2 2 0 002-2V6"></path>
</svg>
<span class="text-[#35F1FF] text-sm font-medium">
当前开放 {{ jobsList.length }} 个职位
</span>
</div>
</div> </div>
<button class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
{{ $t('careers.jobs.button') }}
<svg class="w-4 h-4 ml-2" 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>
</svg>
</button>
</div> </div>
</div>


<!-- 职位卡片 2-6 (重复结构) -->
<div class="job-card bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">{{ $t('careers.jobs.design.title') }}</h3>
<div class="flex items-center text-gray-500 text-sm mb-4">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
{{ $t('careers.jobs.location') }}
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
{{ $t('careers.jobs.type') }}
</span>
<!-- 加载状态 -->
<div v-if="jobsLoading" class="flex justify-center py-20">
<div class="relative">
<div class="animate-spin h-12 w-12 border-4 border-[#35F1FF]/20 rounded-full border-t-[#35F1FF]"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div class="w-3 h-3 bg-[#35F1FF] rounded-full animate-pulse"></div>
</div>
</div> </div>
<p class="text-gray-600 mb-6">{{ $t('careers.jobs.design.description') }}</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.design') }}</span>
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.graphic') }}</span>
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.ecommerce') }}</span>
</div>

<!-- 职位列表 -->
<div v-else-if="jobsList.length > 0">
<!-- 职位卡片网格 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<JobCard
v-for="job in jobsList"
:key="job.id"
:job="job"
@click="handleJobClick"
/>
</div> </div>
<button class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
{{ $t('careers.jobs.button') }}
<svg class="w-4 h-4 ml-2" 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>
</div>

<!-- 无职位状态 -->
<div v-else class="text-center py-20">
<div class="relative inline-flex items-center justify-center w-24 h-24 bg-zinc-800/50 rounded-full mb-8">
<div class="absolute inset-0 bg-gradient-to-br from-[#35F1FF]/20 to-transparent rounded-full animate-pulse"></div>
<svg class="w-12 h-12 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 002 2M8 6V4h8V6M8 6v2a2 2 0 002 2h4a2 2 0 002-2V6"></path>
</svg> </svg>
</button>
</div>
<h4 class="text-zinc-400 text-xl font-medium mb-3">{{ t('careers.jobs.noPositions') }}</h4>
<p class="text-zinc-500 text-base max-w-md mx-auto leading-relaxed">{{ t('careers.jobs.checkLater') }}</p>
</div> </div>
</div> </div>
</div>
</section>


<!-- 重复职位卡片 3-6 -->
<div class="job-card bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">{{ $t('careers.jobs.design.title') }}</h3>
<div class="flex items-center text-gray-500 text-sm mb-4">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
{{ $t('careers.jobs.location') }}
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
<!-- 底部CTA区域 -->
<section class="cta-section">
<div class="w-full bg-gradient-to-b from-indigo-900/30 via-indigo-800/20 to-indigo-900/30 py-32 relative overflow-hidden">
<!-- 背景装饰 -->
<div class="absolute inset-0">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-indigo-500/5 rounded-full animate-pulse"></div>
<div class="absolute top-1/4 left-1/4 w-2 h-2 bg-indigo-400/30 rounded-full animate-ping"></div>
<div class="absolute bottom-1/4 right-1/4 w-1 h-1 bg-indigo-400/40 rounded-full animate-ping"></div>
</div>
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<div class="max-w-3xl mx-auto space-y-8">
<h3 class="text-white text-3xl md:text-4xl font-bold leading-tight">
{{ t('careers.cta.title') }}
</h3>
<p class="text-zinc-300/80 text-lg md:text-xl leading-relaxed">
{{ t('careers.cta.description') }}
</p>
<div class="pt-4">
<button
@click="handleContactClick"
class="group inline-flex items-center px-10 py-4 bg-gradient-to-r from-[#35F1FF] to-[#35F1FF]/80 text-black font-semibold rounded-xl hover:from-[#35F1FF]/90 hover:to-[#35F1FF]/70 transition-all duration-500 hover:shadow-2xl hover:shadow-[#35F1FF]/20 hover:scale-105 transform"
>
<span class="mr-3">{{ t('careers.cta.button') }}</span>
<svg class="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300" 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>
</svg> </svg>
{{ $t('careers.jobs.type') }}
</span>
</button>
</div> </div>
<p class="text-gray-600 mb-6">{{ $t('careers.jobs.design.description') }}</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.design') }}</span>
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.graphic') }}</span>
<span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">{{ $t('careers.jobs.tags.ecommerce') }}</span>
</div>
<button class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
{{ $t('careers.jobs.button') }}
<svg class="w-4 h-4 ml-2" 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>
</svg>
</button>
</div> </div>
</div> </div>
</div> </div>
</div>
</section>

<!-- 底部CTA区域 -->
<section class="cta-section py-16 bg-blue-50">
<div class="container mx-auto px-4 text-center">
<h2 class="text-2xl md:text-3xl font-bold mb-4">{{ $t('careers.cta.title') }}</h2>
<p class="text-gray-600 max-w-2xl mx-auto mb-8">{{ $t('careers.cta.description') }}</p>
<button class="py-3 px-8 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors inline-flex items-center">
{{ $t('careers.cta.button') }}
<svg class="w-4 h-4 ml-2" 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>
</svg>
</button>
</div>
</section>
</section>
</ErrorBoundary>
</div> </div>
</template> </template>


<script setup>
import { useI18n } from 'vue-i18n'
import { ref, onMounted } from 'vue'

const { t } = useI18n()

// 模拟职位数据
const jobs = ref([
{
id: 1,
title: t('careers.jobs.design.title'),
location: t('careers.jobs.location'),
type: t('careers.jobs.type'),
description: t('careers.jobs.design.description'),
tags: [t('careers.jobs.tags.design'), t('careers.jobs.tags.graphic'), t('careers.jobs.tags.ecommerce')]
},
// 更多职位数据...
])

onMounted(() => {
// 页面加载时的动画或交互效果
document.querySelectorAll('.culture-card, .job-card').forEach((el, index) => {
setTimeout(() => {
el.style.opacity = '1'
el.style.transform = 'translateY(0)'
}, 100 * index)
<script setup lang="ts">
import type { Job, JobsApiResponse } from '~/data/jobs'
import { localJobs } from '~/data/jobs'

const { t, locale } = useI18n()

// 计算首页路径
const homepagePath = computed(() => {
return locale.value === "zh" ? "/" : `/${locale.value}`;
})

// SEO和页面元数据
useSeoMeta({
title: `${t('careers.title')} - Hanye`,
description: t('careers.subtitle'),
keywords: t('careers.keywords')
})

// 响应式数据
const pageError = ref<Error | null>(null)
const jobsLoading = ref(false)
const jobsList = ref<Job[]>([])
const totalJobs = ref(0)

// API配置
const API_BASE_URL = 'https://digital.sohomall.jp/prod-api/system/workInfo'

/**
* 从API获取职位数据
* @param pageNum 页码
* @param pageSize 页面大小
* @returns Promise<JobsApiResponse>
*/
const fetchJobsFromApi = async (pageNum: number = 1, pageSize: number = 10): Promise<JobsApiResponse> => {
const response = await $fetch<JobsApiResponse>(`${API_BASE_URL}/noVerifyList`, {
params: {
pageNum,
pageSize
},
timeout: 10000 // 10秒超时
})
if (response.code !== 200) {
throw new Error(response.msg || '获取职位信息失败')
}
return response
}

/**
* 初始化职位数据
*/
const initializeJobs = async () => {
try {
jobsLoading.value = true
pageError.value = null
// 尝试从API获取数据
const apiResponse = await fetchJobsFromApi()

console.log(apiResponse)
// 过滤掉已禁用的职位
const availableJobs = apiResponse.rows.filter((job: Job) => job.isDisabled !== '0')
jobsList.value = availableJobs
totalJobs.value = apiResponse.total
console.log(`成功加载 ${availableJobs.length} 个职位信息`)
} catch (error) {
console.warn('API获取失败，使用本地数据：', error)
// API失败时使用本地数据作为fallback
jobsList.value = localJobs
totalJobs.value = localJobs.length
// 不设置pageError，因为有fallback数据
} finally {
jobsLoading.value = false
}
}

/**
* 处理职位点击事件
* @param job 职位信息
*/
const handleJobClick = (job: Job) => {
// 这里可以添加职位详情页面跳转或弹窗逻辑
console.log('Job clicked:', job)
}

/**
* 处理联系按钮点击
*/
const handleContactClick = () => {
navigateTo('/contact')
}

/**
* 刷新职位数据
*/
const refreshJobs = async () => {
await initializeJobs()
}

// 组件挂载时初始化数据
onMounted(async () => {
await initializeJobs()
// 添加页面加载动画
nextTick(() => {
const cards = document.querySelectorAll('.culture-card, .job-card')
cards.forEach((card, index) => {
setTimeout(() => {
(card as HTMLElement).style.opacity = '1'
;(card as HTMLElement).style.transform = 'translateY(0)'
}, 100 * index)
})

// 面包屑动画
const breadcrumb = document.querySelector('nav')
if (breadcrumb) {
setTimeout(() => {
breadcrumb.classList.remove('opacity-0')
breadcrumb.classList.add('opacity-100')
}, 200)
}
}) })
}) })
</script> </script>
scroll-behavior: smooth; scroll-behavior: smooth;
} }


.hero-section {
background-color: #f9fafb;
}

.breadcrumb {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 1rem;
text-align: center;
}

.culture-card, .culture-card,
.job-card { .job-card {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}

.icon-container {
transition: background-color 0.3s ease;
}

.culture-card:hover .icon-container {
background-color: #3b82f6;
transition: opacity 0.8s ease, transform 0.8s ease;
} }


.culture-card:hover .icon-container svg {
color: white;
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }


.cta-section {
margin-top: 2rem;
border-radius: 1rem;
margin-left: 1rem;
margin-right: 1rem;
.animate-fade-in {
animation: fade-in 0.6s ease-out forwards;
} }


@media (max-width: 768px) { @media (max-width: 768px) {
.hero-section h1 { .hero-section h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }

.culture-section, .jobs-section, .cta-section {
.culture-section,
.jobs-section,
.cta-section {
padding: 2rem 1rem; padding: 2rem 1rem;
} }
.job-card {
margin-bottom: 1rem;
}
}

/* 自定义滚动条 */
::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
background: #35F1FF;
border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
background: #35F1FF;
}

/* 动画关键帧 */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 5px rgba(53, 241, 255, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(53, 241, 255, 0.6);
}
}

.animate-float {
animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
} }
</style> </style>

撰写 预览
正在加载...
取消
保存