diff --git a/src/style.css b/src/style.css index 66dced9..2bcb6ff 100644 --- a/src/style.css +++ b/src/style.css @@ -142,6 +142,7 @@ h2.game-subtitle { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.5px; + text-align: center; } /* 游戏化链接样式 */ diff --git a/src/views/AdminPanel.vue b/src/views/AdminPanel.vue index b039f8a..0757665 100644 --- a/src/views/AdminPanel.vue +++ b/src/views/AdminPanel.vue @@ -475,30 +475,53 @@

🏆 冠军Logo配置

-

🎯 战区冠军Logo

+

🎯 战区冠军配置

+
+ +
- 战区冠军Logo + 战区冠军
- 未上传Logo + 未上传图片
-
- +
+ px
-

支持JPG、PNG、GIF格式,建议尺寸200x200像素,文件大小不超过5MB

+
+
+ + + px +
+
+ + + px +
+
+

支持JPG、PNG、GIF格式,建议尺寸200x200像素(头像)或400x300像素(照片),文件大小不超过5MB

diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue index bbf9240..5afaa23 100644 --- a/src/views/BattleRanking.vue +++ b/src/views/BattleRanking.vue @@ -41,7 +41,19 @@
- + +
+
+

总战绩

+
+
+ {{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ totalTeamScore }} +
+
+
+
+ +
@@ -49,10 +61,21 @@
-
-

👥 战区排名

+

战区排名

