修复中间预览区与右侧画布排版一致性

- 隐藏中间预览区滚动条,消除15px宽度差异
- 统一padding为20px,内容宽度均为500px
- .page-content行高改用CSS变量--pi-line-height
- #paginated-preview加入CSS变量选择器
- 去掉中间预览区右侧边框
This commit is contained in:
augushong
2026-05-19 20:52:38 +08:00
parent 616e7c507b
commit 4f1bcae05b
2 changed files with 14 additions and 9 deletions

View File

@@ -27,7 +27,8 @@
* 否则中间变量继承 :root 的预计算值(:root 的 --pi-font-scale 始终为 1缩放不生效。 * 否则中间变量继承 :root 的预计算值(:root 的 --pi-font-scale 始终为 1缩放不生效。
*/ */
#render-preview, #render-preview,
#render-staging { #render-staging,
#paginated-preview {
--pi-font-size-base: calc(14px * var(--pi-font-scale, 1)); --pi-font-size-base: calc(14px * var(--pi-font-scale, 1));
--pi-font-size-title: calc(26px * var(--pi-font-scale, 1)); --pi-font-size-title: calc(26px * var(--pi-font-scale, 1));
--pi-font-size-subtitle: calc(16px * var(--pi-font-scale, 1)); --pi-font-size-subtitle: calc(16px * var(--pi-font-scale, 1));
@@ -296,7 +297,7 @@
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
line-height: 2.0; line-height: var(--pi-line-height, 2.0);
font-size: calc(14px * var(--pi-font-scale, 1)); font-size: calc(14px * var(--pi-font-scale, 1));
} }

View File

@@ -83,27 +83,31 @@
.render-preview-area { .render-preview-area {
width: 540px; width: 540px;
overflow-y: auto; overflow: hidden;
border-right: 1px solid #e8e8e8;
background: #fff; background: #fff;
flex-shrink: 0; flex-shrink: 0;
} }
.render-preview-area .preview-header { .render-preview-area .preview-header {
padding: 8px 15px; padding: 8px 20px;
background: #fafafa; background: #fafafa;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
font-size: 13px; font-size: 13px;
color: #999; color: #999;
position: sticky;
top: 0;
z-index: 5;
} }
#render-preview { #render-preview {
min-height: 300px; min-height: 300px;
padding: 10px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
#render-preview::-webkit-scrollbar {
display: none;
} }
.paginated-preview-area { .paginated-preview-area {