<template>
  <div class="m-layout" v-if="item" @click.stop>
    <h2 class="title">{{item.name||''}}</h2>
    <div class="desc">
      <p><span>职位类别</span>{{item.type}}</p>
      <p><span>工作地点</span>{{item.address}}</p>
      <p><span>招聘人数</span>{{item.count}}</p>
      <p><span>发布时间</span>{{item.date}}</p>
    </div>
    <div class="body">
      <div>
        <span>职位描述</span>
        <p v-html="item.desc"></p>
      </div>
      <div>
        <span>任职要求</span>
        <p v-html="item.req"></p>
      </div>
      <div v-if="item.bonus">
        <span>【加分项】</span>
        <p v-html="item.bonus"></p>
      </div>
      <div>
        <p>简历投递邮箱：rs@4dage.com（邮件主题：姓名+应聘岗位）</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style scoped>
.m-layout {
  position: absolute;
  max-width: 980px;
  background-color: #fff;
  width: 100%;
  width: calc(100% - 40px);
  padding: 20px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: border-box;
}

.m-layout span {
  font-weight: 700;
  font-size: 12px;
  color: rgb(86,86,86)
}

.m-layout p {
  font-size: 12px;
  color: rgb(86,86,86);
  line-height: 30px;
}

.desc {
  overflow: hidden;
  margin-bottom: 10px;
}

.desc p {
  float: left;
  margin-right: 10px;
}

.desc p span::after {
  content: ':';
  margin: 0 5px;
}

.title {
  color: #e8383d;
  font-size: 20px;
  margin-bottom: 20px;
}

.body {
  border-top: 1px solid rgb(221,221,221);
}

.body > div {
  margin-top: 25px;
}

@media screen and (max-width: 500px) {
  .m-layout span {
    display: none;
  }

  .body > div {
    margin-top: 15px;
  }

  .m-layout {
    max-height: 70%;
    overflow-y: scroll;
  }
}
</style>
