WenWuGuanJia/xueYuan_fenbao/wenWu/renWuXiangQing.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> -->
		<u-navbar :autoBack="true" bgColor="rgba(255,255,255,0)"></u-navbar>
			<image 
			style="width: 100%;"
				src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/renwu.jpg">
			</image>
		

		<view class="box">
			<view style="width: 400rpx; height: 300rpx; float: right; padding: 20rpx;">
				<u--image width="100%"  radius="5"  height="300rpx" mode="heightFix"
					:src="item.image">
				</u--image>
			</view>
			<view style="margin-left: 12px; display: flex;align-items: center;">
				<text style="font-size:40rpx;color:#9a6700;font-weight: bold;">{{item.title}}</text>
				<text style="font-size:24rpx;color:#9a6700" v-if="item.also_name">（{{(item.also_name!='')?'别称:'+item.also_name:''}}）</text>
			</view>


			<view class="info">
				<view style="width: 100%; height: 40rpx;" >出生日期： {{item.date_birth}}</view>

				<view style="width: 100%;" >籍贯：{{item.birthplace||''}}</view>

				<view style="width: 100%;height: 40rpx;" >{{(item.death_birth!="")?"逝世日期："+item.death_birth:""}}</view>

				<view style="width: 100%;height: 40rpx;" >民族：{{item.nation||''}}</view>
			</view>

			<view class="hrs"></view>
			<view
				style="margin-bottom: 20rpx; color:#b37700;font-size: 24rpx;margin-left: 24rpx; display: flex;align-items: center;margin-top: 40rpx" v-if="item.intro">				
				<view style="font-weight: 700;font-size: 18px;" >简介</view>	
			</view>
			<view class="gui-margin-top gui-margin">
			<u-parse :content="item.intro"></u-parse>
			</view>
			
			<view 
				style=" margin-bottom: 20rpx;color:#b37700;font-size: 24rpx;margin-left: 24rpx; display: flex;align-items: center;margin-top: 40rpx" v-if="item.prize">				
				<view style="font-weight: 700;font-size: 18px;" >成就</view>	
			</view>
			<view class="gui-margin-top gui-margin">
			<u-parse :content="item.prize"></u-parse>
			</view>
			
			<view
				style="margin-bottom: 20rpx;color:#b37700;font-size: 24rpx;margin-left: 24rpx; display: flex;align-items: center;margin-top: 40rpx"v-if="item.content&&item.content!='<br />'">				
				<view style="font-weight: 700;font-size: 18px;" >更多介绍</view>	
			</view>
			<view class="gui-margin-top gui-margin">
			<u-parse :content="item.content"></u-parse>
			</view>
 
			<view class="text-img" v-if="item.association_me_list">
				<view style="color:#b37700; font-weight: 700;font-size: 18px;">相关</view>	
				<view class="text-img-img">
					<view  v-for="(it,idx) in item.association_me_list" :key="idx" >
						<view
							style="color:#b37700;font-size: 24rpx;margin-left: 10rpx; display: flex;align-items: center;margin-top: 40rpx">				
							
						</view>

						<u--image radius="5" width="360rpx" height="240rpx" :src="it.image" @click="$common.navigateTo('/index_fenbao/GuanLi/XiangQing?id='+it.id)">
						</u--image>
						<view>{{it.title}}</view>
					</view>
				</view>
			</view>
		</view>


	</view>
	</view>

</template>

<script>
	let that;
	export default {
		data() {
			return {
				flag: false,
				id:'',
				item:{},				
				shadowStyle: {
					backgroundImage: "none"
				}
				
			};
		},
		onLoad(e){
    	  that=this;
		  this.id=e.id;
		  this.getContentDetail()
		},
		methods: {
			getContentDetail(){
				this.$api.getContentDetail({id:this.id,main_body_id:1},function(res){
					// console.log(res);
					that.item=res.data;					
				});
			}
		}
	}
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-color: #fff9e9;
	height: auto;
}
	.fonter {
		height: 60px;
		background-color: #dedddc;
		z-index: 1000;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 16px;
		color: #978b83;
	}

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

	}

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

	.text-img-info {
		color: #978b83;
		display: flex;
		justify-content: space-between;
	}

	.text-img {
		margin: 14px 10px;
	}

	.hrs {
		height: 3px;
		background-color: burlywood;
		width: 94%;
		margin: 20px auto;
		margin-top: 20px;
	}

	.box .info {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-left: 12px;
		margin-top: 8px;


	}

	.box .info>view {
		width: 48%;
		margin-top: 10px;
		font-size: 14px;
		margin-left: 4px;
		color: #978b83;
	}

	.imgs {
		z-index: 1;
	}

	.box {
		
		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: -100rpx;
		overflow-y: auto;
		padding-top: 10px;

	}

	.box .head {

		height: 6px;
		width: 60px;
		background-color: darkgray;
		text-align: center;
		margin: 0 auto;
		margin-top: 10px;
		border-radius: 4px;
	}


	.boxs>view {
		overflow: hidden;
		width: 355px;
		height: 160px;
		border-radius: 5px;
		margin-bottom: 30px;
	}
	.gui-margin-top{
		padding: 0 20rpx 0 20rpx ;
	}
</style>