WeWork/vs100
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

把战区排名和英雄排名的框本调整对齐了

Browse Source
This commit is contained in:
jinhhanhan
2025-11-22 18:08:00 +08:00
parent 7f5c746be6
commit 7fcaa1af1a
1 changed files with 443 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/views/BattleRanking.vue
View File

@@ -94,7 +94,6 @@
<div class="individual-avatar champion-container"> <div class="individual-avatar champion-container">
<div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{ <div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
fontSize: (localDisplayConfig.crown?.size || localDisplayConfig.championLogos?.individualChampionSize * 0.8) + 'px' fontSize: (localDisplayConfig.crown?.size || localDisplayConfig.championLogos?.individualChampionSize * 0.8) + 'px'
// transform: 'translateX(-50%)'
}"> }">
👑 👑
</div> </div>
@@ -110,12 +109,12 @@
{{ filteredIndividualRankings[0]?.avatar || '👤' }} {{ filteredIndividualRankings[0]?.avatar || '👤' }}
</span> </span>
</div> </div>
</div> </div>
<!-- 确保名字容器不被遮挡，样式已在下方优化 -->
<div class="champion-name"> <div class="champion-name">
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }} {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
</div> </div>
</div> </div>
<!-- 英雄排名 --> <!-- 英雄排名 -->
<div class="individual-rankings-container"> <div class="individual-rankings-container">
<h2 class="game-subtitle">👤 英雄排名</h2> <h2 class="game-subtitle">👤 英雄排名</h2>
@@ -973,7 +972,8 @@ onUnmounted(() => {
border-radius: 50%; border-radius: 50%;
} }
/* 冠军模块样式 */ /* 冠军模块样式（已修改：统一两个冠军区高度） */
/* 冠军模块样式（修改后：统一两个冠军区高度，确保名字显示） */
.champion-section { .champion-section {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -981,6 +981,7 @@ onUnmounted(() => {
gap: 20px; gap: 20px;
} }
/* 核心修改：固定两个冠军区高度，确保对齐+名字不被遮挡 */
.team-champion, .team-champion,
.individual-champion { .individual-champion {
display: flex; display: flex;
@@ -988,67 +989,73 @@ onUnmounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 15px; padding: 15px 15px 10px; /* 优化内边距，底部留足名字空间 */
margin-bottom: 10px; margin-bottom: 10px;
height: 130px; /* 固定总高度，两个区域完全一致 */
box-sizing: border-box; /* 确保padding不撑高容器 */
} }
.team-logo { .team-logo {
font-size: 2rem; font-size: 2rem;
margin-bottom: 5px; margin-bottom: 8px; /* 增加与名字的间距 */
display: inline-block; display: inline-flex; /* 改为flex确保居中 */
align-items: center;
justify-content: center;
color: gold; color: gold;
width: 80px; /* 与英雄头像容器宽度一致 */
height: 80px; /* 与英雄头像容器高度一致 */
} }
/* 核心修改：统一英雄头像容器尺寸，不遮挡名字 */
.individual-avatar { .individual-avatar {
font-size: 2rem; font-size: 2rem;
margin-bottom: 5px; margin-bottom: 8px; /* 增加与名字的间距，关键！ */
display: inline-block; display: inline-flex; /* 改为flex确保居中 */
align-items: center;
justify-content: center;
width: 80px; /* 与战区logo宽度一致 */
height: 80px; /* 与战区logo高度一致 */
} }
/* 冠军头像容器 */ /* 冠军头像容器 */
.champion-container { .champion-container {
position: relative; position: relative;
display: inline-block; display: inline-flex; /* 改为flex，确保头像居中 */
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
} }
/* 皇冠动画效果 */ /* 核心修改：优化王冠位置，不占用额外高度，不遮挡名字 */
.crown-animation { .crown-animation {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: -18px; /* 向上偏移，远离头像和名字 */
transform: translateX(-50%); transform: translateX(-50%);
z-index: 10; z-index: 10;
text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary); text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
font-size: 2rem; /* 固定大小，避免高度波动 */
} }
.crown-animation-run { .crown-animation-run {
animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite; animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite;
} }
/* 皇冠浮动动画 */ /* 皇冠浮动动画（保留原有，优化偏移） */
@keyframes crownFloat { @keyframes crownFloat {
0% { 0% {
transform: translateX(-50%) translateY(0) rotate(-10deg); transform: translateX(-50%) translateY(0) rotate(-10deg);
} }
50% { 50% {
transform: translateX(-50%) translateY(-5px) rotate(10deg); transform: translateX(-50%) translateY(-3px) rotate(10deg); /* 减小上下浮动幅度，避免遮挡 */
} }
100% { 100% {
transform: translateX(-50%) translateY(0) rotate(-10deg); transform: translateX(-50%) translateY(0) rotate(-10deg);
} }
} }
/* 皇冠发光效果动画 */ /* 皇冠发光效果动画（去重，保留一个） */
@keyframes crownGlow {
0%, 100% {
text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
}
50% {
text-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-secondary), 0 0 40px var(--gold-tertiary);
}
}
@keyframes crownGlow { @keyframes crownGlow {
0%, 100% { 0%, 100% {
text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary); text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
@@ -1058,10 +1065,16 @@ onUnmounted(() => {
} }
} }
.champion-logo { /* 核心修改：统一冠军logo/头像尺寸，不遮挡名字 */
.champion-logo,
.avatar-image-champion {
width: 80px;
height: 80px;
object-fit: cover; object-fit: cover;
max-width: 120px;
border-radius: 50%; border-radius: 50%;
margin: 0; /* 清除额外边距 */
position: relative;
z-index: 5; /* 确保头像在王冠下方，不被遮挡 */
} }
.avatar-image { .avatar-image {
@@ -1078,12 +1091,18 @@ onUnmounted(() => {
margin-bottom: 3px; margin-bottom: 3px;
} }
/* 核心修改：强化名字显示，确保不被截断/遮挡 */
.champion-name { .champion-name {
font-size: 1.1rem; font-size: 1.2rem; /* 增大字体，更醒目 */
font-weight: bold; font-weight: bold;
color: gold; color: gold;
margin: 5px 0 0 0; /* 清除默认margin，顶部留小间距 */
line-height: 1.3; /* 固定行高 */
white-space: nowrap; /* 强制单行，避免换行撑高 */
text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* 增加阴影，提升可读性 */
z-index: 20; /* 确保名字在最上层，不被任何元素遮挡 */
position: relative;
} }
/* 基础样式 */ /* 基础样式 */
:root { :root {
--gold-primary: #ffd700; --gold-primary: #ffd700;
@@ -1092,7 +1111,6 @@ onUnmounted(() => {
--purple-secondary: #a29bfe; --purple-secondary: #a29bfe;
} }
/* 主题容器样式 - 添加居中对齐 */ /* 主题容器样式 - 添加居中对齐 */
.theme-container { .theme-container {
text-align: center; text-align: center;
@@ -1139,14 +1157,29 @@ onUnmounted(() => {
/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */ /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
/** 皇冠动画 */ /** 皇冠动画（修正位置，不撑高） */
.crown-animation { .crown-animation {
top: -120px; top: -15px !important; /* 移动端向上偏移，避免遮挡 */
font-size: 1.8rem !important;
} }
/* 核心修改：移动端统一冠军区高度 */
.team-champion,
.individual-champion {
height: 120px !important;
padding: 10px 10px 5px !important;
}
/* 移动端名字样式优化 */
.champion-name {
font-size: 1.1rem !important;
margin-top: 3px !important;
}
/* 其他原有移动端样式保持不变... */
}
/* 隐藏倒计时模块 */ /* 隐藏倒计时模块 */
.timer-float { .timer-float {
display: none !important; display: none !important;
@@ -1159,9 +1192,7 @@ onUnmounted(() => {
/* 奖金模块垂直居中显示，两侧20px间距 */ /* 奖金模块垂直居中显示，两侧20px间距 */
.bonus-section { .bonus-section {
/* 背景全部取消设置 **/
background: none !important; background: none !important;
position: static !important; position: static !important;
margin: 20px auto; margin: 20px auto;
width: calc(100% - 40px); width: calc(100% - 40px);
@@ -1188,7 +1219,6 @@ onUnmounted(() => {
.timer-float .countdown { .timer-float .countdown {
gap: 8px; gap: 8px;
} }
}
@media (max-width: 480px) { @media (max-width: 480px) {
.banner-image { .banner-image {
@@ -1528,19 +1558,24 @@ onUnmounted(() => {
} }
.rankings-container { .rankings-container {
display: flex; display: flex !important;
flex-direction: row !important; /* 明确指定为水平排列 */
gap: 15px; gap: 15px;
flex-wrap: wrap; flex-wrap: nowrap; /* 禁止换行，强制水平并列 */
justify-content: center; justify-content: center;
align-items: stretch; /* 强制两个排名框高度一致 */
background: none; background: none;
border: none; border: none;
/* 移除max-width和margin，让App.vue的rank-wrapper控制容器 */
width: 100%;
} }
.individual-rankings, .individual-rankings,
.team-rankings { .team-rankings {
flex: 1; flex: none; /* 取消平分宽度 */
min-width: 350px; width: 550px; /* 固定宽度，两个框完全一致 */
max-width: 550px; display: flex;
flex-direction: column;
} }
/* 为指定的容器添加背景和边框 */ /* 为指定的容器添加背景和边框 */
@@ -1733,9 +1768,8 @@ onUnmounted(() => {
/* 针对高度大于1080分辨率的精确优化 */ /* 针对高度大于1080分辨率的精确优化 */
/* 移动端背景图片设置 - 全局样式 */ /* 移动端背景图片设置 - 全局样式 */
@media (max-width: 768px) { @media (max-width: 768px) {
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */ /* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
.team-rankings-container .rank-table { .team-rankings-container .rank-table {
@@ -1799,53 +1833,53 @@ onUnmounted(() => {
} }
/* 确保前三名特殊样式在移动端正确显示 */ /* 确保前三名特殊样式在移动端正确显示 */
.team-rankings-container .table-row.top-three, .team-rankings-container .table-row.top-three,
.individual-rankings-container .table-row.top-three { .individual-rankings-container .table-row.top-three {
transform: scale(1); transform: scale(1);
box-shadow: none; box-shadow: none;
position: static; position: static;
} }
.team-rankings-container .table-row:nth-child(1), .team-rankings-container .table-row:nth-child(1),
.team-rankings-container .table-row:nth-child(2), .team-rankings-container .table-row:nth-child(2),
.team-rankings-container .table-row:nth-child(3), .team-rankings-container .table-row:nth-child(3),
.individual-rankings-container .table-row:nth-child(1), .individual-rankings-container .table-row:nth-child(1),
.individual-rankings-container .table-row:nth-child(2), .individual-rankings-container .table-row:nth-child(2),
.individual-rankings-container .table-row:nth-child(3) { .individual-rankings-container .table-row:nth-child(3) {
box-shadow: none; box-shadow: none;
z-index: 1; z-index: 1;
} }
/* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */ /* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
:root[style*="--team-scroll-lock: lock"] .team-rankings-container { :root[style*="--team-scroll-lock: lock"] .team-rankings-container {
overflow: visible !important; overflow: visible !important;
height: auto !important; height: auto !important;
} }
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table { :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
overflow: hidden !important; overflow: hidden !important;
display: block; display: block;
min-width: auto !important; min-width: auto !important;
width: 100% !important; width: 100% !important;
} }
/* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */ /* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-header, :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-header,
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-row { :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-row {
min-width: auto !important; min-width: auto !important;
width: 100% !important; width: 100% !important;
overflow-x: visible !important; overflow-x: visible !important;
white-space: normal !important; white-space: normal !important;
} }
/* 英雄排名列表隐藏水平滚动条 */ /* 英雄排名列表隐藏水平滚动条 */
.individual-rankings-container .rank-table::-webkit-scrollbar { .individual-rankings-container .rank-table::-webkit-scrollbar {
width: 6px; /* 保留垂直滚动条 */ width: 6px; /* 保留垂直滚动条 */
height: 0; /* 隐藏水平滚动条 */ height: 0; /* 隐藏水平滚动条 */
} }
/* 1. 背景图片全屏显示并固定 */ /* 1. 背景图片全屏显示并固定 */
.battle-ranking { .battle-ranking {
padding: 0 !important; padding: 0 !important;
margin-top: 50px; margin-top: 50px;
background-image: url('/battle-background.jpg'); background-image: url('/battle-background.jpg');
@@ -1853,34 +1887,34 @@ onUnmounted(() => {
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
min-height: 100vh; min-height: 100vh;
} }
/* 移除原有卡片背景，让内容在背景图上显示 */ /* 移除原有卡片背景，让内容在背景图上显示 */
.card-game { .card-game {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
} }
/* 主题部分调整 */ /* 主题部分调整 */
.theme-section { .theme-section {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.banner-image { .banner-image {
width: 100%; width: 100%;
height: auto; height: auto;
} }
/* 战鼓部分调整 */ /* 战鼓部分调整 */
.drums-section { .drums-section {
transform: scale(0.8); transform: scale(0.8);
/* 缩小战鼓元素 */ /* 缩小战鼓元素 */
} }
/* 2. 倒计时模块调整 - 移至冠军战区上方，缩小时间显示为一行 */ /* 2. 倒计时模块调整 - 移至冠军战区上方，缩小时间显示为一行 */
.timer-float { .timer-float {
position: relative; position: relative;
right: auto; right: auto;
top: auto; top: auto;
@@ -1891,97 +1925,101 @@ onUnmounted(() => {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
color: white; color: white;
text-align: center; text-align: center;
} }
.timer-float .label { .timer-float .label {
font-size: 0.9rem; font-size: 0.9rem;
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.countdown { .countdown {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.time-item { .time-item {
font-size: 0.85rem; font-size: 0.85rem;
padding: 4px 6px; padding: 4px 6px;
background: rgba(255, 215, 0, 0.2); background: rgba(255, 215, 0, 0.2);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(255, 215, 0, 0.5); border: 1px solid rgba(255, 215, 0, 0.5);
} }
/* 任务设置调整 */ /* 任务设置调整 */
.task-settings-section { .task-settings-section {
margin-top: -100px; margin-top: -100px;
/* 调整负边距 */ /* 调整负边距 */
} }
.task-title-container { .task-title-container {
padding: 15px; padding: 15px;
} }
.task-title-container .game-title { .task-title-container .game-title {
font-size: 1.6rem; font-size: 1.6rem;
} }
.task-title-container .game-title-highlight { .task-title-container .game-title-highlight {
font-size: 2rem; font-size: 2rem;
} }
.task-title-container .game-subtitle { .task-title-container .game-subtitle {
font-size: 1rem; font-size: 1rem;
} }
/* 排名部分调整 */ /* 排名部分调整 */
.rankings-section { .rankings-section {
margin: 0 10px 20px 10px; margin: 0 10px 20px 10px;
} }
.rankings-container { .rankings-container {
flex-direction: column; display: flex !important;
gap: 10px; flex-direction: column !important;
gap: 20px; /* 增大垂直间距，避免拥挤 */
align-items: stretch; /* 移动端也让两个框体宽度占满 */
width: 100%;
} }
.individual-rankings, .individual-rankings,
.team-rankings { .team-rankings {
min-width: auto; width: 550px; /* 移动端也保持固定宽度 */
width: 100%; max-width: 100%; /* 在小屏幕上可以自适应 */
/* 调整顺序，确保倒计时在冠军上方 */ /* 调整顺序，确保倒计时在冠军上方 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; /* 居中显示 */
} }
/* 将倒计时移动到冠军上方的位置 */ /* 将倒计时移动到冠军上方的位置 */
.team-rankings { .team-rankings {
order: -1; order: -1;
} }
.team-rankings-container, .team-rankings-container,
.individual-rankings-container { .individual-rankings-container {
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
} }
/* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */ /* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
:root[style*="--team-scroll-lock: lock"] .team-rankings-container { :root[style*="--team-scroll-lock: lock"] .team-rankings-container {
overflow: visible !important; overflow: visible !important;
height: auto !important; height: auto !important;
} }
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table { :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
overflow: hidden !important; overflow: hidden !important;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
} }
/* 表格调整 */ /* 表格调整 */
.rank-table { .rank-table {
min-height: 250px; min-height: 250px;
/* 移除最大高度限制，允许显示所有行 */ /* 移除最大高度限制，允许显示所有行 */
overflow-x: hidden; overflow-x: hidden;
@@ -1993,15 +2031,15 @@ onUnmounted(() => {
scrollbar-width: none; scrollbar-width: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* 隐藏WebKit浏览器移动端滚动条 */ /* 隐藏WebKit浏览器移动端滚动条 */
.rank-table::-webkit-scrollbar { .rank-table::-webkit-scrollbar {
display: none; display: none;
} }
/* 移动端英雄排名列表滚动设置 */ /* 移动端英雄排名列表滚动设置 */
.individual-rankings-container .rank-table { .individual-rankings-container .rank-table {
overflow-x: hidden !important; overflow-x: hidden !important;
/* 禁止横向滚动 */ /* 禁止横向滚动 */
overflow-y: auto !important; overflow-y: auto !important;
@@ -2011,13 +2049,13 @@ onUnmounted(() => {
scrollbar-width: none; scrollbar-width: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.individual-rankings-container .rank-table::-webkit-scrollbar { .individual-rankings-container .rank-table::-webkit-scrollbar {
display: none; display: none;
} }
.table-header { .table-header {
font-size: 1rem; font-size: 1rem;
padding: 8px 6px; padding: 8px 6px;
min-width: 500px; min-width: 500px;
@@ -2026,39 +2064,39 @@ onUnmounted(() => {
top: 0; top: 0;
z-index: 10; z-index: 10;
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
} }
.table-row { .table-row {
font-size: 0.9rem; font-size: 0.9rem;
padding: 8px 6px; padding: 8px 6px;
min-width: 500px; min-width: 500px;
/* 确保行内容不会被截断 */ /* 确保行内容不会被截断 */
overflow: visible; overflow: visible;
} }
/* 冠军部分调整 */ /* 冠军部分调整 */
.team-champion, .team-champion,
.individual-champion { .individual-champion {
transform: scale(0.9); transform: scale(0.9);
margin: 5px 0; margin: 5px 0;
} }
/* 管理员入口调整 */ /* 管理员入口调整 */
.admin-entry-float { .admin-entry-float {
position: relative; position: relative;
top: auto; top: auto;
right: auto; right: auto;
margin: 10px; margin: 10px;
text-align: center; text-align: center;
} }
.btn-game-secondary { .btn-game-secondary {
padding: 10px 15px; padding: 10px 15px;
font-size: 0.9rem; font-size: 0.9rem;
} }
/* 3. 奖金模块调整 - 移至底部显示 */ /* 3. 奖金模块调整 - 移至底部显示 */
.bonus-section { .bonus-section {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -2070,33 +2108,33 @@ onUnmounted(() => {
transform: translateY(0); transform: translateY(0);
transition: transform 0.3s ease; transition: transform 0.3s ease;
box-shadow: none; box-shadow: none;
} }
.bonus-awards-container { .bonus-awards-container {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.award-image { .award-image {
height: 120px; height: 120px;
width: auto; width: auto;
} }
/* 确保重要内容优先显示 */ /* 确保重要内容优先显示 */
.rank-col, .rank-col,
.name-col, .name-col,
.score-col { .score-col {
font-weight: bold; font-weight: bold;
} }
/* 为底部奖金模块留出空间 */ /* 为底部奖金模块留出空间 */
.admin-entry-float { .admin-entry-float {
margin-bottom: 100px; margin-bottom: 100px;
} }
/* 针对极小屏幕的特殊处理 */ /* 针对极小屏幕的特殊处理 */
@media (max-width: 480px) { @media (max-width: 480px) {
.table-header { .table-header {
font-size: 0.9rem; font-size: 0.9rem;
padding: 8px 6px; padding: 8px 6px;
@@ -2129,7 +2167,7 @@ onUnmounted(() => {
font-size: 0.8rem; font-size: 0.8rem;
padding: 3px 5px; padding: 3px 5px;
} }
} }
} }
/* 触摸设备优化 */ /* 触摸设备优化 */
@@ -2160,7 +2198,6 @@ onUnmounted(() => {
} }
} }
@media (min-width: 2000px) { @media (min-width: 2000px) {
.bonus-section { .bonus-section {
position: fixed; position: fixed;