diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue index c8bedf6..4ae9a0e 100644 --- a/src/views/BattleRanking.vue +++ b/src/views/BattleRanking.vue @@ -49,7 +49,7 @@
总战绩
@@ -1240,7 +1240,7 @@ onUnmounted(() => { justify-content: center; text-align: center; padding: 15px; - margin-bottom: 0; + margin-bottom: 0; } .team-logo { @@ -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,13 +1501,19 @@ onUnmounted(() => { /* 保留响应式中的padding设置,但移除其他可能冲突的位置样式 */ .bonus-section { - padding: 10px; + padding: 8px; /* 减小padding */ } .bonus-awards-container { gap: 10px; 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; }