feat(careers): 更新职业页面样式和响应式设计

- 替换视频背景为图片背景并优化透明度
- 调整各区块的间距和字体大小以改善移动端体验
- 更新职位图标和背景渐变效果
- 优化面包屑导航和按钮的响应式布局

pages/careers.vue

@@ -4,8 +4,8 @@
       <!-- 顶部间距 -->
       <div class="w-full h-[55px] sm:h-[72px]"></div>
 
-      <!-- 面包屑导航 -->
-      <div class="max-w-full xl:px-2 lg:px-2 md:px-4 px-4 mt-6 mb-1">
+       <!-- 面包屑导航 -->
+       <div class="max-w-full xl:px-2 lg:px-2 md:px-4 px-4 mt-6 mb-1 sm:mb-4">
         <div class="max-w-screen-2xl mx-auto">
           <nuxt-link
             :to="homepagePath"
@@ -21,27 +21,23 @@
 
       <!-- 错误边界 -->
       <ErrorBoundary :error="pageError">
-        <!-- 页面标题区域 (无蒙层，保持原样) -->
+        <!-- 页面标题区域 -->
         <section class="hero-section">
-          <div class="w-full py-40 relative overflow-hidden">
-            <!-- 视频背景 -->
-            <!-- <div class="absolute inset-0 z-0">
-              <video
-                src="/assets/videos/about.mp4"
-                autoplay
-                loop
-                muted
-                playsinline
-                poster="/assets/videos/about.webp"
-                class="w-full h-full object-cover opacity-10 absolute z-10 left-0 right-0 top-0 bottom-0"
-              ></video>
-            </div> -->
+          <div class="w-full py-20 md:py-40 relative overflow-hidden">
+            <!-- 图片背景 -->
+            <div class="absolute inset-0 z-0">
+              <img
+                src="/assets/images/careersbg.webp"
+                alt="Background"
+                class="w-full h-full object-cover opacity-10"
+              />
+            </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="text-center space-y-12">
                 <div
                   class="inline-flex items-center px-4 py-2 bg-[#35F1FF]/10 rounded-xl border border-[#35F1FF]/20 backdrop-blur-sm"
                 >
@@ -53,7 +49,7 @@
                 </div>
 
                 <h1
-                  class="text-white text-4xl md:text-6xl font-bold tracking-wider leading-tight"
+                  class="text-white text-3xl sm: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"
@@ -65,7 +61,7 @@
                 <div class="w-20 h-px bg-[#35F1FF] mx-auto"></div>
 
                 <p
-                  class="text-zinc-300/80 text-lg md:text-xl max-w-4xl mx-auto leading-relaxed"
+                  class="text-zinc-300/80 text-base md:text-xl max-w-4xl mx-auto leading-relaxed"
                 >
                   {{ t("careers.subtitle") }}
                 </p>
@@ -104,15 +100,15 @@
           </div>
         </section>
 
-        <!-- 企业文化区域 (靛蓝主题, 无背景色) -->
+        <!-- 企业文化区域 -->
         <section class="culture-section">
           <div
-            class="section-block w-full py-32 relative"
+            class="section-block w-full py-20 md:py-32 relative"
           >
             <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="text-center mb-12 md:mb-20">
                 <div
                   class="inline-flex items-center px-4 py-2 bg-indigo-500/10 rounded-xl border border-indigo-400/20 backdrop-blur-sm mb-6"
                 >
@@ -123,7 +119,7 @@
                   </span>
                 </div>
                 <h3
-                  class="text-white text-3xl md:text-4xl font-bold mb-6 tracking-wider"
+                  class="text-white text-2xl md:text-4xl font-bold mb-6 tracking-wider"
                 >
                   {{ t("careers.culture.title") }}
                 </h3>
@@ -287,10 +283,10 @@
           </div>
         </section>
 
-        <!-- 职位列表区域 (翠绿主题, 无背景色) -->
+        <!-- 职位列表区域 -->
         <section class="jobs-section">
           <div
