WenWuGuanJia/index_fenbao/GuanLi/GouJian.vue

<template>
	<view class="body">
		<u-navbar :title="item.title + '介绍'" bgColor="rgba(255,255,255,0.3)" :placeholder="true" :autoBack="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<u-swiper :list="list" keyName="image" :height="300" :indicator="true"></u-swiper>
		<view class="box">
			<!-- 	<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; display: flex; align-items: center; margin-top: 40rpx">
				<view style="font-weight: 700; font-size: 18px">构件介绍</view>
			</view> -->

			<!-- 			<view class="info">
				<view style="width: 40%">创建年代： {{ item.age }}</view>

				<view style="width: 40%">文物类型：{{ item.type }}</view>

				<view style="width: 40%">文物等级：{{ item.level }}</view>

				<view style="width: 40%">所属区域：{{ item.area }}</view>
			</view> -->
			<view style="color: #940000; font-size: 24rpx; margin-left: 24rpx; margin-top: 40rpx; margin-bottom: 30rpx">
				<view style="font-weight: 700; font-size: 18px">构件介绍</view>
			</view>

			<view style="width: 92% margin: auto;">
				<image style="margin-left: 50rpx; border-radius: 10rpx" :src="item.image"></image>
			</view>
			<view style="width: 92%; margin: auto; margin-top: 10rpx">
				<u-parse :content="item.content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
let that = this;
export default {
	data() {
		return {
			item: {},
			list: []
		};
	},
	onLoad(e) {
		that = this;
		this.getContentDetail(e.id);
	},

	methods: {
		// 详情
		getContentDetail(id) {
			this.$api.getContentDetail(
				{
					main_body_id: 1,
					id: id
				},
				function (res) {
					// console.log(res, 666666666);
					that.item = res.data;
					that.list = Object.values(res.data.association_me_list);
				}
			);
		}
	}
};
</script>

<style>
.box .info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20rpx;
	margin-top: 8px;
}

.box .info > view {
	margin-top: 10px;
	font-size: 14px;
	margin-left: 4px;
	color: #940000;
}

.box .u-info {
	margin: 20rpx;
}

.box .text {
	margin: 20rpx;
}

.box {
	height: auto;
	width: 100%;
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	top: -20px;
	padding-top: 10rpx;
}

.body {
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/wyj-jiemian1-BJ.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	height: auto;
}

.boxs > view {
	overflow: hidden;
	width: 355px;
	height: 160px;
	border-radius: 5px;
	margin-bottom: 30px;
}

.text-img-img {
	display: flex;
	overflow: none;
	overflow-x: scroll;
	margin-top: 5rpx;
}

.text-img-img > view {
	color: #940000;
	margin-right: 10px;
}

.text-img-info {
	color: #940000;
	display: flex;
	justify-content: space-between;
}
</style>