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

<template>
  <div class="recruit_post_detail_container">
    <div class="main">
      <div class="top_simple_wrap">
        <div class="post_nature">
          <div class="nature">
            <div class="btn">
              {{ `${postInfo?.postName} - ${postInfo?.nature}` }}
            </div>
            <p class="slary">岗位待遇 {{ postInfo?.salary }}</p>
          </div>
          <p class="address">工作地址：{{ postInfo?.address }}</p>
        </div>
        <div class="skills_con">
          <div class="btn_skill">所需技能</div>
          <p class="desc">
            {{ postInfo?.skills }}
          </p>
        </div>
      </div>
      <div
        :class="
          postInfo?.hasMargin
            ? postInfo?.hasPadding
              ? 'main_content has_margin has_padding'
              : 'main_content has_margin'
            : 'main_content'
        "
      >
        <div class="left_content">
          <p class="title">工作内容</p>
          <div
            class="one_piece"
            v-for="(item, index) in postInfo?.jobContent"
            :key="index"
          >
            <img v-lazy="Ok" class="ok" alt="" />
            <p class="text">{{ item }};</p>
          </div>
        </div>
        <div class="middle_duty">
          <p class="title">岗位职责</p>
          <div
            class="one_piece"
            v-for="(item, index) in postInfo?.duty"
            :key="index"
          >
            <img v-lazy="Ok" class="ok" alt="" />
            <p class="text">{{ item }}</p>
          </div>
        </div>
        <div class="img_con"></div>
      </div>
    </div>
    <div class="bt_wrap">
      <div class="bt_left">
        <div class="one_p">
          <img v-lazy="Email" class="icon1" alt="" />
          <p class="font">hr@iflytop.com</p>
        </div>
        <div class="one_p">
          <img v-lazy="Earth" class="icon2" alt="" />
          <p class="font">www.iflytop.com</p>
        </div>
        <div class="one_p">
          <img v-lazy="Address" class="icon3" alt="" />
          <p class="font">北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂</p>
        </div>
      </div>
      <div
        class="more_btn"
        @click="cancleDetail"
        v-on:mouseover="mouseover"
        v-on:mouseleave="mouseleave"
      >
        <span class="return_btn">返回列表</span>
        <img v-lazy="arrowShow ? Arrow1 : Arrow" class="icon" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Arrow1 from '@/assets/img/recruit/jiantou1.png'
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'
import { postDetail } from '@/mock/post'
import { ref } from 'vue'
const postInfo = postDetail[props.postId]
const props = defineProps({
  handleDetail: Function,
  postId: String,
})
const arrowShow = ref(false)
const mouseover = () => {
  arrowShow.value = true
}
const mouseleave = () => {
  arrowShow.value = false
}
const cancleDetail = () => {
  props.handleDetail(false)
}
</script>

<style lang="scss" scoped>
.recruit_post_detail_container {
  width: 100%;
  background: #fff;
  border-bottom: solid 6px #283fe7;
  padding: 50px 64px 55px 64px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .main {
    flex: 1;
    .top_simple_wrap {
      display: flex;
      align-items: center;
      margin-bottom: 81px;
      .post_nature {
        margin-right: 114px;
        .nature {
          display: flex;
          align-items: center;
          .btn {
            width: 226px;
            height: 44px;
            background: #283fe7;
            border: 2px solid #283fe7;
            border-radius: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-family: 'SourceHanSans';
            font-weight: 400;
            color: #ffffff;
            margin-right: 39px;
            transition-property: all;
            transition-duration: 0.7s;
            animation-fill-mode: forwards;
          }
          .btn:hover {
            background: #fff;
            color: $theme_color;
          }
          .slary {
            font-size: 18px;
            font-family: 'SourceHanSans';
            font-weight: 500;
            color: #000000;
          }
        }
        .address {
          font-size: 18px;
          font-family: 'SourceHanSans';
          font-weight: 300;
          color: #646a73;
          margin-top: 19px;
        }
      }
      .skills_con {
        .btn_skill {
          width: 142px;
          height: 44px;
          border: 2px solid #283fe7;
          border-radius: 22px;
          font-size: 18px;
          font-family: 'SourceHanSans';
          font-weight: 400;
          color: #283fe7;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 19px;
          transition-property: all;
          transition-duration: 0.7s;
          animation-fill-mode: forwards;
        }
        .btn_skill:hover {
          color: #fff;
          background: #283fe7;
        }
        .desc {
          font-size: 18px;
          font-family: 'SourceHanSans';
          font-weight: 300;
          color: #646a73;
        }
      }
    }
    .main_content {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: solid 1px #f5f5f5;
      // padding-bottom: 37px;
      // margin-bottom: 56px;
      box-sizing: border-box;
      .left_content {
        margin-right: 94px;
        width: 460px;
        height: 100%;
        .title {
          font-size: 22px;
          font-family: 'SourceHanSans';
          font-weight: bold;
          color: #000000;
          margin-bottom: 33px;
        }
        .one_piece {
          display: flex;
          align-items: center;
          margin-bottom: 21px;
          .ok {
            width: 20px;
            height: 20px;
          }
          .text {
            margin-left: 16px;
            font-size: 16px;
            line-height: 22px;
            font-family: 'SourceHanSans';
            font-weight: 300;
            color: #646a73;
          }
        }
      }
      .middle_duty {
        flex: 1;
        min-height: 285px;
        padding-right: 40px;
        .title {
          font-size: 22px;
          font-family: 'SourceHanSans';
          font-weight: bold;
          color: #000000;
          margin-bottom: 33px;
        }
        .one_piece {
          display: flex;
          align-items: center;
          margin-bottom: 21px;
          .ok {
            width: 20px;
            height: 20px;
          }
          .text {
            margin-left: 16px;
            font-size: 16px;
            line-height: 22px;
            font-family: 'SourceHanSans';
            font-weight: 300;
            color: #646a73;
          }
        }
      }
      .img_con {
        width: 403px;
        height: 285px;
        border-radius: 6px;
        overflow: hidden;
        background: url(../../../../../assets/img/recruit/bangonglou.png)
          no-repeat;
        background-size: 100% 100%;
      }
    }
    .has_margin {
      margin-bottom: 56px;
    }
    .has_padding {
      padding-bottom: 37px;
    }
  }
  .bt_wrap {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bt_left {
      display: flex;
      align-items: center;
      white-space: nowrap;
      .one_p {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: 'SourceHanSans';
        font-weight: 400;
        color: #646a73;
        margin-right: 66px;
        .icon1 {
          width: 24px;
          height: 15px;
        }
        .icon2 {
          width: 22px;
          height: 22px;
        }
        .icon3 {
          width: 19px;
          height: 23px;
        }
        .font {
          margin-left: 14px;
        }
      }
    }
    .more_btn {
      width: 120px;
      height: 30px;
      border: 1px solid #646a73;
      border-radius: 15px;
      font-size: 16px;
      font-family: 'SourceHanSans';
      font-weight: 400;
      color: #646a73;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition-property: all;
      transition-duration: 0.7s;
      animation-fill-mode: forwards;
      .icon {
        width: 5px;
        height: 10px;
        margin-left: 13px;
      }
    }
    .more_btn:hover {
      background: $theme_color;
      color: #fff;
    }
  }
}
</style>