fix: 景区详情公告弹窗内容保留换行格式展示,正文固定高度45vh可滑动不被按钮遮盖
This commit is contained in:
@@ -193,7 +193,25 @@ function fixRichHtml(html: string): string {
|
|||||||
|
|
||||||
const introductionHtml = computed(() => fixRichHtml(scenic.value.introduction))
|
const introductionHtml = computed(() => fixRichHtml(scenic.value.introduction))
|
||||||
const bookingNoticeHtml = computed(() => fixRichHtml(scenic.value.bookingNoticeHtml))
|
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, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.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 activeTab = ref<'notice' | 'intro'>('notice')
|
||||||
const currentSlide = ref(0)
|
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;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* xuchao: 正文区固定 45vh 高度——微信要求 scroll-view 有确定高度才能竖向滚动;flex-shrink:0 防止被弹窗整体高度压缩 */
|
||||||
.notice-popup-body {
|
.notice-popup-body {
|
||||||
|
height: 45vh;
|
||||||
|
flex-shrink: 0;
|
||||||
padding: $spacing-3 $spacing-5 $spacing-3;
|
padding: $spacing-3 $spacing-5 $spacing-3;
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
color: $uv-tips-color;
|
color: $uv-tips-color;
|
||||||
line-height: 1.9;
|
line-height: 1.9;
|
||||||
max-height: 45vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-popup-footer {
|
.notice-popup-footer {
|
||||||
|
|||||||
Reference in New Issue
Block a user