diff --git a/index.html b/index.html
index b1ecf2a..4db9f71 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
     <link rel="shortcut icon" href="./logo.ico" />
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" style="min-width: 1280px"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/common/utils.js b/src/common/utils.js
index 2269040..cf3f711 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -15,7 +15,8 @@ export const handleScreenAuto = id => {
   let scale = 1
 
   if (document.documentElement.clientWidth > designDraftWidth) {
-    document.documentElement.clientHeight / designDraftWidth <
+    document.documentElement.clientWidth /
+      document.documentElement.clientHeight <
     designDraftWidth / designDraftHeight
       ? 1
       : document.documentElement.clientHeight / designDraftHeight
diff --git a/src/views/Index/components/MechanicalControl/index.vue b/src/views/Index/components/MechanicalControl/index.vue
index 04c42bb..b8c76fc 100644
--- a/src/views/Index/components/MechanicalControl/index.vue
+++ b/src/views/Index/components/MechanicalControl/index.vue
@@ -304,7 +304,7 @@ onMounted(() => {
         justify-content: space-between;
         height: 319px;
         width: 100%;
-        padding: 0 440px;
+        padding: 0 440px 50px 440px;
         box-sizing: border-box;
         .left_img {
           .gif {
diff --git a/src/views/Index/components/MechanicalDrive/index.vue b/src/views/Index/components/MechanicalDrive/index.vue
index e2e7225..9d44d83 100644
--- a/src/views/Index/components/MechanicalDrive/index.vue
+++ b/src/views/Index/components/MechanicalDrive/index.vue
@@ -111,7 +111,7 @@ onMounted(() => {
         }
       }
       .content_main {
-        padding: 0 99px;
+        padding: 0 99px 50px 99px;
         column-gap: 67px;
         display: grid;
         justify-content: space-evenly;
diff --git a/src/views/Index/components/Recruit/index.vue b/src/views/Index/components/Recruit/index.vue
index 39ec793..1cc7ee4 100644
--- a/src/views/Index/components/Recruit/index.vue
+++ b/src/views/Index/components/Recruit/index.vue
@@ -1,34 +1,38 @@
 <template>
   <div class="wrap">
     <div class="empty" v-if="showEmpty"></div>
-    <div class="recruit_container" id="recruit_container">
-      <div class="contract_title" id="post_page_title_ani">
-        <p class="line"></p>
-        <p class="title">
-          产品梦工厂不只做产品,<span class="blue_font">也成就工程师的梦想</span>
-        </p>
-        <p class="detail">大量的项目实战，成就未来的你，欢迎您的加入</p>
-      </div>
-      <div class="content">
-        <div
-          :class="item.isMerge ? 'merge' : ''"
-          v-for="(item, index) in postList"
-          :key="item.id"
-        >
-          <Card
-            :merge="item.isMerge"
-            :handleDetail="handleDetail"
-            :i="index + 1 + ''"
-            :postInfo="item"
-          />
+    <div class="flex_center">
+      <div class="recruit_container" id="recruit_container">
+        <div class="contract_title" id="post_page_title_ani">
+          <p class="line"></p>
+          <p class="title">
+            产品梦工厂不只做产品,<span class="blue_font"
+              >也成就工程师的梦想</span
+            >
+          </p>
+          <p class="detail">大量的项目实战，成就未来的你，欢迎您的加入</p>
         </div>
-        <div
-          class="detail animate__animated animate__zoomInDown"
-          v-if="showDetail"
-          v-on:mouseleave="mouseleave"
-          id="post_detail_ani"
-        >
-          <Detail :postId="postId" :handleDetail="handleDetail" />
+        <div class="content">
+          <div
+            :class="item.isMerge ? 'merge' : ''"
+            v-for="(item, index) in postList"
+            :key="item.id"
+          >
+            <Card
+              :merge="item.isMerge"
+              :handleDetail="handleDetail"
+              :i="index + 1 + ''"
+              :postInfo="item"
+            />
+          </div>
+          <div
+            class="detail animate__animated animate__zoomInDown"
+            v-if="showDetail"
+            v-on:mouseleave="mouseleave"
+            id="post_detail_ani"
+          >
+            <Detail :postId="postId" :handleDetail="handleDetail" />
+          </div>
         </div>
       </div>
     </div>
@@ -66,78 +70,85 @@ const showEmpty = ref(true)
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   .empty {
     min-height: 90px;
   }
-  .recruit_container {
-    width: 100%;
-    height: 100%;
-
-    .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;
+  .flex_center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    .recruit_container {
+      // width: 100%;
+      // height: 100%;
+      .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';
         }
       }
-      .detail {
-        font-size: 18px;
-        font-weight: 300;
-        color: #646a73;
-        font-family: 'SourceHanSansLight';
-      }
-    }
-    .content {
-      width: 100%;
-      box-sizing: border-box;
-      padding-bottom: 80px;
-      // padding: 0 76px 80px 76px;
-      position: relative;
-      display: grid;
-      grid-template-columns: 311px 311px 415px 311px 311px;
-      column-gap: 57px;
-      row-gap: 27px;
-      grid-template-areas: '. . a . .' '. . a . .';
-      .merge {
-        grid-area: a;
-      }
-      .detail {
-        position: absolute;
-        left: 0;
-        top: 0;
+      .content {
         width: 100%;
-        min-height: calc(100% + 1px);
-        transform: translateY(-1px);
         box-sizing: border-box;
+        padding-bottom: 80px;
+        padding: 0 76px 50px 76px;
+        box-sizing: border-box;
+        position: relative;
+        display: grid;
+        grid-template-columns: 311px 311px 415px 311px 311px;
+        column-gap: 57px;
+        row-gap: 27px;
+        grid-template-areas: '. . a . .' '. . a . .';
+        .merge {
+          grid-area: a;
+        }
+        .detail {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          min-height: calc(100% + 1px);
+          transform: translateY(-1px);
+          box-sizing: border-box;
+        }
       }
     }
   }
diff --git a/src/views/Index/components/SoftHardwareDetail/index.vue b/src/views/Index/components/SoftHardwareDetail/index.vue
index 1c007f6..38569cb 100644
--- a/src/views/Index/components/SoftHardwareDetail/index.vue
+++ b/src/views/Index/components/SoftHardwareDetail/index.vue
@@ -112,7 +112,7 @@ onMounted(() => {
         }
       }
       .content_main {
-        padding: 0 173px;
+        padding: 0 173px 50px 173px;
         column-gap: 50px;
         display: grid;
         justify-content: space-evenly;
