上传

components/list/scenicSpot.vue

@@ -4,7 +4,10 @@
 	:style="{height: height}"
 	@scrolltolower="loadMoreData">
 		<view class="videoList">
-			<view class="video-item" v-for="(item, index) in spotListWord" :key="index"
+			<view class="video-item" 
+			v-for="(item, index) in spotListWord" 
+			v-if="index < queryParams.pageSize"
+			:key="index"
 			>
 				<view class="image" @click="showVideo(item, index)">
 					<image :src="item.spotImage && item.spotImage.split(',')[0]" mode="aspectFill">
@@ -17,6 +20,12 @@
 				</view>
 			</view>
 		</view>
+		
+		<view class="loadMoreData"
+		v-if="queryParams.pageSize <= spotListWord.length"
+		@click="loadMoreData">
+			了解更多
+		</view>
 	</scroll-view>
 </template>
 
@@ -34,7 +43,7 @@
 			return {
 				queryParams: {
 					pageNo: 1,
-					pageSize: 10,
+					pageSize: 4,
 				},
 				total : 0,
 				list : [],
@@ -83,15 +92,15 @@
 					this.queryParams.token = uni.getStorageSync('token')
 				}
 				
-				this.$api('queryVedioById', this.queryParams, res => {
-					if(res.code == 200){
-						this.list = res.result
-						// this.total = res.result.total
-					}
-				})
+				// this.$api('queryVedioById', this.queryParams, res => {
+				// 	if(res.code == 200){
+				// 		this.list = res.result
+				// 		// this.total = res.result.total
+				// 	}
+				// })
 			},
 			loadMoreData(){
-				if(this.queryParams.pageSize <= this.list.length){
+				if(this.queryParams.pageSize <= this.spotListWord.length){
 					this.queryParams.pageSize += 10
 					this.queryVideoList()
 				}
@@ -122,7 +131,7 @@
 			position: relative;
 			width: calc(50% - 20rpx);
 			margin-left: 20rpx;
-			margin-top: 20rpx;
+			margin-top: 10rpx;
 			.image {
 				position: relative;
 				width: 100%;
@@ -130,7 +139,7 @@
 
 				image {
 					width: 100%;
-					height: 220rpx;
+					height: 210rpx;
 					border-radius: 30rpx;
 				}
 
@@ -149,12 +158,11 @@
 			}
 
 			.bottom {
-				font-size: 30rpx;
+				font-size: 28rpx;
 				display: flex;
 				justify-content: space-between;
 				width: calc(100% - 40rpx);
-				padding: 30rpx;
-				padding-top: 10rpx;
+				padding: 15rpx;
 				font-weight: 900;
 				align-items: center;
 
@@ -191,4 +199,9 @@
 			}
 		}
 	}
+	.loadMoreData{
+		color: $uni-color;
+		text-align: center;
+		padding: 10rpx 0 40rpx 0;
+	}
 </style>

pages/index/index.vue

@@ -5,7 +5,7 @@
 			<uv-swiper
 			:list="bannerList" 
 			indicator
-			height="620rpx"
+			height="420rpx"
 			indicatorStyle="bottom: 100rpx;"
 			keyName="imageContent"></uv-swiper>
 			
@@ -37,9 +37,15 @@
 			
 			<view class="index_box">
 				
-				<image :src="config_new_image" 
-				@click="$utils.navigateTo('/pages_order/service/newsList')"
-				class="image" mode="aspectFill"></image>
+				<view class="image-box">
+					<image :src="config_new_image"
+					@click="$utils.navigateTo('/pages_order/service/newsList')"
+					class="image" mode="aspectFill"></image>
+					
+					<view class="image-text">
+						申遗新闻
+					</view>
+				</view>
 				
 				<view class="index_box_grid"
 				@click="$utils.navigateTo('/pages_order/service/carefree')">
@@ -175,7 +181,7 @@
 		},
 		//滚动到屏幕底部
 		onReachBottom() {
-			this.$refs.videoList.loadMoreData()
+			// this.$refs.videoList.loadMoreData()
 		},
 		methods: {
 			queryBannerList(){
@@ -248,13 +254,31 @@
 			
 			.index_box{
 				display: flex;
-				padding: 30rpx;
+				padding: 10rpx 20rpx;
 				gap: 30rpx;
 				align-items: center;
-				.image{
+				.image-box{
+					position: relative;
 					height: 200rpx;
-					width: 450rpx;
-					border-radius: 10rpx;
+					width: 470rpx;
+					color: #fff;
+					.image{
+						position: absolute;
+						z-index: -1;
+						height: 100%;
+						width: 100%;
+						border-radius: 10rpx;
+					}
+					.image-text{
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						height: 100%;
+						width: 100%;
+						background-color: rgba(0, 0, 0, 0.2);
+						font-size: 34rpx;
+						font-weight: 900;
+					}
 				}
 				.index_box_grid{
 					width: 200rpx;
@@ -277,13 +301,12 @@
 			}
 			
 			.video-title{
-				padding: 20rpx 30rpx;
+				padding: 15rpx 20rpx;
 				background-color: $uni-color;
 				color: #fff;
 				font-weight: 900;
-				font-size: 24rpx;
-				margin: 10rpx 20rpx;
-				margin-top: 30rpx;
+				font-size: 28rpx;
+				margin: 0 20rpx;
 				width: fit-content;
 				border-radius: 20rpx;
 			}
@@ -291,7 +314,6 @@
 				display: flex;
 				flex-wrap: wrap;
 			}
-			
 		}
 	}
 </style>