-            class="section-block w-full py-32 relative"
+            class="section-block w-full py-20 md:py-32 relative"
           >
             <!-- 背景网格pattern -->
             <div class="absolute inset-0 opacity-5">
@@ -302,7 +298,7 @@
             <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="text-center mb-12 md:mb-20">
                 <div
                   class="inline-flex items-center px-4 py-2 bg-emerald-400/10 rounded-xl border border-emerald-400/20 backdrop-blur-sm mb-6"
                 >
@@ -313,7 +309,7 @@
                   </span>
                 </div>
                 <h3
-                  class="text-white text-3xl md:text-4xl font-bold mb-6 tracking-wider"
+                  class="text-white text-2xl md:text-4xl font-bold mb-6 tracking-wider"
                 >
                   {{ t("careers.jobs.title") }}
                 </h3>
@@ -328,21 +324,13 @@
                   <div
                     class="inline-flex items-center px-4 py-2 bg-emerald-400/5 rounded-xl border border-emerald-400/10"
                   >
-                    <svg
-                      class="w-4 h-4 mr-2 text-emerald-400"
-                      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 class="w-4 h-4 mr-2 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M21.5 12.5v-6a2 2 0 00-2-2h-15a2 2 0 00-2 2v12a2 2 0 002 2h6"></path>
+                      <path d="M16.5 14.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"></path>
+                      <path d="M21.5 12.5v1.5a1 1 0 01-1 1h-4a1 1 0 01-1-1v-1.5"></path>
                     </svg>
                     <span class="text-emerald-400 text-sm font-medium">
-                      {{ t("careers.CurrentlyOpen") }} {{ jobsList.length }} {{ t("careers.Aposition") }}
+                      {{ t('careers.CurrentlyOpen') }} {{ jobsList.length }} {{ t('careers.Aposition') }}
                     </span>
                   </div>
                 </div>
@@ -400,10 +388,10 @@
           </div>
         </section>
 
-        <!-- 底部CTA区域 (玫瑰色主题, 无背景色) -->
+        <!-- 底部CTA区域 -->
         <section class="cta-section">
           <div
-            class="section-block w-full py-32 relative"
+            class="section-block w-full py-20 md:py-32 relative"
           >
             <!-- 图片背景 -->
             <img 
@@ -416,17 +404,17 @@
             >
               <div class="max-w-3xl mx-auto space-y-8">
                 <h3
-                  class="text-white text-3xl md:text-4xl font-bold leading-tight"
+                  class="text-white text-2xl 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">
+                <p class="text-zinc-300/80 text-base md:text-xl leading-relaxed">
                   {{ t("careers.cta.description") }}
                 </p>
                 <div class="pt-4">
                   <nuxt-link
                     :to="`${homepagePath}/contact`"
-                    class="inline-flex w-28 h-9 md:w-40 md:h-11 bg-zinc-300/10 rounded-lg outline outline-1 items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] cursor-pointer hover:bg-zinc-300/20 transition-colors duration-200"
+                    class="inline-flex w-32 h-10 md:w-40 md:h-11 bg-zinc-300/10 rounded-lg outline outline-1 items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] cursor-pointer hover:bg-zinc-300/20 transition-colors duration-200"
                   >
                     <span class="text-sm md:text-base font-normal text-white">{{
                       t("careers.cta.button")
@@ -451,7 +439,7 @@ const { t, locale } = useI18n();
 
 // 计算首页路径
 const homepagePath = computed(() => {
-  return locale.value === "zh" ? "/" : `/${locale.value}`;
+  return locale.value === "zh" ? "" : `/${locale.value}`;
 });
 
 // SEO和页面元数据
@@ -609,22 +597,6 @@ onMounted(async () => {
   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;
@@ -716,7 +688,7 @@ onMounted(async () => {
    background: linear-gradient(
     45deg,
     transparent,
-    rgba(255, 255, 255, 0.1), /* Rose */
+    rgba(241, 252, 255, 0.021), /* Rose */
     transparent
   );
 }