dengzhifeng/ufutx-pc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 20250724

Browse Source
This commit is contained in:
mac·ufutx 2025-07-24 18:26:24 +08:00
parent c1c60a5313
commit e11e20790d
6 changed files with 173 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -6,6 +6,24 @@
<!-- <link href="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.min.css" rel="stylesheet">--> <!-- <link href="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.min.css" rel="stylesheet">-->
<!-- <link href="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.min.css" rel="stylesheet">--> <!-- <link href="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.min.css" rel="stylesheet">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- 基础信息：标题（分享卡片标题） -->
<meta property="og:title" content="这是分享的标题" />
<!-- 描述（分享卡片副标题） -->
<meta property="og:description" content="这是分享的详细描述，会显示在标题下方" />
<!-- 分享图片（卡片主图） -->
<meta property="og:image" content="https://images.health.ufutx.com/202507/14/cc651222ac2e5f63185dec1f31d176ae.png" />
<!-- 分享链接（点击卡片跳转的 URL，默认是当前页面 URL） -->
<meta property="og:url" content="https://www.ufutx.com/web/#/" />
<!-- 类型（固定为 website） -->
<meta property="og:type" content="website" />
<!-- 微信特定标签（增强兼容性） -->
<meta name="description" content="这是分享的详细描述（微信 fallback 用）" />
<meta name="thumbnail" content="https://images.health.ufutx.com/202507/14/be87f139c2c1a98f259db1fb3c82de6b.png" /> <!-- 微信缩略图 -->
<title>友福同享官网</title> <title>友福同享官网</title>
</head> </head>
<body> <body>

4
src/components/Navbar.vue
View File

