<template>
  <view class="notice-detail">
    <!-- 标题区域 -->
    <view class="notice-title">
      <text class="title">{{ noticeData.title }}</text>
      <text class="time">{{ noticeData.time }}</text>
    </view>

    <!-- 内容区域 -->
    <view class="notice-content">
      <u-read-more>
        <rich-text :nodes="noticeData.content"></rich-text>
      </u-read-more>
    </view>
  </view>
</template>

<script>
import UReadMore from '../../../uni_modules/uview-ui/components/u-read-more/u-read-more.vue'

export default {
  name: 'NoticeDetail',
  components: { UReadMore },
  data() {
    return {
      noticeData: {
        title: '',
        time: '',
        content: '',
      },
    }
  },
  methods: {
    fetchNoticeDetail() {
      // 假设接口返回的数据如下
      const apiResponse = {
        title: '"皖送e餐"弱口令问题整改工作',
        time: '2024-12-26 01:46:44',
        content:
          '接受公司通知，"皖送e餐"APP需针对弱口令问题开展整改工作，更新计划于11月13日13时整实施。届时，初始密码将由888888修改为Bd@19901，需要注意的是，即使用户此前已自行修改过初始密码且于系统判定机制的限制，这部分用户的密码也会被重置。同时，本次更新还新增了记住密码功能，若未出现"记住密码"功能的情况，建议下载APP(此方法速度最快)。',
      };

      this.noticeData = apiResponse;
    },
  },
  mounted() {
    this.fetchNoticeDetail();
  },
}
</script>

<style scoped>
.notice-detail {
  padding: 16px;
  background-color: #fff;
  min-height: 100vh;
}

.notice-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.time {
  font-size: 14px;
  color: #999;
}

.notice-content {
  line-height: 1.6;
}

.content-text {
  font-size: 15px;
  color: #666;
}
</style>