fix: 景区详情公告弹窗内容保留换行格式展示,正文固定高度45vh可滑动不被按钮遮盖

This commit is contained in:
jacobxu666
2026-09-04 16:17:44 +08:00
parent e1801f1026
commit 6cef231473
+22 -3
View File
@@ -193,7 +193,25 @@ function fixRichHtml(html: string): string {
const introductionHtml = computed(() => fixRichHtml(scenic.value.introduction))
const bookingNoticeHtml = computed(() => fixRichHtml(scenic.value.bookingNoticeHtml))
const storeNoticeHtml = computed(() => fixRichHtml(storeNotice.value.content))
/** 富文本标签特征(管理端公告内容为 textarea 纯文本,含标签才视为 HTML) */
// xuchao: 判断公告正文是否为编辑器产出的 HTML
const HTML_TAG_RE = /<(?:p|br|div|span|strong|em|i|b|u|h[1-6]|img|ul|ol|li|a|table|tr|td|video|section)[^>]*>/i
// xuchao: 纯文本转 rich-text 可渲染的 HTML:转义特殊字符 + 换行转 <br/>,保留后台录入的段落格式
function plainTextToHtml(text: string): string {
return text
.replace(/&(?!(?:#\d+|#x[0-9a-fA-F]+|[a-zA-Z][a-zA-Z0-9]*);)/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\n/g, '<br/>')
}
const storeNoticeHtml = computed(() => {
const content = storeNotice.value.content
if (!content) return ''
return HTML_TAG_RE.test(content) ? fixRichHtml(content) : plainTextToHtml(content)
})
const activeTab = ref<'notice' | 'intro'>('notice')
const currentSlide = ref(0)
@@ -862,13 +880,14 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
text-align: center;
}
/* xuchao: 正文区固定 45vh 高度——微信要求 scroll-view 有确定高度才能竖向滚动;flex-shrink:0 防止被弹窗整体高度压缩 */
.notice-popup-body {
height: 45vh;
flex-shrink: 0;
padding: $spacing-3 $spacing-5 $spacing-3;
font-size: $font-size-sm;
color: $uv-tips-color;
line-height: 1.9;
max-height: 45vh;
overflow-y: auto;
}
.notice-popup-footer {