luoyang-uniapp-app/pages/tabbar/index/comp/informaItem.vue

<template>
	<view class="flex-b">
		<view class="imgBox">
			<image :src="item.picture" mode="aspectFill"></image>
		</view>
		<view class="rightText">
			<view class="text towRowText">{{ item.title }}item.titleitem.titleitem.titleitem.titleitem.titleitem.titleitem.title</view>
			<view class="date">{{ $u.timeFormat(item.createTime, 'yyyy/mm/dd') }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {
						picture: require('@/static/images/index/img_7@2x.png'),
						title: '测试数据',
						createTime: new Date()*1
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex-b {
		justify-content: flex-start !important;
		padding-top: 30rpx;
		.imgBox {
			width: 200rpx;
			height: 135rpx;
			background: linear-gradient(180deg, rgba(0, 122, 255, 0.5) 0%, #007AFF 100%);
			border-radius: 20rpx;
			overflow: hidden;
		}
	
		.rightText {
			flex: 1;
			width: 0;
			padding: 0rpx 0 0rpx 30rpx;
			height: 168rpx;
			box-sizing: content;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-bottom: 1px solid #F4F4F4;
			.text {
				font-size: 28rpx;
				color: #333;
				min-height: 62rpx;
				margin-top: 6rpx;
			}
	
			.date {
				font-size: 20rpx;
				color: #686B73;
				margin-bottom: 30rpx;
			}
		}
	}
</style>