排名 战区名称 {{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }} 人数 - 队长 + 将军 奖金
{{ index + 1 }} {{ item.name }} - {{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' + - item.totalScore : item.totalScore }} + {{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.totalScore) }} {{ item.memberCount }}人 {{ item.leader }} ¥{{ item.bonus }} @@ -91,33 +113,36 @@
-
-
- 👑 -
- 冠军头像 - -
- - {{ filteredIndividualRankings[0]?.avatar || '👤' }} - -
-
- -
- {{ filteredIndividualRankings[0]?.name || '暂无冠军' }} -
-
+
英雄榜
+
+
+
+ 👑 +
+ 冠军头像 + +
+ + {{ filteredIndividualRankings[0]?.avatar || '👤' }} + +
+
+
+ {{ filteredIndividualRankings[0]?.name || '暂无冠军' }} +
+
+
英雄榜
+
-

👤 英雄排名

+

英雄排名

排名 @@ -143,8 +168,7 @@ {{ item.name || '-' }} {{ item.team || '-' }} - {{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' + - item.score : item.score }} + {{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.score) }} {{ item.level }} {{ item.department }} @@ -196,6 +220,9 @@ function createDefaultDisplayConfig() { championLogos: { teamChampion: '', teamChampionSize: 60, + teamChampionType: 'avatar', // 'avatar' 或 'photo' + teamChampionPhotoWidth: 120, + teamChampionPhotoHeight: 80, individualChampion: '', individualChampionSize: 60 }, @@ -302,6 +329,29 @@ const filteredTeamRankings = computed(() => { } return filtered; }); + +// 格式化数字为中国人习惯的金额表达方式(使用万分位分隔符) +function formatNumber(num) { + if (num === null || num === undefined || isNaN(num)) return '0'; + const numStr = num.toString(); + // 先处理小数部分 + const parts = numStr.split('.'); + let integerPart = parts[0]; + const decimalPart = parts.length > 1 ? '.' + parts[1] : ''; + + // 对于整数部分,从右往左每四位添加一个逗号(万分位分隔) + const formattedInteger = integerPart.replace(/\B(?=(\d{4})+(?!\d))/g, ','); + + return formattedInteger + decimalPart; +} + +// 计算属性 - 所有战区业绩总和 +const totalTeamScore = computed(() => { + const total = teamRankings.value.reduce((total, team) => { + return total + (team.totalScore || 0); + }, 0); + return formatNumber(total); +}); // 确保即使displayConfig存在,也要和默认配置合并,保证结构完整性 const localDisplayConfig = ref(() => { if (displayConfig) { @@ -972,8 +1022,7 @@ onUnmounted(() => { border-radius: 50%; } -/* 冠军模块样式(已修改:统一两个冠军区高度) */ -/* 冠军模块样式(修改后:统一两个冠军区高度,确保名字显示) */ +/* 冠军模块样式 */ .champion-section { display: flex; justify-content: space-between; @@ -981,7 +1030,6 @@ onUnmounted(() => { gap: 20px; } -/* 核心修改:固定两个冠军区高度,确保对齐+名字不被遮挡 */ .team-champion, .individual-champion { display: flex; @@ -989,73 +1037,71 @@ onUnmounted(() => { align-items: center; justify-content: center; text-align: center; - padding: 15px 15px 10px; /* 优化内边距,底部留足名字空间 */ + padding: 15px; margin-bottom: 10px; - height: 130px; /* 固定总高度,两个区域完全一致 */ - box-sizing: border-box; /* 确保padding不撑高容器 */ } .team-logo { font-size: 2rem; - margin-bottom: 8px; /* 增加与名字的间距 */ - display: inline-flex; /* 改为flex确保居中 */ - align-items: center; - justify-content: center; + margin-bottom: 5px; + display: inline-block; color: gold; - width: 80px; /* 与英雄头像容器宽度一致 */ - height: 80px; /* 与英雄头像容器高度一致 */ } -/* 核心修改:统一英雄头像容器尺寸,不遮挡名字 */ .individual-avatar { font-size: 2rem; - margin-bottom: 8px; /* 增加与名字的间距,关键! */ - display: inline-flex; /* 改为flex确保居中 */ - align-items: center; - justify-content: center; - width: 80px; /* 与战区logo宽度一致 */ - height: 80px; /* 与战区logo高度一致 */ + margin-bottom: 5px; + display: inline-block; } /* 冠军头像容器 */ .champion-container { position: relative; - display: inline-flex; /* 改为flex,确保头像居中 */ - align-items: center; - justify-content: center; - width: 100%; - height: 100%; + display: inline-block; } -/* 核心修改:优化王冠位置,不占用额外高度,不遮挡名字 */ +/* 皇冠动画效果 */ .crown-animation { position: absolute; left: 50%; - top: -18px; /* 向上偏移,远离头像和名字 */ transform: translateX(-50%); z-index: 10; text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary); +<<<<<<< HEAD font-size: 3rem; /* 改大:从2rem改为3rem */ +======= + +>>>>>>> 5a48653be089c47d923681c42164b2d4fb60c341 } .crown-animation-run { animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite; } -/* 皇冠浮动动画(保留原有,优化偏移) */ +/* 皇冠浮动动画 */ @keyframes crownFloat { 0% { transform: translateX(-50%) translateY(0) rotate(-10deg); } 50% { - transform: translateX(-50%) translateY(-3px) rotate(10deg); /* 减小上下浮动幅度,避免遮挡 */ + transform: translateX(-50%) translateY(-5px) rotate(10deg); } 100% { 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 { 0%, 100% { text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary); @@ -1065,18 +1111,18 @@ onUnmounted(() => { } } -/* 核心修改:统一冠军logo/头像尺寸,不遮挡名字 */ -.champion-logo, -.avatar-image-champion { - width: 80px; - height: 80px; +.champion-logo { object-fit: cover; + max-width: 120px; border-radius: 50%; - margin: 0; /* 清除额外边距 */ - position: relative; - z-index: 5; /* 确保头像在王冠下方,不被遮挡 */ } +.photo-container .champion-logo { + max-width: unset !important; + border-radius: 0 !important; +} + + .avatar-image { width: 30px; height: 30px; @@ -1091,18 +1137,12 @@ onUnmounted(() => { margin-bottom: 3px; } -/* 核心修改:强化名字显示,确保不被截断/遮挡 */ .champion-name { - font-size: 1.2rem; /* 增大字体,更醒目 */ + font-size: 1.1rem; font-weight: bold; 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 { --gold-primary: #ffd700; @@ -1111,6 +1151,7 @@ onUnmounted(() => { --purple-secondary: #a29bfe; } + /* 主题容器样式 - 添加居中对齐 */ .theme-container { text-align: center; @@ -1157,8 +1198,10 @@ onUnmounted(() => { /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */ } + /* 响应式设计 */ @media (max-width: 768px) { +<<<<<<< HEAD /** 皇冠动画(还原原始大小) */ .crown-animation { top: -60px !important; /* 移动端向上偏移,避免遮挡 */ @@ -1186,6 +1229,13 @@ onUnmounted(() => { /* 其他原有移动端样式保持不变... */ } +======= + /** 皇冠动画 */ + .crown-animation { + top: -120px; + } + +>>>>>>> 5a48653be089c47d923681c42164b2d4fb60c341 /* 隐藏倒计时模块 */ .timer-float { display: none !important; @@ -1198,7 +1248,9 @@ onUnmounted(() => { /* 奖金模块垂直居中显示,两侧20px间距 */ .bonus-section { + /* 背景全部取消设置 **/ background: none !important; + position: static !important; margin: 20px auto; width: calc(100% - 40px); @@ -1225,6 +1277,7 @@ onUnmounted(() => { .timer-float .countdown { gap: 8px; } +} @media (max-width: 480px) { .banner-image { @@ -1564,24 +1617,19 @@ onUnmounted(() => { } .rankings-container { - display: flex !important; - flex-direction: row !important; /* 明确指定为水平排列 */ + display: flex; gap: 15px; - flex-wrap: nowrap; /* 禁止换行,强制水平并列 */ + flex-wrap: wrap; justify-content: center; - align-items: stretch; /* 强制两个排名框高度一致 */ background: none; border: none; - /* 移除max-width和margin,让App.vue的rank-wrapper控制容器 */ - width: 100%; } .individual-rankings, .team-rankings { - flex: none; /* 取消平分宽度 */ - width: 550px; /* 固定宽度,两个框完全一致 */ - display: flex; - flex-direction: column; + flex: 1; + min-width: 350px; + max-width: 550px; } /* 为指定的容器添加背景和边框 */ @@ -1774,406 +1822,538 @@ onUnmounted(() => { /* 针对高度大于1080分辨率的精确优化 */ + /* 移动端背景图片设置 - 全局样式 */ -@media (max-width: 768px) { + /* 总战绩部分样式 */ +.total-score-section { + margin: 20px auto; + max-width: 1200px; + padding: 20px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + animation: fadeIn 0.5s ease-in-out; +} + +.total-score-container { + display: flex; + flex-direction: column; + gap: 15px; +} + +.total-score-content { - /* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */ - .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); +} + +.total-score-item { + display: flex; + justify-content: center; /* 水平居中 */ + align-items: center; /* 垂直居中 */ + padding: 10px; + min-height: 60px; /* 确保有足够的高度来展示垂直居中效果 */ +} + +.score-value { + font-size: 1.5rem; + font-weight: bold; + color: var(--gold-primary); + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +/* 照片容器样式 */ +.team-logo.photo-container { + overflow: hidden; +} + +.individual-champion { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-bottom: 20px; + gap: 30px; +} + +.hero-ranking-text { + font-size: 2.8rem; + font-weight: 300; + color: #ffd700; + writing-mode: vertical-rl; + text-orientation: mixed; + letter-spacing: 10px; + position: relative; + text-shadow: + 0 0 5px rgba(255, 215, 0, 0.8), + 0 0 10px rgba(255, 215, 0, 0.6), + 0 0 15px rgba(255, 215, 0, 0.4), + 2px 2px 2px rgba(0, 0, 0, 0.8); + + /* 3D立体效果 */ + text-stroke: 1px rgba(255, 255, 255, 0.2); + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); + + /* 金色渐变背景 */ + background: linear-gradient(135deg, #ffd700, #ffc107, #ffd700); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + + /* 发光效果动画 */ + animation: glow-hero 2s infinite alternate ease-in-out; +} + +/* 发光效果动画 */ +@keyframes glow-hero { + 0% { + text-shadow: + 0 0 5px rgba(255, 215, 0, 0.8), + 0 0 10px rgba(255, 215, 0, 0.6), + 0 0 15px rgba(255, 215, 0, 0.4), + 2px 2px 2px rgba(0, 0, 0, 0.8); + } + 100% { + text-shadow: + 0 0 10px rgba(255, 215, 0, 1), + 0 0 20px rgba(255, 215, 0, 0.8), + 0 0 30px rgba(255, 215, 0, 0.6), + 3px 3px 3px rgba(0, 0, 0, 0.8); + } +} + +/* 为容器添加旋转光环效果 */ +.hero-ranking-decoration::before { + content: ''; + position: absolute; + width: 180%; + height: 180%; + top: -40%; + left: -40%; + background: radial-gradient(circle, transparent 50%, rgba(255, 215, 0, 0.4) 70%, transparent 90%); + border-radius: 50%; + animation: rotate-hero-ranking-decoration 8s linear infinite; + z-index: -1; + filter: blur(3px); +} + +/* 添加第二层光环效果 */ +.hero-ranking-decoration::after { + content: ''; + position: absolute; + width: 140%; + height: 140%; + top: -20%; + left: -20%; + background: radial-gradient(circle, transparent 60%, rgba(255, 140, 0, 0.3) 80%, transparent 100%); + border-radius: 50%; + animation: rotate-hero-ranking-decoration 12s linear infinite reverse; + z-index: -2; + filter: blur(2px); +} + +@keyframes rotate-hero-ranking-decoration { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + + +.champion-content { + display: flex; + flex-direction: column; + align-items: center; +} + +@media (max-width: 768px) { + + /* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */ + .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); + } + + /* 当设置了滚动锁定时,禁止所有滚动 */ + :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; + 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; + } + + .individual-rankings { + margin-top: 60px; /* 增加排名列表的顶部间距 */ + } + + /* 英雄排名容器设置 - 允许垂直滚动,设置默认高度显示多行 */ + .individual-rankings-container .rank-table { + overflow-y: auto; + overflow-x: auto; /* 允许水平滚动 */ + position: relative; + /* 基于默认显示行数计算合适的高度 */ + height: calc(60px * var(--default-display-rows, 10)); + /* 隐藏滚动条但保留滚动功能 */ + -ms-overflow-style: none; + scrollbar-width: none; + } + + /* 移动端非前三名字体放大 */ + .team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)), + .individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) { + font-size: 1.1rem; + } + + /* 移动端名次列水平垂直居中 */ + .team-rankings-container .table-header > :first-child, + .individual-rankings-container .table-header > :first-child, + .team-rankings-container .table-row > :first-child, + .individual-rankings-container .table-row > :first-child { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } + + /* 确保前三名特殊样式在移动端正确显示 */ + .team-rankings-container .table-row.top-three, + .individual-rankings-container .table-row.top-three { + transform: scale(1); + box-shadow: none; + position: static; + } + + .team-rankings-container .table-row:nth-child(1), + .team-rankings-container .table-row:nth-child(2), + .team-rankings-container .table-row:nth-child(3), + .individual-rankings-container .table-row:nth-child(1), + .individual-rankings-container .table-row:nth-child(2), + .individual-rankings-container .table-row:nth-child(3) { + box-shadow: none; + z-index: 1; + } + + /* 当设置为禁止滚动时,确保战区排名容器不允许滚动 */ + :root[style*="--team-scroll-lock: lock"] .team-rankings-container { + overflow: visible !important; + height: 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: hidden !important; + display: block; 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 { + /* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */ + :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-header, + :root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-row { min-width: auto !important; width: 100% !important; overflow-x: visible !important; white-space: normal !important; } - - .individual-rankings { - margin-top: 60px; /* 增加排名列表的顶部间距 */ - } - /* 英雄排名容器设置 - 允许垂直滚动,设置默认高度显示多行 */ - .individual-rankings-container .rank-table { - overflow-y: auto; - overflow-x: auto; /* 允许水平滚动 */ + /* 英雄排名列表隐藏水平滚动条 */ + .individual-rankings-container .rank-table::-webkit-scrollbar { + width: 6px; /* 保留垂直滚动条 */ + height: 0; /* 隐藏水平滚动条 */ + } + + /* 1. 背景图片全屏显示并固定 */ + .battle-ranking { + padding: 0 !important; + margin-top: 50px; + background-image: url('/battle-background.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; + min-height: 100vh; + } + + /* 移除原有卡片背景,让内容在背景图上显示 */ + .card-game { + background: transparent; + box-shadow: none; + } + + /* 主题部分调整 */ + .theme-section { + width: 100%; + margin: 0; + padding: 0; + } + + .banner-image { + width: 100%; + height: auto; + } + + /* 战鼓部分调整 */ + .drums-section { + transform: scale(0.8); + /* 缩小战鼓元素 */ + } + + /* 2. 倒计时模块调整 - 移至冠军战区上方,缩小时间显示为一行 */ + .timer-float { position: relative; - /* 基于默认显示行数计算合适的高度 */ - height: calc(60px * var(--default-display-rows, 10)); - /* 隐藏滚动条但保留滚动功能 */ - -ms-overflow-style: none; - scrollbar-width: none; - } - - /* 移动端非前三名字体放大 */ - .team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)), - .individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) { - font-size: 1.1rem; - } - - /* 移动端名次列水平垂直居中 */ - .team-rankings-container .table-header > :first-child, - .individual-rankings-container .table-header > :first-child, - .team-rankings-container .table-row > :first-child, - .individual-rankings-container .table-row > :first-child { - display: flex; - align-items: center; - justify-content: center; + right: auto; + top: auto; + margin: 10px auto; + width: 95%; + padding: 8px; + border-radius: 8px; + background: rgba(0, 0, 0, 0.8); + color: white; text-align: center; } - - /* 确保前三名特殊样式在移动端正确显示 */ -.team-rankings-container .table-row.top-three, -.individual-rankings-container .table-row.top-three { - transform: scale(1); - box-shadow: none; - position: static; -} -.team-rankings-container .table-row:nth-child(1), -.team-rankings-container .table-row:nth-child(2), -.team-rankings-container .table-row:nth-child(3), -.individual-rankings-container .table-row:nth-child(1), -.individual-rankings-container .table-row:nth-child(2), -.individual-rankings-container .table-row:nth-child(3) { - box-shadow: none; - z-index: 1; -} + .timer-float .label { + font-size: 0.9rem; + display: block; + margin-bottom: 5px; + } -/* 当设置为禁止滚动时,确保战区排名容器不允许滚动 */ -:root[style*="--team-scroll-lock: lock"] .team-rankings-container { - overflow: visible !important; - height: auto !important; -} + .countdown { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + flex-wrap: nowrap; + } -:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table { - overflow: hidden !important; - display: block; - min-width: auto !important; - width: 100% !important; -} + .time-item { + font-size: 0.85rem; + padding: 4px 6px; + background: rgba(255, 215, 0, 0.2); + border-radius: 4px; + border: 1px solid rgba(255, 215, 0, 0.5); + } -/* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */ -:root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-header, -:root[style*="--team-scroll-lock: lock"] .team-rankings-container .table-row { - min-width: auto !important; - width: 100% !important; - overflow-x: visible !important; - white-space: normal !important; -} + /* 任务设置调整 */ + .task-settings-section { + margin-top: -100px; + /* 调整负边距 */ + } -/* 英雄排名列表隐藏水平滚动条 */ -.individual-rankings-container .rank-table::-webkit-scrollbar { - width: 6px; /* 保留垂直滚动条 */ - height: 0; /* 隐藏水平滚动条 */ -} + .task-title-container { + padding: 15px; + } -/* 1. 背景图片全屏显示并固定 */ -.battle-ranking { - padding: 0 !important; - margin-top: 50px; - background-image: url('/battle-background.jpg'); - background-size: cover; - background-position: center; - background-attachment: fixed; - min-height: 100vh; -} + .task-title-container .game-title { + font-size: 1.6rem; + } -/* 移除原有卡片背景,让内容在背景图上显示 */ -.card-game { - background: transparent; - box-shadow: none; -} + .task-title-container .game-title-highlight { + font-size: 2rem; + } -/* 主题部分调整 */ -.theme-section { - width: 100%; - margin: 0; - padding: 0; -} + .task-title-container .game-subtitle { + font-size: 1rem; + } -.banner-image { - width: 100%; - height: auto; -} - -/* 战鼓部分调整 */ -.drums-section { - transform: scale(0.8); - /* 缩小战鼓元素 */ -} - -/* 2. 倒计时模块调整 - 移至冠军战区上方,缩小时间显示为一行 */ -.timer-float { - position: relative; - right: auto; - top: auto; - margin: 10px auto; - width: 95%; - padding: 8px; - border-radius: 8px; - background: rgba(0, 0, 0, 0.8); - color: white; - text-align: center; -} - -.timer-float .label { - font-size: 0.9rem; - display: block; - margin-bottom: 5px; -} - -.countdown { - display: flex; - justify-content: center; - align-items: center; - gap: 8px; - flex-wrap: nowrap; -} - -.time-item { - font-size: 0.85rem; - padding: 4px 6px; - background: rgba(255, 215, 0, 0.2); - border-radius: 4px; - border: 1px solid rgba(255, 215, 0, 0.5); -} - -/* 任务设置调整 */ -.task-settings-section { - margin-top: -100px; - /* 调整负边距 */ -} - -.task-title-container { - padding: 15px; -} - -.task-title-container .game-title { - font-size: 1.6rem; -} - -.task-title-container .game-title-highlight { - font-size: 2rem; -} - -.task-title-container .game-subtitle { - font-size: 1rem; -} - -/* 排名部分调整 */ -.rankings-section { - margin: 0 10px 20px 10px; -} + /* 排名部分调整 */ + .rankings-section { + margin: 0 10px 20px 10px; + } .rankings-container { - display: flex !important; - flex-direction: column !important; - gap: 20px; /* 增大垂直间距,避免拥挤 */ - align-items: stretch; /* 移动端也让两个框体宽度占满 */ - width: 100%; + flex-direction: column; + gap: 10px; } .individual-rankings, .team-rankings { - width: 550px; /* 移动端也保持固定宽度 */ - max-width: 100%; /* 在小屏幕上可以自适应 */ - /* 调整顺序,确保倒计时在冠军上方 */ - display: flex; - flex-direction: column; - margin: 0 auto; /* 居中显示 */ + min-width: auto; + width: 100%; + /* 调整顺序,确保倒计时在冠军上方 */ + display: flex; + flex-direction: column; } -/* 将倒计时移动到冠军上方的位置 */ -.team-rankings { - order: -1; -} + /* 将倒计时移动到冠军上方的位置 */ + .team-rankings { + order: -1; + } -.team-rankings-container, -.individual-rankings-container { - padding: 10px; - border-radius: 10px; - background: rgba(255, 255, 255, 0.95); -} + .team-rankings-container, + .individual-rankings-container { + padding: 10px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.95); + } + + /* 当设置为禁止滚动时,确保战区排名容器不允许滚动 */ + :root[style*="--team-scroll-lock: lock"] .team-rankings-container { + overflow: visible !important; + height: auto !important; + } + + :root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table { + overflow: hidden !important; + white-space: nowrap; + display: block; + } -/* 当设置为禁止滚动时,确保战区排名容器不允许滚动 */ -:root[style*="--team-scroll-lock: lock"] .team-rankings-container { - overflow: visible !important; - height: auto !important; -} + /* 表格调整 */ + .rank-table { + min-height: 250px; + /* 移除最大高度限制,允许显示所有行 */ + overflow-x: hidden; + /* 禁止横向滚动 */ + overflow-y: auto; + /* 允许纵向滚动 */ + /* 隐藏移动端滚动条 */ + -ms-overflow-style: none; + scrollbar-width: none; + display: flex; + flex-direction: column; + } + + /* 隐藏WebKit浏览器移动端滚动条 */ + .rank-table::-webkit-scrollbar { + display: none; + } + + /* 移动端英雄排名列表滚动设置 */ + .individual-rankings-container .rank-table { + overflow-x: hidden !important; + /* 禁止横向滚动 */ + overflow-y: auto !important; + /* 允许纵向滚动 */ + /* 确保英雄排名列表隐藏滚动条 */ + -ms-overflow-style: none; + scrollbar-width: none; + display: flex; + flex-direction: column; + } + + .individual-rankings-container .rank-table::-webkit-scrollbar { + display: none; + } -:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table { - overflow: hidden !important; - white-space: nowrap; - display: block; -} - -/* 表格调整 */ -.rank-table { - min-height: 250px; - /* 移除最大高度限制,允许显示所有行 */ - overflow-x: hidden; - /* 禁止横向滚动 */ - overflow-y: auto; - /* 允许纵向滚动 */ - /* 隐藏移动端滚动条 */ - -ms-overflow-style: none; - scrollbar-width: none; - display: flex; - flex-direction: column; -} - -/* 隐藏WebKit浏览器移动端滚动条 */ -.rank-table::-webkit-scrollbar { - display: none; -} - -/* 移动端英雄排名列表滚动设置 */ -.individual-rankings-container .rank-table { - overflow-x: hidden !important; - /* 禁止横向滚动 */ - overflow-y: auto !important; - /* 允许纵向滚动 */ - /* 确保英雄排名列表隐藏滚动条 */ - -ms-overflow-style: none; - scrollbar-width: none; - display: flex; - flex-direction: column; -} - -.individual-rankings-container .rank-table::-webkit-scrollbar { - display: none; -} - -.table-header { - font-size: 1rem; - padding: 8px 6px; - min-width: 500px; - /* 固定表头,防止滚动时移动 */ - position: sticky; - top: 0; - z-index: 10; - background-color: rgba(255, 255, 255, 0.95); -} - -.table-row { - font-size: 0.9rem; - padding: 8px 6px; - min-width: 500px; - /* 确保行内容不会被截断 */ - overflow: visible; -} - -/* 冠军部分调整 */ -.team-champion, -.individual-champion { - transform: scale(0.9); - margin: 5px 0; -} - -/* 管理员入口调整 */ -.admin-entry-float { - position: relative; - top: auto; - right: auto; - margin: 10px; - text-align: center; -} - -.btn-game-secondary { - padding: 10px 15px; - font-size: 0.9rem; -} - -/* 3. 奖金模块调整 - 移至底部显示 */ -.bonus-section { - position: fixed; - bottom: 0; - left: 0; - right: 0; - width: 100%; - margin: 0; - padding: 10px; - z-index: 1000; - transform: translateY(0); - transition: transform 0.3s ease; - box-shadow: none; -} - -.bonus-awards-container { - display: flex; - justify-content: space-around; - align-items: center; -} - -.award-image { - height: 120px; - width: auto; -} - -/* 确保重要内容优先显示 */ -.rank-col, -.name-col, -.score-col { - font-weight: bold; -} - -/* 为底部奖金模块留出空间 */ -.admin-entry-float { - margin-bottom: 100px; -} - -/* 针对极小屏幕的特殊处理 */ -@media (max-width: 480px) { .table-header { - font-size: 0.9rem; + font-size: 1rem; padding: 8px 6px; - min-width: 450px; + min-width: 500px; + /* 固定表头,防止滚动时移动 */ + position: sticky; + top: 0; + z-index: 10; + background-color: rgba(255, 255, 255, 0.95); } .table-row { - min-width: 450px; - font-size: 0.75rem; - padding: 6px 4px; + font-size: 0.9rem; + padding: 8px 6px; + min-width: 500px; + /* 确保行内容不会被截断 */ + overflow: visible; } - .game-title { - font-size: 1.4rem; + /* 冠军部分调整 */ + .team-champion, + .individual-champion { + margin: 5px 0; } - .game-title-highlight { - font-size: 1.7rem; + /* 管理员入口调整 */ + .admin-entry-float { + position: relative; + top: auto; + right: auto; + margin: 10px; + text-align: center; + } + + .btn-game-secondary { + padding: 10px 15px; + font-size: 0.9rem; + } + + /* 3. 奖金模块调整 - 移至底部显示 */ + .bonus-section { + position: fixed; + bottom: 0; + left: 0; + right: 0; + width: 100%; + margin: 0; + padding: 10px; + z-index: 1000; + transform: translateY(0); + transition: transform 0.3s ease; + box-shadow: none; + } + + .bonus-awards-container { + display: flex; + justify-content: space-around; + align-items: center; } .award-image { height: 120px; + width: auto; } - .countdown { - gap: 6px; + /* 确保重要内容优先显示 */ + .rank-col, + .name-col, + .score-col { + font-weight: bold; } - .time-item { - font-size: 0.8rem; - padding: 3px 5px; + /* 为底部奖金模块留出空间 */ + .admin-entry-float { + margin-bottom: 100px; + } + + /* 针对极小屏幕的特殊处理 */ + @media (max-width: 480px) { + .table-header { + font-size: 0.9rem; + padding: 8px 6px; + min-width: 450px; + } + + .table-row { + min-width: 450px; + font-size: 0.75rem; + padding: 6px 4px; + } + + .game-title { + font-size: 1.4rem; + } + + .game-title-highlight { + font-size: 1.7rem; + } + + .award-image { + height: 120px; + } + + .countdown { + gap: 6px; + } + + .time-item { + font-size: 0.8rem; + padding: 3px 5px; + } } -} } /* 触摸设备优化 */ @@ -2204,6 +2384,7 @@ onUnmounted(() => { } } + @media (min-width: 2000px) { .bonus-section { position: fixed;