chore: 调整针对1080高度的分辨率设置
This commit is contained in:
15
src/App.vue
15
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) {
|
||||
/* 移动设备上隐藏左右标题语,避免遮挡主要内容 */
|
||||
|
||||
@@ -1528,14 +1528,44 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
/* 浮动管理员入口 */
|
||||
.admin-entry-float {
|
||||
.admin-entry-float {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user