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

<template>
	<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">
					<img :src="val.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" style="width: 100px; height: 100px; border-radius: 4px;border: 1px solid #ccc;" />
					<div style="max-width: 445px;">
						<h3 v-ellipse-tooltip class="enterprise-name ml-3 font-weight-medium">{{ formatName(val.anotherName || val.name) }}</h3>
						<p class="font-size-15 color-999 mt-1 mb-2 ml-3">
							<span>{{ val.industryName }}</span>
							<span class="septal-line" v-if="val.industryName && val.scaleName"></span>
							<span>{{ val.scaleName }}</span>
						</p>
						<div class="flex-nowrap overflow-hidden pl-3" style="height: 35px;">
							<v-chip v-for="(welfare, index) in val.welfareList" :key="index" class="mr-2 mb-4 display-inline-block" color="primary" size="small">
								{{ welfare }}
							</v-chip>
						</div>
					</div>
				</div>
				<div class="card-bottom px-5" @click="handleClickEnterprise(val.id)">
					{{ val.jobCount }}个在线职位招聘中
					<v-icon>mdi-arrow-right-drop-circle-outline</v-icon>
				</div>
			</v-card>
		</v-hover>
	</div>
</template>

<script setup>
defineOptions({ name: 'EntCard' })
import { formatName } from '@/utils/getText'

const props = defineProps({
	list: Array,
	jobFairId: String,
	isMobile: Boolean
})

const handleClickEnterprise = (id) => {
	window.open(`/recruit/personal/jobFair/entPosition/${props.jobFairId}?enterpriseId=${id}`)
}
</script>

<style scoped lang="scss">
.content {
  display: grid;
  gap: 24px;
  min-height: auto;
}
.card-bottom {
	height: 40px;
	line-height: 40px;
	text-align: end;
	font-size: 15px;
	color: var(--v-primary-base);
	background-color: #f5f5f5;
}

.v-card:hover {
	h3 {
		color: var(--v-primary-base);
	}
}
</style>