pz/pages/index/info.vue

<template>
	<view class="container">
		<view class="title">{{ list.title }}</view>
		<view class="synopsis">{{ list.synopsis }}</view>
		<view class="notice-item"><jyf-parser :html="description" ref="article"></jyf-parser></view>
	</view>
</template>

<script>
import { details } 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;
			details({}, obj.id).then(function(e) {
				obj.list = e.data;
				console.log(obj.list);
				if (obj.list.content != null) {
					obj.description = obj.list.content.replace(/<img/g, "<img style='max-width:100%;height:auto;'");
				} //小程序商品详情图超出屏幕问题
			});
		}
	}
};
</script>

<style lang="scss">
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;
}
.title {
	margin-top: 66rpx;
	padding-left: 30rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.synopsis {
	padding-left: 30rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
}
.notice-item {
	padding: 0 20rpx;
}
</style>