lcoco/pages/wallet/like-me.vue

<template>
	<view class="like-me flex-common-css box-sizing-border iPhone-bottom">
		<Nav title='谁喜欢我' titleColor='#333' bgckgroundBox='#fff'></Nav>
		<view class="info-box box-sizing-border" :class="true?'info-box-y':'info-box-n'">
			<view class="card">
				<view class="car-home">
					<view class="car-info">
						<view class="sys-size-40 sys-weight-600 sys-color-white">10000</view>
						<view class="sys-size-24 sys-color-gray-9">最近收到</view>
					</view>
					<view class="car-info-xian"></view>
					<view class="car-info">
						<view class="sys-size-40 sys-weight-600 sys-color-white">100</view>
						<view class="sys-size-24 sys-color-gray-9">收到的喜欢</view>
					</view>
				</view>
				<image class="card-b-img" src="@/static/img/wallet/jiasu.png" mode="aspectFill"></image>
			</view>
			<view class="info-title">
				<view class="title-box">
					<image src="@/static/img/wallet/xd-black.png" mode="aspectFill"></image>
					<text class="sys-size-32 sys-color-gray-3 sys-weight-600">心动擦亮</text>
				</view>
				<view class="title-box">
					<text class="sys-size-24 sys-color-gray-9">全部</text>
					<uni-icons type="forward" size="12" color="#999"></uni-icons>
				</view>
			</view>
			
			<scroll-view scroll-x="true" class="list-x-scroll" @scrolltoupper="scrolltoupper">
				<view>
					
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods:{
			
		},
	}
</script>

<style scoped lang="scss">
	.like-me{
		.info-box-y{
			flex: 1;
			overflow: auto;
		}
		.info-box-n{
			flex: 1;
			overflow: hidden;
		}
		.info-box{
			padding: 32rpx;
			.info-title{
				display: flex;
				justify-content: space-between;
				.title-box{
					line-height: 20rpx;
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}
				}
				
			}
		}
		.card{
			width: 100%;
			height: 302rpx;
			border-radius: 16rpx;
			background: url('@/static/img/wallet/like-me.png') no-repeat;
			background-size: 100% 100%;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 46rpx;
			.car-home{
				display: flex;
				align-items: center;
				.car-info{
					width: 120rpx;
					text-align: center;
				}
				.car-info-xian{
					width: 2rpx;
					height: 62rpx;
					background-color: #999;
					margin: 0 80rpx;
				}
			}
			.card-b-img{
				margin-top: 60rpx;
				width: 100%;
				height: 108rpx;
				border-radius: 16rpx;
			}
		}
		
	}
</style>