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">
			<lf-image class="avatar" src="@/static/logo.png"></lf-image>
			<view class="info">
				<view class="lf-flex-1">
					<text>编号：83927</text>
					<u-icon name="tags" class="lf-m-l-10"></u-icon>
				</view>
				<view class="lf-flex-1 lf-m-t-16">24岁·牛·180cm·本科·未婚</view>
				<view class="lf-flex-1 lf-m-t-16">自有公司·金融/证券/保险·50万以上</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'lf-userList',
		props: {
			padding: {
				type: Boolean, // 是否显示列表距离页面的边距
				default: true
			},
			list: {
				type: Array,
				default: function(){
					return [1,2,3,4,5,6,7,8,9,10]
					// return [1]
				}
			}
		},
		data(){
			return {
				
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.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>