1

src/views/hallList/parts/personal.vue

@@ -62,13 +62,13 @@
         <el-col :span="24" class="four">
           <el-tabs type="border-card">
             <el-tab-pane label="招聘信息">
-              <el-col :span="24" class="one">
+              <el-col :span="24" class="fourone">
                 <el-col :span="24" class="zpxxList" v-for="(item, index) in zpxxList" :key="index">
-                  <el-col :span="16" class="name">
+                  <el-col :span="16" class="name textOver">
                     {{ item.name }}
                   </el-col>
-                  <el-col :span="4" class="type"> 类型：{{ item.type }} </el-col>
-                  <el-col :span="4" class="date">
+                  <el-col :span="4" class="type textOver"> 类型：{{ item.type }} </el-col>
+                  <el-col :span="4" class="date textOver">
                     {{ item.date }}
                   </el-col>
                   <el-col :span="24" class="content">
@@ -78,10 +78,34 @@
               </el-col>
             </el-tab-pane>
             <el-tab-pane label="正式岗位">
-              正式岗位
+              <el-col :span="24" class="fourtwo">
+                <el-col :span="12" class="zsgwList" v-for="(item, index) in zsgwList" :key="index">
+                  <el-col :span="20" class="name textOver">
+                    {{ item.name }}
+                  </el-col>
+                  <el-col :span="4" class="date textOver">
+                    {{ item.date }}
+                  </el-col>
+                  <el-col :span="24" class="other">
+                    <span class="textOver">需求人数：{{ item.num }}</span>
+                    <span class="textOver" style="color:#ff0000;">薪资：{{ item.xz }}</span>
+                  </el-col>
+                  <el-col :span="24" class="other">
+                    <span class="textOver">福利待遇：{{ item.fldy }}</span>
+                    <span class="textOver">职位诱惑：{{ item.zwyh }}</span>
+                  </el-col>
+                </el-col>
+              </el-col>
             </el-tab-pane>
             <el-tab-pane label="实习岗位">
-              实习岗位
+              <el-col :span="24" class="fourthree">
+                <el-col :span="6" v-for="(item, index) in sxList" :key="index">
+                  <el-image :src="sx"></el-image>
+                  <el-col :span="24">
+                    {{ item.name }}
+                  </el-col>
+                </el-col>
+              </el-col>
             </el-tab-pane>
           </el-tabs>
         </el-col>
@@ -124,6 +148,24 @@ export default {
           content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
         },
       ],
+      // 正式岗位
+      zsgwList: [
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+      ],
+      // 实习岗位
+      sx: require('@/assets/sx.png'),
+      sxList: [
+        {
+          name: '前端开发工程师',
+        },
+      ],
     };
   },
   created() {},
@@ -296,10 +338,10 @@ export default {
     height: 500px;
     overflow: hidden;
     .el-tabs {
-      height: 500px;
+      height: 497px;
       overflow: hidden;
     }
-    .one {
+    .fourone {
       height: 430px;
       overflow: hidden;
       .zpxxList {
@@ -332,6 +374,42 @@ export default {
           margin: 10px 0 0 0;
         }
       }
+      .zpxxList:hover {
+        .name {
+          color: #409eff;
+        }
+      }
+    }
+    .fourtwo {
+      height: 430px;
+      overflow: hidden;
+      .zsgwList {
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin: 0 0 5px 0;
+        height: 103px;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          text-align: right;
+          font-size: 16px;
+        }
+        .other {
+          padding: 2px 0 1px 0;
+          font-size: 16px;
+          span {
+            display: inline-block;
+            width: 50%;
+          }
+        }
+      }
+      .zsgwList:hover {
+        .name {
+          color: #409eff;
+        }
+      }
     }
   }
 }