diff --git a/components/list/scenicSpot.vue b/components/list/scenicSpot.vue index 94399b0..540412c 100644 --- a/components/list/scenicSpot.vue +++ b/components/list/scenicSpot.vue @@ -4,7 +4,10 @@ :style="{height: height}" @scrolltolower="loadMoreData"> - @@ -17,6 +20,12 @@ + + + 了解更多 + @@ -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; + } \ No newline at end of file diff --git a/pages/index/index.vue b/pages/index/index.vue index e0ac108..56dd2a5 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -5,7 +5,7 @@ @@ -37,9 +37,15 @@ - + + + + + 申遗新闻 + + @@ -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; } - } }