update
修改全部内容
This commit is contained in:
PhatenIoT-yan
@@ -176,205 +176,49 @@ hide content only for mobile devices
|
||||
line-height: 1.1 !important; /* 进一步减少行高 */
|
||||
}
|
||||
|
||||
/* ===== 页面显示样式 - 增强内容溢出检测 ===== */
|
||||
.page {
|
||||
/* 固定表头样式 */
|
||||
.md-typeset .sticky-header table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 500px; /* 根据需要调整 */
|
||||
width: 100%;
|
||||
max-width: 21cm;
|
||||
min-height: 29.7cm; /* A4高度 */
|
||||
height: 33cm; /* 强制A4高度，确保内容溢出检测 */
|
||||
padding: 1.5cm 1cm 1cm 1cm; /* 增加顶部边距 */
|
||||
margin: 2em auto;
|
||||
background: white;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden; /* 重要：确保内容溢出时不会扩展页面 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 添加页面计数器 */
|
||||
.md-content__inner {
|
||||
counter-reset: page;
|
||||
}
|
||||
|
||||
.page::after {
|
||||
content: "页 " counter(page);
|
||||
counter-increment: page;
|
||||
position: absolute;
|
||||
bottom: 0.5cm;
|
||||
right: 1cm;
|
||||
font-size: 10pt;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* 内容溢出指示器 */
|
||||
.page::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.md-typeset .sticky-header table thead,
|
||||
.md-typeset .sticky-header table tbody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md-typeset .sticky-header table tbody {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.md-typeset .sticky-header table tr {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md-typeset .sticky-header table th,
|
||||
.md-typeset .sticky-header table td {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 固定首列样式 */
|
||||
.md-typeset .sticky-column table {
|
||||
overflow: auto;
|
||||
max-height: 500px; /* 根据需要调整 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md-typeset .sticky-column table th:first-child,
|
||||
.md-typeset .sticky-column table td:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #ff5252 50%, transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
/* 当内容溢出时显示警告 */
|
||||
.page[data-overflow="true"]::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 添加页面分隔符，视觉上提示需要新页面 */
|
||||
.page-break {
|
||||
height: 30px;
|
||||
margin: 1.5em 0;
|
||||
border-top: 1px dashed #ff5252;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-break::after {
|
||||
content: "内容超出页面范围 - 请添加新页面";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: white;
|
||||
padding: 0 10px;
|
||||
color: #ff5252;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 移动设备优化 */
|
||||
@media screen and (max-width: 767px) {
|
||||
.page {
|
||||
padding: 1.2em 0.8em;
|
||||
margin: 0.8em 0.5em;
|
||||
max-width: calc(100% - 1em);
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 打印样式优化 - 解决顶部边距和内容分布问题 ===== */
|
||||
@media print {
|
||||
/* 基本页面设置 */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 重置文档结构 */
|
||||
html, body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: white !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 重置内容容器 */
|
||||
.md-main, .md-main__inner, .md-content, .md-content__inner {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏所有可能导致空白页的元素 */
|
||||
body::before,
|
||||
body::after,
|
||||
.md-content__inner::before,
|
||||
.md-content__inner::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏元数据行 */
|
||||
.md-content__inner > p:first-child:not(.page *) {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
visibility: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 强制隐藏所有非页面内容 */
|
||||
.md-content__inner > *:not(.page) {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 页面容器优化 - 添加适当的顶部边距 */
|
||||
.page {
|
||||
display: block !important;
|
||||
position: relative !important;
|
||||
width: 21cm !important;
|
||||
min-height: 29.7cm !important;
|
||||
height: auto !important; /* 允许自然分页 */
|
||||
padding: 1.5cm 1cm 1cm 1cm !important; /* 顶部增加边距 */
|
||||
margin: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background: white !important;
|
||||
break-inside: avoid !important;
|
||||
page-break-inside: avoid !important;
|
||||
page-break-before: auto !important;
|
||||
page-break-after: always !important;
|
||||
overflow: visible !important; /* 打印时允许内容自然溢出到下一页 */
|
||||
}
|
||||
|
||||
/* 确保第一页正确显示 */
|
||||
.md-content__inner > .page:first-of-type {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
page-break-before: avoid !important;
|
||||
}
|
||||
|
||||
/* 确保最后一页不会添加额外空白页 */
|
||||
.md-content__inner > .page:last-of-type {
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
|
||||
/* 隐藏所有非内容元素 */
|
||||
.md-header, .md-tabs, .md-sidebar, .md-footer, .md-nav,
|
||||
.md-announce, .md-skip, nav, header, footer, aside {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 隐藏页面分隔符和溢出指示器 */
|
||||
.page-break, .page::before {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* 分页控制 - 避免不合理分页 */
|
||||
.page h1, .page h2, .page h3 {
|
||||
break-after: avoid !important;
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
|
||||
.page img, .page table, .page figure {
|
||||
break-inside: avoid !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
.page p, .page li {
|
||||
orphans: 3 !important;
|
||||
widows: 3 !important;
|
||||
}
|
||||
|
||||
/* 确保页面内文本合理分布 */
|
||||
.page > * {
|
||||
max-height: none !important; /* 允许内容自然流动 */
|
||||
}
|
||||
|
||||
/* 隐藏页码指示器 */
|
||||
.page::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
background-color: var(--md-default-bg-color);
|
||||
z-index: 1;
|
||||
/* 添加轻微阴影以实现视觉分离 */
|
||||
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
Reference in New Issue
Block a user