gupiao-web/src/components/poolDev.vue

<template>
	<view class="home">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<image class="swiper-item" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="home-goods">
			<view v-for="(item,index) in dataList" :key="index" class="data-list" @click="goDoods(item)">
				<image class="thumb" :src="item.thumb" mode=""></image>
				<view class="name">{{item.name}}</view>
				<view class="money">¥{{item.money}}</view>
			</view>
		</view>
		<view class="no_data" v-if="dataList.length<=0 && !nodata">暂无数据~</view>
		<view class="no_data" v-if="nodata">暂无更多~</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import home1 from '/static/images/home/home1.png';
	const banner = ref([
		'https://img13.360buyimg.com/pcpubliccms/jfs/t1/311461/32/1002/135580/68257980F8aaf636f/ae851f75de6f780b.jpg.avif',
		'https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/101458/36/44450/126805/64effce2Fddbe98e2/8156dc6f322774fe.jpg.avif'
	])
	const indicatorDots = ref(true)
	const autoplay = ref(true)

	const dataList = ref([{
			thumb: 'https://img13.360buyimg.com/pcpubliccms/jfs/t1/311461/32/1002/135580/68257980F8aaf636f/ae851f75de6f780b.jpg.avif',
			name: '英雄（HERO）【新年礼物】钢笔 382商务办公学生日常书写铱金签字墨水礼盒装 黑色明尖',
			money: '59.00',
			id: 0
		},
		{
			thumb: 'https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/235865/8/9679/129991/658bb2a5F0800a0c3/b844166dee370361.jpg.avif',
			name: '法拉蒙笔记本本子A5加厚记事本商务羊巴皮面复古笔记本文具工作日记本会议记录本办公文具可',
			money: '8.50',
			id: 1
		},
		{
			thumb: 'https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/101458/36/44450/126805/64effce2Fddbe98e2/8156dc6f322774fe.jpg.avif',
			name: 'ujia 国潮笔记本子礼盒套装故宫国风文创记事本伴手礼教师节礼物送老师企业可定制 两件套礼盒',
			money: '80.00',
			id: 2
		},
		{
			thumb: 'https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/253778/26/26667/91830/67c12cffFba1bcd79/2d2111f16c6d867c.jpg.avif',
			name: '晨光（M&G）文具 故宫金榜题名学生文具礼盒套装15件套 中性笔钢笔涂卡铅笔考试送礼HAGP1694马年礼礼盒',
			money: '99.00',
			id: 3
		}
	])
	const nodata = ref(false)
	const httpobj = ref({
		page: 1,
		limit: 10
	})
	onLoad((res) => {});

	const goDoods = (row) => {
		uni.navigateTo({
			url: '/pages/goodsInfo/goodsInfo?id=' + row.id,
		});
	}
</script>

<style scoped>
	.home .swiper {
		width: 750rpx;
		height: 400rpx;
	}

	.home .swiper-item {
		width: 750rpx;
		height: 400rpx;
	}

	.home .home-goods {
		width: 750rpx;
		margin-top: 25rpx;
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx 20rpx;
	}

	.home .data-list {
		width: 335rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
	}

	.home .thumb {
		width: 335rpx;
		height: 336rpx;
	}

	.home .name {
		font-size: 28rpx;
		color: #1D2129;
		padding: 10rpx 15rpx;
	}

	.home .money {
		font-weight: bold;
		font-size: 30rpx;
		color: #B38E58;
		padding: 0rpx 15rpx;
	}
</style>