minnan-tv/pages/index2/fY_xiangQing/chanPin.vue

<template>
	<view class="box">
		<view class="top_bg">
			<topBox></topBox>
			<view @click="backBtn" class="back" tabindex="0">返回上一级</view>
		</view>
		<view class="zj_box">
			<view class="harder_box box_item">
				<view class="box_banner">
					<view class="box_item">
						<view @click="detailsBtn(index)" class="banner_item" v-for="(item, index) in projectList" :key="item.index" tabindex="0">
							<view class="banner_bgimg">
								<view class="banner_img">
									<image class="itemImg" :src="item.image" mode="aspectFill"></image>
								</view>
							</view>
							<view class="item_tit">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <commonItems :projectList="projectList" class="box_item"></commonItems> -->
		</view>
		<!-- <view class="qiehuan">
			<view class="qh_btn">
				<image class="img" src="/static/img/left.png"></image>
			</view>
			<view class="qh_btn">
				<image class="img" src="/static/img/right.png"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
let that;
export default {
	data() {
		return { projectList: [] };
	},
	onLoad(o) {
		that = this;
		this.getContentList();
	},
	methods: {
		getContentList() {
			this.$api.getContentList(
				{
					model_id: 9 /* 模型id */,
					main_body_id: 1
				},
				function (res) {
					that.projectList = res.data.list;
					console.log(that.projectList, '传承人');
				}
			);
		},
		detailsBtn(i) {
			uni.navigateTo({
				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${this.projectList[i].id}`
			});
		},

		backBtn() {
			console.log(11111);
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	height: 100vh;
	background: linear-gradient(180deg, rgba(240, 235, 222, 0.2) 0%, #f0ebde 5%, #f0ebde 100%);
}

.top_bg {
	width: 100%;
	position: absolute;
	color: #ffffff;
	z-index: 1;
	/* background: linear-gradient(10deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 100%); */
}
.zj_box {
	width: 100%;
	height: 62%;
	position: fixed;
}
.back {
	width: 12%;
	height: 15%;
	margin-left: 5%;
	margin-top: -2%;
	cursor: pointer;
	font-size: 12px;
	color: #8e6c4f;
	letter-spacing: 0.3em;
}

.qiehuan {
	position: absolute;
	top: 42%;
	left: 8%;
	z-index: 33;
	display: flex;
	justify-content: space-between;
	width: 87%;
	height: 8%;
}
.qh_btn {
	width: 3%;
	height: 65%;
}
.img {
	width: 100%;
	height: 100%;
}

/* 列表 */

.harder_box {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 25vh;
}
.itemImg {
	width: 100%;
	height: 100%;
	border-radius: 5px 25px 5px 25px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
}
.itemImg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
	z-index: -1;
}
.box_banner {
	width: 82%;
	height: 28%;
	/* height: 28%; */
	margin: auto;
}

.banner_img {
	position: absolute;
	top: 6%;
	left: 5%;
	width: 90%;
	height: 75%;
}
.banner_bgimg {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('../../../static/img/bg_logo.png') no-repeat center;
	background-size: 100% 100%;
}
.box_item {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
}
.banner_item {
	width: 23%;
	height: 120%;
	margin-bottom: 2%;
	position: relative;
	margin-left: 2%;
}
.item_tit {
	width: 90%;
	position: absolute;
	top: 83%;
	left: 5%;
	text-align: center;
	z-index: 1;
	font-size: 10px;
	color: #fbfcdc;
	/* text-shadow: 0px 4px 0px #8e5938; */
}
</style>