<template>
	<view class="box">
		<view class="top_bg">
			<topBox></topBox>
			<view @click="backBtn" class="back">⬅返回上一级</view>
		</view>
		<view class="zj_box">
			<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.getMainBodyColumnContentList();
	},
	methods: {
		getMainBodyColumnContentList() {
			this.$api.getMainBodyColumnContentList(
				{
					model_id: 9 /* 模型id */,
					main_body_id: 5
				},
				function (res) {
					that.projectList = res.data[0].content_list;
					console.log(that.projectList, '传承人');
				}
			);
		},

		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%;
}
</style>
