hanye-website/pages/careers.vue

<template>
  <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 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="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>
        </div>
      </section>

      <!-- 企业文化区域 -->
      <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 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>
        </div>
      </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>
              </div>
              <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>

            <!-- 加载状态 -->
            <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>

            <!-- 职位列表 -->
            <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>

            <!-- 无职位状态 -->
            <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>
              </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>
      </section>

      <!-- 底部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>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </ErrorBoundary>
  </div>
</template>

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

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

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

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.5rem;
  }
  
  .culture-section,
  .jobs-section,
  .cta-section {
    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>