fgm
/
cankao-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(移动端适配): 优化富文本编辑器移动端体验 

- 修改viewport设置禁止用户缩放
- 添加移动端检测并自动跳转移动版页面
- 调整移动版页面布局和样式
- 实现标题高亮功能
- 优化卡片标题显示为2行省略
This commit is contained in:
34701892@qq.com 2025-08-04 08:51:44 +08:00
parent 2489a79f94
commit aae623288b
3 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -4,7 +4,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="管理系统" /> <meta name="keywords" content="管理系统" />
<meta name="description" content="" /> <meta name="description" content="" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />

4
src/views/pages/richedit/index.vue
View File

@ -290,6 +290,7 @@ import { highlightTitle } from '/@/utils/highlight';
import clipboard from 'clipboard'; import clipboard from 'clipboard';
import { Session } from '/@/utils/storage'; import { Session } from '/@/utils/storage';
import recordDialog from './dialog/recordDialog.vue'; import recordDialog from './dialog/recordDialog.vue';
import { isMobileByWidth } from '/@/utils/Utils'
const recordDialogRef = ref(); const recordDialogRef = ref();
/** 管理后台需求文件0519（V1.1） start */ /** 管理后台需求文件0519（V1.1） start */
@ -701,6 +702,9 @@ function recordDialogClose() { }
// 页面加载时 // 页面加载时
onMounted(async () => { onMounted(async () => {
if (isMobileByWidth() && Session.get('userInfoLocal').userType == '01') {
router.push('/richeditMobile');
}
NextLoading.done(); NextLoading.done();
getTagSourceFn(); getTagSourceFn();
getData(); getData();

61
src/views/pages/richedit/indexMobile.vue
View File

@ -32,7 +32,7 @@
<el-card v-for="(item, index) in tableData.data" :key="index" class="card"> <el-card v-for="(item, index) in tableData.data" :key="index" class="card">
<template #header> <template #header>
<div class="card_header" @click.stop="goDetail(1, item, true)"> <div class="card_header" @click.stop="goDetail(1, item, true)">
<text class="card_title">{{ item.title }}</text> <text class="card_title" v-html="item.title"></text>
<div class="r_point" :style="{ color: '#000' }"> <div class="r_point" :style="{ color: '#000' }">
<div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }"> <div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }">
</div> </div>
@ -43,7 +43,7 @@
</div> </div>
</div> </div>
</template> </template>
<div style="display: flex;min-height: 40px;" @click.stop="goDetail(1, item, true)"> <div style="display: flex;align-items: center;" @click.stop="goDetail(1, item, true)">
<div style="display: flex;align-items: center;gap: 5px;" v-if="item.submitter"> <div style="display: flex;align-items: center;gap: 5px;" v-if="item.submitter">
<el-icon> <el-icon>
<UserFilled /> <UserFilled />
@ -116,14 +116,12 @@ import {
} from '/@/api/api'; } from '/@/api/api';
import preventBack from 'vue-prevent-browser-back';//组件内单独引入 import preventBack from 'vue-prevent-browser-back';//组件内单独引入
import router from '/@/router'; import router from '/@/router';
import { highlightTitle } from '/@/utils/highlight';
const loading = ref(false) const loading = ref(false)
const tabsList = ref([ const tabsList = ref([
{
name: "全部",
status: null,
},
{ {
name: "审核中", name: "审核中",
status: 3, status: 3,
@ -132,7 +130,10 @@ const tabsList = ref([
name: "已发布", name: "已发布",
status: 2, status: 2,
}, },
{
name: "全部",
status: null,
},
]) ])
const tabIndex = ref(0) const tabIndex = ref(0)
@ -215,17 +216,17 @@ async function getData() {
tableData.data.push(...data); tableData.data.push(...data);
} }
// tableData.data.forEach((item, index) => { tableData.data.forEach((item, index) => {
// item.columns.forEach((childItem, childIndex) => { item.columns.forEach((childItem, childIndex) => {
// if (childIndex < 2) { if (childIndex < 2) {
// if (!item.columnsMin) { if (!item.columnsMin) {
// item.columnsMin = []; item.columnsMin = [];
// } }
// item.columnsMin.push(childItem); item.columnsMin.push(childItem);
// } }
// }); });
// item.title = highlightTitle(item.title, form.value.keyword); item.title = highlightTitle(item.title, form.value.keyword);
// }); });
} }
} catch (error) { } catch (error) {
loading.value = false; loading.value = false;
@ -327,7 +328,8 @@ function restData() {
onMounted(() => { onMounted(() => {
getData(); changeTab(0)
// getData();
}) })
</script> </script>
@ -336,6 +338,7 @@ onMounted(() => {
.all { .all {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100vw;
height: 100vh; height: 100vh;
scrollbar-width: none; scrollbar-width: none;
/* Firefox */ /* Firefox */
@ -398,10 +401,19 @@ onMounted(() => {
.card_title { .card_title {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
width: 80%; width: 73%;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
height: 43px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; display: -webkit-box;
white-space: nowrap; text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情 text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
-webkit-line-clamp: 2;
/*要显示的行数*/
/* autoprefixer: off */
-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
} }
.r_point { .r_point {
@ -430,4 +442,9 @@ onMounted(() => {
padding: 0 0px 0 15px; padding: 0 0px 0 15px;
} }
} }
:deep(.highlight) {
color: #ff0000;
font-weight: bold;
}
</style> </style>