chore: 调整针对1080高度的分辨率设置

This commit is contained in:
2025-11-13 11:35:30 +08:00
parent a378479782
commit 20fe7c5202
2 changed files with 51 additions and 6 deletions

View File

@@ -68,6 +68,21 @@
/* 不设置固定宽度让logo保持原始尺寸 */ /* 不设置固定宽度让logo保持原始尺寸 */
} }
/* 针对1920x1080分辨率的banner精确定位 */
@media (width: 1920px) and (height: 1080px) {
.banner-left {
left: 120px !important;
top: 240px !important;
transform: translateY(0) !important;
}
.banner-right {
right: 120px !important;
top: 200px !important;
transform: translateY(0) !important;
}
}
/* 移动设备响应式设计 */ /* 移动设备响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
/* 移动设备上隐藏左右标题语,避免遮挡主要内容 */ /* 移动设备上隐藏左右标题语,避免遮挡主要内容 */

View File

@@ -1530,12 +1530,42 @@ onUnmounted(() => {
/* 浮动管理员入口 */ /* 浮动管理员入口 */
.admin-entry-float { .admin-entry-float {
position: fixed; position: fixed;
top: 20px; bottom: 20px;
right: 20px; left: 20px;
z-index: 1000; z-index: 1000;
} }
/* 管理员按钮使用通用按钮样式 */ /* 管理员按钮使用通用按钮样式 */
.admin-entry-float .btn-game-secondary {
font-size: 0.8rem;
padding: 8px 16px;
min-width: 80px;
border-radius: 6px;
}
/* 针对高度1080分辨率的精确优化 */
@media (height: 1080px) {
/* 优化表格布局 - 设置高度确保只显示5行 */
.rank-table {
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto;
width: 100%;
}
/* 优化表格行高确保5行内容完美显示 */
.table-row {
min-height: 38px;
padding: 10px;
}
/* 优化前三名特殊样式 */
.table-row:nth-child(1),
.table-row:nth-child(2),
.table-row:nth-child(3) {
font-size: 1.05rem;
}
}
/* 移动端背景图片设置 - 全局样式 */ /* 移动端背景图片设置 - 全局样式 */
@media (max-width: 768px) { @media (max-width: 768px) {