1

src/views/hallList/parts/personal.vue

@@ -99,11 +99,18 @@
             </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">
+                <el-col :span="6" class="sxList" v-for="(item, index) in sxList" :key="index">
+                  <el-image :src="sx" class="image"></el-image>
+                  <el-col :span="24" class="name textOver">
                     {{ item.name }}
                   </el-col>
+                  <el-col :span="24" class="other">
+                    <span class="textOver"><i class="el-icon-coin"></i>{{ item.xz }}</span>
+                    <span class="textOver"><i class="el-icon-location"></i>{{ item.address }}</span>
+                  </el-col>
+                  <el-col :span="24" class="fldy textOver">
+                    <span>福利待遇：{{ item.fldy }}</span>
+                  </el-col>
                 </el-col>
               </el-col>
             </el-tab-pane>
@@ -147,6 +154,24 @@ export default {
           type: '全职',
           content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
         },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
+        {
+          name: '长春市福瑞科技有限公司',
+          date: '2020-10-16',
+          type: '全职',
+          content: '长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司',
+        },
       ],
       // 正式岗位
       zsgwList: [
@@ -158,12 +183,113 @@ export default {
           num: '10',
           zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
         },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
+        {
+          name: '应届管培生',
+          date: '2020-10-16',
+          xz: '3k-6k/月',
+          fldy: '五险一金',
+          num: '10',
+          zwyh: '扁平管理,节日礼物,岗前培训,岗位晋升',
+        },
       ],
       // 实习岗位
       sx: require('@/assets/sx.png'),
       sxList: [
         {
           name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
+        },
+        {
+          name: '前端开发工程师',
+          xz: '3k-6k/月',
+          address: '长春市',
+          fldy: '五险一金',
         },
       ],
     };
@@ -375,6 +501,7 @@ export default {
         }
       }
       .zpxxList:hover {
+        cursor: pointer;
         .name {
           color: #409eff;
         }
@@ -406,6 +533,52 @@ export default {
         }
       }
       .zsgwList:hover {
+        cursor: pointer;
+        .name {
+          color: #409eff;
+        }
+      }
+    }
+    .fourthree {
+      .sxList {
+        padding: 15px;
+        margin: 0 15px 10px 0;
+        height: 212px;
+        width: 24%;
+        border-radius: 10px;
+        box-shadow: 0 0px 5px #ccc;
+        .image {
+          height: 100px;
+          padding: 0 60px;
+        }
+        .name {
+          font-size: 18px;
+          text-align: center;
+          font-weight: bold;
+          padding: 5px 0 0 0;
+        }
+        .other {
+          font-size: 16px;
+          text-align: center;
+          padding: 5px 0;
+          span {
+            display: inline-block;
+            margin: 0 10px;
+          }
+          span:nth-child(1) {
+            color: #ff0000;
+          }
+        }
+        .fldy {
+          font-size: 16px;
+          text-align: center;
+        }
+      }
+      .sxList:nth-child(4n) {
+        margin: 0 0 10px 0;
+      }
+      .sxList:hover {
+        cursor: pointer;
         .name {
           color: #409eff;
         }