WenWuGuanJia/index_fenbao/HuoHuaLiYong/YanXue/HuoHuaLiYong.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>
			<view class="tit_box" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/chanPin/gengDuoChengGuo')">
				<view class="tit">成果展示</view>
				<view class="tit2">查看更多</view>
			</view>
			<view class="rw_box" style="">
				<view
					@click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/chanPin/chengGuo?id=' + item.id)"
					class="zj_box"
					v-for="item in achievement"
					:key="item.id"
					style="position: relative"
				>
					<view class="tx_box">
						<image
							style="border-radius: 15rpx; width: 300rpx; height: 185rpx"
							mode="aspectFill"
							:src="item.image || 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zwtp.png'"
						></image>
					</view>
					<view class="" style="width: 280rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
						{{ item.title }}
					</view>
				</view>
			</view>
			<!--  -->
			<view class="tit_box" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/YanXue/YanXue')">
				<view class="tit">{{ research.type_text }}</view>
				<view class="tit2">查看更多</view>
			</view>
			<view class="yx_box" @click="researchBtn(research.id)">
				<view style="position: absolute; left: 6rpx; top: 6rpx"><image style="width: 160rpx; height: 240rpx" :src="research.image"></image></view>
				<view style="margin-left: 200rpx">
					<view class="wwd">{{ research.title }}</view>
					<view class="time">活动时间：{{ (research.start_time && research.start_time.split(' ')[0]) || '' }}</view>
				</view>
				<view class="baoming">
					<text>查看</text>
					<image style="margin-left: 10rpx; width: 32rpx; height: 32rpx" src="/static/img/more.png"></image>
				</view>
			</view>
		</view>
		<!--产品  -->
		<view>
			<view class="tit_box" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/chanPin/chanPin')">
				<view class="tit">文创产品</view>
				<view class="tit2">查看更多</view>
			</view>
			<view class="rw_box" style="">
				<view
					@click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/chanPin/chanPinXQ?id=' + item.id)"
					class="zj_box"
					v-for="item in product"
					:key="item.id"
					style="position: relative"
				>
					<view class="tx_box">
						<image style="border-radius: 15rpx; width: 300rpx; height: 185rpx" mode="aspectFill" :src="item.image"></image>
					</view>
					<view class="" style="width: 280rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
						{{ item.title }}
					</view>
				</view>
			</view>

			<!-- 	<view v-for="item in product" :key="item.id" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/chanPin/chanPinXQ?id=' + item.id)" class="yx_box">
				<view style="position: absolute; left: 6rpx; top: 6rpx"><image style="width: 160rpx; height: 240rpx" :src="item.thumbnail"></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/more.png"></image>
				</view>
			</view> -->
		</view>
		<!--挖掘  -->
		<view>
			<view class="tit_box" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/waJue/gengDuo')">
				<view class="tit">价值挖掘</view>
				<view class="tit2">查看更多</view>
			</view>
			<view class="gg_box">
				<view @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/waJue/waJue?id=' + item.id)" class="gg_item" v-for="item in excavateList" :key="item.id">
					<view class="" style="display: flex; align-items: center">
						<image :src="item.image" style="border-radius: 10rpx; margin-right: 30rpx; width: 128rpx; height: 128rpx"></image>
						<view class="">
							<view>
								<view class="rw_tit1">{{ item.title }}</view>
								<!-- <view class="rw_tit2">精彩瞬间</view> -->
								<view class="rw_tit2">精彩投稿</view>
							</view>
						</view>
					</view>
					<view class="">
						<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
					</view>
				</view>
			</view>

			<!-- 		<view  class="yx_box">
				<view style="position: absolute; left: 6rpx; top: 6rpx">
					<image style="width: 160rpx; height: 240rpx" :src="excavateList.image"></image>
				</view>
				<view style="margin-left: 200rpx">
					<view class="wwd">{{ excavateList.title }}</view>
				</view>
				<view class="baoming">
					<text>查看</text>
					<image style="margin-left: 10rpx; width: 32rpx; height: 32rpx" src="/static/img/more.png"></image>
				</view>
			</view> -->
		</view>
		<!--游径  -->
		<view>
			<view class="tit_box" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/YouJin/gengDuo')">
				<view class="tit">文物主题游径</view>
				<view class="tit2">查看更多</view>
			</view>
			<view class="yx_box" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/YouJin/YouJin?id=' + youJingList.id)">
				<view style="position: absolute; left: 6rpx; top: 6rpx">
					<image style="width: 164rpx; height: 240rpx" :src="youJingList.image"></image>
				</view>
				<view style="margin-left: 200rpx">
					<view class="wwd">{{ youJingList.title }}</view>
					<!-- <view class="time">文物路线一览表</view> -->
				</view>
				<view class="baoming">
					<text>查看</text>
					<image style="margin-left: 10rpx; width: 32rpx; height: 32rpx" src="/static/img/more.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			achievement: [] /* 成果 */,
			research: {} /* 研学 */,
			product: [] /* 产品 */,
			travelPathList: {} /* 游径 */,
			excavateList: [] /* 价值挖掘 */,
			youJingList: {} /* 游径 */
		};
	},
	onLoad() {
		that = this;
		this.activityLists();
		this.getContentList();
		this.travelPath();
		this.youJing();
		this.loadGlobalFont();
		this.excavateGetContentList();
	},
	methods: {
		// 文物研学
		activityLists() {
			this.$api.activityLists({ main_body_id: 1, type: 1 }, function (res) {
				// console.log(res, '活动');
				if (res.code == 1) {
					that.research = res.data[0];
				}
			});
		},
		// 产品
		getContentList() {
			this.$api.getContentList({ main_body_id: 1, model_id: 9, page: 1, pageSize: 4 }, function (res) {
				// console.log(res, '产品');

				if (res.code == 1) {
					that.product = res.data;
				}
			});
		},
		// 成果
		travelPath() {
			this.$api.getMainBodyColumnContentList({ main_body_id: 1, model_id: 11 }, function (res) {
				res.data.forEach((item) => {
					if (item.name == '活化利用成果') {
						that.achievement = item.content_list;
						// console.log(that.achievement, '活化利用成果');
					}
				});
			});
		},
		// 游径
		youJing() {
			this.$api.activityLists({ main_body_id: 1, type: 2 }, function (res) {
				if (res.code == 1) {
					that.youJingList = res.data[0];
					// console.log(that.youJingList, '游径');
				}
			});
		},
		// 价值挖掘
		excavateGetContentList() {
			this.$api.getContentList({ main_body_id: 1, model_id: 11, main_body_column_id: 72, page: 1, pageSize: 4 }, function (res) {
				// console.log(res, '价值挖掘');
				if (res.code == 1) {
					that.excavateList = res.data;
				}
			});
		},
		/* 研学详情 */
		researchBtn(id) {
			uni.navigateTo({
				url: '/index_fenbao/HuoHuaLiYong/YanXue/XiangQing?id=' + id
			});
		},

		// 加载字体
		loadGlobalFont() {
			try {
				uni.loadFontFace({
					family: 'MyGlobalFont', // 自定义字体名
					source: 'url("https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/songTi.ttf")',
					success() {
						console.log('全局字体加载成功');
					}
				});
			} catch (error) {
				console.error('全局字体加载异常', error);
			}
		}
	}
};
</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;
	width: 92%;
	height: 252rpx;
	display: flex;
	justify-content: space-around;
	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%;
}
.gg_box {
	width: 92%;
	margin: auto;
	margin-top: 20rpx;
	padding: 20rpx;
	border: 2rpx solid #ebc9a9;
	background-color: #ffffff;
	border-radius: 10rpx;
}
.gg_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25rpx;
	width: 630rpx;
	/* height: 80rpx; */
}
.rw_tit1 {
	font-size: 30rpx;
	color: #444444;
	line-height: 44rpx;
}
.rw_tit2 {
	font-size: 26rpx;
	color: rgba(68, 68, 68, 0.4);
	line-height: 40rpx;
}
.rw_box {
	width: 92%;
	margin: auto;
	margin-top: 30rpx;
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx 20rpx 20rpx;
	justify-content: space-between;
	border-radius: 10rpx;
	border: 2rpx solid #ebc9a9;
	background-color: #ffffff;
}
.zj_box {
	margin-top: 30rpx;
}
.left_m {
	margin-left: 50rpx !important;
}
.wwd {
	width: 300rpx;
	font-size: 36rpx;
	font-weight: 400;
	color: #444444;
	line-height: 52rpx;
}
.time {
	width: 300rpx;
	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;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 90rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-family: 'MyGlobalFont';
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.tit_box {
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'MyGlobalFont';
}
.tit {
	font-size: 32rpx;
	color: #444444;
	font-weight: 600;
}
.tit2 {
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
}
</style>