pc-medicine/src/views/Recruit/index.vue

<template>
  <div class="recruit_container">
    <Header :active="true" />
    <div
      class="card"
      @click="showModal(item.id)"
      v-for="item in postList"
      :key="item.id"
    >
      <div class="title">{{ item.postName }}</div>
      <div class="desc_box">
        <p class="desc">
          {{ item.postIntroduce }}
        </p>
        <div class="btn">
          <p class="text">查看详情</p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="20"
            height="4"
            viewBox="0 0 20 4"
          >
            <g>
              <path
                d="M19.9922,3.41357C20.0475,3.71869,19.8013,3.998,19.4754,4L0.524717,4C0.234187,4.00028,-0.00116205,3.77604,0.00000432898,3.50006C0.00000432898,3.2236,0.238414,2.99963,0.524717,2.99963L18.3818,2.99963L16.1219,0.851393C15.9164,0.656325,15.9171,0.339718,16.1235,0.145482C16.3287,-0.0494938,16.6655,-0.0469936,16.8661,0.143982L19.8464,2.97713C19.9717,3.09611,20.0201,3.25959,19.9922,3.41357Z"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
        </div>
      </div>
    </div>
    <PostModal
      :postInfo="postInfo"
      v-if="modalVisible"
      :hiddenDetailModal="hiddenDetailModal"
    />
  </div>
  <Bottom />
</template>

<script setup>
import Header from 'cpns/design/Header'
import Bottom from 'cpns/NewBottomWhite.vue'
import { postList, postDetail } from '@/mock/post'
import { ref } from 'vue'
import PostModal from 'cpns/post/PostModal'

const modalVisible = ref(false)
const postInfo = ref({})

const hiddenDetailModal = () => {
  const rootTag = document.getElementById('iflytop')
  rootTag.style['overflow-y'] = 'scroll'
  rootTag.style['overflow-x'] = 'hidden'
  rootTag.style.height = 'auto'
  postInfo.value = {}
  modalVisible.value = false
}

const showModal = id => {
  const rootTag = document.getElementById('iflytop')
  rootTag.style.overflow = 'hidden'
  rootTag.style.height = '100%'
  postInfo.value = postDetail[id]
  modalVisible.value = true
}
</script>

<style lang="scss" scoped>
.recruit_container {
  background: #f6f6f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px;
  .card {
    width: 80vw;
    cursor: pointer;
    margin-bottom: 40px;
    background: #fff;
    padding: 32px 42px 52px 32px;
    border-radius: 10px;
    .title {
      font-family: Source Han Sans;
      font-size: 36px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0.02em;
      font-feature-settings: 'kern' on;
      color: #000000;
      padding-bottom: 32px;
      border-bottom: 1px solid #d3d3d3;
    }
    .desc_box {
      padding-top: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .desc {
        font-family: Source Han Sans;
        font-size: 18px;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0.04em;
        width: 70%;
        font-feature-settings: 'kern' on;
        color: #d3d3d3;
      }
      .btn {
        padding: 10px 21px;
        display: flex;
        align-items: center;
        border-radius: 383px;
        background: linear-gradient(90deg, #16ddfa 0%, #305efc 100%);
        .text {
          margin-right: 11px;
          font-family: Source Han Sans;
          font-size: 16px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0.04em;
          font-feature-settings: 'kern' on;
          color: #ffffff;
        }
      }
    }
    &:hover {
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
    }
  }
}
</style>