feat(招聘): 新增招聘页面和国际化支持

添加招聘信息页面，包含职位列表和企业文化展示
在i18n中新增招聘相关翻译字段
移除首页导航菜单项，新增招聘导航
创建职位数据文件用于存储招聘信息
调整产品详情页规格表位置

components/TheHeader.vue

@@ -571,7 +571,7 @@ const menuItems = computed(() => {
   const prefix = isDefaultLocale ? "" : `/${locale.value}`;
   return [
     // 首页路径特殊处理：默认语言为 '/', 其他语言为 '/<locale>/'
-    { label: "common.home", path: isDefaultLocale ? "/" : `${prefix}/` },
+    
     {
       label: "common.products",
       isDropdown: true,
@@ -589,6 +589,7 @@ const menuItems = computed(() => {
     { label: "support.title", path: `${prefix}/support` },
     { label: "common.about", path: `${prefix}/about` },
     { label: "common.contact", path: `${prefix}/contact` },
+    { label: "common.careers", path: `${prefix}/careers` },
   ];
 });
 

content/products/zh/01.Q60-256GST3.md

@@ -30,22 +30,7 @@ sort: 01
 --- 
 
 
-# 产品规格
 
-| 项目             | Q60-128GST3-EB | Q60-256GST3-EB | Q60-512GST3-EB | Q60-1TST3-EB | Q60-2TST3-EB |
-| :--------------- | :------------- | :------------- | :------------- | :----------- | :----------- |
-| **型号**         | Q60-128GST3-EB | Q60-256GST3-EB | Q60-512GST3-EB | Q60-1TST3-EB | Q60-2TST3-EB |
-| **容量**         | 128GB          | 256GB          | 512GB          | 1TB          | 2TB          |
-| **接口**         | SATA III 6Gb/s | SATA III 6Gb/s | SATA III 6Gb/s | SATA III 6Gb/s | SATA III 6Gb/s |
-| **外形规格**     | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) |
-| **外形尺寸 (mm)**| 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 |
-| **重量 (g)**     | 约31g          | 约31g          | 约31g          | 约31g        | 约31g        |
-| **读取速度 (最大)**| 530MB/s        | 520MB/s        | 550MB/s        | 550MB/s      | 550MB/s      |
-| **写入速度 (最大)**| 480MB/s        | 490MB/s        | 500MB/s        | 500MB/s      | 500MB/s      |
-| **工作温度范围** | 0°C - 70°C     | 0°C - 70°C     | 0°C - 70°C     | 0°C - 70°C   | 0°C - 70°C   |
-| **存储温度范围** | -45°C ~ 95°C   | -45°C ~ 95°C   | -45°C ~ 95°C   | -45°C ~ 95°C | -45°C ~ 95°C |
-| **工作电压/电流**| 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) |
-| **耐久性 (TBW)** | 55TB           | 80TB           | 160TB          | 320TB        | 640TB        |
 
 # 产品特征
 
@@ -64,3 +49,20 @@ sort: 01
 ## 广泛的兼容性
 
 兼容笔记本电脑、台式电脑、一体机、PS4等广泛设备。
+
+# 产品规格
+
+| 项目             | Q60-128GST3-EB | Q60-256GST3-EB | Q60-512GST3-EB | Q60-1TST3-EB | Q60-2TST3-EB |
+| :--------------- | :------------- | :------------- | :------------- | :----------- | :----------- |
+| **型号**         | Q60-128GST3-EB | Q60-256GST3-EB | Q60-512GST3-EB | Q60-1TST3-EB | Q60-2TST3-EB |
+| **容量**         | 128GB          | 256GB          | 512GB          | 1TB          | 2TB          |
+| **接口**         | SATA III 6Gb/s | SATA III 6Gb/s | SATA III 6Gb/s | SATA III 6Gb/s | SATA III 6Gb/s |
+| **外形规格**     | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) | 2.5 英寸 (7mm厚) |
+| **外形尺寸 (mm)**| 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 | 99.70 × 69.80 × 7.00 |
+| **重量 (g)**     | 约31g          | 约31g          | 约31g          | 约31g        | 约31g        |
+| **读取速度 (最大)**| 530MB/s        | 520MB/s        | 550MB/s        | 550MB/s      | 550MB/s      |
+| **写入速度 (最大)**| 480MB/s        | 490MB/s        | 500MB/s        | 500MB/s      | 500MB/s      |
+| **工作温度范围** | 0°C - 70°C     | 0°C - 70°C     | 0°C - 70°C     | 0°C - 70°C   | 0°C - 70°C   |
+| **存储温度范围** | -45°C ~ 95°C   | -45°C ~ 95°C   | -45°C ~ 95°C   | -45°C ~ 95°C | -45°C ~ 95°C |
+| **工作电压/电流**| 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) | 5.0V ±5% (5V 1A) |
+| **耐久性 (TBW)** | 55TB           | 80TB           | 160TB          | 320TB        | 640TB        |

data/jobs.ts

@@ -0,0 +1,36 @@
+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'
+  }
+];

i18n/locales/en.ts

@@ -7,6 +7,7 @@ export default {
     contact: "Contact",
     search: "Search",
     language: "Language",
+    careers: "Careers",
     searchPlaceholder: "Search product keywords",
     hotKeywords: "Hot Keywords",
     productCategories: "Product Categories",
@@ -145,8 +146,8 @@ export default {
     consultation:
       "Feel free to inquire about product consultations and quotes.",
     consultation_button: "Contact Us",
-    usage: "Choose storage by usage",
-    usage_title: "Select storage products based on your needs",
+    usage: "Recommended Products",
+    usage_title: "Carefully selected, high-quality products",
     support: "Support",
     support_description:
       "Expert technical support from our team with over 10 years of experience.",

i18n/locales/ja.ts

@@ -5,6 +5,7 @@ export default {
     faq: "よくある質問",
     about: "会社概要",
     contact: "お問い合わせ",
+    careers: "採用情報",
     search: "検索",
     language: "言語",
     searchPlaceholder: "製品キーワードを検索",
@@ -139,8 +140,8 @@ export default {
     viewDetails: "詳細を見る",
     consultation: "製品に関するご相談、お見積もりはお気軽にどうぞ",
     consultation_button: "お問い合わせ",
-    usage: "使い方でストレージを選ぼう",
-    usage_title: "用途に応じてストレージ製品を選ぶ",
+    usage: "おすすめ商品",
+    usage_title: "厳選された高品質な商品",
     support: "サポート",
     support_description: "10年以上のキャリアを誇るチームが専門技術でサポート",
     development: "独自に開発・製造、販売",

i18n/locales/zh.ts

@@ -5,6 +5,7 @@ export default {
     faq: "常见问题",
     about: "关于我们",
     contact: "联系我们",
+    careers: "招聘信息",
     search: "搜索",
     language: "语言",
     searchPlaceholder: "搜索产品关键字",
@@ -430,4 +431,5 @@ export default {
     submitSuccess: "提交成功，我们会尽快回复您！",
     submitError: "提交失败，请稍后重试或直接联系我们。",
   },
+  
 };

pages/careers.vue

@@ -0,0 +1,276 @@
+<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>