From e11e20790de132a613bdf9adbc286d1714286db0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?mac=C2=B7ufutx?= Date: Thu, 24 Jul 2025 18:26:24 +0800 Subject: [PATCH] feat: 20250724 --- index.html | 18 +++ src/components/Navbar.vue | 4 +- src/views/Dating/sections/PainPoints.vue | 2 +- .../Ecosystem/sections/CooperationDialog.vue | 106 +++++++++++++++++- src/views/News/ArticleDetail.vue | 60 +++++++--- src/views/News/News.vue | 3 +- 6 files changed, 173 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 4f7d3d6..29c042b 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,24 @@ + + + + + + + + + + + + + + + + + + 友福同享官网 diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index c240b83..e9678bb 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -157,7 +157,9 @@ const isActive = (path: string) => { } // 响应式适配 -@media (max-width: 1200px) { +//@media (max-width: @tablet-breakpoint) { + +@media (max-width: 768px) { .navbar-container { width: 90%; } diff --git a/src/views/Dating/sections/PainPoints.vue b/src/views/Dating/sections/PainPoints.vue index 468f19b..1fcae29 100644 --- a/src/views/Dating/sections/PainPoints.vue +++ b/src/views/Dating/sections/PainPoints.vue @@ -58,7 +58,7 @@ const points = [ align-items: center; gap: 20px; border-radius: 16px; - background: rgba(255, 255, 255, 0.6); + //background: rgba(255, 255, 255, 0.6); /* 底部导航 0.8透模糊 */ backdrop-filter: blur(25px); diff --git a/src/views/Ecosystem/sections/CooperationDialog.vue b/src/views/Ecosystem/sections/CooperationDialog.vue index 2834f45..4957dc7 100644 --- a/src/views/Ecosystem/sections/CooperationDialog.vue +++ b/src/views/Ecosystem/sections/CooperationDialog.vue @@ -100,11 +100,11 @@ defineExpose({ display: flex; padding: 16px 50px; justify-content: center; - border-radius: 10px; + border-radius: 4px; border: 0.5px solid var(--1060-ff, #1060ff); color: var(--1060-ff, #1060ff); text-align: center; - font-size: 18px; + font-size: 16px; font-weight: 500; } @@ -112,6 +112,16 @@ defineExpose({ background: var(--1060-ff, #1060ff); color: #fff; } +@media (max-width: 768px) { + .confirmButtonClass { + font-size: 16px; + } + + .confirmButtonClass { + background: var(--1060-ff, #1060ff); + color: #fff; + } +} diff --git a/src/views/News/ArticleDetail.vue b/src/views/News/ArticleDetail.vue index ed716d7..52d5e6c 100644 --- a/src/views/News/ArticleDetail.vue +++ b/src/views/News/ArticleDetail.vue @@ -30,7 +30,6 @@ -
@@ -59,7 +58,33 @@ const article = ref({ pic: '', // 封面图URL content: '' // 正文内容（HTML格式） }) - +const TinyMceFormatFn = (data: any) => { + if (!data) return '' + // 1. 移除 img 标签中的 width/height 属性（保留 style 和其他属性） + // 原代码中处理图片的正则替换部分 + data = data.replace(/]*)>/gi, (_: any, attrs: any) => { + // 用 _ 代替 match + // 移除 width 和 height 属性 + attrs = attrs.replace(/\s*width\s*=\s*["'][^"']*["']/gi, '') + attrs = attrs.replace(/\s*height\s*=\s*["'][^"']*["']/gi, '') + // 移除 align 属性（避免图片靠右） + attrs = attrs.replace(/\s*align\s*=\s*["'](left|right|center)["']/gi, '') + // 处理原有的 style 属性 + const newStyle = 'max-width:100%;height:auto;display: block;margin:16px 0;' + if (attrs.match(/\s*style\s*=\s*["']/i)) { + // 用 _ 代替 m（第二个未使用的参数） + attrs = attrs.replace(/\s*style\s*=\s*["']([^"']*)["']/i, (_: any, existingStyle: any) => { + return ` style="${existingStyle}${newStyle}"` + }) + } else { + attrs = ` style="${newStyle}"${attrs}` + } + return `` + }) + // 2. 处理 video 标签（保持原有逻辑） + data = data.replace(/]*)>/gi, '') + return data +} // 从接口获取文章详情 const fetchArticleDetail = async () => { loading.value = true @@ -73,6 +98,7 @@ const fetchArticleDetail = async () => { const data = res.data // 赋值到响应式变量 article.value = data + data.content = TinyMceFormatFn(data.content) } else { throw new Error(res.message || '获取文章详情失败') } @@ -174,27 +200,30 @@ onMounted(() => { // 正文内容（富文本样式适配） .article-body { - font-weight: 400; - line-height: 35px; - p { + //font-weight: 400; + //line-height: 35px; + :deep(p) { font-size: 16px; color: #666; - line-height: 1.8; + line-height: 1.2; margin-bottom: 24px; text-indent: 2em; + :deep img { + margin: auto; + } } // 适配富文本中的图片 - img { + :deep(img) { max-width: 100%; height: auto; - margin: 16px 0; + display: block !important; } // 适配富文本中的标题 h2, h3 { - margin: 24px 0 16px; + //margin: 24px 0 16px; color: @text-color; } } @@ -203,21 +232,22 @@ onMounted(() => { @media (max-width: 768px) { padding: 40px 20px; .article-body { - font-weight: 400; - line-height: 35px; - p { + :deep(p) { font-size: 16px; color: #666; line-height: 1.8; margin-bottom: 24px; text-indent: 2em; + :deep img { + margin: auto; + } } // 适配富文本中的图片 - img { - max-width: 100%; + :deep img { + max-width: 100%; // 图片宽度自适应 height: auto; - margin: 16px 0; + display: block !important; } // 适配富文本中的标题 diff --git a/src/views/News/News.vue b/src/views/News/News.vue index 9b0ea77..f32c3db 100644 --- a/src/views/News/News.vue +++ b/src/views/News/News.vue @@ -112,7 +112,7 @@ const fetchCategories = async () => { activeTab.value = categories.value[0].name } } else { - ElMessage.error(res.message || '获取分类失败') + // ElMessage.error(res.message || '获取分类失败') } } catch (error: any) { console.error('获取分类列表失败', error) @@ -314,6 +314,7 @@ onMounted(async () => { height: 260px; object-fit: cover; border-radius: @border-radius-md; + flex-shrink: 0; /* 禁止收缩，保证宽度不变 */ margin-right: 30px; }