LiuJiangYY_tj/柳江医院体检平台H5/pages/main/post/post.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年6月6日 11:01:06
	 */
	import {
		ref
	} from 'vue'
	import {
		$response,
		PostInfoAction,
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		id: {
			type: String,
			default: '0'
		}
	});
	const post_info = ref(false)
	const PostInfo = async () => {
		const response = await PostInfoAction({
			...$props
		})
		$response(response, () => {
			post_info.value = response.data.info
			post_info.value.content = post_info.value.content.replace(/<img/gi,
				'<img style="max-width:80%;height:auto;display: block;margin: 0 auto;" ')
			document.title = post_info.value.title
			uni.setNavigationBarTitle({
				title: post_info.value.title
			})
		})
	}
	onShow(() => {
		PostInfo()
	})
</script>
<template>
	<view>
		<view class="top_line_wrapper"></view>
		<view v-if="!!post_info">
			<view class="post_title_wrapper">
				{{ post_info.title }}
			</view>
			<view class="post_box_wrapper">
				<view class="post_info_wrapper">
					<view class="post_author_wrapper">{{ post_info.author }}</view>
					<view class="post_break_wrapper"></view>
					<view class="post_date_wrapper">{{ post_info.date }}</view>
				</view>
			</view>
			<view class="post_line_wrapper"></view>
			<view class="post_content_wrapper" v-html="post_info.content"></view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.post_content_wrapper {
		width: 666rpx;
		font-size: 27rpx;
		font-weight: 400;
		color: #525252;
		line-height: 46rpx;
		margin: 30rpx auto 0;
	}

	.post_line_wrapper {
		width: 750rpx;
		height: 1rpx;
		background: #D1D1D1;
		margin-top: 30rpx;
	}

	.post_date_wrapper {
		margin-left: 18rpx;
		font-size: 21rpx;
		font-weight: 400;
		color: #AFAFAF;
		line-height: 1;
	}

	.post_break_wrapper {
		width: 2rpx;
		height: 22rpx;
		background: #DBDBDB;
		margin-left: 24rpx;
	}

	.post_box_wrapper {
		display: inline-block;
		margin-left: 35rpx;
	}

	.post_info_wrapper {
		display: flex;
		align-items: center;
		background: #E6F8FA;
		border-radius: 5rpx;
		padding: 5rpx 10rpx;
		font-size: 23rpx;
		font-weight: 500;
		color: #6C6C6C;
		line-height: 1;
	}

	.post_title_wrapper {
		width: 655rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #000000;
		line-height: 48rpx;
		margin: 10rpx auto 0;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
</style>