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

<template>
	<view class="new-card flex justify-between">
		<view style="margin: 10rpx 24rpx; display: flex;">
			<image :showLoading="true" :src="item.headImage" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
			<view style="padding: 28rpx;">
				<view style="font-size: 28rpx;font-weight: 500">{{getName(item.nickName)}}</view>
				<view style="font-size: 24rpx;margin-top: 20rpx;">{{item.createTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			getName(str){
				if(str.length > 10) {     
				   return str.substr(0,10) + "..."   
				 }
				 return str
			}
		}
	}
</script>

<style lang="scss" scoped>
	.new-card {
		margin-bottom: 12rpx;
		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;    
			}
		}
		
		.new-card-r{
			uni-image>img {
				border-radius: 50%;
			}
		}
	}
</style>