ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-07-09 02:52:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(phone-image): 修复分割线样式覆盖和表格丢行问题

Browse Source 
1. 删除CSS覆盖wangeditor divider默认样式的规则，保留原生分割线外观
2. 新增splitTableByRows函数，超大表格按行拆分渲染，每页保留表头
3. splitOversizedBlock对表格不再跳过，改为调用splitTableByRows
This commit is contained in:
augushong
2026-05-12 22:07:26 +08:00
parent 30291a9dca
commit ccbfdde73e
2 changed files with 78 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
public/static/css/phone-image-templates.css
View File

@@ -902,52 +902,11 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
}
/* ============================================
Divider / 分割线视觉样式 (wangeditor divider)
在编辑器中显示为分页标记提示
Divider / 分割线样式 (wangeditor divider)
保留 wangeditor 默认分割线样式，不覆盖
分割线用于标记分页位置
============================================ */
/* wangeditor divider 元素 — 虚线分页标记 */
.content-flow-area [data-w-e-type="divider"],
#editor-text-area [data-w-e-type="divider"],
#editor-text-area hr.w-e-textarea-divider,
#editor-text-area hr {
border: none;
border-top: 2px dashed var(--pi-color-accent);
margin: 15px 0;
padding: 8px 0;
text-align: center;
position: relative;
height: 0;
background: transparent;
clear: both;
}
/* 分页标记文字提示（通过 ::after 伪元素）
注意: wangeditor divider 是 void 元素，::after 可能不生效
如不生效需在 JS 中插入额外 span 提示元素 */
.content-flow-area [data-w-e-type="divider"]::after,
#editor-text-area [data-w-e-type="divider"]::after,
#editor-text-area hr.w-e-textarea-divider::after,
#editor-text-area hr::after {
content: '-- 分页标记 --';
display: inline-block;
font-size: 12px;
color: var(--pi-color-accent);
background: #fafafa;
padding: 0 10px;
position: relative;
top: -8px;
line-height: 1.8;
}
/* 分割线 hover 高亮（编辑态） */
.content-flow-area [data-w-e-type="divider"]:hover,
#editor-text-area [data-w-e-type="divider"]:hover,
#editor-text-area hr.w-e-textarea-divider:hover,
#editor-text-area hr:hover {
border-color: #40a9ff;
}
/* ============================================
Settings Dialog (设置弹框表单样式)
============================================ */