diff --git a/.gitignore b/.gitignore
index a547bf3..eee7d15 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+#lock-package
+pnpm-lock.yaml
\ No newline at end of file
diff --git a/package.json b/package.json
index 3b1ee87..dfcbedc 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.29.1",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
     "sass-embedded": "^1.80.3",
     "shadcn-vue": "^0.11.0",
diff --git a/src/assets/styles/recruitment.scss b/src/assets/styles/recruitment.scss
index 79c1900..89341b3 100644
--- a/src/assets/styles/recruitment.scss
+++ b/src/assets/styles/recruitment.scss
@@ -6,7 +6,11 @@
 
     $undertone: #647499;//浅灰 设置为非强调色
 
+*{
+  margin: 0;
+  padding: 0;
 
+}
 // 复选框样式
 .checkbox {
   position: relative;
@@ -36,10 +40,8 @@
 .btn-style {
   width: 100px;
   height: 40px;
-  background-color: var(--primary);
   cursor: pointer;
   border: var(--border) 1px solid;
-
   &:hover,
   &:active {
       color: var(--primary-foreground);
@@ -48,11 +50,18 @@
 }
 
 
+// 长虚线边框样式
+.long-dashed-border {
+  border-radius: var(--radius);
+    border: 1px solid transparent;
+    background: linear-gradient(white,white) padding-box,
+    repeating-linear-gradient(-45deg,var(--border) 0,var(--border) 0.5em,white 0,white 0.75em);
+}
+
 
 //后台样式
 .content {
     padding: 20px;
-    width: 100%;
     background-color: var(--background);
     position: relative;
 }
@@ -65,11 +74,19 @@
     align-items: center;
     position: relative;
     gap: 20px;
-
+    min-width: 920px;
     .search-input {
-        position: absolute;
-        right: 0;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        width: 300px;
+        height: 40px;
+        @media screen and (max-width: 1300px) {
+         display: none;
+        }
     }
+
 }
 
 .reset {
@@ -90,7 +107,6 @@
     justify-content: flex-start;
     align-items: center;
     gap: 20px;
-
     .toggle-button {
         width: 100px;
         height: 40px;
@@ -99,22 +115,13 @@
 
     .handle-btns {
         position: absolute;
-        right: 0;
+        right: 20px;
         display: flex;
         gap: 20px;
-
-        .handle-btn {
-            width: 100px;
-            height: 40px;
-            background-color: var(--primary);
-            cursor: pointer;
-            border: var(--border) 1px solid;
-
-            &:hover,
-            &:active {
-                color: var(--primary-foreground);
-                border: var(--primary-foreground) 1px solid;
-            }
+        @media screen and (max-width: 1300px) {
+          position: relative;
+          right: 0;
+          margin-left: 40px;
         }
     }
 }
@@ -129,6 +136,7 @@
 //卡片展示
 .main-content-show{
   display: flex;
+  padding: 20px;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
@@ -139,21 +147,23 @@
   position: relative;
   top: 20px;
   gap: 20px;
-
+  @extend .long-dashed-border;
  }
+
+
 //滚动条样式
 /* 定义滚动条的轨道样式 */
 ::-webkit-scrollbar {
-  width: 2px; /* 滚动条轨道的宽度 */
+  width: 1px; /* 滚动条轨道的宽度 */
 }
 
 /* 定义滚动条的滑块样式 */
 ::-webkit-scrollbar-thumb {
-  background-color:var(--accent); /* 滑块的颜色 */
+  background-color:skyblue; /* 滑块的颜色 */
   border-radius: 2px; /* 滑块的圆角 */
 }
 
 /* 定义滚动条的轨道样式（当滑块处于悬停状态时） */
 ::-webkit-scrollbar-track {
-  background: #f1f1f1; /* 轨道的颜色 */
+  background: var(--background); /* 轨道的颜色 */
 }
diff --git a/src/components/recruitment/MessageCard.vue b/src/components/recruitment/MessageCard.vue
index 8bfbff2..fa41311 100644
--- a/src/components/recruitment/MessageCard.vue
+++ b/src/components/recruitment/MessageCard.vue
@@ -11,32 +11,46 @@ import { Button } from '@/components/ui/button'
     <CardContent>
        <div class="message-show-top">
             <div class="message-show-time">
-                <span>2024-11-22 12:00-13:00</span>
+                <span class="min-width">
+                    2024-11-22
+                </span>
+                <span class="min-width">
+                    12:00-13:00
+                </span>
             </div>
             <div class="message-show-address">
-                <span>
-                    地点：零号楼609
+                <span class="min-width">
+                    面试地点：
+                </span>
+                <span class="min-width inline-block">
+                    零号楼609
                 </span>
             </div>
             <div class="message-show-interviewInturn">
-                <span>
-                    面试轮次：二面
+                <span class="min-width" >
+                    面试轮次：
+                </span>
+                <span class="min-width  inline-block" >
+                    二面
                 </span>
             </div>
             <div class="message-show-name">
-                <span>
+                <span class="min-width">
                     王科林
                 </span>
             </div>
        </div>
        <div class="message-show-bottom">
             <div class="message-show-interviewOfficer">
-                <span>
-                   面试官：贝利亚 贝利亚 贝利亚
+                <span class="min-width">
+                   面试官：
+                </span>
+                <span class="min-width">
+                    贝利亚 贝利亚 贝利亚
                 </span>
             </div>
             <div class="message-show-staus">
-                <span>
+                <span class="min-width">
                     已淘汰
                 </span>
             </div>
@@ -51,35 +65,46 @@ import { Button } from '@/components/ui/button'
 <style  lang="scss" scoped>
 @use "@/assets/styles";
 @use "@/assets/styles/recruitment";
+
+.min-width{
+    min-width: 60px;
+}
+
 .message-show{
     width: 100%;
     height: 150px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     position: relative;
     cursor: pointer;
+    border-radius: var(--radius);
     &:hover{
-        border-color: var(--accent-foreground);
+        background-color: var(--accent);
     }
 }
 .message-show-top{
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     width: 100%;
+    min-width: 370px;
     height: 80px;
     margin-bottom: 10px;
     gap: 20px;
     font-size: 0.8rem;
     .message-show-name{
         text-align: center;
-        width: 80px;
+        min-width: 70px;
         border: 1px solid skyblue;
         padding: 5px 10px;
         border-radius: 15px;
+        margin-right: 10px;
+    }
+    .message-show-interviewInturn{
+        min-width:70px;
     }
 }
 .message-show-bottom{
@@ -93,17 +118,22 @@ import { Button } from '@/components/ui/button'
     font-size: 0.8rem;
 }
 .message-show-button{
-
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     width: 100px;
     height: 100%;
+    margin-top: 2em;
     position: absolute;
+    right: 16px;
+    // margin-left: 4em;
+    //
     gap: 10px;
-    right: 30px;
-    top: 30px;
+    @media screen and (max-width: 1300px) {
+        position: relative;
+        margin-left: 1em;
+    }
 }
 .message-show-staus{
     text-align: center;
diff --git a/src/components/recruitment/QuickShowCard.vue b/src/components/recruitment/QuickShowCard.vue
new file mode 100644
index 0000000..805d3fa
--- /dev/null
+++ b/src/components/recruitment/QuickShowCard.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { Card } from "@/components/ui/card";
+import { defineProps } from "vue";
+import { Icon } from "@iconify/vue";
+
+type cardMessage={
+    label:string,
+    number:number,
+}
+const props = defineProps<
+   { quickShowItem : cardMessage,}
+>()
+
+</script>
+<template>
+        <Card class="card-message-show" >
+            <div class="card-message-show-content">
+                    <div class="card-message-show-content-left">
+                       <div class="message" >{{ quickShowItem.label }}</div>
+                        <div class="number">{{ quickShowItem.number }}</div>
+                    </div>
+                    <div class="card-message-show-content-right">
+                        <Icon class="svg" icon="lucide:hand" />
+                    </div>
+            </div>
+        </Card>
+</template>
+<style lang="scss" scoped >
+@use '@/assets/styles';
+
+
+.card-message-show{
+    width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: row;
+    justify-content:center;
+    align-items: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 10px;
+    margin: 10px;
+    cursor: pointer;
+}
+.card-message-show-content{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+}
+.card-message-show-content-left{
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 10px;
+    .message{
+        min-width: 50px;
+        font-size: 1em;
+        font-weight: 500;
+        margin-bottom: 10px;
+    }
+   .number{
+        font-size: 1.2em;
+        font-weight: 500;
+        margin-top: 10px;
+    }
+}
+.card-message-show-content-right{
+    position: relative;
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .svg{
+        position: absolute;
+        right:20px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/recruitment/ToggleShow.vue b/src/components/recruitment/ToggleShow.vue
index 717820f..f27eb25 100644
--- a/src/components/recruitment/ToggleShow.vue
+++ b/src/components/recruitment/ToggleShow.vue
@@ -28,7 +28,7 @@ function toggleActive(index: number) {
 </script>
 
 <template>
-    <Menubar class="toggle-show border-b p-3 ">
+        <Menubar class="toggle-show border-b p-3 ">
         <MenubarMenu>
                 <MenubarTrigger
                 v-for="item  in toggleItems"
@@ -42,28 +42,29 @@ function toggleActive(index: number) {
             </MenubarTrigger>
         </MenubarMenu>
     </Menubar>
+
 </template>
 
 
 <style lang="scss"  scoped>
 @use '@/assets/styles';
-//TODO: 设置外层内边距 外层设置的行内弹性盒子
 $undertone: #647499;
 
+
 .toggle-show {
-    height: 80%;
+    height: 50px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    background-color: var(--primary);
+    background-color: var(--accent);
 }
 .active {
     background-color: white;
     color: var(--white);
 }
 .not-active {
-    background-color: var(--white);
+    background-color: var(--accent);
     color: $undertone;
     border: none;
 }
diff --git a/src/components/recruitment/index.ts b/src/components/recruitment/index.ts
index 695110d..c26eb4b 100644
--- a/src/components/recruitment/index.ts
+++ b/src/components/recruitment/index.ts
@@ -6,3 +6,4 @@ export { default as DataTable } from "./DataTable.vue";
 export { default as Pagination } from "./Pagination.vue";
 export { default as MessageCard } from "./MessageCard.vue";
 export { default as FilterConditionMoreSelect } from "./FilterConditionMoreSelect.vue";
+export {default as QuickShowCard} from "./QuickShowCard.vue";
\ No newline at end of file
diff --git a/src/features/admin/pages/recruitment/candidates.vue b/src/features/admin/pages/recruitment/candidates.vue
index 6f22fa1..7068ef0 100644
--- a/src/features/admin/pages/recruitment/candidates.vue
+++ b/src/features/admin/pages/recruitment/candidates.vue
@@ -320,9 +320,9 @@ const actionItems = ref([
             <ToggleShow :toggleItems="toggleItems"></ToggleShow>
 
             <div class="handle-btns">
-                <Button type="primary" class="handle-btn arrangeResume">安排简历</Button>
-                <Button type="primary" class="handle-btn">修改状态</Button>
-                <Button type="primary" class="handle-btn">结果导出</Button>
+                <Button type="primary" class="btn-style">安排简历</Button>
+                <Button type="primary" class="btn-style">修改状态</Button>
+                <Button type="primary" class="btn-style">结果导出</Button>
             </div>
         </div>
 
@@ -342,5 +342,5 @@ const actionItems = ref([
 </template>
 
 <style lang="scss" scoped>
-@use "@/assets/styles/recruitment.scss"
+@use "@/assets/styles/recruitment.scss";
 </style>
\ No newline at end of file
diff --git a/src/features/admin/pages/recruitment/index.vue b/src/features/admin/pages/recruitment/index.vue
index ba7283f..361b758 100644
--- a/src/features/admin/pages/recruitment/index.vue
+++ b/src/features/admin/pages/recruitment/index.vue
@@ -1,22 +1,12 @@
 <script setup lang="ts">
 // 引入组件
-import{ MessageCard} from '@/components/recruitment'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Icon } from "@iconify/vue";
-import { ToggleShow } from "@/components/recruitment";
+import{ MessageCard,ToggleShow,QuickShowCard } from '@/components/recruitment'
 
 // 引入vue函数
 import { ref } from "vue";
 
 // 定义切换组件的基本信息 传给子组件
-const items = ref([
+const toggleItems = ref([
     {
         index: 0,
         title: '待我反馈',
@@ -34,91 +24,39 @@ const items = ref([
     }
 ]);
 
+//
+const quickShowItems = ref([
+    {
+        label: '待安排',
+        number: 8,
+    },
+    {
+        label: '已录取',
+        number: 8,
+    }
+]);
+
 </script>
 
 <template>
   <div class="main">
-    <div id="left-side">
-      <div id="quick-look-group">
-        <Card class="card-message-show">
-          <CardHeader>
-            <CardTitle> </CardTitle>
-            <CardDescription>待安排</CardDescription>
-          </CardHeader>
-          <CardContent> 6 </CardContent>
-          <CardFooter>
-            <Icon icon="lucide:hand" />
-          </CardFooter>
-        </Card>
-        <Card class="card-message-show">
-          <CardHeader>
-            <CardTitle></CardTitle>
-            <CardDescription>
-              已录取<Icon icon="lucide:hand"
-            /></CardDescription>
-          </CardHeader>
-          <CardContent> 6 </CardContent>
-          <CardFooter> </CardFooter>
-        </Card>
+    <div class="left-side">
+
+      <div class="quick-show" v-for="(item, index) in quickShowItems" :key="index">
+        <QuickShowCard :quickShowItem="item"></QuickShowCard>
       </div>
-      <div id="quick-control">
-        <Card id="card-control">
-          <CardHeader>
-            <CardTitle id="title">快捷操作 </CardTitle>
-            <CardDescription></CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div id="control-group">
-              <div id="control-item">
-                <div id="control-icon">
-                  <Icon
-                    id="control-icon-svg"
-                    icon="mdi-light:vector-arrange-below"
-                  />
-                </div>
-                <div id="control-text">
-                  <h6>安排面试</h6>
-                  <p>候选人</p>
-                </div>
-                <div id="control-click">
-                  <Icon
-                    id="control-click-svg"
-                    icon="solar:alt-arrow-right-line-duotone"
-                  />
-                </div>
-              </div>
 
-              <div id="control-item">
-                <div id="control-icon">
-                  <Icon
-                    id="control-icon-svg"
-                    icon="mdi-light:vector-arrange-below"
-                  />
-                </div>
-                <div id="control-text">
-                  <h6>安排面试</h6>
-                  <p>候选人</p>
-                </div>
-                <div id="control-click">
-                  <Icon
-                    id="control-click-svg"
-                    icon="solar:alt-arrow-right-line-duotone"
-                  />
-                </div>
-              </div>
-            </div>
-          </CardContent>
-          <CardFooter> </CardFooter>
-        </Card>
+      <div class="quick-control">
+
       </div>
     </div>
 
-    <div id="content">
-      <div id="content-container">
-        <div class="toggle-outer">
-          <ToggleShow :toggleItems="items" ></ToggleShow>
+    <div class="content">
+      <div class="content-container">
+        <div class="toggle-outer long-dashed-border">
+          <ToggleShow :toggleItems="toggleItems" ></ToggleShow>
         </div>
-        <div class="message-shows">
+        <div class="main-content-show">
           <MessageCard></MessageCard>
           <MessageCard></MessageCard>
           <MessageCard></MessageCard>
@@ -131,6 +69,7 @@ const items = ref([
 </template>
 <style lang="scss" scoped>
 @use '@/assets/styles';
+@use '@/assets/styles/recruitment.scss';
 
 .main {
   width: 100%;
@@ -144,138 +83,24 @@ const items = ref([
   box-sizing: content-box;
 }
 
-//#region 左侧边栏
-#left-side {
+//.region 左侧边栏
+.left-side {
   width: 20%;
   height: auto;
   background-color: #fff;
   position: relative;
+  margin-left: 2em;
   display: inline-block;
   margin-top: 10px;
   border: none;
 }
-.card-message-show {
-  width: 100%;
-  height: 150px;
-  background-color: #fff;
-  position: relative;
-  display: inline-block;
-  margin-top: 10px;
-}
-#quick-look-group {
-  width: 100%;
-  background-color: #fff;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-#quick-control {
-  width: 100%;
-  background-color: #fff;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  #card-control {
-    width: 90%;
-    height: 150px;
-  }
-}
-#quick-control {
-  width: 100%;
-  height: 150px;
-  background-color: #fff;
-  position: relative;
-  display: inline-block;
-  top: 20px;
-  margin-top: 10px;
-  border: none;
-  #card-control {
-    width: 100%;
-    height: auto;
-    border: none;
-    #title {
-      font-size: 1em;
-      font-weight: 100;
-      text-align: left;
-    }
-    #control-group {
-      width: 100%;
-      height: auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      #control-item {
-        width: 100%;
-        height: 40px;
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 20px;
-        #control-icon {
-          width: 60px;
-          height: 40px;
-          background-color: #cdd9fc;
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 10%;
-          margin-bottom: 20px;
-          #control-icon-svg {
-            width: 20px;
-            height: 20px;
-            position: relative;
-            display: inline-block;
-            border: none;
-            border-radius: 10%;
-            color: white;
-          }
-        }
-        #control-text {
-          width: 100%;
-          height: 40px;
-          background-color: #fff;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          text-align: left;
-          margin-left: 10px;
-          font-size: 1em;
-          p {
-            font-size: 0.8em;
-            color: #b1b2c6;
-          }
-          @media screen and (max-width: 768px) {
-            display: none;
-          }
-        }
 
-        #control-click {
-          width: 60px;
-          height: 40px;
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 10%;
-          background-color: #f0f0f0;
-          #control-click-svg {
-            font-size: 1.2em;
-          }
-        }
-      }
-    }
-  }
-}
-//#endregion
 
-//#region 中间内容区
-#content {
+
+//.endregion
+
+//.region 中间内容区
+.content {
   width: 70%;
   background-color:var(--background);
   position: relative;
@@ -284,7 +109,7 @@ const items = ref([
   left: 20px;
   border: none;
 }
-#content-container {
+.content-container {
   width: 100%;
   height: auto;
   .toggle-outer {
@@ -295,25 +120,8 @@ const items = ref([
     flex-direction: row;
     justify-content:flex-start;
     align-items: center;
-    border: 1px dashed var(--border);
-    border-radius: var(--radius);
   }
 
 }
-.message-shows{
-  position: relative;
-  top: 20px;
-  display:flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 20px;
-  width: 100%;
-  height: auto;
-  padding: 10px;
-  border: 1px dashed var(--border);
-  border-radius: var(--radius);
-}
-
-//#endregion
+//.endregion
 </style>
diff --git a/src/features/admin/pages/recruitment/interview.vue b/src/features/admin/pages/recruitment/interview.vue
index a73b52c..7eeca47 100644
--- a/src/features/admin/pages/recruitment/interview.vue
+++ b/src/features/admin/pages/recruitment/interview.vue
@@ -186,7 +186,8 @@ const resetCondition = () => {
             <div class="search-input">
                 <SearchInput @input_src="handleInput"
                 labelText="搜索候选人:"
-                style="width: 400px;height: 40px;">
+                style="width: 400px;height: 40px;"
+                >
                 </SearchInput>
             </div>
     </div>
@@ -201,5 +202,5 @@ const resetCondition = () => {
 </template>
 
 <style  lang="scss" scoped >
-@use "@/assets/styles/recruitment.scss"
+@use "@/assets/styles/recruitment.scss";
 </style>
\ No newline at end of file
diff --git a/src/features/admin/pages/recruitment/recruitmentRecord.vue b/src/features/admin/pages/recruitment/recruitmentRecord.vue
index 13b43b8..3e192fd 100644
--- a/src/features/admin/pages/recruitment/recruitmentRecord.vue
+++ b/src/features/admin/pages/recruitment/recruitmentRecord.vue
@@ -131,39 +131,40 @@ const isReset = ref(false);
             </div>
         </div>
     </div>
-    <div class="main-content-show">
-        <MessageCard></MessageCard>
-    </div>
+         <div class="main-content-show">
+            <MessageCard></MessageCard>
+        </div>
+
 
 </template>
 
 <style  lang="scss" scoped>
 @use "@/assets/styles/recruitment";
-.filter-condition{
-    display: flex;
-    flex-direction: row;
-    height: 80px;
-    position: relative;
-   .filter-items{
-        display: flex;
-        flex-direction: row;
-        justify-content:flex-start;
-        align-items: center;
-        height: 100%;
-   }
-   .reset{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 150px;
-    height: 40px;
-    cursor: pointer;
-   }
-   .search-input {
-        position: absolute;
-        right: 100px;
-    }
-   }
+// .filter-condition{
+//     display: flex;
+//     flex-direction: row;
+//     height: 80px;
+//     position: relative;
+//    .filter-items{
+//         display: flex;
+//         flex-direction: row;
+//         justify-content:flex-start;
+//         align-items: center;
+//         height: 100%;
+//    }
+//    .reset{
+//     display: flex;
+//     flex-direction: row;
+//     justify-content: center;
+//     align-items: center;
+//     width: 150px;
+//     height: 40px;
+//     cursor: pointer;
+//    }
+//    .search-input {
+//         position: absolute;
+//         right: 100px;
+//     }
+//    }
 
 </style>
\ No newline at end of file