<template>
|
<view class="p-4 bg-gray-50 min-h-screen">
|
<!-- 标题 -->
|
<view class="text-center text-2xl font-bold text-gray-900 mb-2">
|
{{ item.title }}
|
</view>
|
|
<!-- 发布时间 -->
|
<view class="text-center text-sm text-gray-500 mb-4">
|
{{ item.createTime }}
|
</view>
|
|
<!-- 消息类别 -->
|
<view class="text-center text-base text-gray-700 mb-6">
|
消息类别：{{ item.category }}
|
</view>
|
|
<!-- 富文本内容 -->
|
<view class="bg-white rounded-lg shadow max-w-full">
|
<rich-text :nodes="item.content"></rich-text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
item: {
|
title: '',
|
createTime: '',
|
category: '',
|
content: ''
|
}
|
};
|
},
|
onLoad(options) {
|
if (options.data) {
|
try {
|
this.item = JSON.parse(decodeURIComponent(options.data));
|
|
// 处理 item.content，为 <img> 标签添加内联样式
|
this.item.content = this.item.content.replace(
|
/<img([^>]*?)>/g,
|
`<img$1 style="max-width: 100%; height: auto; display: block;">`
|
);
|
console.log('接收到的 item:', this.item);
|
} catch (e) {
|
console.error('解析传参出错:', e);
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 页面基础布局 */
|
.min-h-screen {
|
min-height: 100vh;
|
}
|
|
.max-w-full {
|
max-width: 100%;
|
}
|
|
.bg-gray-50 {
|
background-color: #f9fafb;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
}
|
|
.p-4 {
|
padding: 1rem;
|
}
|
|
/* 文字样式 */
|
.text-center {
|
text-align: center;
|
}
|
|
.text-2xl {
|
font-size: 1.5rem;
|
line-height: 2rem;
|
}
|
|
.text-base {
|
font-size: 1rem;
|
line-height: 1.5rem;
|
}
|
|
.text-sm {
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
}
|
|
.font-bold {
|
font-weight: 700;
|
}
|
|
.font-semibold {
|
font-weight: 600;
|
}
|
|
.text-gray-900 {
|
color: #111827;
|
}
|
|
.text-gray-700 {
|
color: #374151;
|
}
|
|
.text-gray-500 {
|
color: #6b7280;
|
}
|
|
/* 间距 */
|
.mb-2 {
|
margin-bottom: 0.5rem;
|
}
|
|
.mb-4 {
|
margin-bottom: 1rem;
|
}
|
|
.mb-6 {
|
margin-bottom: 1.5rem;
|
}
|
|
/* 容器样式 */
|
.rounded-lg {
|
border-radius: 0.5rem;
|
}
|
|
.shadow {
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
|
0 1px 2px rgba(0, 0, 0, 0.06);
|
}
|
</style>
|
