推荐职位预览

src/components/Position/item.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="d-flex">
     <div class="position-box">
-      <div class="sub-li" v-for="(item, index) in props.items" :key="index" :style="{'height': tab === 3 && item.hire ? '180px' : '149px'}">
-        <div class="job-info" @click.stop="handlePosition(item)" @mouseenter="item.active = true" @mouseleave="item.active = false">
+      <div class="sub-li" v-for="(item, index) in props.items" :key="index" 
+      :style="{'height': tab === 3 && item.hire ? '180px' : '149px'}" 
+      @click.stop="handlePosition(item)" @mouseenter="item.active = true" @mouseleave="item.active = false">
+        <div class="job-info">
           <div class="sub-li-top">
             <div class="sub-li-info">
               <p :class="['name', {'default-active': item.active }]">{{ formatName(item.name) }}</p>

src/components/PreviewImg/previewImage.vue

@@ -19,7 +19,7 @@
         </i>
       </span>
       <!-- ARROW -->
-      <template v-if="!isSingle">
+      <template v-if="urlList.length > 1">
         <span
           class="el-image-viewer__btn el-image-viewer__prev"
           :class="{ 'is-disabled': !infinite && isFirst }"

src/components/headSearch/index.vue

@@ -37,8 +37,9 @@
         @click:clear="handleSearch"
         @keyup.enter="handleSearch"
       ></v-text-field>
-      <!-- <div class="searchBtn" @click="handleSearch">搜索</div> -->
-      <v-btn class="searchBtn" @click="handleSearch">搜索</v-btn>
+      <v-hover v-slot="{ isHovering, props }">
+        <v-btn v-bind="props" v-ripple.center class="searchBtn" @click="handleSearch" :class="isHovering ? 'elevation-10' : 'elevation-5'">搜索</v-btn>
+      </v-hover>
     </div>
   </div>
 </template>

src/views/recruit/personal/home/components/hotPromotedPositions.vue

@@ -11,14 +11,16 @@
       <v-tab :value="2">{{ $t('position.latest') }}</v-tab>
       <v-tab :value="3">{{ $t('position.hire') }}</v-tab>
     </v-tabs>
-    <v-window v-model="tab" class="pt-5">
+    <v-window v-model="tab" class="pt-5 px-2">
       <v-window-item v-for="v in 3" :value="v" :key="v">
         <PositionCard v-if="items.filter(Boolean) && items.length" :isOpenWindow="false" :items="items" :tab="tab" @position="handlePosition"></PositionCard>
         <Empty v-else class="mb-3" :elevation="false"></Empty>
       </v-window-item>
     </v-window>
     <div class="text-center mt-5" style="border-top: 1px solid #ccc; padding-top: 30px;">
-      <v-btn class="buttons btnColor" elevation="5" @click.stop="handleToMore">{{ $t('position.moreBtn') }}</v-btn>
+      <v-hover v-slot="{ isHovering, props }">
+        <v-btn v-bind="props" v-ripple.center class="buttons btnColor" :class="isHovering ? 'elevation-10' : 'elevation-5'" @click.stop="handleToMore">{{ $t('position.moreBtn') }}</v-btn>
+      </v-hover>
     </div>
   </div>
 </template>

src/views/recruit/personal/home/components/popularEnterprises.vue

@@ -9,7 +9,9 @@
     <HotPromoted v-if="items.length" class="mt-5" :items="items"></HotPromoted>
     <Empty v-else :elevation="false" class="mt-3" message="暂无精选企业"></Empty>
     <div v-if="items.length" class="text-center">
-      <v-btn class="buttons btnColor" elevation="5" color="primary" @click.stop="handleToMore">{{ $t('enterprise.moreBtn') }}</v-btn>
+      <v-hover v-slot="{ isHovering, props }">
+        <v-btn v-bind="props" v-ripple.center class="buttons btnColor" :class="isHovering ? 'elevation-10' : 'elevation-5'" @click.stop="handleToMore">{{ $t('enterprise.moreBtn') }}</v-btn>
+      </v-hover>
     </div>
   </div>
 </template>

