招聘会调整

src/views/recruit/enterprise/jobFair/job/item.vue

@@ -5,6 +5,7 @@
         <div class="d-flex justify-space-between" style="padding: 10px 20px;">
           <div class="position">
             <div class="d-flex align-center">
+              <svg-icon name="jobFair" class="mr-1" size="25"></svg-icon>
               <span class="position-name">{{ formatName(val.name) }}</span>
             </div>
             <div class="mt-3 other-info">

src/views/recruit/personal/jobFair/details/components/jobCard1.vue

@@ -5,6 +5,7 @@
 				<div @click="handleClick(val.id)">
 					<div class="d-flex justify-space-between">
 						<div class="d-flex align-center">
+							<svg-icon name="jobFair" class="mr-1" size="25"></svg-icon>
 							<p class="job-name font-weight-medium" v-ellipse-tooltip>{{ formatName(val.name) }}</p>
 						</div>
 						<p v-if="!val.payFrom && !val.payTo" class="salary">面议</p>

src/views/recruit/personal/jobFair/details/entJobCard.vue

@@ -2,7 +2,9 @@
 <template>
   <div class="position-relative">
     <div v-if="jobFair?.contentImg" class="position-fixed" style="right: 24px; top: 20px; z-index: 999">
-      <v-btn icon="mdi-share-all" color="primary" size="x-large" @click.stop="handleShare"></v-btn>
+      <div class="cursor-pointer pa-2 white-bgc" style="border-radius: 8px;" @click.stop="handleShare">
+        <v-icon color="primary" size="50">mdi-share</v-icon>
+      </div>
     </div>
 
     <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': '100vh'}" class="pt-10">

src/views/recruit/personal/jobFair/details/enterprises.vue

@@ -1,28 +1,38 @@
 <!-- 企业 -->
 <template>
   <div class="position-relative">
-    <!-- 轮播 -->
-    <v-carousel 
-      v-if="jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0" 
-      :show-arrows="jobFair?.pcHeadImg.length > 1 ? 'hover' : false" 
-      cycle :hide-delimiters="true" 
-      :style="{'height': isMobile ? '200px' : '500px'}"
-    >
-			<v-carousel-item v-for="(k, i) in jobFair?.pcHeadImg" :key="i">
-				<img :src="k" :lazy-src="k" style="width: 100%; height:100%;">
-			</v-carousel-item>
-		</v-carousel>
-
     <!-- 招聘会分享按钮 -->
     <div v-if="jobFair?.shareImg" class="position-fixed" style="right: 24px; top: 20px; z-index: 999;">
-      <v-btn icon="mdi-share-all" color="primary" size="x-large" @click.stop="handleShare"></v-btn>
+      <div class="cursor-pointer pa-2 white-bgc" style="border-radius: 8px;" @click.stop="handleShare">
+        <v-icon color="primary" size="50">mdi-share</v-icon>
+      </div>
     </div>
 
-    <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0 ? `calc(100vh - ${isMobile ? '200px' : '500px'})` : '100vh'}">
+    <div ref="observedElement">
+      <!-- 轮播 -->
+      <v-carousel
+        v-if="jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0" 
+        :show-arrows="jobFair?.pcHeadImg.length > 1 ? 'hover' : false" 
+        cycle :hide-delimiters="true" 
+        style="height: auto;"
+        :style="{'max-height': isMobile ? '200px' : '553px'}"
+      >
+          <v-carousel-item v-for="(k, i) in jobFair?.pcHeadImg" :key="i">
+            <img :src="k" :lazy-src="k" style="width: 100%; height:100%;">
+          </v-carousel-item>
+      </v-carousel>
+    </div>
+
+
+    <div
+      :style="{
+        'background-color': jobFair.backgroundColour || '#fff', 
+        'min-height': jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0 ? `calc(100vh - ${carouselHeight}px)` : '100vh'
+      }">
       <div :class="{'default-width': !isMobile}">
-        <SearchBar class="pt-5" v-model="query.keyword" :isMobile="isMobile" placeholder="搜索关键字" @handleSearch="handleSearch" />
+        <SearchBar class="py-5" v-model="query.keyword" :isMobile="isMobile" placeholder="搜索关键字" @handleSearch="handleSearch" />
         <!-- 类别展示 -->
-        <div class="d-flex align-center" v-if="jobFair?.tag && jobFair.tag.length" style="overflow-x: auto;">
+        <!-- <div class="d-flex align-center" v-if="jobFair?.tag && jobFair.tag.length" style="overflow-x: auto;">
           <div 
             v-for="(val, index) in jobFair.tag" 
             :key="index" 
@@ -33,12 +43,18 @@
           >
             {{ val.title }}
           </div>
-        </div>
-
-        <div 
-          v-if="!items.length" 
-          class="text-center" 
-          :style="{'color': jobFair.backgroundColour ? '#fff' : 'var(--v-primary-base)', 'height': `calc(100vh - ${jobFair?.tag && jobFair.tag.length ? '574px': '500px'})`, 'line-height': `calc(100vh - ${jobFair?.tag && jobFair.tag.length ? '574px': '500px'})`}"
+        </div> -->
+        <v-tabs v-model="tab" align-tabs="center" v-if="jobFair?.tag && jobFair.tag.length">
+          <v-tab v-for="(k, i) in jobFair.tag" class="tab-item" :key="i" :value="k.value" @click="handleTabClick(i)">{{ k.title }}</v-tab>
+        </v-tabs>
+        <div
+          v-if="!items.length"
+          class="text-center"
+          :style="{
+            'color': jobFair.backgroundColour ? '#fff' : 'var(--v-primary-base)', 
+            'height':  `calc(100vh - ${carouselHeight}px)`, 
+            'line-height': `calc(100vh - ${carouselHeight}px)`
+          }"
         >
           {{ loadingType === 1 ? loadingText[loadingType] : '暂无数据，去看看其他吧~' }}
         </div>
@@ -70,7 +86,7 @@
 
 <script setup>
 defineOptions({name: 'jobFair-enterprises'})
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { getJobFairEnterprisePage, getJobFair, getJobFairEntJobPage, saveShareQuery } from '@/api/recruit/personal/jobFair'
 import EntCard from './components/entCard1.vue'
 import JobCard from './components/jobCard1.vue'
@@ -94,10 +110,33 @@ const previewSrc = ref('')
 const canvasWidth = 500
 const canvasHeight = 900
 
+const observedElement = ref(null)
+let resizeObserver
+const carouselHeight = ref(0)
+
+const handleResize = (entries) => {
+  for (let entry of entries) {
+    if (entry.target === observedElement.value) {
+      carouselHeight.value = entry.contentRect.height
+    }
+  }
+}
+
 const isMobile = ref(false)
 onMounted(() => {
   const userAgent = navigator.userAgent
   isMobile.value = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(userAgent)
+  if (observedElement.value) {
+    resizeObserver = new ResizeObserver(handleResize)
+    resizeObserver.observe(observedElement.value)
+  }
+})
+
+onUnmounted(() => {
+  if (resizeObserver && observedElement.value instanceof Element) {
+    resizeObserver.unobserve(observedElement.value)
+  }
+  resizeObserver.disconnect()
 })
 
 const items = ref([])
@@ -233,6 +272,16 @@ const handleShare = () => {
 </script>
 
 <style scoped lang="scss">
+.tab-item {
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #fff;
+  padding: 10px 25px;
+}
+:deep(.v-tab__slider) {
+  height: 4px;
+  border-radius: 2px;
+}
 .tag-item {
   font-weight: 700;
   font-size: 24px;