diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css
index 7f2a4fd..92fbe6a 100644
--- a/public/static/css/phone-image-templates.css
+++ b/public/static/css/phone-image-templates.css
@@ -603,9 +603,7 @@
}
.thumb-alignment-select {
- position: absolute;
- bottom: 4px;
- right: 4px;
+ display: block;
height: 22px;
font-size: 11px;
border: 1px solid #d9d9d9;
@@ -613,7 +611,7 @@
padding: 0 2px;
background: #fff;
cursor: pointer;
- z-index: 10;
+ margin: 4px auto 0;
opacity: 0;
transition: opacity 0.2s;
}
@@ -955,14 +953,39 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
}
/* 预览区列表 */
-#render-preview ul,
+#render-preview ul {
+ list-style-type: disc;
+ padding-left: 20px;
+ margin-bottom: 10px;
+}
+
#render-preview ol {
+ list-style-type: decimal;
padding-left: 20px;
margin-bottom: 10px;
}
#render-preview li {
margin-bottom: 5px;
+ display: list-item;
+}
+
+/* DOM分页预览列表 */
+.dom-page-content ul {
+ list-style-type: disc;
+ padding-left: 20px;
+ margin-bottom: 10px;
+}
+
+.dom-page-content ol {
+ list-style-type: decimal;
+ padding-left: 20px;
+ margin-bottom: 10px;
+}
+
+.dom-page-content li {
+ margin-bottom: 5px;
+ display: list-item;
}
/* ============================================
@@ -1152,6 +1175,7 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
font-size: calc(14px * var(--pi-font-scale, 1));
line-height: 1.8;
word-break: break-word;
+ text-align: left;
}
/* DOM分页内容区对齐支持 (复用valign模式) */
@@ -1159,12 +1183,14 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
display: flex;
flex-direction: column;
justify-content: center;
+ text-align: left;
}
.dom-page-content.valign-bottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
+ text-align: left;
}
/* --- DOM分页页码 --- */
diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js
index acfde91..eae35fe 100644
--- a/public/static/js/phone-image.js
+++ b/public/static/js/phone-image.js
@@ -1515,9 +1515,14 @@ var PhoneImageEngine = (function () {
var $thumbItem = $('').css({
'flex-shrink': '0',
'width': thumbWidth + 'px',
- 'position': 'relative'
+ 'position': 'relative',
+ 'margin-bottom': '8px'
});
+ // 创建overflow:hidden的缩放wrapper，裁切transform:scale溢出
+ var scaledH = Math.round(sizeConfig.height * scaleRatio);
+ var $scaleWrapper = $('');
+
// 创建DOM分页容器（实际尺寸，通过transform缩放显示为缩略图）
var $container = $('').css({
'transform': 'scale(' + scaleRatio + ')',
@@ -1535,13 +1540,14 @@ var PhoneImageEngine = (function () {
// pages[].html 是完整的 .phone-image-page 结构（含品牌header、内容、页码、水印）
$container.html(domPage.html);
- $thumbItem.append($container);
+ $scaleWrapper.append($container);
+ $thumbItem.append($scaleWrapper);
// 页码标签（N/M格式）
var $pageNum = $('').text((i + 1) + '/' + totalPages);
$thumbItem.append($pageNum);
- // 对齐select（仅内容页显示）
+ // 对齐select（仅内容页显示，正常文档流放在页码下方）
if (pageType === 'content') {
var pageNum = domPage.pageNum || (i + 1);
var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html
index 2a0eb36..0df4ebd 100644
--- a/view/admin/post/phone_image.html
+++ b/view/admin/post/phone_image.html
@@ -229,9 +229,9 @@