招聘会样式调整

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="content">
+	<div class="content" :class="{'px-3': isMobile}" :style="{'grid-template-columns': `repeat(${isMobile ? 1 : 2}, 1fr)`}">
 		<v-hover v-slot="{ isHovering, props }" v-for="val in list" :key="val.id">
 			<v-card v-bind="props" :elevation="isHovering ? 10 : 5" class="cursor-pointer" @click="handleClickEnterprise(val.id)">
 				<div class="d-flex pa-4 pb-2">
@@ -30,11 +30,11 @@
 <script setup>
 defineOptions({ name: 'EntCard' })
 import { formatName } from '@/utils/getText'
-// import { jumpToEnterpriseDetail } from '@/utils/position'
 
 const props = defineProps({
 	list: Array,
-	jobFairId: String
+	jobFairId: String,
+	isMobile: Boolean
 })
 
 const handleClickEnterprise = (id) => {
@@ -45,7 +45,6 @@ const handleClickEnterprise = (id) => {
 <style scoped lang="scss">
 .content {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
   gap: 24px;
   min-height: auto;
 }

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="content">
+	<div class="content" :class="{'px-3': isMobile}" :style="{'grid-template-columns': `repeat(${isMobile ? 1 : 2}, 1fr)`}">
 		<v-hover v-slot="{ isHovering, props }" v-for="val in list" :key="val.id">
 			<v-card  class="cursor-pointer pa-4" v-bind="props" :elevation="isHovering ? 10 : 5" >
 				<div @click="handleClick(val.id)">
@@ -21,12 +21,11 @@
 								</span>
 							</span>
 						</div>
-						<div class="font-size-14 color-999">{{ timesTampChange(val.updateTime) }} 刷新</div>
 					</div>
 				</div>
 				<v-divider class="mt-3" />
 				<!-- 企业信息 -->
-				<div class="d-flex align-center pt-4" @click="jumpToEnterpriseDetail(val.enterprise.id, true)">
+				<div class="d-flex align-center pt-4" @click="handleClickEnterprise(val.enterprise.id)">
 					<img :src="val.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" style="width: 60px; height: 60px; border-radius: 4px;border: 1px solid #ccc;" />
 					<div class="ml-3" style="flex: 1;">
 						<h3 v-ellipse-tooltip class="font-weight-medium enterprise-name" style="max-width: 480px;">{{ formatName(val.enterprise.anotherName || val.enterprise.name) }}</h3>
@@ -45,12 +44,13 @@
 <script setup>
 defineOptions({ name: 'jobCard' })
 import { formatName } from '@/utils/getText'
-import { timesTampChange } from '@/utils/date'
 import { jumpToEnterpriseDetail } from '@/utils/position'
+import Snackbar from '@/plugins/snackbar'
 
 const props = defineProps({
 	list: Array,
-	jobFairId: [String, Number]
+	jobFairId: [String, Number],
+	isMobile: Boolean
 })
 
 // 城市、学历、工作经验
@@ -62,14 +62,19 @@ const desc = [
 
 // 跳转职位详情
 const handleClick = (id) => {
+	if (props.isMobile) return Snackbar.warning('请复制链接后在电脑端查看职位详情')
 	window.open(`/recruit/personal/position/details/${id}?jobFairId=${props.jobFairId}`)
 }
+
+const handleClickEnterprise = (id) => {
+	if (props.isMobile) return Snackbar.warning('请复制链接后在电脑端查看企业招聘职位')
+	jumpToEnterpriseDetail(id, true)
+}
 </script>
 
 <style scoped lang="scss">
 .content {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
   gap: 24px;
   min-height: auto;
 }

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

@@ -10,11 +10,11 @@
 
     <!-- <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0 ? 'calc(100vh - 500px)' : '100vh'}"> -->
     <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': '100vh'}">
-      <div class="default-width">
-        <h2 class="color-white pt-5 enterpriseName">{{ enterpriseName }}</h2>
+      <div :class="{'default-width': !isMobile}">
+        <h2 class="color-white pt-5 enterpriseName" :class="{'ml-3': isMobile}">{{ enterpriseName }}</h2>
         <div v-if="!items.length" class="emptyText">{{ loadingType === 1 ? loadingText[loadingType] : '暂无数据，去看看其他吧~' }}</div>
         <template v-else>
-          <JobCard :jobFairId="jobFair?.id" :list="items" class="pt-5" />
+          <JobCard :jobFairId="jobFair?.id" :list="items" :isMobile="isMobile" class="pt-5" />
           <div :class="['loading', {'loadMoreText': !loadingType}]" class="pb-5" @click="handleChangePage">{{ loadingText[loadingType] }}</div>
         </template>
       </div>
@@ -24,7 +24,7 @@
 
 <script setup>
 defineOptions({name: 'jobFair-enterprises-job-card'})
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { getJobFair, getJobFairEntJobPage } from '@/api/recruit/personal/jobFair'
 import JobCard from './components/jobCard1.vue'
 import { useRoute } from 'vue-router'; const route = useRoute();
@@ -39,6 +39,12 @@ const query = reactive({
   enterpriseId: route.query.enterpriseId
 })
 
+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)
+})
+
 const items = ref([])
 const loadingText = ['点击加载更多', '加载中...', '']
 const loadingType = ref(0)

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

