WenWuGuanJia/index_fenbao/HuoHuaLiYong/chanPin/chanPin.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 @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/chanPin/chanPinXQ?id=' + item.id)" v-for="item in list" :key="item.id" class="yx_box">
			<view style="position: absolute; left: 6rpx; top: 6rpx">
				<image style="width: 160rpx; height: 240rpx" :src="item.image"></image>
			</view>
			<view style="margin-left: 200rpx">
				<view class="wwd">{{ item.title }}</view>
			</view>
			<view class="baoming">
				<text>查看</text>
				<image style="margin-left: 10rpx; width: 32rpx; height: 32rpx" src="/static/img/arrow-right-line.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
let that;
export default {
	data() {
		return {
			list: [],
			page: 1,
			isLoading: false
		};
	},
	onLoad(o) {
		that = this;
		this.getContentList();
	},
	methods: {
		// 产品
		getContentList() {
			this.isLoading = true;
			this.$api.getContentList({ main_body_id: 1, model_id: 9 }, function (res) {
				console.log(res, '产品');
				that.isLoading = true;
				that.list = [...that.list, ...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/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
}

.img {
	width: 100%;
	height: 100%;
}

.xq {
	width: 55rpx;
	height: 180rpx;
	text-align: center;
	line-height: 50rpx;
	font-size: 30rpx;
	margin-left: 50rpx;
	margin-top: 80rpx;
	color: #ffffff;
	background-image: url('/static/img/wc_tit_bg.png');
	background-size: 100% 100%;
}
.right_box {
	writing-mode: vertical-lr;
	writing-mode: tb-lr;
	letter-spacing: 6rpx;
}
.tit {
	font-size: 28rpx;
	font-weight: 600;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fenge {
	width: 2rpx;
	height: 200rpx;
	background-color: #934b36;
	margin-top: 55rpx;
	margin-left: 10rpx;
	background-image: linear-gradient(to bottom right, #ecd9c3, #934b36);
}
.kc_box {
	width: 92%;
	margin: auto;
	padding: 30upx;
	display: flex;
	align-items: center;
	margin-top: 30rpx;
}
.b-cover {
	width: 225rpx;
	height: 125rpx;
}
.b-main {
	flex: 1;
	margin-left: 20upx;
}
.text_23 {
	color: #272727;
	font-size: 28rpx;
	margin-top: 10rpx;
	font-weight: 600;
}
.text_25 {
	font-size: 26rpx;
	color: #727070;
	margin-top: 10rpx;
	font-weight: 400;
}
.text_23 {
	color: #272727;
	font-size: 28rpx;
	margin-top: 10rpx;
	font-weight: 600;
}
.text_25 {
	font-size: 26rpx;
	color: #727070;
	margin-top: 10rpx;
	font-weight: 400;
}
.yx_box {
	position: relative;
	width: 670rpx;
	height: 252rpx;
	display: flex;
	align-items: center;
	margin: auto;
	margin-top: 34rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/hh_item_bg.png');
	background-size: 100% 100%;
}
.wwd {
	width: 300rpx;
	font-size: 36rpx;
	font-weight: 400;
	color: #444444;
	line-height: 52rpx;
}
.time {
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
	line-height: 44rpx;
	margin-top: 12rpx;
}
.baoming {
	display: flex;
	width: 116rpx;
	height: 56rpx;
	line-height: 56rpx;
	justify-content: center;
	align-items: center;
	margin-left: 32rpx;
	font-size: 28rpx;
	color: #eba869;
	border: 2rpx solid #eba869;
}
</style>