blindDate/components/lf-nolanPhoto/lf-nolanPhoto.vue

<template>
	<view class="content">
		<view class="image-item" v-for="item in 5" :key="item">
			<image src="https://picsum.photos/200"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		onLoad(){
			// TODO 优化当头像数量超过盒子大小时最后一个元素显示+剩余多少张
			// 参考：http://www.bootstrapmb.com/item/2739
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		height: 60rpx;
		margin-top: 20rpx;
		.image-item{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;
			overflow: hidden;
			&:nth-child(n+2){
				margin-left: -16rpx;
			}
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>