JianjianStreet-H5/components/new-card/index.vue

<template>
	<view class="new-card flex justify-between" @click="seeDetail">
		<view class="new-card-l flex flex-column justify-between">
			<view class="title">{{item.title}}</view>
			<view>{{item.createTime}}</view>
		</view>
		<view class="new-card-r">
			<u--image :showLoading="true" :src="item.photo" width="216rpx" height="216rpx"></u--image>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			seeDetail(){
				this.$emit('seeDetail',this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.new-card {
		//border-bottom: 1px solid #C8C8C8;
		margin-bottom: 24rpx;
		background-color: #FFFFFF;
		
		.new-card-l {
			font-size: 28rpx;
			color: #C8C8C8;
			padding: 16rpx 16rpx;
			
			.title {
				font-size: 32rpx;
				color: #000000;
				line-height: 40rpx;
				font-weight: 600;
				overflow: hidden; 
				display: -webkit-box;    
				-webkit-box-orient: vertical;    
				-webkit-line-clamp: 2;    
				font-family: SimSun;
			}
		}
		
		.new-card-r{
			uni-image>img {
				border-top-right-radius: 4rpx;
				border-bottom-right-radius: 4rpx;
			}
		}
	}
</style>