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-21 17:20:39 +08:00
parent 94cb525301
commit 7c70a7847a
2 changed files with 58 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/AdminPanel.vue
View File

@@ -543,6 +543,28 @@
<p class="upload-hint">支持JPG、PNG、GIF格式，建议尺寸200x200像素，文件大小不超过5MB</p>
</div>
</div>
<!-- 皇冠配置 -->
<div class="config-section">
<h3 class="text-gold">👑 英雄冠军皇冠配置</h3>
<div class="crown-config-section">
<div class="config-item">
<label class="checkbox-label">
<span>皇冠大小（像素）：</span>
<input type="number" v-model.number="localDisplayConfig.crown.size" min="30" max="300"
class="width-input" placeholder="输入大小（像素）">
<span class="size-unit">px</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<input type="checkbox" v-model="localDisplayConfig.crown.animationEnabled">
<span>启用皇冠浮动动画效果</span>
</label>
</div>
<p class="upload-hint">皇冠大小默认为英雄冠军头像的1.2倍，建议设置为合适的大小以确保美观</p>
</div>
</div>
</div>
<!-- 战鼓配置 -->

48
src/views/BattleRanking.vue
View File

@@ -93,7 +93,10 @@
<!-- 英雄冠军 -->
<div class="individual-champion">
<div class="individual-avatar champion-container">
<div class="crown-animation" v-if="filteredIndividualRankings.length > 0">
<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>
<img v-if="filteredIndividualRankings[0]?.avatar && filteredIndividualRankings[0].avatar.startsWith('/')"
@@ -375,7 +378,7 @@ onBeforeMount(async () => {
// 更新CSS变量，将默认显示行数传递给样式
watch(
() => localDisplayConfig.value.individual.defaultDisplayRows,
() => localDisplayConfig.value?.individual?.defaultDisplayRows,
(newRows) => {
document.documentElement.style.setProperty('--default-display-rows', newRows);
},
@@ -384,7 +387,7 @@ watch(
// 添加监听以同步战区排名默认显示行数配置到CSS变量
watch(
() => localDisplayConfig.value.team.defaultDisplayRows,
() => localDisplayConfig.value?.team?.defaultDisplayRows,
(newValue) => {
if (newValue && newValue > 0) {
document.documentElement.style.setProperty('--team-default-height', `calc(60px * ${newValue})`);
@@ -407,7 +410,7 @@ watch(
watch(
() => teamRankings.value.length,
() => {
const displayRows = localDisplayConfig.value.team.defaultDisplayRows;
const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
if (!displayRows || displayRows === 0) {
// 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * 60 + 20;
@@ -955,6 +958,17 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
@keyframes crownFloat {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-5px) rotate(2deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
.avatar-image-champion {
object-fit: contain;
}
@@ -1000,33 +1014,42 @@ onUnmounted(() => {
/* 皇冠动画效果 */
.crown-animation {
position: absolute;
top: -25px;
top: -70px;
left: 50%;
transform: translateX(-50%);
font-size: 1.5rem;
animation: crownFloat 2s ease-in-out infinite;
z-index: 10;
text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
}
.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(-5deg);
transform: translateX(-50%) translateY(0) rotate(-10deg);
}
50% {
transform: translateX(-50%) translateY(-5px) rotate(5deg);
transform: translateX(-50%) translateY(-5px) rotate(10deg);
}
100% {
transform: translateX(-50%) translateY(0) rotate(-5deg);
transform: translateX(-50%) translateY(0) rotate(-10deg);
}
}
/* 皇冠发光效果动画 */
.crown-animation {
animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite;
@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);
@@ -1576,6 +1599,7 @@ onUnmounted(() => {
max-height: 480px;
overflow-y: auto;
position: relative;
margin-top: 0.8rem;
}
.table-header {