uniapp-shikongwang/pages/collect/index.vue

<template>
	<view>
		<view class="list-box">
			<view class="lf-row-between list-item" v-for="(item, index) in list" :key="index" hover-class="lf-opacity">
				<image class="goods-img"></image>
				<view style="width: 480rpx;">
					<view class="lf-font-32 lf-line-1">网红辣椒棒魔鬼辣椒挑战全网第</view>
					<view class="lf-row-between lf-m-t-20">
						<view class="lf-flex">
							<image class="shop-img"></image>
							<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">李大叔家的店</view>
						</view>
						<view>
							<u-icon name="heart-fill" color="#ff0f00"></u-icon>
						</view>
					</view>
					<view class="lf-m-t-20 lf-font-24 lf-color-gray">收藏时间 2021-6-17  12:37:54</view>
				</view>
			</view>
		</view>
		<!-- 加载 -->
		<view class="loading-more">
			<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
			<my-nocontent v-else></my-nocontent>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [1, 2],
				loadingClass: false,
				loadingText: '已显示全部数据~'
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.list-box{
		width: 750rpx;
		height: auto;
		padding: 0 32rpx;
		box-sizing: border-box;
		.list-item{
			border-bottom: 1rpx solid #EEEEEE;
			padding: 30rpx 0;
			.goods-img{
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				background-color: #EEEEEE;
			}
			.shop-img{
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background-color: #EEEEEE;
			}
			.shop-name{
				width: 340rpx; 
				color: #555555;
			}
		}
	}
</style>