mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-08 12:12:48 +08:00
refactor(phone-image): CSS and HTML for thumbnail preview container
This commit is contained in:
@@ -490,14 +490,45 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --- 逐页对齐切换指示器 --- */
|
||||
.page-alignment-toggle {
|
||||
/* ============================================
|
||||
Preview Thumbnails (缩略图容器)
|
||||
============================================ */
|
||||
.preview-thumbnails {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.preview-thumb-item {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-thumb-item img {
|
||||
display: block;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.preview-thumb-page-num {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.thumb-alignment-toggle {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 10;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
@@ -510,15 +541,46 @@
|
||||
user-select: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.page-alignment-toggle:hover {
|
||||
.preview-thumb-item:hover .thumb-alignment-toggle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.thumb-alignment-toggle:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-alignment-toggle.active-center {
|
||||
.thumb-alignment-toggle.active-center {
|
||||
opacity: 1;
|
||||
background: rgba(24, 144, 255, 0.15);
|
||||
color: var(--pi-color-accent);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Content Flow Code Blocks (中间栏代码块样式)
|
||||
仅用于编辑区中间栏, 不影响渲染页面
|
||||
============================================ */
|
||||
.content-flow pre {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.content-flow code {
|
||||
font-family: 'Courier New', Consolas, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.content-flow pre code {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user