<template>
	<view class="pageBgImg">
		<topNavbar title=" "></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="tit">{{detailInfo.title}}</view>
				<!-- <view class="h2">二级标题二级标题二级标题二级标题二级标题二级标题</view> -->
				<view class="content">
					<!-- <rich-text :nodes="detailInfo.mainBody" ></rich-text> -->
					<u-parse :content="detailInfo.mainBody" :tagStyle="style"></u-parse>
				</view>
				<view class="date">发布时间：{{ $u.timeFormat(detailInfo.createTime, 'yyyy/mm/dd') }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getarticle } from '@/config/api.js'
	export default {
		data() {
			return {
				id: '',
				detailInfo: {},
				style: {
					img: 'max-width:100%;height:auto',
					p: 'font-size:32rpx',
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getarticleFn()
			let obj = {a: 1}
		
		},
		methods: {
			async getarticleFn() {
				const {data: res} = await getarticle({id: this.id})
				this.detailInfo =  res
				// this.detailInfo =  (res).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				console.log(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageBgImg {
		min-height: 100vh;
		
	  .card {
		  padding: 28rpx 24rpx;
	    .tit {
			font-size: 28rpx;
			font-weight: 550;
	    }
	
	    .h2 {
			margin: 8rpx 0 42rpx 0;
			color: #686B73;
			font-size: 24rpx;
	    }
	
	    .content {
			padding: 28rpx 0;
	    }
	
	    .date {
			padding: 72rpx 0 40rpx 0;
			font-size: 20rpx;
			color: #686B73;
	    }
	  }
	}
</style>