lcoco/pages/wallet/visitor.vue

<template>
	<view class="visitor flex-common-css box-sizing-border iPhone-bottom">
		<Nav title='最近访客' titleColor='#333' :rightShow='true' :rightType='2'>
			<template v-slot:right>
				<view class="add-view">
					<image src="@/static/img/wallet/add.png" mode="aspectFill"></image>
					<view class="sys-size-24 sys-color-gray-3 sys-weight-600">增加来访</view>
				</view>
			</template>
		</Nav>
		
		<view v-if="false" class="no-list sys-size-28 sys-color-gray-9">暂无访客</view>
		
		<scroll-view v-else scroll-y="true" class="list-scroll box-sizing-border" @scrolltolower="scrolltolower">
			<view class="list-home">
				<view class="list-box box-sizing-border">
					<view class="box-head">
						<image src="@/static/img/circle/1.png" mode="aspectFill"></image>
						<view class="head-icon">√</view>
					</view>
					<view class="box-right">
						
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		methods:{
			scrolltolower(){
				// 触底
			},
		},
	}
</script>

<style scoped lang="scss">
	.visitor{
		.add-view{
			width: 154rpx;
			height: 52rpx;
			background: #F2F2F2;
			border-radius: 200rpx;
			display: flex;
			align-items: center;
			line-height: 52rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin: 0 4rpx;
			}
		}
		.no-list{
			margin-top: 100rpx;
			text-align: center;
		}
		.list-scroll{
			flex: 1;
			overflow: auto;
			padding: 32rpx;
			.list-home{
				.list-box{
					display: flex;
					.box-head{
						width: 112rpx;
						height: 112rpx;
						position: relative;
						margin-right: 20rpx;	
						image{
							width: 112rpx;
							height: 112rpx;
							border-radius: 50%;
						}
						.head-icon{
							position: absolute;
							right: 0;
							bottom: 0;
							z-index: 10;
							width: 25rpx;
							height: 25rpx;
							border-radius: 50%;
							border: 2rpx solid #fff;
						}
						.view-1{
							background: #FEC631;
						}
						.view-1{
							background: #4BC285;
						}
					}
					.box-right{
						flex: 1;
					}
				}
			}
		}
	}
</style>