blindDate/components/lf-userList/lf-userList.vue

<template>
	<view class="content" :style="padding ? 'padding: 0rpx 32rpx' : 'padding: 0rpx'">
		<view class="list" v-for="(item, index) in list" :key="index" @click="$url('/pages/my/memberDetails?id='+ item.number)">
			<lf-image class="avatar" :src="item.user.avatar"></lf-image>
			<view class="info">
				<view class="lf-flex-1">
					<text>{{ item.number_nickname }}</text>
					<text class="lf-iconfont icon-nv lf-m-l-10 lf-color-primary" v-if="item.gender == '女'"></text>
					<text class="lf-iconfont icon-nan lf-m-l-10 color-nan" v-else></text>
				</view>
				<view class="lf-flex-1 lf-m-t-16">{{ item.age }}岁·{{ item.zodiac }}·{{ item.height }}cm·{{ item.education_id }}·{{ item.marital_status }}</view>
				<view class="lf-flex-1 lf-m-t-16">自有公司·金融/证券/保险·50万以上</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lfImage from '../lf-image/lf-image.vue'
	export default {
		name: 'lf-userList',
		components: {
			lfImage
		},
		props: {
			padding: {
				type: Boolean, // 是否显示列表距离页面的边距
				default: true
			},
			list: {
				type: Array,
				default: []
			}
		},
		data(){
			return {
				
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.color-nan{
		color: #1E77F4;
	}
	.content{
		width: 100%;
		height: max-content;
		box-sizing: border-box;
		.list{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #E5E5E5;
			display: flex;
			width: 100%;
			height: max-content;
			.avatar{
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
				background-color: #EEEEEE;
			}
			.info{
				flex: auto;
				min-height: 150rpx;
				max-width: 522rpx;
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				flex-direction: column;
			}
		}
	}
</style>