@@ -2,21 +2,26 @@
 <template>
   <div>
     <!-- 轮播 -->
-    <v-carousel v-if="jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0" :show-arrows="jobFair?.pcHeadImg.length > 1 ? 'hover' : false" cycle :hide-delimiters="true" style="height: 500px;">
+    <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 :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0 ? 'calc(100vh - 500px)' : '100vh'}">
-      <div class="default-width">
+    <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0 ? `calc(100vh - ${isMobile ? '200px' : '500px'})` : '100vh'}">
+      <div :class="{'default-width': !isMobile}">
         <!-- 类别展示 -->
-        <div class="d-flex align-center" v-if="jobFair?.tag && jobFair.tag.length">
+        <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" 
-            class="tag-item" 
-            :class="{'tag-active': index === tab}" 
+            class="tag-item"
+            :class="[{'tag-active': index === tab}, {'mx-5': isMobile}]" 
             :style="{'width': `calc(100% / ${jobFair.tag.length} )`}"
             @click.stop="handleTabClick(index)"
           >
@@ -26,8 +31,8 @@
 
         <div v-if="!items.length" class="emptyText">{{ loadingType === 1 ? loadingText[loadingType] : '暂无数据，去看看其他吧~' }}</div>
         <template v-else>
-          <EntCard v-if="jobFair?.category === '0'" :jobFairId="jobFair?.id" :list="items" class="mt-5" />
-          <JobCard v-if="jobFair?.category === '1'" :jobFairId="jobFair?.id" :list="items" class="mt-5" />
+          <EntCard v-if="jobFair?.category === '0'" :jobFairId="jobFair?.id" :list="items" :isMobile="isMobile" class="mt-5" />
+          <JobCard v-if="jobFair?.category === '1'" :jobFairId="jobFair?.id" :list="items" :isMobile="isMobile" class="mt-5" />
           <div :class="['loading', {'loadMoreText': !loadingType}]" class="pb-5" @click="handleChangePage">{{ loadingText[loadingType] }}</div>
         </template>
       </div>
@@ -37,7 +42,7 @@
 
 <script setup>
 defineOptions({name: 'jobFair-enterprises'})
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { getJobFairEnterprisePage, getJobFair, getJobFairEntJobPage } from '@/api/recruit/personal/jobFair'
 import EntCard from './components/entCard1.vue'
 import JobCard from './components/jobCard1.vue'
@@ -51,6 +56,12 @@ const query = reactive({
 	jobFairId: route.params.id
 })
 
+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)
+})
+
 const items = ref([])
 const loadingText = ['点击加载更多', '加载中...', '']
 const loadingType = ref(0)
@@ -124,6 +135,7 @@ const handleChangePage = () => {
   line-height: 74px;
   opacity: .8;
   cursor: pointer;
+  text-wrap: nowrap;
 }
 .tag-active {
   opacity: 1;