封装好友组件列表

<template>
	<view class="user-list animated fadeInLeft fast">
		<view class="user-left">
			<image :src="item.userpic" mode="widthFix" lazy-load></image>
		</view>
		<view class="user-center">
			<view class="nichen">{{item.username}}</view>
			<view style="display: inline-block;">
				<tagSexAge :sex="item.sex" :age="item.age"></tagSexAge>
			</view>
		</view>
		<view class="user-right icon iconfont" :class="[item.isguanzhu?'icon-xuanze-yixuan':'icon-zengjia1']"></view>
	</view>
</template>

<script>
	// 性别组件
	import tagSexAge from '../../components/common/tag-sex-age.vue'
	export default {
		components:{
			tagSexAge
		},
		props:{
			item: Object,
			index: Number
		}
	}
</script>

<style lang="less" scoped>
	.user-list {
		margin: 0 20rpx;
		display: flex;
		border-bottom: 1px solid #eee;
	
		.user-left {
			width: 100rpx;
			height: 100rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
	
			image {
				width: 100%;
				border-radius: 50%;
			}
		}
	
		.user-center {
			flex: 1;
	
			.nichen {
				font-size: 35rpx;
			}
		}
	
		.user-right {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ccc;
		}
	
		.icon-zengjia1 {
			color: #f8791b;
		}
}
</style>