AIProd/pages/Launches/components/ListItem.vue

<template>
	<div class="item-content flex justify-between" @click="handleClick">
		<div class="left-content flex flex-1 items-center">
			<div class="order-num">{{ sortIndex }}</div>
			<div class="preview-box">
				<img :src="config.coverImage || ''" alt="" />
			</div>
			<div class="tool-content flex flex-col justify-between">
				<div class="content-top flex items-start">
					<div class="icon">
						<img src="/" alt="" />
					</div>
					<div class="flex-1">
						<div class="title">{{ config.title || '' }}</div>
						<div class="sub-title" style="padding-right: 30px">{{ config.summary || '' }}</div>
					</div>
				</div>
				<div class="content-bottom flex items-center">
					<img src="/launches/item/icon_clock.png" alt="" />
					<div class="time-style">{{ config.publishTime || '' }}</div>
				</div>
			</div>
		</div>
		<div class="right-content flex">
			<div class="flex items-center">
				<img :src="hovered ? '/launches/item/icon_thumb_grey.png' : '/launches/item/icon_thumb.png'" alt="" />
				<div :class="{ 'hover-text': hovered }">{{ config.likeCount || 0 }}</div>
			</div>
			<div class="flex items-center">
				<img :src="hovered ? '/launches/item/icon_star_grey.png' : '/launches/item/icon_star.png'" alt="" />
				<div :class="{ 'hover-text': hovered }">{{ config.rating || 0 }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			hovered: false
		}
	},
	props: {
		sortIndex: {
			type: Number,
			default: 1,
		},
		config: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	methods: {
		handleMouseEnter() {
			this.hovered = true;
		},
		handleMouseLeave() {
			this.hovered = false;
		},
		// 跳转详情页
		handleClick() {
			if (!this.config.slug) {
				return false;
			}
			this.articleClick(this.config.id);
			this.$router.push({
				path: '/launches/detail',
				query: {
					news_slug: this.config.slug || '',
				}
			});
		},
		// 记录文章点击数
		async articleClick(id) {
			if (id) {
				await this.$api.article.recordArticleClick(id);
			}
		}
	},
	mounted() {
		const itemContent = this.$el;
		itemContent.addEventListener('mouseenter', this.handleMouseEnter);
		itemContent.addEventListener('mouseleave', this.handleMouseLeave);
	},
	beforeDestroy() {
		const itemContent = this.$el;
		itemContent.removeEventListener('mouseenter', this.handleMouseEnter);
		itemContent.removeEventListener('mouseleave', this.handleMouseLeave);
	}
}
</script>

<style scoped lang="scss">
.item-content {
	border-radius: 12px;
	padding: 30px 20px;
	transition: background-color 0.3s ease;

	&:hover {
		background-color: #F5F4FF;

		.order-num {
			background: #fff;
		}
	}

	.left-content {
		gap: 30px;
		.order-num {
			width: 36px;
			height: 36px;
			border-radius: 12px;
			background: #F5F4FF;
			margin-right: 10px;
			text-align: center;
			line-height: 36px;
			font-size: 18px;
			font-family: 'Poppins-Regular', serif;
			transition: background-color 0.3s ease;
		}
		.preview-box {
			width: 228px;
			height: 133px;
			border-radius: 6px;
			background-color: #FFFFFF;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.tool-content {
			height: 100%;
			.content-top  {
				.icon {
					width: 46px;
					height: 46px;
					margin-right: 10px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.title {
					font-size: 20px;
					font-family: 'Poppins-SemiBold', serif;
					font-weight: 600;
					line-height: 24px;
					color: #3A4A65;
				}
				.sub-title {
					color: #64748B;
					font-family: 'Poppins-Regular', serif;
					margin-top: 10px;
				}
			}
			.content-bottom {
				gap: 12px;
				img {
					width: 24px;
					height: 24px;
				}
				.time-style {
					color: #64748B;
					font-family: 'Poppins-Regular', serif;
				}
			}
		}
	}
	.right-content {
		padding-right: 23px;
		gap: 33px;
		font-family: 'Poppins-Regular', serif;
		color: #E2E8F0;
		height: 24px;
		img {
			width: 24px;
			height: 24px;
			margin-right: 12px;
		}
		.hover-text {
			color: #64748B;
		}
	}
}
</style>