<template>
  <div class="flex justify-between">
    <div class="flex-grow mr-4 flex flex-col items-start justify-between">
      <h4 class="text-16px text-title-color font-semibold  line-clamp-2">{{ item.title }}</h4>
      <div class="w-full pr-1 flex justify-start">
        <span class="inline-block text-xs text-text-color">{{ item.author }}</span>
        <span class="inline-block text-xs text-text-color">{{ item.published_time }}</span>
      </div>
    </div>
    <div class="m-news-cover flex-shrink-0 overflow-hidden rounded-sm" :style="{'backgroundImage': `url(${item.cover})`}">
      <!-- <img :src="item.cover" class="w-full h-full" alt=""> -->
    </div>
  </div>
</template>

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

<style scoped>
  .m-news-cover {
		width: 114px;
		height: 75px;
    background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
</style>