WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现详细页面公告自动换行

Browse Source
This commit is contained in:
WindowBird 2025-08-27 09:04:44 +08:00
parent eeaa516065
commit 7bc48c1328
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
pages/announcementList/announcementDetail.vue
View File

@ -6,7 +6,7 @@
<text class="time">{{ announcementDetail.createTime }}</text> <text class="time">{{ announcementDetail.createTime }}</text>
</view> </view>
</view> </view>
<view class="content"> <view class="content">
<rich-text :nodes="announcementDetail.content" class="rich-content"></rich-text> <rich-text :nodes="announcementDetail.content" class="rich-content"></rich-text>
</view> </view>
@ -20,7 +20,7 @@ const announcementDetail = ref({
id: '', id: '',
title: '', title: '',
content: '', content: '',
createTime: '' createTime: '',
}) })
// 获取页面参数 // 获取页面参数
@ -28,12 +28,12 @@ const getPageParams = () => {
const pages = getCurrentPages() const pages = getCurrentPages()
const currentPage = pages[pages.length - 1] const currentPage = pages[pages.length - 1]
const options = currentPage.options const options = currentPage.options
announcementDetail.value = { announcementDetail.value = {
id: options.id || '', id: options.id || '',
title: decodeURIComponent(options.title || ''), title: decodeURIComponent(options.title || ''),
content: decodeURIComponent(options.content || ''), content: decodeURIComponent(options.content || ''),
createTime: decodeURIComponent(options.createTime || '') createTime: decodeURIComponent(options.createTime || ''),
} }
} }
@ -63,6 +63,7 @@ onMounted(() => {
color: #333; color: #333;
line-height: 1.4; line-height: 1.4;
margin-bottom: 20rpx; margin-bottom: 20rpx;
word-break: break-all; /* 强制换行（包括长单词） */
} }
.meta { .meta {
@ -87,33 +88,33 @@ onMounted(() => {
font-size: 28rpx; font-size: 28rpx;
line-height: 1.8; line-height: 1.8;
color: #333; color: #333;
:deep(img) { :deep(img) {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 8rpx; border-radius: 8rpx;
margin: 20rpx 0; margin: 20rpx 0;
} }
:deep(p) { :deep(p) {
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
:deep(h1, h2, h3, h4, h5, h6) { :deep(h1, h2, h3, h4, h5, h6) {
font-weight: bold; font-weight: bold;
margin: 30rpx 0 20rpx 0; margin: 30rpx 0 20rpx 0;
color: #333; color: #333;
} }
:deep(ul, ol) { :deep(ul, ol) {
padding-left: 40rpx; padding-left: 40rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
:deep(li) { :deep(li) {
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
:deep(blockquote) { :deep(blockquote) {
border-left: 8rpx solid #007aff; border-left: 8rpx solid #007aff;
padding-left: 20rpx; padding-left: 20rpx;
@ -121,14 +122,14 @@ onMounted(() => {
color: #666; color: #666;
font-style: italic; font-style: italic;
} }
:deep(code) { :deep(code) {
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 4rpx 8rpx; padding: 4rpx 8rpx;
border-radius: 4rpx; border-radius: 4rpx;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
} }
:deep(pre) { :deep(pre) {
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 20rpx; padding: 20rpx;
@ -136,19 +137,19 @@ onMounted(() => {
overflow-x: auto; overflow-x: auto;
margin: 20rpx 0; margin: 20rpx 0;
} }
:deep(table) { :deep(table) {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 20rpx 0; margin: 20rpx 0;
} }
:deep(th, td) { :deep(th, td) {
border: 1rpx solid #ddd; border: 1rpx solid #ddd;
padding: 16rpx; padding: 16rpx;
text-align: left; text-align: left;
} }
:deep(th) { :deep(th) {
background-color: #f8f8f8; background-color: #f8f8f8;
font-weight: bold; font-weight: bold;