tmp-upload #5
@@ -49,7 +49,7 @@
|
||||
<div class="game-subtitle total-score-total-title">
|
||||
<img src="/completed_performance.png"
|
||||
alt="总战绩"
|
||||
style="width: 500px; display: block; margin: 0 auto; height: auto;"
|
||||
style="width: 600px; display: block; margin: 0 auto; height: auto;"
|
||||
class="total-score-total-image">
|
||||
</div>
|
||||
<div class="total-score-content">
|
||||
@@ -1378,6 +1378,7 @@ onUnmounted(() => {
|
||||
position: fixed;
|
||||
cursor: move;
|
||||
transition: transform 0.2s ease;
|
||||
z-index: 9999; /* 设置最高层级,确保在最上层显示 */
|
||||
}
|
||||
|
||||
/* 奖金图片容器样式 - Flex布局居中且保持一行 */
|
||||
@@ -1408,15 +1409,69 @@ onUnmounted(() => {
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.total-score-total-image {
|
||||
width: 320px;
|
||||
width: 280px !important; /* 调整总战绩图片大小,覆盖内联样式 */
|
||||
}
|
||||
|
||||
/* 移动端总战绩金额字体调小 */
|
||||
.total-score-total-value {
|
||||
font-size: 5rem !important; /* 调小总战绩金额字体 */
|
||||
margin-top: -40px !important; /* 调整与图片的间距 */
|
||||
}
|
||||
|
||||
.team-rankings-propagation-image {
|
||||
width: 220px;
|
||||
width: 200px !important; /* 覆盖内联样式 */
|
||||
}
|
||||
|
||||
.individual-rankings-propagation-image {
|
||||
width: 220px;
|
||||
width: 200px !important; /* 覆盖内联样式 */
|
||||
}
|
||||
|
||||
/* 战区排名宣传语容器调整 */
|
||||
.team-rankings-propagation {
|
||||
position: relative;
|
||||
z-index: 5; /* 提高z-index避免被其他元素遮挡 */
|
||||
margin-bottom: 70px; /* 进一步增大战区冠军的间距 */
|
||||
}
|
||||
|
||||
/* 英雄排名宣传语容器调整 */
|
||||
.individual-rankings-propagation {
|
||||
position: relative;
|
||||
z-index: 5; /* 提高z-index避免被其他元素遮挡 */
|
||||
margin-bottom: 10px; /* 减小英雄榜虎狼之师图片与个人英雄图片的距离 */
|
||||
}
|
||||
|
||||
/* 移动端战区冠军布局调整,与个人英雄冠军保持一致 */
|
||||
.team-champion {
|
||||
margin-bottom: 30px; /* 增加与下方战区排名标题的间距 */
|
||||
padding: 10px; /* 调整内边距 */
|
||||
min-height: 120px; /* 确保与英雄冠军有相同的视觉权重 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 移动端英雄冠军布局调整 */
|
||||
.individual-champion {
|
||||
margin-bottom: -10px; /* 恢复为修改之前的间距 */
|
||||
padding: 10px; /* 与战区冠军保持一致的内边距 */
|
||||
min-height: 120px; /* 确保与战区冠军有相同的视觉权重 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 确保两个排名区域在移动端有相同的起始位置 */
|
||||
.team-rankings,
|
||||
.individual-rankings {
|
||||
position: relative;
|
||||
z-index: 2; /* 统一的层级 */
|
||||
padding-top: 10px; /* 统一的顶部内边距 */
|
||||
}
|
||||
|
||||
/* 战区和英雄排名容器在移动端的统一样式 */
|
||||
.team-rankings-container,
|
||||
.individual-rankings-container {
|
||||
margin-top: 20px; /* 与上方冠军图片的统一间距 */
|
||||
}
|
||||
|
||||
/* 隐藏倒计时模块 */
|
||||
@@ -1446,7 +1501,7 @@ onUnmounted(() => {
|
||||
|
||||
/* 保留响应式中的padding设置,但移除其他可能冲突的位置样式 */
|
||||
.bonus-section {
|
||||
padding: 10px;
|
||||
padding: 8px; /* 减小padding */
|
||||
}
|
||||
|
||||
.bonus-awards-container {
|
||||
@@ -1454,6 +1509,12 @@ onUnmounted(() => {
|
||||
scale: 0.8;
|
||||
}
|
||||
|
||||
/* 确保图片容器有足够的显示空间 */
|
||||
.team-rankings, .individual-rankings {
|
||||
position: relative;
|
||||
z-index: 2; /* 确保排名区域在奖金模块之上 */
|
||||
}
|
||||
|
||||
.timer-float {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -2075,68 +2136,84 @@ onUnmounted(() => {
|
||||
.team-rankings-container .rank-table {
|
||||
position: relative;
|
||||
min-height: auto;
|
||||
/* 如果配置了具体了默认显示行数,则设置高度和滚动,否则显示所有行 */
|
||||
height: var(--team-default-height, auto) !important;
|
||||
overflow-y: var(--team-overflow-y, hidden);
|
||||
overflow-x: var(--team-overflow-x, auto);
|
||||
/* 移动端强制显示所有行,覆盖JS动态设置的CSS变量 */
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow-y: visible !important;
|
||||
overflow-x: auto !important;
|
||||
/* 强制覆盖CSS变量 */
|
||||
--team-default-height: auto !important;
|
||||
--team-overflow-y: visible !important;
|
||||
--team-overflow-x: auto !important;
|
||||
}
|
||||
|
||||
/* 当设置了滚动锁定时,禁止所有滚动 */
|
||||
/* 移动端战区排名显示所有内容,不受滚动锁定影响 */
|
||||
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
|
||||
overflow-y: hidden !important;
|
||||
overflow-x: hidden !important;
|
||||
height: var(--team-default-height, auto) !important;
|
||||
overflow-y: visible !important;
|
||||
overflow-x: auto !important;
|
||||
height: auto !important;
|
||||
min-width: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 确保表格内容在锁定模式下正确显示 */
|
||||
/* 确保表格内容在移动端正确显示 */
|
||||
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-header,
|
||||
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-row {
|
||||
min-width: auto !important;
|
||||
width: 100% !important;
|
||||
overflow-x: visible !important;
|
||||
white-space: normal !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.individual-rankings-propagation {
|
||||
margin-top: -40px;
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px; /* 恢复为修改之前的间距 */
|
||||
}
|
||||
|
||||
.individual-rankings {
|
||||
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
||||
}
|
||||
|
||||
/* 移动端战区排名容器位置调整 */
|
||||
.team-rankings {
|
||||
margin-top: 0; /* 确保与英雄排名区域在统一水平线 */
|
||||
}
|
||||
|
||||
/* 英雄排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
||||
.individual-rankings-container .rank-table {
|
||||
position: relative;
|
||||
min-height: auto;
|
||||
/* 如果配置了具体了默认显示行数,则设置高度和滚动,否则显示所有行 */
|
||||
height: var(--individual-default-height, auto) !important;
|
||||
overflow-y: var(--individual-overflow-y, hidden);
|
||||
overflow-x: var(--individual-overflow-x, auto);
|
||||
/* 移动端强制显示所有行,覆盖JS动态设置的CSS变量 */
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow-y: visible !important;
|
||||
overflow-x: auto !important;
|
||||
/* 隐藏滚动条 */
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
/* 强制覆盖CSS变量 */
|
||||
--individual-default-height: auto !important;
|
||||
--individual-overflow-y: visible !important;
|
||||
--individual-overflow-x: auto !important;
|
||||
}
|
||||
|
||||
/* 当设置了滚动锁定时,禁止所有滚动 */
|
||||
/* 移动端英雄排名显示所有内容,不受滚动锁定影响 */
|
||||
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
|
||||
overflow-y: hidden !important;
|
||||
overflow-x: hidden !important;
|
||||
height: var(--individual-default-height, auto) !important;
|
||||
overflow-y: visible !important;
|
||||
overflow-x: auto !important;
|
||||
height: auto !important;
|
||||
min-width: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 确保表格内容在锁定模式下正确显示 */
|
||||
/* 确保表格内容在移动端正确显示 */
|
||||
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-header,
|
||||
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-row {
|
||||
min-width: auto !important;
|
||||
width: 100% !important;
|
||||
overflow-x: visible !important;
|
||||
white-space: normal !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* 移动端非前三名字体放大 */
|
||||
@@ -2524,7 +2601,7 @@ onUnmounted(() => {
|
||||
position: fixed;
|
||||
top: 360px;
|
||||
left: 720px;
|
||||
z-index: 0;
|
||||
z-index: 9999; /* 设置最高层级,确保在最上层显示 */
|
||||
cursor: move;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user