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

chore: 实现支持定制战区冠军及英雄关键Logo的大小

Browse Source
This commit is contained in:
ZF Sun
2025-11-13 16:03:56 +08:00
parent 4164ea36ee
commit ab60d253de
3 changed files with 50 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
data/config.json
View File

@@ -387,7 +387,9 @@
},
"championLogos": {
"teamChampion": "",
"individualChampion": ""
"individualChampion": "",
"teamChampionSize": 120,
"individualChampionSize": 120
}
},
"battleEndTime": {

28
src/views/AdminPanel.vue
View File

@@ -386,6 +386,18 @@
清除Logo
</button>
</div>
<div class="size-control">
<label class="text-gold">显示大小：</label>
<input
type="number"
v-model.number="championLogos.teamChampionSize"
min="30"
max="200"
class="width-input"
placeholder="输入大小（像素）"
>
<span class="size-unit">px</span>
</div>
<p class="upload-hint">支持JPG、PNG、GIF格式，建议尺寸200x200像素，文件大小不超过5MB</p>
</div>
</div>
@@ -407,6 +419,18 @@
清除Logo
</button>
</div>
<div class="size-control">
<label class="text-gold">显示大小：</label>
<input
type="number"
v-model.number="championLogos.individualChampionSize"
min="30"
max="200"
class="width-input"
placeholder="输入大小（像素）"
>
<span class="size-unit">px</span>
</div>
<p class="upload-hint">支持JPG、PNG、GIF格式，建议尺寸200x200像素，文件大小不超过5MB</p>
</div>
</div>
@@ -828,7 +852,9 @@ const tabs = [
// 冠军Logo配置
const championLogos = ref({
teamChampion: '',
individualChampion: ''
individualChampion: '',
teamChampionSize: 60, // 默认60px
individualChampionSize: 60 // 默认60px
});
// 组件挂载时初始化冠军Logo配置

28
src/views/BattleRanking.vue
View File

@@ -55,8 +55,12 @@
<!-- 战区冠军 -->
<div class="team-champion">
<div class="team-logo">
<img v-if="localDisplayConfig.championLogos?.teamChampion" :src="localDisplayConfig.championLogos.teamChampion" alt="战区冠军" class="champion-logo">
<span v-else>🏅</span>
<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>
</div>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
@@ -99,9 +103,19 @@
<!-- 英雄冠军 -->
<div class="individual-champion">
<div class="individual-avatar">
<img v-if="individualRankings[0]?.avatar && individualRankings[0].avatar.startsWith('/')" :src="individualRankings[0].avatar" alt="冠军头像" class="avatar-image avatar-image-champion">
<img v-else-if="localDisplayConfig.championLogos?.individualChampion" :src="localDisplayConfig.championLogos.individualChampion" alt="英雄冠军" class="champion-logo">
<span v-else>{{ individualRankings[0]?.avatar || '👤' }}</span>
<img v-if="individualRankings[0]?.avatar && individualRankings[0].avatar.startsWith('/')"
:src="individualRankings[0].avatar"
alt="冠军头像"
class="avatar-image avatar-image-champion"
:style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
<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 :style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
{{ individualRankings[0]?.avatar || '👤' }}
</span>
</div>
<div class="champion-name">
{{ individualRankings[0]?.name || '暂无冠军' }}
@@ -858,7 +872,7 @@ onUnmounted(() => {
<style lang="scss" scoped>
.avatar-image-champion {
width: 120px;
object-fit: contain;
}
/* 冠军模块样式 */
@@ -894,8 +908,6 @@ onUnmounted(() => {
}
.champion-logo {
width: 60px;
height: 60px;
object-fit: contain;
}