<template>
	<div class="news-item flex rounded-md">
		<div class="bg-gray-400 w-4/12 overflow-hidden relative rounded-md" style="height: 118px">
			<img :src="news.cover" alt="" class="w-full h-full">
		</div>
		<div class="w-8/12 px-4 text-left">
			<div class="text-blue-900 text-16px mb-2 line-clamp-1">{{ news.title }}</div>
			<div class="border-t border-gray-200 mb-2"></div>
			<div class="mb-2 text-14px text-text-color">{{ news.published_time }}</div>
			<div class="line-clamp-2 text-16px text-article-color">
				{{ news.abstract }}
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
	props: {
		news: Object
	}
})
</script>

<style scoped>
	.news-item:hover {
		box-shadow: 0 0 4px 3px #efefef;
	}
</style>