feat: 20250724
This commit is contained in:
parent
c1c60a5313
commit
e11e20790d
18
index.html
18
index.html
@ -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">-->
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
:deep(.el-dialog) {
|
||||
@ -197,4 +207,96 @@ defineExpose({
|
||||
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>
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
</div>
|
||||
|
||||
<!-- 正文内容（富文本渲染） -->
|
||||
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div class="article-body" v-html="article.content"></div>
|
||||
</div>
|
||||
@ -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(/<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 () => {
|
||||
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;
|
||||
}
|
||||
|
||||
// 适配富文本中的标题
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user