menber-center/pages/dynamic/dynamicDetail/dynamicDetail.vue

<template>
	<view class="announcement-details">
		<text class="title">{{ announcement.title }}</text>
		<text class="date">{{ announcement.date }}</text>
		<view class="content">
			<u-parse :html="announcement.content" :selectable="true" :show-with-animation="true" style="width: 100%;"></u-parse>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getDynamicDetail
	} from '@/api/notice.js'
	const announcement = ref({
		title: "",
		content: "", // 假设这是后端返回的内容
		date: "" // ISO格式日期
	})

	function formatDate(dateString) {
		const options = {
			year: 'numeric',
			month: 'long',
			day: 'numeric'
		};
		return new Date(dateString).toLocaleDateString('zh-CN', options);
	}

	function init(id) {
		getDynamicDetail(id).then(res => {
			if (res?.data) {
				announcement.value = res.data
			}
		})
	}
	onLoad((option) => {
		const {
			id
		} = option
		init(id)
	})
</script>

<style scoped>
	.announcement-details {
		padding: 20px;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* height: 100vh; */
		/* 让页面高度撑满 */
		
		margin-bottom: env(safe-area-inset-bottom, 0);
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		text-align: center;
		/* 标题居中 */
		margin-bottom: 15px;
	}

	.content {
		flex: 1;
		/* 占据剩余空间 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* 内容左对齐 */
	}

	.body {
		font-size: 16px;
		color: #555;
		text-align: left;
		/* 内容左对齐 */
	}

	.body img {
		width: 50%;
		height: auto;
	}

	.date {
		font-size: 14px;
		color: #999;
		text-align: right;
		/* 时间右对齐 */
		margin-top: 10px;
		/* 与内容分离 */
	}
	
	/* 全局样式穿透 */
	
</style>