hanye-website/pages/careers.vue

<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>

          <!-- 团队合作 -->
          <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>
            <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 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>
            </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>
            <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>
    </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') }}
                </span>
              </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>

          <!-- 职位卡片 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>
              <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>

          <!-- 重复职位卡片 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>
                  </svg>
                  {{ $t('careers.jobs.type') }}
                </span>
              </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>
    </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>
  </div>
</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>

<style scoped>
.careers-page {
  scroll-behavior: smooth;
}

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

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

.culture-card,
.job-card {
  opacity: 0;
  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;
}

.culture-card:hover .icon-container svg {
  color: white;
}

.cta-section {
  margin-top: 2rem;
  border-radius: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

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

  .culture-section, .jobs-section, .cta-section {
    padding: 2rem 1rem;
  }
}
</style>