<template>
	<div class="news-item flex rounded-md relative p-2">
		<div class="bg-gray-400 overflow-hidden relative rounded-md news-cover" :style="{'backgroundImage': `url(${news.cover})`}">
			<!-- <img :src="news.cover" alt="" class="news-cover"> -->
		</div>
		<div class="w-8/12 px-4 py-1.5 text-left">
			<div class="text-blue-900 text-18px mb-4 line-clamp-1 font-semibold">{{ 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-14px 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 {
		width: 553px;
		height: 152px;
	}
	.news-item:hover {
		box-shadow: 0px 0px 20px 0px rgba(37, 69, 203, 0.1);
	}
	.news-cover {
		width: 240px;
		height: 136px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.news-block {
		z-index: -1;
		opacity: 0;
	}
	.news-block:hover {
		opacity: 1;
		transform-origin: center center;
	}
</style>