menber-center/pages/contactUs/contactUs.vue

<template>
	<view class="container">
		<view class="content">
			<u-parse :html="data.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 { query } from '@/api/contactUs.js'
	
	const data = ref({
		content: ''
	})
	
	onLoad(() => {
		query().then(res => {
			if (res && res.message === 'success') {
				data.value = res.data
			}
		})
	})
</script>

<style lang="scss" scoped>
.container {
	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>