166 lines
3.9 KiB
Vue
166 lines
3.9 KiB
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>
|