agent-test/pages/bank-search/article-detail/article-detail.vue

<template>
	<view>
		<view class="article">
			<view class="art_title">{{ article.title }}</view>
			<view style="display: flex;align-items: center;">
				<view class="recommend" v-if="article.recommended == 1">推荐</view>
				<view class="art_date gray">时间：{{ article.updated_at }}</view>
			</view>
			<view class="art_con" v-html="article.contents">{{ article.contents }}</view>
		</view>
	</view>
</template>

<script>
import { GetArticleDetail } from '../../apis/commu.js';
export default {
	data() {
		return {
			article: {}
		};
	},
	onLoad(ops) {
		if (ops) {
			this.getDetail(ops.id);
		}
	},

	// updated() {
	// 	document.getElementsByTagName('video').setAttribute('playsinline', true);
	// },
	methods: {
		//获取文章详情
		getDetail(id) {
			GetArticleDetail({ id }).then(res => {
				if (res.code == 200) {
					this.article = res.data;
					// console.log(this.article.contents);
				} else {
					uni.showModal({
						content: res.msg || '获取文章详情失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.article ::v-deep img {
	max-width: 100%;
	height: auto;
}
.art_con ::v-deep p {
	line-height: 2;
	margin-top:10rpx;
}
.art_con ::v-deep section {
	line-height: 60rpx;
}
.article {
	width: 690rpx;
	margin: 0 auto;
	padding-bottom: 50rpx;
	font-size: 28rpx;
	.recommend{
		width: 76rpx;
		line-height: 44rpx;
		text-align: center;
		background-color: #F8F8F8;
		color:#FB231F;
		font-size:28rpx;
		margin-right: 10rpx;
	}
	.art_title {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}
	.art_date {
		margin: 30rpx 0;
	}
}
</style>