zyc/video-shuoshan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): 翻页按钮改 sticky 贴底 — 笔记本小屏不用滚到底就能点

Browse Source 
v0.20.1 §I 只修了"能滚到能点到",用户期望是"始终可见不用滚"。
4 个 admin 管理页 .pagination 改 position: sticky + bottom: 0 + 背景遮挡,
翻页按钮固定在 .content 滚动容器视口底部,内容长度无关。

z-index: 10 确保 sticky 时压在表格行之上;background var(--color-bg-page)
覆盖透视下方内容(浅/深主题各自适应)。

涉及 4 个 page CSS:RecordsPage / UsersPage / LoginRecordsPage / AuditLogsPage

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-05-12 21:08:30 +08:00
parent 2f6d3a60cc
commit f77d30a4e6
4 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/pages/AuditLogsPage.module.css
View File

@ -43,7 +43,15 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; } .pageButtons { display: flex; gap: 4px; }
.pageButtons button { .pageButtons button {

10
web/src/pages/LoginRecordsPage.module.css
View File

@ -35,7 +35,15 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; } .pageButtons { display: flex; gap: 4px; }
.pageButtons button { .pageButtons button {

10
web/src/pages/RecordsPage.module.css
View File

@ -57,7 +57,15 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见,不用滚到最底才能点 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; } .pageButtons { display: flex; gap: 4px; }
.pageButtons button { .pageButtons button {

10
web/src/pages/UsersPage.module.css
View File

@ -51,7 +51,15 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; } .pageButtons { display: flex; gap: 4px; }
.pageButtons button { .pageButtons button {