diff --git a/src/views/Index/components/Recruit/Detail/index.vue b/src/views/Index/components/Recruit/Detail/index.vue
new file mode 100644
index 0000000..30cff30
--- /dev/null
+++ b/src/views/Index/components/Recruit/Detail/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="recruit_post_detail_container">
+    <div class="main">
+      <div class="top_simple_wrap">
+        <div class="post_nature">
+          <div class="nature">
+            <div class="btn">工业设计师-全职</div>
+            <p class="slary">岗位待遇 15-20K</p>
+          </div>
+          <p class="address">
+            工作地址：北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂
+          </p>
+        </div>
+        <div class="skills_con">
+          <div class="btn_skill">所需技能</div>
+          <p class="desc">
+            犀牛、Photoshop、办公软件、Solidworks/Proe、CoreIDRAW、Adobe
+            Illustrator
+          </p>
+        </div>
+      </div>
+      <div class="main_content">
+        <div class="left_content">
+          <p class="title">工作内容</p>
+          <div class="one_piece">
+            <img src="" class="ok" alt="" />
+            <p class="text">准确解读产品需求，对产品进行分析设计；</p>
+          </div>
+        </div>
+        <div class="middle_duty">
+          <p class="title">岗位职责</p>
+          <div class="one_piece">
+            <img src="" class="ok" alt="" />
+            <p class="text">对工业设计饱有激情，思维活跃</p>
+          </div>
+        </div>
+        <div class="img_con"></div>
+      </div>
+    </div>
+    <div class="bt_wrap">
+      <div class="bt_left">
+        <div class="one_p">
+          <img src="" class="icon1" alt="" />
+          <p class="font">hr@iflytop.com</p>
+        </div>
+        <div class="one_p">
+          <img src="" class="icon2" alt="" />
+          <p class="font">www.iflytop.com</p>
+        </div>
+        <div class="one_p">
+          <img src="" class="icon3" alt="" />
+          <p class="font">北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂</p>
+        </div>
+      </div>
+      <div class="more_btn">更多岗位</div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.recruit_post_detail_container {
+  width: 100%;
+  background: #fff;
+  border-bottom: solid 6px #283fe7;
+  padding: 50px 64px 55px 64px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  .main {
+    flex: 1;
+    .top_simple_wrap {
+      display: flex;
+      align-items: center;
+      margin-bottom: 81px;
+      .post_nature {
+        margin-right: 114px;
+        .nature {
+          display: flex;
+          align-items: center;
+          .btn {
+            width: 226px;
+            height: 44px;
+            background: #283fe7;
+            border: 2px solid #283fe7;
+            border-radius: 22px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 18px;
+            font-family: 'SourceHanSans';
+            font-weight: 400;
+            color: #ffffff;
+            margin-right: 39px;
+          }
+          .slary {
+            font-size: 18px;
+            font-family: 'SourceHanSans';
+            font-weight: 500;
+            color: #000000;
+          }
+        }
+        .address {
+          font-size: 18px;
+          font-family: 'SourceHanSans';
+          font-weight: 300;
+          color: #646a73;
+          margin-top: 19px;
+        }
+      }
+      .skills_con {
+        .btn_skill {
+          width: 142px;
+          height: 44px;
+          border: 2px solid #283fe7;
+          border-radius: 22px;
+          font-size: 18px;
+          font-family: 'SourceHanSans';
+          font-weight: 400;
+          color: #283fe7;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 19px;
+        }
+        .desc {
+          font-size: 18px;
+          font-family: 'SourceHanSans';
+          font-weight: 300;
+          color: #646a73;
+        }
+      }
+    }
+    .main_content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: solid 1px #f5f5f5;
+      padding-bottom: 37px;
+      margin-bottom: 56px;
+      .left_content {
+        margin-right: 94px;
+        width: 460px;
+        min-height: 285px;
+        .title {
+          font-size: 22px;
+          font-family: 'SourceHanSans';
+          font-weight: bold;
+          color: #000000;
+          margin-bottom: 33px;
+        }
+        .one_piece {
+          display: flex;
+          align-items: center;
+          .ok {
+            width: 20px;
+            height: 20px;
+          }
+          .text {
+            margin-left: 16px;
+            font-size: 16px;
+            font-family: 'SourceHanSans';
+            font-weight: 300;
+            color: #646a73;
+          }
+        }
+      }
+      .middle_duty {
+        flex: 1;
+        min-height: 285px;
+        .title {
+          font-size: 22px;
+          font-family: 'SourceHanSans';
+          font-weight: bold;
+          color: #000000;
+          margin-bottom: 33px;
+        }
+        .one_piece {
+          display: flex;
+          align-items: center;
+          .ok {
+            width: 20px;
+            height: 20px;
+          }
+          .text {
+            margin-left: 16px;
+            font-size: 16px;
+            font-family: 'SourceHanSans';
+            font-weight: 300;
+            color: #646a73;
+          }
+        }
+      }
+      .img_con {
+        width: 403px;
+        height: 285px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #000;
+      }
+    }
+  }
+  .bt_wrap {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .bt_left {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      .one_p {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        font-family: 'SourceHanSans';
+        font-weight: 400;
+        color: #646a73;
+        margin-right: 66px;
+        .icon1 {
+          width: 24px;
+          height: 15px;
+        }
+        .icon2 {
+          width: 22px;
+          height: 22px;
+        }
+        .icon3 {
+          width: 19px;
+          height: 23px;
+        }
+        .font {
+          margin-left: 14px;
+        }
+      }
+    }
+    .more_btn {
+      width: 120px;
+      height: 30px;
+      border: 1px solid #646a73;
+      border-radius: 15px;
+      font-size: 16px;
+      font-family: 'SourceHanSans';
+      font-weight: 400;
+      color: #646a73;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/Index/components/Recruit/index.vue b/src/views/Index/components/Recruit/index.vue
index 106abc6..082c4cd 100644
--- a/src/views/Index/components/Recruit/index.vue
+++ b/src/views/Index/components/Recruit/index.vue
@@ -1,18 +1,104 @@
 <template>
   <div class="wrap">
-    <div class="recruit_container"></div>
+    <div class="recruit_container" id="recruit_container">
+      <div class="empty" v-if="showEmpty"></div>
+      <div class="contract_title">
+        <p class="line"></p>
+        <p class="title">
+          产品梦工厂不只做产品,<span class="blue_font">也成就工程师的梦想</span>
+        </p>
+        <p class="detail">大量的项目实战，成就未来的你，欢迎您的加入</p>
+      </div>
+      <div class="content">
+        <div class="detail">
+          <Detail />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto } from '@/common/utils'
+import Detail from './Detail'
+onMounted(() => {
+  handleScreenAuto(showEmpty, '#recruit_container')
+  window.onresize = handleScreenAuto(showEmpty, '#recruit_container')
+})
+const showEmpty = ref(false)
+</script>
 
 <style lang="scss" scoped>
 .wrap {
   width: 100%;
   height: 100%;
+  background: $common_bg;
+  position: relative;
   .recruit_container {
     width: 100%;
     height: 100%;
+    .empty {
+      min-height: 90px;
+    }
+    .contract_title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-family: 'SourceHanSans';
+      background-size: 100% 100%;
+      padding: 71px 0 73px 0;
+      box-sizing: border-box;
+      position: relative;
+      white-space: nowrap;
+      transform-style: preserve-3d;
+      .line {
+        width: 39px;
+        height: 5px;
+        background: #283fe7;
+        border-radius: 3px;
+        margin-bottom: 12px;
+      }
+      .img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%) translateZ(-1px);
+        width: 543px;
+        height: 61px;
+      }
+      .title {
+        font-size: 30px;
+        font-weight: bold;
+        color: #000000;
+        margin-bottom: 21px;
+        .blue_font {
+          color: $theme_color;
+        }
+      }
+      .detail {
+        font-size: 18px;
+        font-weight: 300;
+        color: #646a73;
+        font-family: 'SourceHanSansLight';
+      }
+    }
+    .content {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 76px 84px 76px;
+      position: relative;
+      height: 800px;
+      .detail {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+    }
   }
 }
 </style>