chore: 调整针对1080高度的分辨率设置
This commit is contained in:
15
src/App.vue
15
src/App.vue
@@ -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) {
|
||||||
/* 移动设备上隐藏左右标题语,避免遮挡主要内容 */
|
/* 移动设备上隐藏左右标题语,避免遮挡主要内容 */
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user