<template>
	<div class="article-box" @click="handleClick">
		<div class="line"></div>
		<div style="gap: 20px" class="flex">
			<div class="preview-box">
				<img :src="item.coverImage || ''" alt="" >
			</div>
			<div class="content flex flex-col justify-between">
				<div class="description">{{ item.summary || '' }}</div>
				<div class="flex items-center" style="gap: 6px">
					<img src="/ToolDetail/icon_clock1.png" alt="" />
					<div class="time">{{ item.publishTime || '' }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	methods: {
		handleClick() {
			this.$emit('refresh', this.item);
		}
	},
}
</script>

<style scoped lang="scss">
.article-box {
	cursor: pointer;
	&:active {
		opacity: 0.8;
	}
	.preview-box {
		width: 104px;
		height: 104px;
		border-radius: 6px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.content {
		height: 104px;
		flex: 1;
		.description {
			color: #1E293B;
			font-family: 'Poppins-Medium', serif;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		img {
			width: 16px;
			height: 16px;
		}
		.time {
			color: #869EC2;
			font-family: 'Poppins-Regular', serif;
			font-size: 14px;
			line-height: 16px;
		}
	}
}
</style>
