yixiang/components/wenzhang-info/index.vue

<template>
	<view class="wenzhang-info hflex acenter" @click="toinfo">
		<image :src="data.image" mode="aspectFill"></image>
		<view class="vflex jbetween img-right">
			<text class="text_hide2">{{data.title}}</text>
			<view class="hflex acenter bottom">
				<text>{{data.published_at}}</text>
				<text>{{data.collect_count || 0}}喜欢</text>
				<text style="padding: 0 8rpx 0 0;">·</text>
				<text>{{data.comment_count || 0}}评论</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				typeof: Object,
				default: {}
			},
			type: {
				typeof: String,
				default: ''
			}
		},
		data() {
			return {}
		},
		methods: {
			toinfo() {
				uni.navigateTo({
					url: '/pageA/info-detail?id=' + this.data.id + '&type=' + this.type
				})
			}
		},
	}
</script>

<style lang="scss">
	.wenzhang-info {
		margin-bottom: 20rpx;
		image {
			width: 192rpx;
			height: 108rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
		.img-right {
			width: calc(100% - 212rpx);
			height: 108rpx;
			text {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
			}
			.bottom {
				text {
					font-size: 22rpx;
					font-family: SFPro, SFPro;
					font-weight: 400;
					color: #666666;
					padding-right: 16rpx;
				}
			}
		}
	}
	.wenzhang-info::last-child {
		margin: 0;
	}
</style>