zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2025-02-11 09:11:04 +08:00
parent b2d7c542e8
commit b7d72640b6
4 changed files with 321 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/carriageReturn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

125
src/components/page/articleListEditor_E.vue
View File

@@ -390,10 +390,12 @@
</div>
<div class="titHtml titHtml1" v-if="htmlContent && html_type == 2">
<common-word
:readonly="true"
:isPreview="true"
v-if="htmlContent"
ref="commonWord"
:value="htmlContent"
:contentList="mains"
:wordStyle="wordStyle"
style="width: calc(100%); height: 50vh"
:style="`100%`"
@@ -1024,70 +1026,70 @@ export default {
});
},
getWord() {
var htmlContent = ``;
htmlContent += this.mains
.map((item) => {
//批注
let contentHtml = '';
var isRemark = ``;
// var htmlContent = ``;
// htmlContent += this.mains
// .map((item) => {
// //批注
// let contentHtml = '';
// var isRemark = ``;
// 判断是否是图片
if (item.type == 1) {
contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id
}" main-id="${item.am_id}">
${isRemark}
<img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${
item.width ? `${item.width}px` : '100%'
}" />
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
item.image.note ? item.image.note : ''
}</font>
</p>
`;
} else if (item.type == 2) {
var tableList = JSON.parse(item.table.table_data);
// // 判断是否是图片
// if (item.type == 1) {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${
// item.width ? `${item.width}px` : '100%'
// }" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// } else if (item.type == 2) {
// var tableList = JSON.parse(item.table.table_data);
contentHtml = `
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
item.am_id
}" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
${isRemark}
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
<table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
${tableList
.map((row) => {
return `
<tr>
${row
.map((cell) => {
return `
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
<span>${cell.text || ''}</span>
</td>
`;
})
.join('')} <!-- join the cells in the row -->
</tr>
`;
})
.join('')} <!-- join the rows -->
</table>
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
</div>
`;
} else {
// contentHtml = `
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
// item.am_id
// }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
// ${isRemark}
// <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
// ${tableList
// .map((row) => {
// return `
// <tr>
// ${row
// .map((cell) => {
// return `
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
// <span>${cell.text || ''}</span>
// </td>
// `;
// })
// .join('')} <!-- join the cells in the row -->
// </tr>
// `;
// })
// .join('')} <!-- join the rows -->
// </table>
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
// </div>
// `;
// } else {
contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
}
// contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
// }
// 判断是否是表格类型
// // 判断是否是表格类型
return contentHtml;
})
.join('');
this.htmlContent = htmlContent;
// return contentHtml;
// })
// .join('');
this.htmlContent = 'true';
},
getMainsInfo2(e) {
@@ -1099,11 +1101,12 @@ export default {
.then((res) => {
this.loadHtml = false;
if (res.code == 0) {
// console.log(res,'res')
console.log(res,'res')
this.mains = '';
if (res.data.list.length > 0) {
this.mains = res.data.list;
console.log('this.mains at line 1108:', this.mains)
this.getWord();
} else {
this.mains = '';

128
src/components/page/components/html/index.vue
View File

@@ -131,10 +131,12 @@
</div>
<div class="titHtml titHtml1" v-if="htmlContent && html_type == 2">
<common-word
:readonly="true"
v-if="htmlContent"
ref="commonWord"
:value="htmlContent"
:isPreview="true"
v-if="htmlContent"
ref="commonWord"
:value="htmlContent"
:contentList="mains"
:wordStyle="wordStyle"
style="width: calc(100%); height: 50vh"
:style="`100%`"
@@ -755,69 +757,69 @@ export default {
});
},
getWord() {
var htmlContent = ``;
htmlContent += this.mains
.map((item) => {
//批注
let contentHtml = '';
var isRemark = ``;
// var htmlContent = ``;
// htmlContent += this.mains
// .map((item) => {
// //批注
// let contentHtml = '';
// var isRemark = ``;
// 判断是否是图片
if (item.type == 1) {
contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id
}" main-id="${item.am_id}">
${isRemark}
<img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${
item.width ? `${item.width}px` : '100%'
}" />
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
item.image.note ? item.image.note : ''
}</font>
</p>
`;
} else if (item.type == 2) {
var tableList = JSON.parse(item.table.table_data);
// // 判断是否是图片
// if (item.type == 1) {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${
// item.width ? `${item.width}px` : '100%'
// }" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// } else if (item.type == 2) {
// var tableList = JSON.parse(item.table.table_data);
contentHtml = `
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
item.am_id
}" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
${isRemark}
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
<table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
${tableList
.map((row) => {
return `
<tr>
${row
.map((cell) => {
return `
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
<span>${cell.text || ''}</span>
</td>
`;
})
.join('')} <!-- join the cells in the row -->
</tr>
`;
})
.join('')} <!-- join the rows -->
</table>
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
</div>
`;
} else {
contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
}
// contentHtml = `
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
// item.am_id
// }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
// ${isRemark}
// <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
// ${tableList
// .map((row) => {
// return `
// <tr>
// ${row
// .map((cell) => {
// return `
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
// <span>${cell.text || ''}</span>
// </td>
// `;
// })
// .join('')} <!-- join the cells in the row -->
// </tr>
// `;
// })
// .join('')} <!-- join the rows -->
// </table>
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
// </div>
// `;
// } else {
// contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
// }
// 判断是否是表格类型
// // 判断是否是表格类型
return contentHtml;
})
.join('');
this.htmlContent = htmlContent;
// return contentHtml;
// })
// .join('');
this.htmlContent = 'true';
console.log('this.htmlContent at line 820:', this.htmlContent)
},
getMainsInfo2(e) {

327
src/components/page/components/table/word.vue
View File

@@ -10,9 +10,9 @@
>
<div
class=""
:style="isPreview ? 'width: 100%' : 'width: calc(100% - 300px)'"
:style="isPreview ? 'width: 100%;padding: 20px;' : 'width: calc(100% - 300px);padding: 20px 20px 20px 34px;'"
style="
padding: 20px;
box-sizing: border-box;
width: calc(100% - 300px);
float: left;
@@ -22,7 +22,7 @@
"
>
<template v-for="(item, index) in wordList">
<span class="isRemark" :remark-main-id="item.am_id" v-if="item.checks.length > 0 && !isPreview">
<span class="isRemark" :remark-main-id="item.am_id" v-if="item.checks && item.checks.length > 0 && !isPreview">
><img
class="isRemark"
src="@/assets/img/isRemark.png"
@@ -32,94 +32,99 @@
<span>{{ item.am_id }}</span>
</span>
<div :class="!isPreview?(item.is_h1?'isTitleH1':item.is_h2?'isTitleH2':item.is_h3?'isTitleH3':''):''">
<template v-if="!isPreview"> <span class="Htitle Htitle1" v-if="item.is_h1==1">H1</span>
<span class="Htitle Htitle2" v-else-if="item.is_h2==1">H2</span>
<span class="Htitle Htitle3" v-else-if="item.is_h3==1">H3</span></template>
<div
:key="item.am_id"
id="drop-target"
:class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
:comment-Id="highlightImgCommentId(item.ami_id, item.checks)"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
class="MaxPicture pMain myeditabledivImage drop-target"
@click="initializeEditor(item.am_id, 'img', item)"
v-if="item.type == 1"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.ami_id"
:type="item.type"
:main-id="item.am_id"
:id="'editor' + item.am_id"
>
<img :src="`${mediaUrl + item.image.url}`" />
<div
:key="item.am_id"
id="drop-target"
:class="highlightImg(item.ami_id, item.checks)"
:comment-Id="highlightImgCommentId(item.ami_id, item.checks)"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
class="MaxPicture pMain myeditabledivImage drop-target"
@click="initializeEditor(item.am_id, 'img', item)"
v-if="item.type == 1"
:main-state="item.state"
:remark="item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.ami_id"
:type="item.type"
:main-id="item.am_id"
:id="'editor' + item.am_id"
>
<img :src="`${mediaUrl + item.image.url}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="item.image.note ? highlightText(item.image.note, item.checks ? item.checks : []) : ''"></span>
</font>
</div>
<div
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id, 'table', item)"
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
v-else-if="item.type == 2"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.amt_id"
:type="item.type"
:id="'editor' + item.am_id"
:main-id="item.am_id"
>
<!-- 标题部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="highlightText(item.table.title || '', item.checks ? item.checks : [])"></span>
</font>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="item.image.note ? highlightText(item.image.note, item.checks) : ''"></span>
</font>
<!-- 表格部分 -->
<table border="1" style="width: auto; border-collapse: collapse; text-align: center">
<tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i">
<td
v-for="(cell, i1) in row"
:key="i1"
:colspan="`${cell.colspan || 1}`"
:rowspan="`${cell.rowspan || 1}`"
>
<span v-html="highlightText(cell.text || '', item.checks ? item.checks : [])"></span>
</td>
</tr>
</table>
<!-- 备注部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="highlightText(item.table.note || '', item.checks ? item.checks : [])"></span>
</font>
</div>
<div
v-else
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id)"
class="pMain myeditablediv drop-target"
@blur="clearEditor(item.am_id)"
:main-state="item.state"
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.am_id"
:main-id="item.am_id"
:type="item.type"
:id="'editor' + item.am_id"
v-html="highlightText(item.content, item.checks ? item.checks : [], item.type)"
></div>
</div>
<div
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id, 'table', item)"
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
v-else-if="item.type == 2"
:main-state="item.state"
:remark="item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.amt_id"
:type="item.type"
:id="'editor' + item.am_id"
:main-id="item.am_id"
>
<!-- 标题部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="highlightText(item.table.title || '', item.checks)"></span>
</font>
<!-- 表格部分 -->
<table border="1" style="width: auto; border-collapse: collapse; text-align: center">
<tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i">
<td
v-for="(cell, i1) in row"
:key="i1"
:colspan="`${cell.colspan || 1}`"
:rowspan="`${cell.rowspan || 1}`">
<span v-html="highlightText(cell.text || '', item.checks)"></span>
</td>
</tr>
</table>
<!-- 备注部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="highlightText(item.table.note || '', item.checks)"></span>
</font>
</div>
<div
id="drop-target"
@dragover="handleDragOver"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@click="initializeEditor(item.am_id)"
class="pMain myeditablediv drop-target"
v-else
@blur="clearEditor(item.am_id)"
:main-state="item.state"
:remark="item.checks.length > 0 ? 1 : 0"
:contenteditable="!readonly && !isPreview"
:data-id="item.am_id"
:main-id="item.am_id"
:type="item.type"
:id="'editor' + item.am_id"
v-html="highlightText(item.content, item.checks)"
></div>
</template>
</div>
@@ -138,7 +143,6 @@
class="commentList"
>
<li
v-for="(item, index) in commentList"
class="comment-item annotation"
:data-target="`main-${item.am_id}`"
@@ -164,16 +168,20 @@
box-sizing: border-box;
border-bottom: 1px solid rgba(243, 213, 213);
"
:style="commont.estate == 1? 'background:#13bc200f;' : ''"
:style="commont.estate == 1 ? 'background:#13bc200f;' : ''"
v-for="(commont, commentIndex) in item.comment"
@click="highlightLeftComment(commont.amc_id, item.am_id)"
>
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<span :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''" style="color: #e61a12; font-weight: bold"
<span
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
style="color: #e61a12; font-weight: bold"
>{{ commentIndex + 1 }}、</span
>
<span style="color: rgb(230, 26, 18); font-size: 12px" :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
<span
style="color: rgb(230, 26, 18); font-size: 12px"
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
>Comment</span
>
<!-- <img
@@ -183,7 +191,9 @@
style="width: 30px; height: 14px"
/> -->
<span v-if="commont.estate == 1" class="Resolved" :style="commont.estate == 1 ? 'opacity:0.6;' : ''">{{ $t('commonTable.Resolved') }}</span>
<span v-if="commont.estate == 1" class="Resolved" :style="commont.estate == 1 ? 'opacity:0.6;' : ''">{{
$t('commonTable.Resolved')
}}</span>
</div>
<div style="display: flex; align-items: center; justify-content: center">
<span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span
@@ -502,6 +512,7 @@ export default {
},
data() {
return {
imagePath: require('@/assets/img/carriageReturn.png'), // 或者你可以设置其他路径
scrollPosition: 0,
wordList: [],
commentList: [],
@@ -782,7 +793,7 @@ export default {
table_resize_bars: true,
image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
valid_elements: '*[*]',
plugins: 'forecolor code paste table image resize ',
content_style: `${tableStyle + this.wordStyle}
@@ -871,7 +882,8 @@ export default {
plugins: 'forecolor code paste table image resize ',
content_style: `${tableStyle + this.wordStyle}
`,entity_encoding: 'raw', // 不编码 > 等字符
`,
entity_encoding: 'raw', // 不编码 > 等字符
menubar: false,
toolbar: _this.isEditComment ? ['commentAdd |delete| addRow|Edit'] : ['delete| addRow|Edit'],
end_container_on_empty_block: true,
@@ -1000,9 +1012,8 @@ export default {
return formattedDate;
},
goToListComment(data) {
console.log('data at line 993:', data)
this.goToComment(data.am_id)
console.log('data at line 993:', data);
this.goToComment(data.am_id);
},
divOnScroll() {
if (!this.isPreview) {
@@ -1059,37 +1070,37 @@ export default {
return emptyContentIndexes;
},
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
},
highlightText(text, annotations) {
if (!this.isPreview) {
let tempText = text;
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
},
highlightText(text, annotations, type) {
if (!this.isPreview) {
let tempText = text;
// 1. 使用占位符替代批注内容
const placeholders = [];
annotations.forEach((annotation, index) => {
if (annotation.content == '') {
return tempText;
}
const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
// 1. 使用占位符替代批注内容
const placeholders = [];
annotations.forEach((annotation, index) => {
if (annotation.content == '') {
return tempText;
}
const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
// 如果批注内容存在，替换成占位符
if (tempText.includes(annotation.content)) {
tempText = tempText.replace(regExp, placeholder);
placeholders.push({ placeholder, annotation, index });
}
});
// 如果批注内容存在，替换成占位符
if (tempText.includes(annotation.content)) {
tempText = tempText.replace(regExp, placeholder);
placeholders.push({ placeholder, annotation, index });
}
});
// 2. 为占位符添加高亮
placeholders.forEach(({ placeholder, annotation, index }) => {
const regExp = new RegExp(placeholder, 'gi');
// 2. 为占位符添加高亮
placeholders.forEach(({ placeholder, annotation, index }) => {
const regExp = new RegExp(placeholder, 'gi');
tempText = tempText.replace(regExp, (match) => {
const randomColor = this.getRandomLightColor();
return `
tempText = tempText.replace(regExp, (match) => {
const randomColor = this.getRandomLightColor();
return `
<span
class="remarkbg"
style="background-color: ${randomColor};
@@ -1108,16 +1119,20 @@ export default {
</span>
</span>
`;
});
});
// 3. 返回处理后的文本
return tempText;
} else {
return text;
}
},
});
});
if (type == 0 && tempText == '') {
console.log('tempText at line 1122:', tempText);
tempText =
tempText +
`<img contenteditable="${false}" src="${this.imagePath}" alt="" style="width: 20px;height: 20px;opacity:0.6;">`;
}
// 3. 返回处理后的文本
return tempText;
} else {
return text;
}
},
getCommentsData() {
if (!this.isPreview) {
@@ -1927,4 +1942,46 @@ export default {
border: 2px solid #cd5454; /* 高亮边框 */
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */
}
.isTitleH1{
position: relative;
/* border: 1px solid #94c2f7; */
background-color: #dbebfc54;
}
.Htitle{
color: #4d99f1;
background-color: #dbebfca6;
/* border: 1px solid #4d99f1; */
border-radius: 50%;
font-weight: bold;
position: absolute;
line-height: 24px;
padding: 2px;
font-size: 16px;
left: -30px;
top: 0px;
text-align: center;
}
.Htitle1{
width: 24px;
height: 24px;
/* font-size: 14px; */
}
.Htitle2{ width: 24px;
height: 24px;
/* font-size: 16px; */
}
.Htitle3{ width: 24px;
height: 24px;
/* font-size: 12px; */
}
.isTitleH2{position: relative;
background-color: #dbebfc54;
}
.isTitleH3{position: relative;
background-color: #dbebfc54;
}
</style>