<template>
	<view class="wrapper" @click="toDetail(article)">
		<view class="img">		
			<image :src="article.litpic"></image>
		</view>
		<view class="right">
			<view class="title">{{article.title}}</view>
			<view class="info">{{article.description ? article.description : ''}}</view>
		</view>
		<view class="fav" v-if="article.asdArticleFavoriteList&&article.asdArticleFavoriteList.length > 0">
			<u-icon slot="icon" size="20" name="star-fill" color="#FFA521"></u-icon>
			<text>已收藏</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['article'],
		data() {
			return {

			}
		},
		methods: {
			toDetail(article) {
				uni.navigateTo({
					url: '/homePackage/pages/newsDetail?id=' + article.id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.wrapper {
		line-height: 20px;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		padding: 20rpx;
		display: flex;
		// justify-content: space-between;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 16rpx 2rpx #E4E4E4;
		margin-bottom: 16rpx;
		position: relative;

		.img {
			width: 112px;
			height: 90px;
			border-radius: 6px;

			image {
				width: 100%;
				height: 100%;
				border-radius: 6px;
				
			}
		}

		.right {
			width: 60%;
			margin-left: 20rpx;

			.title {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: left;
				font-weight: bold;
			}

			.info {
				margin-top: 30rpx;
				color: rgba(140, 139, 139, 1);
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: left;
			}
		}

		.fav {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #101010;
			}
		}
	}
</style>