123

src/views/Index/components/Recruit/Card/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div :class="getClass()">
+    <div class="dialog">
+      <p class="title">工业设计师</p>
+      <p class="desc">懂工艺的设计师才是好的 设计师</p>
+      <div class="bottom">
+        <div class="btn" @click="showDetail">
+          <span>详情</span>
+          <img :src="Arrow" class="icon" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Arrow from '@/assets/img/recruit/jiantou1.png'
+const props = defineProps({
+  merge: Boolean,
+  i: String,
+  handleDetail: Function,
+})
+const showDetail = () => {
+  console.log(1123)
+  props.handleDetail(true)
+}
+const getClass = () => {
+  if (props.merge) {
+    return 'post_card_container bg_post3 fill'
+  }
+  if (props.i == '1') {
+    return 'post_card_container bg_post1'
+  }
+  if (props.i == '2') {
+    return 'post_card_container bg_post2'
+  }
+  if (props.i == '4') {
+    return 'post_card_container bg_post4'
+  }
+  if (props.i == '5') {
+    return 'post_card_container bg_post5'
+  }
+  if (props.i == '6') {
+    return 'post_card_container bg_post6'
+  }
+  if (props.i == '7') {
+    return 'post_card_container bg_post7'
+  }
+  if (props.i == '8') {
+    return 'post_card_container bg_post8'
+  }
+  if (props.i == '9') {
+    return 'post_card_container bg_post9'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.post_card_container {
+  width: 311px;
+  height: 324px;
+  position: relative;
+  cursor: pointer;
+  .dialog {
+    background: rgba(0, 0, 0, 0.68);
+    padding: 43px 30px 34px 60px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    .title {
+      font-size: 22px;
+      font-family: 'SourceHanSans';
+      font-weight: bold;
+      color: #ffffff;
+      margin-bottom: 31px;
+    }
+    .desc {
+      flex: 1;
+      font-size: 16px;
+      width: 195px;
+      font-family: 'SourceHanSans';
+      font-weight: 300;
+      color: #ffffff;
+    }
+    .bottom {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      .btn {
+        width: 79px;
+        height: 30px;
+        border: 1px solid #ffffff;
+        border-radius: 15px;
+        font-size: 16px;
+        font-family: 'SourceHanSans';
+        font-weight: 400;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          margin-left: 9px;
+          width: 5px;
+          height: 10px;
+        }
+      }
+    }
+  }
+}
+.post_card_container:hover {
+  border-radius: 10px;
+  overflow: hidden;
+  .dialog {
+    background: rgba(40, 63, 231, 0.68);
+  }
+}
+
+.fill {
+  height: 676px;
+  width: 415px;
+  .dialog {
+    .desc {
+      width: 321px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.bg_post1 {
+  background: url(../../../../../assets/img/recruit/gongye.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post2 {
+  background: url(../../../../../assets/img/recruit/qudong.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post3 {
+  background: url(../../../../../assets/img/recruit/gaojichanpin.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post4 {
+  background: url(../../../../../assets/img/recruit/gaojijiegou.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post5 {
+  background: url(../../../../../assets/img/recruit/houduan.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post6 {
+  background: url(../../../../../assets/img/recruit/suanfa.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post7 {
+  background: url(../../../../../assets/img/recruit/gaojiqianru.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post8 {
+  background: url(../../../../../assets/img/recruit/gaojiyingjian.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg_post9 {
+  background: url(../../../../../assets/img/recruit/qianduan.png) no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/views/Index/components/Recruit/Detail/index.vue

@@ -23,14 +23,14 @@
         <div class="left_content">
           <p class="title">工作内容</p>
           <div class="one_piece">
-            <img src="" class="ok" alt="" />
+            <img :src="Ok" 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="" />
+            <img :src="Ok" class="ok" alt="" />
             <p class="text">对工业设计饱有激情，思维活跃</p>
           </div>
         </div>
@@ -40,24 +40,39 @@
     <div class="bt_wrap">
       <div class="bt_left">
         <div class="one_p">
-          <img src="" class="icon1" alt="" />
+          <img :src="Email" class="icon1" alt="" />
           <p class="font">hr@iflytop.com</p>
         </div>
         <div class="one_p">
-          <img src="" class="icon2" alt="" />
+          <img :src="Earth" class="icon2" alt="" />
           <p class="font">www.iflytop.com</p>
         </div>
         <div class="one_p">
-          <img src="" class="icon3" alt="" />
+          <img :src="Address" class="icon3" alt="" />
           <p class="font">北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂</p>
         </div>
       </div>
-      <div class="more_btn">更多岗位</div>
+      <div class="more_btn" @click="cancleDetail">
+        <span>更多岗位</span>
+        <img :src="Arrow" class="icon" alt="" />
+      </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Arrow from '@/assets/img/recruit/jiantou2.png'
+import Email from '@/assets/img/recruit/youjian.png'
+import Earth from '@/assets/img/recruit/wangzhi.png'
+import Address from '@/assets/img/recruit/zuobiao.png'
+import Ok from '@/assets/img/recruit/duigou.png'
+const props = defineProps({
+  handleDetail: Function,
+})
+const cancleDetail = () => {
+  props.handleDetail(false)
+}
+</script>
 
 <style lang="scss" scoped>
 .recruit_post_detail_container {
@@ -198,7 +213,9 @@
         height: 285px;
         border-radius: 6px;
         overflow: hidden;
-        background: #000;
+        background: url(../../../../../assets/img/recruit/bangonglou.png)
+          no-repeat;
+        background-size: 100% 100%;
       }
     }
   }
@@ -249,6 +266,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      cursor: pointer;
+      .icon {
+        width: 5px;
+        height: 10px;
+        margin-left: 13px;
+      }
     }
   }
 }

src/views/Index/components/Recruit/index.vue

@@ -10,8 +10,19 @@
         <p class="detail">大量的项目实战，成就未来的你，欢迎您的加入</p>
       </div>
       <div class="content">
-        <div class="detail">
-          <Detail />
+        <div><Card i="1" :handleDetail="handleDetail" /></div>
+        <div><Card i="2" :handleDetail="handleDetail" /></div>
+        <div class="merge">
+          <Card :merge="true" :handleDetail="handleDetail" />
+        </div>
+        <div><Card i="4" :handleDetail="handleDetail" /></div>
+        <div><Card i="5" :handleDetail="handleDetail" /></div>
+        <div><Card i="6" :handleDetail="handleDetail" /></div>
+        <div><Card i="7" :handleDetail="handleDetail" /></div>
+        <div><Card i="8" :handleDetail="handleDetail" /></div>
+        <div><Card i="9" :handleDetail="handleDetail" /></div>
+        <div class="detail" v-if="showDetail" v-on:mouseleave="mouseleave">
+          <Detail :handleDetail="handleDetail" />
         </div>
       </div>
     </div>
@@ -22,6 +33,14 @@
 import { ref, onMounted } from 'vue'
 import { handleScreenAuto } from '@/common/utils'
 import Detail from './Detail'
+import Card from './Card'
+const showDetail = ref(false)
+const handleDetail = flag => {
+  showDetail.value = flag
+}
+const mouseleave = () => {
+  showDetail.value = false
+}
 onMounted(() => {
   handleScreenAuto(showEmpty, '#recruit_container')
   window.onresize = handleScreenAuto(showEmpty, '#recruit_container')
@@ -87,15 +106,24 @@ const showEmpty = ref(false)
     .content {
       width: 100%;
       box-sizing: border-box;
-      padding: 0 76px 84px 76px;
+      padding-bottom: 80px;
+      // padding: 0 76px 80px 76px;
       position: relative;
-      height: 800px;
+      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%;
-        height: 100%;
+        min-height: calc(100% + 1px);
+        transform: translateY(-1px);
         box-sizing: border-box;
       }
     }