menber-center/pages/guide/guideDetail/guideDetail.vue

<template>
  <view class="announcement-details">
    <text class="title">{{ announcement.title }}</text>

    <view class="content">
      <u-parse :html="announcement.content" :selectable="true"></u-parse>
    </view>

    <text class="date">{{ formatDate(announcement.date) }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      announcement: {
        title: "申请加入协会指南",
        content: "<p>想要加入我们的协会吗？请填写申请表并提交至办公室，审核后会通知您结果。</p><img src='/static/notice/ditu.png' />", // 假设这是后端返回的内容
        date: "2023-10-01T00:00:00Z" // ISO格式日期
      }
    };
  },
  methods: {
    formatDate(dateString) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(dateString).toLocaleDateString('zh-CN', options);
    }
  }
};
</script>

<style scoped>
.announcement-details {
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh; /* 让页面高度撑满 */
}

.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>