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

<template>
	<v-hover v-slot="{ isHovering, props }" v-for="(val, index) in list" :key="val.id">
		<v-card v-bind="props" :elevation="isHovering ? 10 : 5" class="cursor-pointer mb-3" :class="{'active': chosenIndex === index}" width="500" @click="handleClickEnterprise(val, index)">
			<div class="d-flex pa-4 pb-2">
				<img :src="val.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" style="width: 80px; height: 80px; border-radius: 4px;" />
				<div style="max-width: 390px;">
					<h3 v-ellipse-tooltip class="enterprise-name ml-3">{{ formatName(val.anotherName || val.name) }}</h3>
					<p class="font-size-14 color-666 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" variant="flat" color="primary" size="small">
							{{ welfare }}
						</v-chip>
					</div>
				</div>
			</div>
			<div class="card-bottom">{{ val.jobCount }}个在线职位招聘中</div>
		</v-card>
	</v-hover>
</template>

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

const emit = defineEmits(['selectChange'])
defineProps({
	list: Array
})

const chosenIndex = ref(0)

const handleClickEnterprise = (val, index) => {
	chosenIndex.value = index
	emit('selectChange', val)
}
</script>

<style scoped lang="scss">
.card-bottom {
	height: 40px;
	line-height: 40px;
	color: #fff;
	text-align: center;
	font-size: 15px;
	background: linear-gradient(to right, #12ebb0, #427daa);
}

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