lcoco/pages/wallet/like-user.vue

<template>
	<view class="like-user flex-common-css box-sizing-border iPhone-bottom">
		<Nav title='喜欢的人' titleColor='#333' :rightShow='true' :rightType='2'>
			<template v-slot:right>
				<image @click="to(1)" class="nav-img" src="@/static/img/wallet/sd.png" mode="aspectFill"></image>
			</template>
		</Nav>
		<view class="like-text">
			<image src="@/static/img/wallet/h.png" mode="aspectFill"></image>
			<text class="sys-size-28 sys-color-gray-3">送出小花，搭讪心仪的他</text>
		</view>
		
		<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" v-for="(item,i) in 10" :key="i">
					<image class="image-bg" src="@/static/img/circle/1.png" mode="scaleToFill"></image>
					<image class="image-left" src="@/static/img/wallet/note.png" mode="scaleToFill"></image>
					<!-- <image class="image-type type-1" src="@/static/img/wallet/vip.png" mode="scaleToFill"></image> -->
					<image class="image-type type-2" src="@/static/img/wallet/svip.png" mode="scaleToFill"></image>
					
					<view class="list-info box-sizing-border">
						<view class="">
							<view class="info-name sys-size-36 sys-color-white sys-weight-600 sys-webkit-box">仰看辉煌仰看辉煌仰看辉煌</view>
							<view class="sys-size-24 sys-color-white">18/女/处女座</view>
						</view>
						<view class="info-right" @click="to(2)">	
							<image src="@/static/img/wallet/h.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				page:1,
				total:0,
				list:[],
			}
		},
		methods:{
			scrolltolower(){
				// 触底
			},
			to(type){
				if(type === 1){
					console.log('曝光');
				}else if(type === 2){
					// 送花
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.like-user{
		.nav-img{
			width: 52rpx;
			height: 52rpx;
		}
		.like-text{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 24rpx 0;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}
		.no-list{
			margin-top: 100rpx;
			text-align: center;
		}
		.list-scroll{
			flex: 1;
			overflow: auto;
			padding: 0 32rpx;
			
			.list-home{
				display: flex;
				justify-content: space-between;
				flex-flow: row wrap;
			}
			.list-box{
				width: 334rpx;
				height: 504rpx;
				border-radius: 20rpx;
				margin-bottom: 18rpx;
				position: relative;
				.list-info{
					width: 334rpx;
					padding: 24rpx;
					z-index: 14;
					position: absolute;
					bottom: 0;
					display: flex;
					justify-content: space-between;
					.info-name{
						width: 200rpx;
						margin-bottom: 4rpx;
					}
					.info-right{
						width: 80rpx;
						height: 80rpx;
						background-color: #fff;
						border-radius: 50%;
						text-align: center;
						image{
							width: 52rpx;
							height: 52rpx;
							margin-top: 14rpx;
						}
					}
				}
				.image-bg{
					position: absolute;
					top: 0;
					left: 0;
					width: 334rpx;
					height: 504rpx;
					border-radius: 20rpx;
					z-index: 10;
				}
				.image-left{
					position: absolute;
					top: 0;
					left: 0;
					width: 134rpx;
					height: 44rpx;
					z-index: 11;
				}
				.image-type{
					position: absolute;
					top: 0;
					right: 0;
					z-index: 12;
				}
				.type-1{
					width: 48rpx;
					height: 28rpx;
				}
				.type-2{
					width: 64rpx;
					height: 28rpx;
				}
			}
		}
	}
</style>