diff --git a/src/components/el/carousel1.vue b/src/components/el/carousel1.vue
new file mode 100644
index 0000000..d618ec6
--- /dev/null
+++ b/src/components/el/carousel1.vue
@@ -0,0 +1,110 @@
+<template>
+  <div style="height:   calc(680vw / 19.2);">
+    <div class="swiper mySwiper"  >
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="(item,k) in data.list" :key="k">
+          <el-image
+            style="width: 100%;height:calc(680vw / 19.2);"
+            :src="item.img"
+          ></el-image>
+          <div class="inner">
+            <div class="title" >
+              {{ item.title }}
+            </div>
+            <div class="value"  >
+              {{ item.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Swiper from 'swiper';
+import {Autoplay, Navigation} from "swiper/modules";
+
+Swiper.use([
+  Navigation,
+  Autoplay
+])
+let swiper = null
+export default {
+  name: 'Carousel1',
+  props: ['data'],
+  data() {
+    return {
+      show: true,
+    }
+  },
+  mounted() {
+    this.initSwiper()
+  },
+  methods: {
+    initSwiper() {
+      if (swiper) {
+        swiper.destroy(true, true);
+        swiper = null;
+      }
+      swiper = new Swiper(".mySwiper", {
+        slidesPerView: 1.5,
+        spaceBetween: '3.9%',
+        centeredSlides: true,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      });
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.swiper {
+  width: 100%;
+  margin: 0 auto;
+
+  .swiper-slide {
+    position: relative;
+    min-height: 200px;
+
+    .inner {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      background: linear-gradient(to right, #41B5EA, #0000);
+      height: 8vw;
+    }
+  }
+}
+
+.title {
+  position: absolute;
+  bottom: 4vw;
+  left: 1vw;
+  font-weight: 700;
+  color: #3372ff;
+  font-size: 2.2vw;
+  letter-spacing: 6.1px;
+  min-width: 20px;
+}
+
+.value {
+  position: absolute;
+  top: 4vw;
+  left: 1vw;
+  color: #3372ff;
+  font-size: 1.3vw;
+  letter-spacing: 2.3px;
+  white-space: nowrap;
+  min-width: 20px;
+}
+</style>
diff --git a/src/views/contactUs/index.vue b/src/views/contactUs/index.vue
index 8dae940..a2c7122 100644
--- a/src/views/contactUs/index.vue
+++ b/src/views/contactUs/index.vue
@@ -2,11 +2,13 @@
   <div>
     <div class="banner">
       <Carousel class="carousel" :bannerList="bannerList" :indicator-position="'none'"/>
-      <div class="tabs" style="z-index: 99;">
-        <div class="content">
-          <div @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in data.tabsList">
-            {{ i.title }}
-          </div>
+    </div>
+    <div class="tabs">
+      <div class="content">
+        <div @click="checkTabs(i,k)"
+             style="white-space: nowrap;overflow: auto"
+             :class="`tab ${tabsActive == k ? 'active':''}`" v-for="(i,k) in  data.tabsList">
+          {{ i.title }}
         </div>
       </div>
     </div>
@@ -81,18 +83,18 @@ export default {
       tabsActive: 0,
       tabsList: [],
       itemId: 3,
-      data:{
-        banner:'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
-        tabsList:[
+      data: {
+        banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+        tabsList: [
           {
-            type:2,
+            type: 2,
             id: 3,
             title: '公司概况',
-            data:{
+            data: {
               title1: '公司概况',
-              title:'海威物联',
-              value:'青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业物联网整体解决方案。 作为轮胎用RFID电子标签相关4项ISO国际标准与国家标准的制定者，公司具备全球最先进的RFID智能轮胎整体解决方案，包括系列化轮胎用RFID电子标签产品、RFID轮胎生产配套自动化设备、RFID轮胎应用信息化管理系统及数据平台。同时，公司大力推进基于RFID、传感、边缘采集计算、数据传输等技术的工业互联网解决方案在轮胎产业链中的深入应用，为轮胎生产管理、仓储物流、销售跟踪、车队管理、轮胎翻新等环节提供一站式解决方案。所有核心技术及产品均具有自主知识产权。 目前，公司为新能源锂电、快递物流、橡胶制品、畜牧屠宰、轨道交通、化工、家电制造等行业打造工业物联网整体解决方案，以定制RFID标签及读写设备、传感器及智能终端、物联数据平台三个产品方向为支撑，提供数据标识、信息流传动、物联网整合，及人、机、料、法、环全方位数据自动采集、分析与智能化管控方案，促进工业领域产品质量和生产效率全面提升。助力企业推进产业升级，提升数字化、精细化、智能化管理水平。 公司承担国家橡胶与轮胎工程技术研究中心RFID研究所；被认定为国家级专精特新“小巨人”企业、国家高新技术企业、青岛市技术创新中心、科技型中小企业、青岛市雏鹰企业；通过ISO 9001:2015质量管理体系认证、ISO 14001:2015环境体系认证、IS045001:2018职业健康安全管理体系认证；通过信息系统建设和服务能力评估CS2级；主持制定轮胎用RFID电子标签四项ISO国际标准、四项国家标准。 公司承担山东省科技型中小企业创新能力提升工程项目、青岛市第四批“人才特区”人才计划等各级政府项目；主要研发成果获技术发明一等奖、专利金奖等多项省部级科学技术奖励。',
-              icon:'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg'
+              title: '海威物联',
+              value: '青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业物联网整体解决方案。 作为轮胎用RFID电子标签相关4项ISO国际标准与国家标准的制定者，公司具备全球最先进的RFID智能轮胎整体解决方案，包括系列化轮胎用RFID电子标签产品、RFID轮胎生产配套自动化设备、RFID轮胎应用信息化管理系统及数据平台。同时，公司大力推进基于RFID、传感、边缘采集计算、数据传输等技术的工业互联网解决方案在轮胎产业链中的深入应用，为轮胎生产管理、仓储物流、销售跟踪、车队管理、轮胎翻新等环节提供一站式解决方案。所有核心技术及产品均具有自主知识产权。 目前，公司为新能源锂电、快递物流、橡胶制品、畜牧屠宰、轨道交通、化工、家电制造等行业打造工业物联网整体解决方案，以定制RFID标签及读写设备、传感器及智能终端、物联数据平台三个产品方向为支撑，提供数据标识、信息流传动、物联网整合，及人、机、料、法、环全方位数据自动采集、分析与智能化管控方案，促进工业领域产品质量和生产效率全面提升。助力企业推进产业升级，提升数字化、精细化、智能化管理水平。 公司承担国家橡胶与轮胎工程技术研究中心RFID研究所；被认定为国家级专精特新“小巨人”企业、国家高新技术企业、青岛市技术创新中心、科技型中小企业、青岛市雏鹰企业；通过ISO 9001:2015质量管理体系认证、ISO 14001:2015环境体系认证、IS045001:2018职业健康安全管理体系认证；通过信息系统建设和服务能力评估CS2级；主持制定轮胎用RFID电子标签四项ISO国际标准、四项国家标准。 公司承担山东省科技型中小企业创新能力提升工程项目、青岛市第四批“人才特区”人才计划等各级政府项目；主要研发成果获技术发明一等奖、专利金奖等多项省部级科学技术奖励。',
+              icon: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg'
             }
           },
           {
@@ -131,9 +133,9 @@ export default {
             type: 3,
             id: 10,
             title: '荣誉资质',
-            data:{
+            data: {
               title: '荣誉资质',
-              list1:[
+              list1: [
                 '国家高新技术企业',
                 '青岛市雏鹰企业',
                 '青岛市“百千万”工程千帆企业',
@@ -142,7 +144,7 @@ export default {
                 '轮胎用RFID电子标签产品获得ROSH认证',
                 '第四届“创业齐鲁 共赢未来”高层次人才创业大赛（创业企业类）优胜奖',
               ],
-              list2:[
+              list2: [
                 '国家级专精特新“小巨人”企业',
                 '青岛市专精特新中小企业',
                 '科技型中小企业',
@@ -152,7 +154,7 @@ export default {
                 '轮胎用RFID电子标签自动化设备通过CE认证',
                 '通过信息系统建设和服务能力评估CS2级',
               ],
-              list3:[
+              list3: [
                 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BD%E5%AE%B6%E7%BA%A7%E4%B8%93%E7%B2%BE%E7%89%B9%E6%96%B0%E2%80%9C%E5%B0%8F%E5%B7%A8%E4%BA%BA%E2%80%9D%E4%BC%81%E4%B8%9A_20250822152510A168.png',
                 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BD%E5%AE%B6%E9%AB%98%E6%96%B0%E6%8A%80%E6%9C%AF%E4%BC%81%E4%B8%9A_20250822152526A169.jpg',
                 'http://1.13.177.47:9665/statics/2025/08/22/%E9%9D%92%E5%B2%9B%E5%B8%82%E4%B8%93%E7%B2%BE%E7%89%B9%E6%96%B0%E4%B8%AD%E5%B0%8F%E4%BC%81%E4%B8%9A_20250822152636A170.png',
@@ -189,7 +191,7 @@ export default {
     }
   },
   methods: {
-    checkTabs(e,k) {
+    checkTabs(e, k) {
       this.tabsActive = k
       this.itemId = e.id
       // document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
@@ -242,45 +244,51 @@ export default {
     letter-spacing: 2px;
   }
 
-  .tabs {
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      //background-color: #fff;
-      //background: linear-gradient(to bottom, #EBF1FF, #fff);
-    }
-    position: absolute;
-    bottom: 0;
+}
+
+.tabs {
+  cursor: pointer;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+  backdrop-filter: saturate(50%) blur(4px);
+
+  .content {
     width: 100%;
-    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
-    backdrop-filter: saturate(50%) blur(10px);
+    position: relative;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
 
-    .content {
-      width: 62%;
+    .tab {
+      display: inline-block;
+      line-height: 6.2vw;
+      letter-spacing: 3px;
+      font-size: 1vw;
       position: relative;
-      left: 50%;
-      bottom: 0;
-      transform: translateX(-50%);
+      padding: 0 2vw;
 
-      .tab {
-        display: inline-block;
-        width: 25%;
-        line-height: 6.2vw;
-        font-size: 1.6vw;
-        letter-spacing: 3px;
+      &:last-child::after {
+        display: none;
       }
 
-      .tab.active {
-        color: @standard-color;
-        width: calc(25% - 2px);
-        border: 1px solid #fff;
-        box-shadow: 0 0 3px #0002;
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 1px;
+        height: 1vw;
+        background-color: #409eff;
+        top: calc(50% - 0.5vw);
       }
     }
+
+    .tab.active {
+      color: @standard-color;
+      //border: 1px solid #fff6;
+      //box-shadow: 0 0 3px #0002;
+    }
   }
 }
 
diff --git a/src/views/page/index.vue b/src/views/page/index.vue
index c09e036..e5160b1 100644
--- a/src/views/page/index.vue
+++ b/src/views/page/index.vue
@@ -11,6 +11,7 @@
       </div>
       <div v-if="$route.query.id !== '1'" class="component" v-for="(i,k) in components">
         <Carousel v-if="i.type === 'carousel'" :data="i.value"/>
+        <Carousel1 v-if="i.type === 'carousel1'" :data="i.value"/>
         <EditEl1 v-if="i.type === 1" :data="i.value"/>
         <EditEl2 v-if="i.type === 2" :data="i.value"/>
         <EditEl3 v-if="i.type === 3" :data="i.value"/>
@@ -58,10 +59,10 @@ import EditEl17 from "@/components/el/el17.vue";
 import Copyright from '@/components/copyright'
 import ContactUs from "@/views/index/contactUs.vue";
 import Carousel from "@/components/el/carousel.vue";
+import Carousel1 from "@/components/el/carousel1.vue";
 import {getHwWeb} from "@/api/hwWeb";
 import ProductCenter from "@/views/index/productCenter.vue";
 import ClassicCase from "@/views/index/classicCase.vue";
-import Carousel1 from "@/views/index/carousel.vue";
 
 export default {
   components: {
@@ -164,4 +165,4 @@ export default {
   width: 100%;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/serviceSupport/index.vue b/src/views/serviceSupport/index.vue
index 77724fa..d005591 100644
--- a/src/views/serviceSupport/index.vue
+++ b/src/views/serviceSupport/index.vue
@@ -2,32 +2,26 @@
   <div>
     <div class="banner">
       <el-image
-          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
-          :src="banner"
-          fit="contain"></el-image>
+        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+        :src="banner"
+        fit="contain"></el-image>
       <div class="bannerInfo">
         青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
       </div>
-      <!--      <div class="tabs">-->
-      <!--        <div class="content">-->
-      <!--          <div @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in data.tabsList">-->
-      <!--            {{ i.title }}-->
-      <!--          </div>-->
-      <!--        </div>-->
-      <!--      </div>-->
     </div>
 
-    <ContactUs class="contactUs"/>
-    <preSale/>
-    <!--    <div v-if='tabsActive===0'>-->
-    <!--      <QA/>-->
-    <!--      <preSale/>-->
-    <!--    </div>-->
-    <!--    <div v-if='tabsActive===1'>-->
-    <!--      <QA1/>-->
-    <!--      <preSale/>-->
-    <!--    </div>-->
-    <!--    <DownloadTheMaterials v-if='tabsActive===2'/>-->
+    <div class="tabs">
+      <div class="content">
+        <div @click="checkTabs(i,k)"
+             style="white-space: nowrap;overflow: auto"
+             :class="`tab ${tabsActive == k ? 'active':''}`" v-for="(i,k) in  tabsData">
+          {{ i.title }}
+        </div>
+      </div>
+    </div>
+    <ContactUs class="contactUs" v-if="tabsActive === 0"/>
+    <preSale v-if="tabsActive === 0"/>
+    <Recruitment v-if="tabsActive === 1"/>
     <Copyright class="copyright"/>
   </div>
 </template>
@@ -38,6 +32,7 @@ import QA from './QA.vue'
 import QA1 from './QA1.vue'
 import DownloadTheMaterials from './downloadTheMaterials.vue'
 import ContactUs from './contactUs'
+import Recruitment from './recruitment'
 import Copyright from '@/components/copyright'
 import {getAboutUsInfo} from "@/api/contactUs";
 
@@ -49,13 +44,14 @@ export default {
     preSale,
     QA,
     QA1,
-    DownloadTheMaterials
+    DownloadTheMaterials,
+    Recruitment
   },
   data() {
     return {
       banner: '',
       bannerTitle: '',
-      tabsActive: 1,
+      tabsActive: 0,
       tabsList: [],
       data: {
         banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
@@ -73,7 +69,16 @@ export default {
             title: '资料下载'
           },
         ]
-      }
+      },
+
+      tabsData: [
+        {
+          title: '联系我们',
+        },
+        {
+          title: '招聘信息',
+        },
+      ],
     }
   },
   watch: {
@@ -103,7 +108,6 @@ export default {
   methods: {
     checkTabs(e, k) {
       this.tabsActive = k
-      document.querySelector('#item' + e.id).scrollIntoView();
     },
     getData() {
     }
@@ -174,6 +178,52 @@ export default {
   }
 }
 
+.tabs {
+  cursor: pointer;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
+  backdrop-filter: saturate(50%) blur(4px);
+
+  .content {
+    width: 100%;
+    position: relative;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+
+    .tab {
+      display: inline-block;
+      line-height: 6.2vw;
+      letter-spacing: 3px;
+      font-size: 1vw;
+      position: relative;
+      padding: 0 2vw;
+
+      &:last-child::after {
+        display: none;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 1px;
+        height: 1vw;
+        background-color: #409eff;
+        top: calc(50% - 0.5vw);
+      }
+    }
+
+    .tab.active {
+      color: @standard-color;
+      //border: 1px solid #fff6;
+      //box-shadow: 0 0 3px #0002;
+    }
+  }
+}
+
 .companyProfile {
   width: 100%;
 }
diff --git a/src/views/serviceSupport/recruitment.vue b/src/views/serviceSupport/recruitment.vue
new file mode 100644
index 0000000..11ef4d0
--- /dev/null
+++ b/src/views/serviceSupport/recruitment.vue
@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <TitleGroup>
+      <!--      <template slot="title">CONTACT US</template>-->
+      <template slot="subTitle">招聘信息</template>
+    </TitleGroup>
+    <div class="job-detail-container">
+      <!-- 头部信息 -->
+      <header class="job-header">
+        <h1 class="job-title">项目监理</h1>
+        <div class="job-meta">
+          <span class="meta-item"><i class="icon-location"></i> 工作地点：青岛</span>
+          <span class="meta-item"><i class="icon-people"></i> 招聘人数：3人</span>
+          <span class="meta-item"><i class="icon-education"></i> 学历：大专以上</span>
+        </div>
+      </header>
+
+      <!-- 核心内容区域 -->
+      <main class="job-content">
+
+        <!-- 岗位职责 -->
+        <section class="content-section">
+          <h2 class="section-title">
+            <span class="title-icon">📋</span> 岗位重点职责
+          </h2>
+          <ul class="job-list">
+            <li v-for="(duty, index) in duties" :key="index">
+              <span class="list-marker">{{ index + 1 }}.</span>
+              <span class="list-text">{{ duty }}</span>
+            </li>
+          </ul>
+        </section>
+
+        <!-- 任职要求 -->
+        <section class="content-section">
+          <h2 class="section-title">
+            <span class="title-icon">🎯</span> 任职要求
+          </h2>
+          <ul class="job-list">
+            <li v-for="(req, index) in requirements" :key="index">
+              <span class="list-marker">{{ index + 1 }}.</span>
+              <span class="list-text" v-html="req"></span>
+            </li>
+          </ul>
+        </section>
+
+        <!-- 投递按钮 -->
+        <div class="action-bar">
+          <button class="apply-btn">立即申请</button>
+          <button class="share-btn">分享职位</button>
+        </div>
+
+      </main>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      // 岗位职责数据
+      duties: [
+        "负责信息化、RFID项目客户现场的项目实施，负责施工协调、调试、交付。",
+        "负责备件项目的销售跟进和交付。",
+        "负责项目现场与客户的技术沟通。",
+        "后期可参与部分研发、产品的工作。",
+        "项目相关文件的起草、编制工作。"
+      ],
+      // 任职要求数据 (使用了HTML标签来高亮关键词)
+      requirements: [
+        "专科以上学历，<b>专业不限</b>。",
+        "待人诚实可信，具有亲和力，语言表达能力和动手能力强；",
+        "有较强的责任心和承压能力，能适应<b>短期和长期出差</b>；",
+        "学习能力强，有较强分析和解决问题的能力，工作积极主动，良好的责任感和严谨工作作风。",
+        "有<b>电子、电气、机械、自动化、软件、通讯</b>等相关专业经验优先。"
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.job-detail-container {
+  max-width: 800px;
+  margin: 40px auto;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+  overflow: hidden;
+}
+
+/* 头部样式 */
+.job-header {
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  padding: 30px;
+  color: #fff;
+}
+
+.job-title {
+  margin: 0 0 15px 0;
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+.job-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+}
+
+.icon-location, .icon-people, .icon-education {
+  margin-right: 5px;
+  font-style: normal;
+}
+
+/* 内容区域样式 */
+.job-content {
+  padding: 30px;
+  background-color: #fff;
+}
+
+.content-section {
+  margin-bottom: 35px;
+}
+
+.section-title {
+  font-size: 20px;
+  color: #333;
+  border-left: 4px solid #1890ff;
+  padding-left: 12px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.title-icon {
+  margin-right: 8px;
+}
+
+/* 列表样式 */
+.job-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.job-list li {
+  display: flex;
+  margin-bottom: 15px;
+  line-height: 1.8;
+  color: #555;
+  font-size: 15px;
+}
+
+.list-marker {
+  color: #1890ff;
+  font-weight: bold;
+  margin-right: 10px;
+  min-width: 20px;
+}
+
+.list-text b {
+  color: #1890ff;
+  font-weight: 600;
+}
+
+/* 底部按钮样式 */
+.action-bar {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.apply-btn {
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  padding: 12px 50px;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.apply-btn:hover {
+  background-color: #40a9ff;
+}
+
+.share-btn {
+  background-color: #fff;
+  color: #1890ff;
+  border: 1px solid #1890ff;
+  padding: 12px 50px;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.share-btn:hover {
+  background-color: #e6f7ff;
+}
+
+/* 移动端适配 */
+@media (max-width: 600px) {
+  .job-detail-container {
+    margin: 0;
+    border-radius: 0;
+  }
+  .job-header {
+    padding: 20px;
+  }
+  .job-content {
+    padding: 20px;
+  }
+  .job-title {
+    font-size: 24px;
+  }
+  .job-meta {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .action-bar {
+    flex-direction: column;
+  }
+  .apply-btn, .share-btn {
+    width: 100%;
+    padding: 12px 0;
+  }
+}
+</style>