src/views/recruit/personal/position/components/details.vue

@@ -174,6 +174,7 @@ import { checkPersonBaseInfo } from '@/utils/check'
 import dialogExtend from '@/plugins/dialogExtend'
 import { formatName } from '@/utils/getText'
 
+const emit = defineEmits(['preview'])
 const props = defineProps({
   defaultWidth: {
     type: Boolean,
@@ -191,6 +192,11 @@ const props = defineProps({
     type: [String, Number],
     default: ''
   },
+  // 是否为推荐职位引用
+  isRecommend: {
+    type: Boolean,
+    default: false
+  }
 })
 
 const { t } = useI18n()
@@ -259,6 +265,13 @@ const cleanedHtml = (text) => {
   return cleaned
 }
 
+// 职位详情分享图片下载文件名
+const fileName = computed(() => {
+  const { name, areaName, payFrom, payTo } = info.value
+  const salary = payFrom && payTo ? `${payFrom ? '_' + payFrom + '-' : ''}${payTo}` : '-面议'
+  return `${name}${areaName ? '_' + areaName : ''}${salary}${positionInfo.value.payName ? '-' + positionInfo.value.payName : ''}`
+})
+
 const share = ref()
 // 生成图片
 const generateAndDownloadImage = async () => {
@@ -269,6 +282,10 @@ const generateAndDownloadImage = async () => {
     const image = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
     previewSrc.value = `data:image/png;base64,${image}`
     loading.value = false
+    if (props.isRecommend) {
+      emit('preview', previewSrc.value, fileName.value)
+      return
+    }
     showPreview.value = true
   } catch (error) {
     console.error('Error generating image:', error)
@@ -276,13 +293,6 @@ const generateAndDownloadImage = async () => {
   }
 }
 
-// 职位详情分享图片下载文件名
-const fileName = computed(() => {
-  const { name, areaName, payFrom, payTo } = info.value
-  const salary = payFrom && payTo ? `${payFrom ? '_' + payFrom + '-' : ''}${payTo}` : '-面议'
-  return `${name}${areaName ? '_' + areaName : ''}${salary}${positionInfo.value.payName ? '-' + positionInfo.value.payName : ''}`
-})
-
 // 相似职位
 const similarList = ref([])
 const getSimilarPositionList = async () => {

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

@@ -29,7 +29,7 @@
           <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%;">{{ formatName(info.enterprise?.anotherName || info.enterprise?.name) }}</div>
+          <div class="enterprise-name ml-5" style="width: 65%;">{{ formatName(info.enterprise?.anotherName || info.enterprise?.name) }}</div>
           <div style="flex: 1;" class="text-right enterprise-name">{{ info.areaName }}</div>
         </div>
         <div class="mx-5 mt-3">

src/views/recruit/personal/recommend/index.vue

@@ -18,12 +18,16 @@
               :defaultWidth="false"
               :showContentRight="false"
               :propJobId="jobId"
+              :isRecommend="true"
+              @preview="handlePreview"
             ></positionItemDetail>
           </div>
         </div>
       </div>
     </template>
   </div>
+
+  <PreviewImage v-if="showPreview" :urlList="[previewSrc]" :fileName="fileName" @close="showPreview = !showPreview" />
 </template>
 
 <script setup>
@@ -77,6 +81,17 @@ const handleChangePage = () => {
   getList()
 }
 
+// 分享海报预览
+const showPreview = ref(false)
+const previewSrc = ref('')
+const fileName = ref('')
+const handlePreview = (url, filename) => {
+  if (!url) return Snackbar.warning('海报生成失败，请重新点击分享生成海报')
+  previewSrc.value = url
+  fileName.value = filename
+  showPreview.value = true
+}
+
 </script>
 
 <style scoped lang="scss">