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-24 14:32:58 +08:00
parent 593dad093e
commit 885f0a51dd
2 changed files with 179 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/views/BattleRanking.vue
View File

@@ -61,10 +61,21 @@
<div class="team-rankings">
<!-- 战区冠军 -->
<div class="team-champion">
<div class="team-logo">
<div class="team-logo" :class="{ 'photo-container': localDisplayConfig.championLogos?.teamChampionType === 'photo' }">
<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' }">
:src="localDisplayConfig.championLogos.teamChampion" alt="战区冠军"
class="champion-logo"
:style="localDisplayConfig.championLogos?.teamChampionType === 'photo'
? {
width: localDisplayConfig.championLogos?.teamChampionPhotoWidth + 'px',
height: localDisplayConfig.championLogos?.teamChampionPhotoHeight + 'px',
objectFit: 'cover'
}
: {
width: localDisplayConfig.championLogos?.teamChampionSize + 'px',
height: localDisplayConfig.championLogos?.teamChampionSize + 'px'
}
">
<img v-else src="/crown.png" alt="战区冠军" class="champion-logo" />
</div>
<div class="champion-name">
@@ -102,30 +113,32 @@
<div class="individual-rankings">
<!-- 英雄冠军 -->
<div class="individual-champion">
<div class="individual-avatar champion-container">
<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'
// transform: 'translateX(-50%)'
}">
👑
<div class="hero-ranking-text left-hero-ranking-text">英雄榜</div>
<div class="champion-content">
<div class="individual-avatar champion-container">
<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'
}">
👑
</div>
<img v-if="filteredIndividualRankings[0]?.avatar && filteredIndividualRankings[0].avatar.startsWith('/')"
:src="filteredIndividualRankings[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' }">
<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 || '暂无冠军' }}
</div>
<img v-if="filteredIndividualRankings[0]?.avatar && filteredIndividualRankings[0].avatar.startsWith('/')"
:src="filteredIndividualRankings[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' }">
<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 || '暂无冠军' }}
</div>
<div class="hero-ranking-text right-hero-ranking-text">英雄榜</div>
</div>
<!-- 英雄排名 -->
<div class="individual-rankings-container">
@@ -207,6 +220,9 @@ function createDefaultDisplayConfig() {
championLogos: {
teamChampion: '',
teamChampionSize: 60,
teamChampionType: 'avatar', // 'avatar' 或 'photo'
teamChampionPhotoWidth: 120,
teamChampionPhotoHeight: 80,
individualChampion: '',
individualChampionSize: 60
},
@@ -1097,6 +1113,12 @@ onUnmounted(() => {
border-radius: 50%;
}
.photo-container .champion-logo {
max-width: unset !important;
border-radius: 0 !important;
}
.avatar-image {
width: 30px;
height: 30px;
@@ -1802,6 +1824,108 @@ onUnmounted(() => {
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) {
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
@@ -2106,7 +2230,6 @@ onUnmounted(() => {
/* 冠军部分调整 */
.team-champion,
.individual-champion {
transform: scale(0.9);
margin: 5px 0;
}