diff --git a/src/App.vue b/src/App.vue index 11c8d86..a59e97d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -68,6 +68,21 @@ /* 不设置固定宽度,让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) { /* 移动设备上隐藏左右标题语,避免遮挡主要内容 */ diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue index 35f2eae..52af88e 100644 --- a/src/views/BattleRanking.vue +++ b/src/views/BattleRanking.vue @@ -1528,14 +1528,44 @@ onUnmounted(() => { } /* 浮动管理员入口 */ -.admin-entry-float { - position: fixed; - top: 20px; - right: 20px; - z-index: 1000; -} + .admin-entry-float { + position: fixed; + bottom: 20px; + left: 20px; + 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) {