@@ -226,6 +234,18 @@ function createDefaultDisplayConfig() {
individualChampion: '',
individualChampionSize: 60
},
+ crownPosition: {
+ top: -100, // 皇冠位置的top值，默认-100px
+ left: null, // 皇冠位置的left值，默认null（使用居中）
+ right: null, // 皇冠位置的right值，默认null
+ bottom: null // 皇冠位置的bottom值，默认null
+ },
+ subtitleImage: {
+ src: '/completed_performance.png',
+ width: 200,
+ height: 60,
+ alt: '总战绩'
+ },
individual: {
scoreColumn: {
displayName: '业绩',
@@ -239,7 +259,7 @@ function createDefaultDisplayConfig() {
showBonus: false,
showTeam: true, // 默认显示战区列
showAvatar: false, // 默认不显示头像列
- defaultDisplayRows: 10, // 默认显示10行
+ defaultDisplayRows: 0, // 默认显示所有行
filterZeroScore: false, // 默认不过滤业绩为0的记录
columnWidths: {
team: 120 // 默认战区列宽
@@ -421,30 +441,73 @@ onBeforeMount(async () => {
}
});
-// 定义每行默认高度
-const tableRowHeight = 50;
+// 定义英雄排名表中每行默认高度
+const tableIndividualTopThreeHeight = 3 * 47.5; // 前三名高度px
+const tableIndividualRowHeight = 34.5; // 其他行高度px
+const tableIndividualReserveHeight = 10; // 保留空间高度px
// 更新CSS变量，将默认显示行数传递给样式
watch(
() => localDisplayConfig.value?.individual?.defaultDisplayRows,
- (newRows) => {
- document.documentElement.style.setProperty('--default-display-rows', newRows);
+ (newValue) => {
+ if (newValue && newValue > 0) {
+ const otherRowsHeight = (newValue - 3) * tableIndividualRowHeight;
+ const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
+ document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
+ document.documentElement.style.setProperty('--individual-overflow-y', 'auto');
+ document.documentElement.style.setProperty('--individual-overflow-x', 'auto');
+ document.documentElement.style.setProperty('--individual-scroll-lock', '');
+ } else {
+ // 根据实际数据条数计算高度
+ const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
+ const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
+ document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
+ document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
+ document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
+ document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
+ }
},
{ immediate: true }
);
+// 当英雄排名数据变化时，重新计算高度（如果当前是显示所有行模式）
+watch(
+ () => filteredIndividualRankings.value.length,
+ () => {
+ console.log('filteredIndividualRankings.value.length', filteredIndividualRankings.value.length);
+ const displayRows = localDisplayConfig.value?.individual?.defaultDisplayRows;
+ if (!displayRows || displayRows === 0) {
+ // 根据实际数据条数计算高度
+ const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
+ const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
+ document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
+ document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
+ document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
+ document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
+ }
+ }
+);
+
+// 定义战区排名表中每行默认高度
+const tableTeamTopThreeHeight = 3 * 48; // 前三名高度px
+const tableTeamRowHeight = 48; // 其他行高度px
+const tableTeamReserveHeight = 20; // 保留空间高度px
+
// 添加监听以同步战区排名默认显示行数配置到CSS变量
watch(
() => localDisplayConfig.value?.team?.defaultDisplayRows,
(newValue) => {
if (newValue && newValue > 0) {
- document.documentElement.style.setProperty('--team-default-height', `calc(${tableRowHeight}px * ${newValue})`);
+ const otherRowsHeight = (newValue - 3) * tableTeamRowHeight;
+ const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
+ document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
document.documentElement.style.setProperty('--team-overflow-y', 'auto');
document.documentElement.style.setProperty('--team-overflow-x', 'auto');
document.documentElement.style.setProperty('--team-scroll-lock', '');
} else {
- // 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
- const actualHeight = teamRankings.value.length * tableRowHeight + 20;
+ // 根据实际数据条数计算高度
+ const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
+ const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
@@ -460,8 +523,9 @@ watch(
() => {
const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
if (!displayRows || displayRows === 0) {
- // 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
- const actualHeight = teamRankings.value.length * tableRowHeight + 20;
+ // 根据实际数据条数计算高度
+ const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
+ const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
@@ -470,6 +534,61 @@ watch(
}
);
+// 监听冠军字体大小配置变化，更新CSS变量
+watch(
+ () => localDisplayConfig.value?.championLogos,
+ (newConfig) => {
+ if (newConfig) {
+ // 设置战区冠军字体大小
+ if (newConfig.teamChampionFontSize) {
+ document.documentElement.style.setProperty('--team-champion-font-size', newConfig.teamChampionFontSize + 'rem');
+ }
+ // 设置英雄冠军字体大小
+ if (newConfig.individualChampionFontSize) {
+ document.documentElement.style.setProperty('--individual-champion-font-size', newConfig.individualChampionFontSize + 'rem');
+ }
+ }
+ },
+ { immediate: true, deep: true }
+);
+
+// 监听皇冠位置配置变化，更新皇冠位置
+watch(
+ () => localDisplayConfig.value?.crownPosition,
+ (newConfig) => {
+ if (newConfig) {
+ // 更新top值
+ if (newConfig.top !== null && newConfig.top !== undefined) {
+ document.documentElement.style.setProperty('--crown-top', newConfig.top + 'px');
+ } else {
+ document.documentElement.style.removeProperty('--crown-top');
+ }
+
+ // 更新left值
+ if (newConfig.left !== null && newConfig.left !== undefined) {
+ document.documentElement.style.setProperty('--crown-left', newConfig.left + 'px');
+ } else {
+ document.documentElement.style.removeProperty('--crown-left');
+ }
+
+ // 更新right值
+ if (newConfig.right !== null && newConfig.right !== undefined) {
+ document.documentElement.style.setProperty('--crown-right', newConfig.right + 'px');
+ } else {
+ document.documentElement.style.removeProperty('--crown-right');
+ }
+
+ // 更新bottom值
+ if (newConfig.bottom !== null && newConfig.bottom !== undefined) {
+ document.documentElement.style.setProperty('--crown-bottom', newConfig.bottom + 'px');
+ } else {
+ document.documentElement.style.removeProperty('--crown-bottom');
+ }
+ }
+ },
+ { deep: true, immediate: true }
+);
+
// 确保奖金规则有默认值
const displayBonusRules = computed(() => {
return Array.isArray(bonusRules) && bonusRules.length > 0
@@ -1063,15 +1182,13 @@ onUnmounted(() => {
/* 皇冠动画效果 */
.crown-animation {
position: absolute;
- left: 50%;
- transform: translateX(-50%);
+ left: var(--crown-left, 50%);
+ right: var(--crown-right, auto);
+ top: var(--crown-top, -100px);
+ bottom: var(--crown-bottom, auto);
+ transform: var(--crown-left, 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 {
@@ -1138,11 +1255,16 @@ onUnmounted(() => {
}
.champion-name {
- font-size: 1.1rem;
+ font-size: var(--individual-champion-font-size, 1.8rem);
font-weight: bold;
color: gold;
}
+/* 战区冠军名称特殊样式 */
+.team-champion .champion-name {
+ font-size: var(--team-champion-font-size, 1.8rem);
+}
+
/* 基础样式 */
:root {
--gold-primary: #ffd700;
@@ -1180,7 +1302,7 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
- gap: 15px;
+ gap: 5px;
flex-wrap: nowrap;
}
@@ -1201,41 +1323,19 @@ onUnmounted(() => {
/* 响应式设计 */
@media (max-width: 768px) {
-<<<<<<< HEAD
- /** 皇冠动画（还原原始大小） */
- .crown-animation {
- top: -60px !important; /* 移动端向上偏移，避免遮挡 */
- font-size: 6rem !important; /* 保持与桌面端一致的大小 */
- }
- /* 核心修改：移动端统一冠军区高度 */
- .team-champion,
- .individual-champion {
- height: 120px !important;
- padding: 10px 10px 5px !important;
+ .total-score-total-image {
+ width: 320px;
}
- /* 移动端名字样式优化 */
- .champion-name {
- font-size: 1.1rem !important;
- margin-top: 3px !important;
+ .team-rankings-propagation-image {
+ width: 320px;
}
- /* 移动端奖杯还原原始大小 */
- .trophy {
- font-size: 2.5rem !important; /* 确保移动端也是原始大小 */
- filter: drop-shadow(0 0 10px var(--gold-primary)) !important;
+ .individual-rankings-propagation-image {
+ width: 320px;
}
- /* 其他原有移动端样式保持不变... */
-}
-=======
- /** 皇冠动画 */
- .crown-animation {
- top: -120px;
- }
-
->>>>>>> 5a48653be089c47d923681c42164b2d4fb60c341
/* 隐藏倒计时模块 */
.timer-float {
display: none !important;
@@ -1268,6 +1368,7 @@ onUnmounted(() => {
.bonus-awards-container {
gap: 10px;
+ scale: 0.8;
}
.timer-float {
@@ -1340,23 +1441,7 @@ onUnmounted(() => {
border: 0;
}
-/* 主容器 */
-.battle-ranking {
- min-height: 100vh;
- position: relative;
-}
-/* 背景覆盖层，确保文本可读性 */
-.battle-ranking::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: transparent;
- z-index: -1;
-}
/* 主题部分 */
.theme-section {
@@ -1690,8 +1775,6 @@ onUnmounted(() => {
.rank-table {
border-radius: 10px;
overflow: hidden;
- min-height: 480px;
- max-height: 480px;
overflow-y: auto;
position: relative;
margin-top: 0.8rem;
@@ -1852,15 +1935,32 @@ onUnmounted(() => {
}
.score-value {
- font-size: 1.5rem;
+ font-size: calc(var(--individual-champion-font-size, 2.4rem) * 2);
font-weight: bold;
- color: var(--gold-primary);
- text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+ color: #fff2c4;
+ text-shadow:
+ 0 0 10px rgba(255, 215, 0, 0.5),
+ 0 0 20px rgba(255, 215, 0, 0.3),
+ 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.total-score-total-value {
+ margin-top: -40px;
+}
+
+/* 战区冠军分数特殊样式 */
+.team-champion .score-value {
+ font-size: calc(var(--team-champion-font-size, 1.8rem) * 2);
+ text-shadow:
+ 0 0 15px rgba(255, 215, 0, 0.7),
+ 0 0 30px rgba(255, 215, 0, 0.4),
+ 2px 2px 3px rgba(0, 0, 0, 0.9);
}
/* 照片容器样式 */
.team-logo.photo-container {
overflow: hidden;
+ margin-top: -40px;
}
.individual-champion {
@@ -1872,95 +1972,25 @@ onUnmounted(() => {
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;
+.team-rankings-propagation {
align-items: center;
+ display: flex;
+ justify-content: center;
+}
+
+.individual-rankings-propagation {
+ align-items: center;
+ display: flex;
+ justify-content: center;
}
@media (max-width: 768px) {
+
+ .total-score-total-title {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ }
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
.team-rankings-container .rank-table {
@@ -1989,23 +2019,47 @@ onUnmounted(() => {
overflow-x: visible !important;
white-space: normal !important;
}
+
+ .individual-rankings-propagation {
+ margin-top: -40px;
+ padding-bottom: 40px;
+ }
.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));
- /* 隐藏滚动条但保留滚动功能 */
+ min-height: auto;
+ /* 如果配置了具体了默认显示行数，则设置高度和滚动，否则显示所有行 */
+ height: var(--individual-default-height, auto) !important;
+ overflow-y: var(--individual-overflow-y, hidden);
+ overflow-x: var(--individual-overflow-x, auto);
+ /* 隐藏滚动条 */
-ms-overflow-style: none;
scrollbar-width: none;
}
+ /* 当设置了滚动锁定时，禁止所有滚动 */
+ :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;
+ 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;
+ }
+
/* 移动端非前三名字体放大 */
.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)) {
@@ -2069,17 +2123,6 @@ onUnmounted(() => {
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;
@@ -2225,18 +2268,30 @@ onUnmounted(() => {
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 {
+ overflow-x: hidden !important;
+ /* 禁止横向滚动 */
+ height: var(--individual-default-height, auto) !important;
+ overflow-y: var(--individual-overflow-y, auto) !important;
+ /* 确保英雄排名列表隐藏滚动条 */
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ display: flex;
+ flex-direction: column;
+ }
+
+ /* 当设置了滚动锁定时，禁止所有滚动 */
+ :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container {
+ overflow: visible !important;
+ height: auto !important;
+ }
+
+ :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
+ overflow: hidden !important;
+ white-space: nowrap;
+ display: block;
+ }
.individual-rankings-container .rank-table::-webkit-scrollbar {
display: none;
diff --git a/ui/手表.png b/ui/手表.png
new file mode 100644
index 0000000..7958574
Binary files /dev/null and b/ui/手表.png differ
diff --git a/uploads/1763860106271.jpg b/uploads/1763860106271.jpg
new file mode 100644
index 0000000..c9bf9af
Binary files /dev/null and b/uploads/1763860106271.jpg differ
diff --git a/uploads/1763956859312.jpg b/uploads/1763956859312.jpg
new file mode 100644
index 0000000..6818653
Binary files /dev/null and b/uploads/1763956859312.jpg differ
diff --git a/uploads/1763972044872.jpg b/uploads/1763972044872.jpg
new file mode 100644
index 0000000..2218650
Binary files /dev/null and b/uploads/1763972044872.jpg differ
diff --git a/uploads/1763979489455.png b/uploads/1763979489455.png
new file mode 100644
index 0000000..88b8774
Binary files /dev/null and b/uploads/1763979489455.png differ
- 
+ 
+ 
+