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

refactor(phone-image): CSS and HTML for thumbnail preview container

Browse Source
This commit is contained in:
augushong
2026-05-03 09:00:32 +08:00
parent c179ed27f1
commit 3cc024409f
2 changed files with 83 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}