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

chore: 调整样式

Browse Source
This commit is contained in:
ZF Sun
2025-11-22 08:23:16 +08:00
parent 7c70a7847a
commit 1d4cb8c184
5 changed files with 892 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/BattleRanking.vue
View File

@@ -53,8 +53,7 @@
<img v-if="localDisplayConfig.championLogos?.teamChampion"
:src="localDisplayConfig.championLogos.teamChampion" alt="战区冠军" class="champion-logo"
:style="{ width: localDisplayConfig.championLogos?.teamChampionSize + 'px', height: localDisplayConfig.championLogos?.teamChampionSize + 'px' }">
<span v-else
:style="{ fontSize: localDisplayConfig.championLogos?.teamChampionSize ? (localDisplayConfig.championLogos.teamChampionSize * 0.8) + 'px' : '2rem' }">🏅</span>
<img v-else src="/crown.png" alt="战区冠军" class="champion-logo" />
</div>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
@@ -105,10 +104,13 @@
<img v-else-if="localDisplayConfig.championLogos?.individualChampion"
:src="localDisplayConfig.championLogos.individualChampion" alt="英雄冠军" class="champion-logo"
:style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
<span v-else
<div v-else class="champion-log">
<span
:style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
{{ filteredIndividualRankings[0]?.avatar || '👤' }}
</span>
</div>
</div>
<div class="champion-name">
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
@@ -363,18 +365,15 @@ onBeforeMount(async () => {
if (config.displayConfig) {
const configCopy = JSON.parse(JSON.stringify(config.displayConfig));
localDisplayConfig.value = mergeConfig(defaultDisplayConfig, configCopy);
console.log('localDisplayConfig.value =', localDisplayConfig.value);
}
console.log('成功从服务器加载最新数据');
}
} catch (error) {
console.error('加载数据失败:', error);
}
});
// 确保原有onMounted逻辑不被覆盖
// 定义每行默认高度
const tableRowHeight = 50;
// 更新CSS变量，将默认显示行数传递给样式
watch(
@@ -390,13 +389,13 @@ watch(
() => localDisplayConfig.value?.team?.defaultDisplayRows,
(newValue) => {
if (newValue && newValue > 0) {
document.documentElement.style.setProperty('--team-default-height', `calc(60px * ${newValue})`);
document.documentElement.style.setProperty('--team-default-height', `calc(${tableRowHeight}px * ${newValue})`);
document.documentElement.style.setProperty('--team-overflow-y', 'auto');
document.documentElement.style.setProperty('--team-overflow-x', 'auto');
document.documentElement.style.setProperty('--team-scroll-lock', '');
} else {
// 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * 60 + 20;
// 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * tableRowHeight + 20;
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');
@@ -412,8 +411,8 @@ watch(
() => {
const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
if (!displayRows || displayRows === 0) {
// 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * 60 + 20;
// 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * tableRowHeight + 20;
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');
@@ -1014,7 +1013,6 @@ onUnmounted(() => {
/* 皇冠动画效果 */
.crown-animation {
position: absolute;
top: -70px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
@@ -1061,6 +1059,7 @@ onUnmounted(() => {
.champion-logo {
object-fit: contain;
max-width: 120px;
}
.avatar-image {
@@ -1140,6 +1139,10 @@ onUnmounted(() => {
/* 响应式设计 */
@media (max-width: 768px) {
/** 皇冠动画 */
.crown-animation {
top: -120px;
}
/* 隐藏倒计时模块 */
.timer-float {
@@ -1758,6 +1761,10 @@ onUnmounted(() => {
overflow-x: visible !important;
white-space: normal !important;
}
.individual-rankings {
margin-top: 60px; /* 增加排名列表的顶部间距 */
}
/* 英雄排名容器设置 - 允许垂直滚动，设置默认高度显示多行 */
.individual-rankings-container .rank-table {