driverSchool/pagesA/noticeContent/index.vue

<template>
  <view class="container">
    <VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="通知公告详情"></VNavigationBar>
    <view class="body">
      <view class="header">
        <view class="title line-clamp-3">{{ noticeDetails.title }}</view>
        <view class="time" v-if="noticeDetails.updateTime">{{ getCurrentDateTime(noticeDetails.updateTime) }}</view>
      </view>
      <view class="content">
        <u-parse :content="noticeDetails.content"></u-parse>
		<!-- <u-parse :content="test"></u-parse> -->
      </view>
    </view>
  </view>
</template>

<script>
import {getJSONData} from "@/utils/auth";
import VNavigationBar from '@/components/tabbar/VNavigationBar.vue'
import request from '@/utils/request.js'

export default {
  name: "content",
  components: {VNavigationBar},
  filters: {
    formatRichText(html) {
      const nodes = parser.getRichTextJson(html)
      return nodes.children
    }
  },
  data() {
    return {
      richTextHtml: '',
      toUrl:null,
	  noticeId: null,
	  noticeDetails: [],
    };
  },
  onLoad(data) {
	  console.log('data', data.id)
	  this.noticeId = data.id
	  this.getNoticeById()
  },
  methods:{
	  getNoticeById(){
		  request({
			  url: '/app-api/base/notice/get',
			  method: 'GET',
			  params: {
				  id: this.noticeId
			  }
		  }).then(res => {
			  this.noticeDetails = res.data
		  })
	  },
	  // 格式化时间
	  getCurrentDateTime() {
	    const now = new Date();
	  
	    const year = now.getFullYear();
	    const month = String(now.getMonth() + 1).padStart(2, '0');
	    const day = String(now.getDate()).padStart(2, '0');
	    const hours = String(now.getHours()).padStart(2, '0');
	    const minutes = String(now.getMinutes()).padStart(2, '0');
	    const seconds = String(now.getSeconds()).padStart(2, '0');
	  
	    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	    // return now;
	  },
  }
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  
  .body {
    flex: 1;
    padding: 24rpx 32rpx;
    overflow-y: auto;
    box-sizing: border-box;
    
    .header {
      margin-bottom: 40rpx;
      padding-bottom: 24rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333333;
        line-height: 1.5;
        margin-bottom: 16rpx;
        word-break: break-word;
        white-space: normal;
      }
      
      .time {
        font-size: 24rpx;
        color: #999999;
      }
    }
    
    .content {
      font-size: 30rpx;
      color: #333333;
      line-height: 1.8;
      
      /* 图片样式增强 */
       img {
        max-width: 100% !important;  /* 确保图片不超过容器宽度 */
        height: auto !important;     /* 保持图片原始比例 */
        display: block;              /* 改为块级元素避免间隙 */
        margin: 32rpx auto;          /* 增加上下边距 */
        border-radius: 12rpx;        /* 圆角效果 */
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); /* 轻微阴影提升层次感 */
        background-color: #f8f8f8;  /* 加载时的背景色 */
      }
      
      /* 图片点击预览（可选） */
      img {
        cursor: pointer;
        transition: transform 0.2s;
      }
      
      img:active {
        transform: scale(0.98);
      }
      
      /* 其他富文本元素样式 */
      p {
        margin: 24rpx 0;
        word-break: break-word;
      }
      
      h1, h2, h3 {
        margin: 32rpx 0 24rpx;
        font-weight: 600;
      }
      
		a {
        color: #2979ff;
        text-decoration: none;
      }
      
      table {
        width: 100%;
        border-collapse: collapse;
        margin: 24rpx 0;
        font-size: 28rpx;
      }
      
      th, td {
        border: 1rpx solid #e0e0e0;
        padding: 16rpx;
        text-align: left;
      }
    }
  }
}
</style>