WenWuGuanJia/xueYuan_fenbao/wenWu/GengDuoShiPin.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="文物视频" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="" style="width: 92%; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between">
			<view v-for="item in research" :key="item.id" class="yx_box" @click="$common.navigateTo('/xueYuan_fenbao/wenWu/ShiPin?id=' + item.id)">
				<view>
					<image style="width: 330rpx; height: 190rpx" :src="item.image"></image>
				</view>

				<view class="wwd">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			page: 1,
			isLoading: false,
			research: []
		};
	},
	onLoad() {
		that = this;
		this.getContentList();
	},
	methods: {
		// 文物故事视频
		getContentList() {
			this.isLoading = true;
			this.$api.getContentList({ main_body_id: 1, model_id: 11, main_body_column_id: 78, page: this.page, pageSize: 6 }, function (res) {
				that.isLoading = false;
				console.log(res, '视频');
				that.research = [...that.research, ...res.data];
			});
		}
	},
	/* 页面触底 */
	onReachBottom() {
		if (this.isLoading) {
			return;
		} else {
			this.page++;
			this.getContentList();
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	min-height: 100%;
	height: auto;
	/* background-color: #fff9e9; */
}
.yx_box {
	position: relative;
	margin-bottom: 30rpx;
}
.wwd {
	position: absolute;
	bottom: 7rpx;
	width: 100%;
	font-size: 30rpx;
	font-weight: 400;
	color: #ffffff;
	padding-left: 6rpx;
	line-height: 52rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: rgba(0, 0, 0, 0.5);
}
</style>