ltred/pages/applic/info.vue

<template>
	<view class="container">
		<view class="notice-item"><jyf-parser :html="description" ref="article"></jyf-parser></view>
		<view class="title">{{ list.title }}</view>
		<view class="synopsis">{{ list.synopsis }}</view>
		<view class="pad">
			<view class="love-box">
				
				<view class="main flex">
					<view class="erweima-box">
						<view class="erweima">
							<image src="../../static/img/gongzhonghao.png" mode=""></image>
						</view>
						<view class="font">罗田县红十字会公众号</view>
					</view>
					<image class="main-image" src="../../static/img/index-love.png" mode=""></image>
					<view class="erweima-box">
						<view class="erweima">
							<image src="../../static/img/lovetongdao.png" mode=""></image>
						</view>
						<view class="font">爱心捐款通道</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { details, deconstructArticle } from '@/api/info.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;
}
.notice-item {
	width: 100%;
	height: 500rpx;
	color: #666666;
	font-size: 23rpx;
	padding-bottom: 30rpx;
}
.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;
}
.pad {
	padding-bottom: 170rpx;
}
.love-box {
	margin: 60rpx auto 0;
	width: 689rpx;
	height: 336rpx;
	background: #FFFFFF;
	border: 4px solid #F3392C;
	padding: 0rpx 35rpx 10rpx 24rpx;
	.main{
		padding-top: 50rpx;
		position: relative;
		justify-content: space-between;
		.main-image {
			position: absolute;
			top: 90rpx;
			left: 170rpx;
			width: 312rpx;
			height: 164rpx;
			z-index: 1;
		}
		.erweima-box {
			text-align: center;
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			.erweima {
				width: 204rpx;
				height: 204rpx;
				background: #000000;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.font {
				margin-top: 14rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}
}
</style>