xebt/pages/index/artDetail.vue

<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="notice-item">
			<jyf-parser :html="description" ref="article"></jyf-parser>
		</view>
	</view>
</template>

<script>
	import {
		getDetail,
	} from '@/api/index.js';
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	export default {
		components: {
			jyfParser
		},
		data() {
			return {
				id: '',
				list: "",
				description: '',
				type: 0,

			}
		},
		onLoad(option) {
			this.id = option.id;
			this.loadData();
		},
		methods: {
			loadData() {
				let obj = this;
				getDetail(obj.id).then(function(e) {
					obj.list = e.data;
					if (obj.list.content != null) {
						obj.description = obj.list.content.replace(/<img/g,
							"<img style='max-width:100%;height:auto;'");
					} //小程序商品详情图超出屏幕问题
				});
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	page {
		min-height: 100%;
		background: #FFFFFF;
	}

	.notice_name {
		font-size: 35rpx !important;
		color: #303133;
		padding: 25rpx 25rpx 0rpx 25rpx;
		margin-bottom: 25rpx;
	}

	.course-video {
		width: 100%;
		height: 500rpx;
	}

	.notice-item {
		width: 100%;
		height: 100%;
		color: #666666;
		padding: 35rpx 35rpx;
		font-size: 23rpx;
		padding-bottom: 30rpx;
	}
</style>