WenWuGuanJia/index_fenbao/HuoHuaLiYong/YouJin/YouJin.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="ban_box">
			<view class="map_box">
				<mapComponent :latitudeAndLongitude="latitudeAndLongitude" :height="height"></mapComponent>
			</view>
		</view>
		<!-- 路线 -->
		<view class="lx_box">
			<view class="lx_tit">
				<view class="">
					<text style="color: #d85f4c">{{ list.title }}：</text>
					{{ list.content }}
				</view>
			</view>
		</view>
		<view class="btm_box">
			<view class="" style="display: flex; align-items: center; justify-content: start">
				<view class="Serial"></view>
				<view style="font-size: 32rpx; margin-left: 20rpx">{{ list.title }}</view>
			</view>

			<view class="introduce">{{ list.desc }}</view>
			<!--  -->
			<view class="fx_box">
				<view style="display: flex; align-items: center">
					<uni-icons type="redo" color="#5b5b5b" size="20"></uni-icons>
					<view class="">分享</view>
				</view>
				<view style="display: flex; align-items: center">
					<uni-icons type="star" color="#5b5b5b" size="20"></uni-icons>
					<view class="">收藏</view>
				</view>
				<view style="display: flex; align-items: center">
					<uni-icons type="paperplane" color="#5b5b5b" size="20"></uni-icons>
					<view class="">前往</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			latitudeAndLongitude: {
				latitude: '24.503559',
				longitude: '118.13093'
			},
			list: {},
			height: 1000
		};
	},
	onLoad(o) {
		that = this;
		this.activityDetails(o.id);
	},
	methods: {
		activityDetails(id) {
			this.$api.activityDetails({ main_body_id: 1, id: id }, function (res) {
				if (res.code == 1) {
					console.log(res, '游径详情');
					that.list = res.data;
					// that.content_list = Object.values(that.list.content_list);
				}
			});
		}
	}
};
</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-repeat: repeat-y;
	height: auto;
}
.ban_box {
	width: 90%;
	height: 1000rpx;
	position: relative;
	margin: auto;
	margin-top: 20rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/lx_bg.png');
	background-size: 100% 100%;
}
.map_box {
	width: 600rpx;
	height: 875rpx;
	overflow: hidden;
	padding-top: 130rpx;
	margin: auto;
}
.img {
	position: absolute;
	width: 692rpx;
	height: 1000rpx;
}
.lx_box {
	width: 90%;
	margin: auto;
}
.lx_tit {
	margin: 20rpx 0 20rpx 10rpx;
	font-size: 28rpx;
	font-weight: 700;
}
.btm_box {
	width: 653rpx;
	/* height: 345rpx; */
	padding: 40rpx;
	margin: auto;
	font-size: 28rpx;
	font-weight: 600;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/yjlx_bg.png');
	background-size: 100% 100%;
}
.Serial {
	width: 35rpx;
	height: 35rpx;
	background-color: #d92e2e;
	border-radius: 50%;
	text-align: center;
	color: #ffffff;
}
.introduce {
	height: 130rpx;
	margin-left: 54rpx;
	overflow: scroll;
}
.fx_box {
	display: flex;
	align-items: center;
	font-weight: 500;
	justify-content: space-evenly;

	color: #5b5b5b;
	font-size: 26rpx;
}
</style>