@ -157,7 +157,9 @@ const isActive = (path: string) => {
} }
// 响应式适配 // 响应式适配
@media (max-width: 1200px) { //@media (max-width: @tablet-breakpoint) {
@media (max-width: 768px) {
.navbar-container { .navbar-container {
width: 90%; width: 90%;
} }

2
src/views/Dating/sections/PainPoints.vue
View File

@ -58,7 +58,7 @@ const points = [
align-items: center; align-items: center;
gap: 20px; gap: 20px;
border-radius: 16px; border-radius: 16px;
background: rgba(255, 255, 255, 0.6); //background: rgba(255, 255, 255, 0.6);
/* 底部导航 0.8透模糊 */ /* 底部导航 0.8透模糊 */
backdrop-filter: blur(25px); backdrop-filter: blur(25px);

106
src/views/Ecosystem/sections/CooperationDialog.vue
View File

@ -100,11 +100,11 @@ defineExpose({
display: flex; display: flex;
padding: 16px 50px; padding: 16px 50px;
justify-content: center; justify-content: center;
border-radius: 10px; border-radius: 4px;
border: 0.5px solid var(--1060-ff, #1060ff); border: 0.5px solid var(--1060-ff, #1060ff);
color: var(--1060-ff, #1060ff); color: var(--1060-ff, #1060ff);
text-align: center; text-align: center;
font-size: 18px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
@ -112,6 +112,16 @@ defineExpose({
background: var(--1060-ff, #1060ff); background: var(--1060-ff, #1060ff);
color: #fff; color: #fff;
} }
@media (max-width: 768px) {
.confirmButtonClass {
font-size: 16px;
}
.confirmButtonClass {
background: var(--1060-ff, #1060ff);
color: #fff;
}
}
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
:deep(.el-dialog) { :deep(.el-dialog) {
@ -197,4 +207,96 @@ defineExpose({
color: #fff; color: #fff;
} }
} }
// 移动端适配（768px以下）
@media (max-width: 768px) {
:deep(.el-dialog) {
border-radius: 20px;
padding: 50px 70px;
.form-container {
padding: 0;
}
.el-form-item {
margin-bottom: 30px;
}
.el-form-item__label {
font-size: 14px;
font-weight: bold;
line-height: 14px;
margin-bottom: 6px;
}
.el-input__wrapper,
.el-textarea__inner {
display: flex;
padding: 18px 16px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 10px;
border: 0.5px solid #b2b3b5;
box-shadow: none;
}
/* 在你的全局样式文件中 */
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
color: var(--b-2-b-3-b-5, #b2b3b5);
text-align: left;
font-size: 14px;
font-weight: 400;
}
.el-textarea__inner {
min-height: 142px !important;
}
}
:deep(.el-dialog) {
width: 90% !important; /* 弹框宽度占屏幕90% */
padding: 20px 15px; /* 减小内边距 */
.el-form-item {
margin-bottom: 15px; /* 减小表单项间距 */
}
.el-input__wrapper,
.el-textarea__inner {
padding: 12px 14px; /* 减小输入框内边距 */
}
.el-textarea__inner {
min-height: 100px !important; /* 减小文本域高度 */
}
}
.dialog-header {
font-size: 18px; /* 减小标题字体 */
padding-bottom: 25px; /* 减小标题底部间距 */
}
.dialog-footer {
gap: 15px; /* 减小按钮间距 */
.cancel-btn,
.confirm-btn {
width: 45%; /* 按钮宽度平分 */
height: 44px; /* 减小按钮高度 */
padding: 10px 0; /* 垂直居中文字 */
font-size: 14px; /* 减小按钮文字 */
}
}
// 确保输入框和按钮不超出容器
:deep(.el-input),
:deep(.el-textarea),
.dialog-footer > div {
max-width: 100%;
box-sizing: border-box;
}
}
</style> </style>

60
src/views/News/ArticleDetail.vue
View File

@ -30,7 +30,6 @@
</div> </div>
<!-- 正文内容（富文本渲染） --> <!-- 正文内容（富文本渲染） -->
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div class="article-body" v-html="article.content"></div> <div class="article-body" v-html="article.content"></div>
</div> </div>
@ -59,7 +58,33 @@ const article = ref({
pic: '', // 封面图URL pic: '', // 封面图URL
content: '' // 正文内容（HTML格式） content: '' // 正文内容（HTML格式）
}) })
const TinyMceFormatFn = (data: any) => {
if (!data) return ''
// 1. 移除 img 标签中的 width/height 属性（保留 style 和其他属性）
// 原代码中处理图片的正则替换部分
data = data.replace(/<img([^>]*)>/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 `<img${attrs}>`
})
// 2. 处理 video 标签（保持原有逻辑）
data = data.replace(/<video([^>]*)>/gi, '<video style="max-width:100%;height:auto;display: block;"$1>')
return data
}
// 从接口获取文章详情 // 从接口获取文章详情
const fetchArticleDetail = async () => { const fetchArticleDetail = async () => {
loading.value = true loading.value = true
@ -73,6 +98,7 @@ const fetchArticleDetail = async () => {
const data = res.data const data = res.data
// 赋值到响应式变量 // 赋值到响应式变量
article.value = data article.value = data
data.content = TinyMceFormatFn(data.content)
} else { } else {
throw new Error(res.message || '获取文章详情失败') throw new Error(res.message || '获取文章详情失败')
} }
@ -174,27 +200,30 @@ onMounted(() => {
// 正文内容（富文本样式适配） // 正文内容（富文本样式适配）
.article-body { .article-body {
font-weight: 400; //font-weight: 400;
line-height: 35px; //line-height: 35px;
p { :deep(p) {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
line-height: 1.8; line-height: 1.2;
margin-bottom: 24px; margin-bottom: 24px;
text-indent: 2em; text-indent: 2em;
:deep img {
margin: auto;
}
} }
// 适配富文本中的图片 // 适配富文本中的图片
img { :deep(img) {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin: 16px 0; display: block !important;
} }
// 适配富文本中的标题 // 适配富文本中的标题
h2, h2,
h3 { h3 {
margin: 24px 0 16px; //margin: 24px 0 16px;
color: @text-color; color: @text-color;
} }
} }
@ -203,21 +232,22 @@ onMounted(() => {
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 40px 20px; padding: 40px 20px;
.article-body { .article-body {
font-weight: 400; :deep(p) {
line-height: 35px;
p {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
line-height: 1.8; line-height: 1.8;
margin-bottom: 24px; margin-bottom: 24px;
text-indent: 2em; text-indent: 2em;
:deep img {
margin: auto;
}
} }
// 适配富文本中的图片 // 适配富文本中的图片
img { :deep img {
max-width: 100%; max-width: 100%; // 图片宽度自适应
height: auto; height: auto;
margin: 16px 0; display: block !important;
} }
// 适配富文本中的标题 // 适配富文本中的标题

3
src/views/News/News.vue
View File

@ -112,7 +112,7 @@ const fetchCategories = async () => {
activeTab.value = categories.value[0].name activeTab.value = categories.value[0].name
} }
} else { } else {
ElMessage.error(res.message || '获取分类失败') // ElMessage.error(res.message || '获取分类失败')
} }
} catch (error: any) { } catch (error: any) {
console.error('获取分类列表失败', error) console.error('获取分类列表失败', error)
@ -314,6 +314,7 @@ onMounted(async () => {
height: 260px; height: 260px;
object-fit: cover; object-fit: cover;
border-radius: @border-radius-md; border-radius: @border-radius-md;
flex-shrink: 0; /* 禁止收缩，保证宽度不变 */
margin-right: 30px; margin-right: 30px;
} }