yicangzongtai_app_240321/pages/research/homepage/about-us-detail.vue

<template>
	<view class="article">
		<navbar :config="config"></navbar>
		<view class="title"> 
 			{{ articleDetail.title }}
		</view>
		<view class="image-time">
			<view class="iconfont u-font24 linge">&#xe64a;</view>
			<view class="time">
				{{time}}
			</view>
		</view>
		<view class="text">
			<view class="item">
				<view class="top ql-editor-box" v-html="articleDetail.content"></view>
				<!-- <jyfparser :html="$mUtil.formatRichText(articleDetail.content)" ref="article"></jyfparser> -->
			</view>
		</view>
	</view>
</template>

<script>
	// import jyfparser from "../../../components/jyf-parser/jyf-parser.vue";
	export default {

		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "关于松河生活平台",
					color: "#fff",
					switchnextstep: true, //切换底部样式
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#0B844A"],
					
				},
				articleDetail: {},
				time:"",


			};
		},
		onLoad(options) {

			this.getActicle(options.id);

		},
		methods: {
			getActicle(id) {
				this.$http.get("/about/us/info/" + id).then((res) => {
					if (res && res.code == 200) {
						this.articleDetail = res.data;
						this.articleDetail.content= res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
				this.time = res.data.update_time.slice(0,10)
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>

	.text {
		padding: 0 30rpx;
		overflow: hidden;
	}
	
	.show-bottom {
		background-color: #ffffff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 37rpx 30rpx 22rpx 30rpx;

		.input {
			.texterea-item {
				background-color: #fafafa;
				padding: 22rpx 20rpx;
				border-radius: 21rpx;
				margin: 22rpx 29rpx 4rpx 30rpx;
			}
		}

		.top {
			display: flex;
			align-items: center;

			.line {
				width: 6rpx;
				height: 26rpx;
				background-color: #0B844A;
				border-radius: 3rpx;
			}

			.item {
				font-size: 36rpx;
				color: #1a1a1a;
				font-weight: 700;
				margin-left: 14rpx;
				flex: 1;
			}

			.deter-mine {
				font-size: 30rpx;
				font-weight: 500;
				color: #1a1a1a;
			}
		}
	}

	.selected {
		padding: 0 32rpx;

		.item {
			display: flex;
			margin-top: 30rpx;

			// align-items: center;
			.personal {
				margin-left: 18rpx;

				.top-title {
					font-size: 28rpx;
					font-weight: 400;
					color: #1a1a1a;
				}

				.time {
					font-size: 24rpx;
					color: #999999;
					margin-top: 8rpx;
					font-weight: 500;
				}

				.content {
					margin-top: 14rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
				}
			}

			image {
				width: 84rpx;
				height: 84rpx;
			}
		}

		.item:nth-child(odd) {
			.content {
				margin-top: 14rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.item:nth-child(even) {
			.content {
				margin-top: 14rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #1a1a1a;
			}
		}

		.stay-msg {
			margin-top: 28rpx;
			font-size: 36rpx;
			font-weight: 700;
			color: #1a1a1a;
		}
	}

	.option {
		display: flex;

		.link {
			display: flex;
			align-items: center;
			margin-left: 44rpx;

			image {
				width: 38rpx;
				height: 38rpx;
			}

			.num {
				margin-left: 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.message {
			display: flex;
			align-items: center;
			margin-left: 44rpx;

			image {
				width: 38rpx;
				height: 38rpx;
			}

			.num {
				margin-left: 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.good {
			display: flex;
			align-items: center;

			image {
				width: 38rpx;
				height: 38rpx;
			}

			.num {
				margin-left: 18rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.text {
		padding: 18rpx 30rpx 40rpx 30rpx;
		color: #666666;
		font-weight: 500;
		line-height: 48rpx;

		.item {
			margin-bottom: 30rpx;
		}

		image {
			width: 690rpx;
			height: 390rpx;
			// margin-bottom: 30rpx;
		}
	}

	.image-time {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		image {
			width: 24rpx;
			height: 24rpx;
		}
		.time {
			margin-left: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.title {
		padding: 48rpx 30rpx 16rpx 30rpx;
		font-size: 42rpx;
		font-weight: 700;
		color: #1a1a1a;
	}
</style>