menduner/src/views/recruit/personal/position/components/poster.vue

<!-- 分享职位 -->
<template>
  <div style="background-color: #03877a;">
    <v-card class="pa-5" style="box-sizing: border-box; margin: 0 auto;width: 740px;background-color: #03877a;">
      <div v-if="!Object.keys(info).length">加载失败</div>
      <div v-else>
        <!-- 职位名称+薪资 -->
        <div class="d-flex justify-space-between mx-5">
          <h2 class="JobName ellipsis">{{ info.name }}</h2>
          <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
        </div>
        <!-- 地区、工作经验、学历 -->
        <div class="d-flex justify-space-between mx-5">
          <div class="banner-tags">
            <div v-for="(k, i) in desc" :key="k.mdi">
              <span>{{ positionInfo[k.value] }}</span>
              <span v-if="i !== desc.length - 1 && positionInfo[k.value]" class="septal-line"></span>
            </div>
          </div>
        </div>
        <!-- 企业信息 -->
        <div class="radius pa-3 mx-5 mt-5 d-flex align-center" style="background-color: #5baea6;">
          <v-avatar style="border: 2px solid #fff;" size="68">
            <img crossOrigin="anonymous" :src="info.enterprise.logoUrl" alt="" style="width: 68px; height: 68px;">
          </v-avatar>
          <div class="enterprise-name ml-5 ellipsis" style="width: 65%;">{{ info.enterprise?.name }}</div>
          <div style="flex: 1;" class="text-right enterprise-name">{{ info.areaName }}</div>
        </div>
        <div class="mx-5 mt-3">
          <span :class="['tag', 'mb-1', { 'mr-5': i !== info.enterprise.welfareList.length - 1}]" v-for="(k, i) in info.enterprise.welfareList" :key="i">{{ k }}</span>
        </div>
        <!-- 岗位职责、岗位要求、二维码 -->
        <div class="white-bgc pa-5 mt-5 radius" style="position: relative;">
          <div v-if="info.content" class="resume-box pa-0 mb-5">
            <div class="resume-header">
              <div class="introduce-title">{{ $t('position.jobResponsibilities') }}</div>
            </div>
            <div class="requirement" v-html="info.content?.replace(/\n/g, '</br>')"></div>
          </div>

          <div v-if="info.requirement" class="resume-box pa-0">
            <div class="resume-header">
              <div class="introduce-title">{{ $t('position.jobRequirements') }}</div>
            </div>
            <div class="requirement" v-html="info.requirement?.replace(/\n/g, '</br>')"></div>
          </div>

          <div class="px-5 py-3 d-flex justify-space-evenly align-center mt-10 radius" style="background-color: #e3f2f0">
            <QrCode :text="shareUrlTxt" :width="120" />
            <div style="color: #333;" class="text-center">
              长 按 识 别 二 维 码
              <div style="color: #6A6A6A">了 解 更 多 职 位 信 息</div>
            </div>
          </div>
         </div>
         <!-- logo -->
         <div class="mt-5 text-center">
            <img crossOrigin="anonymous" src="https://minio.citupro.com/dev/menduner/poster.png" alt="" style="width: 130px; height: 50px;">
         </div>
      </div>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({name: 'recruit-personal-shareJob-index'})

// 职位详情
defineProps({
  info: Object,
  positionInfo: Object
})

import { useRouter } from 'vue-router'; const router = useRouter()
const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
const shareUrlTxt = import.meta.env.VITE_ACCESS_BASE_URL + '/shareJob?' + new URLSearchParams({
  jobId: router.currentRoute.value.params?.id,
  sharedById: userInfo?.id,
}).toString()
console.log('职位分享链接', shareUrlTxt)

const desc = [
  { value: 'areaName' },
  { value: 'expName' },
  { value: 'eduName' }
]
</script>

<style lang="scss" scoped>
.radius { border-radius: 8px; }
.salary {
  color: #E2D665;
  line-height: 41px;
  font-weight: 600;
  font-size: 20px;
  height: auto;
  display: inline-block;
  vertical-align: sub;
}
.JobName {
  color: #fff;
  font-size: 28px;
  margin-right: 30px;
  margin-top: 1px;
  vertical-align: middle;
  flex: 1;
}
.banner-tags { display: flex; flex-wrap: wrap; color: #fff; }
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: #5C5C5C;
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
  margin-top: 15px;
}
.enterprise-name {
  font-size: 20px;
  color: #fff;
  line-height: 28px;
}
.introduce-title {
  font-weight: 600;
  font-size: 24px;
  border-left: 5px solid #00897B;
  padding-left: 12px;
  line-height: 24px;
  color: var(--v-primary-base);
}
:deep(.v-img__img--cover) {
  object-fit: contain !important;
}
.tag {
  display: inline-block;
  color: #fff;
}
</style>