tmp-upload #4

Merged
admin merged 33 commits from tmp-upload into main 2025-11-29 02:30:38 +00:00
8 changed files with 188 additions and 42 deletions
Showing only changes of commit a8ff32f77d - Show all commits

View File

@@ -896,9 +896,15 @@
"filterZeroScore": true
},
"crown": {
"size": null,
"size": 72,
"animationEnabled": true
},
"crownPosition": {
"top": -80,
"left": null,
"right": null,
"bottom": null
},
"team": {
"showMemberCount": false,
"showLeader": true,
@@ -966,7 +972,10 @@
"enabled": true
},
"pattern": {
"strongBeats": [],
"strongBeats": [
1,
4
],
"totalBeats": 4,
"accentMultiplier": 1.5,
"accentFrequencyOffset": 10,

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

BIN
public/team-propagation.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

View File

@@ -19,7 +19,16 @@
<img src="/banner2.png" alt="右侧标题语" class="banner-image" />
</div>
<router-view />
<div class="main-content">
<router-view />
<!-- 页脚 -->
<footer class="game-footer">
<div class="footer-content">
<p>&copy; 2025-2026 聚上集团 | 云上企. 所有权利保留.</p>
</div>
</footer>
</div>
</div>
</template>
@@ -69,6 +78,39 @@
/* 不设置固定宽度让logo保持原始尺寸 */
}
/* 主容器 */
.main-content {
min-height: 100vh;
position: relative;
}
/* 背景覆盖层,确保文本可读性 */
.main-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: -1;
}
.game-footer {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--dark-bg);
color: var(--gold-secondary);
padding: 20px 0;
text-align: center;
}
.footer-content {
font-size: 14px;
text-shadow: 1px 1px 10px black;
}
/* 针对1920x1080分辨率的banner精确定位 */
@media (width: 1920px) and (height: 1080px) {
.banner-left {
@@ -86,6 +128,17 @@
/* 移动设备响应式设计 */
@media (max-width: 768px) {
/* 1. 背景图片全屏显示并固定 */
.main-content {
padding: 0 !important;
margin-top: 50px;
background-image: url('/battle-background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
}
/* 移动设备上隐藏左右标题语,避免遮挡主要内容 */
.banner-left,
.banner-right {

View File

@@ -611,6 +611,38 @@
<span class="size-unit">px</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span>皇冠位置 - px</span>
<input type="number" v-model.number="localDisplayConfig.crownPosition.top"
class="width-input" placeholder="默认-100">
<span class="size-unit">px</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span>皇冠位置 - px</span>
<input type="number" v-model.number="localDisplayConfig.crownPosition.bottom"
class="width-input" placeholder="默认不设置">
<span class="size-unit">px</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span>皇冠位置 - px</span>
<input type="number" v-model.number="localDisplayConfig.crownPosition.left"
class="width-input" placeholder="默认居中">
<span class="size-unit">px</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span>皇冠位置 - px</span>
<input type="number" v-model.number="localDisplayConfig.crownPosition.right"
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">
@@ -618,6 +650,7 @@
</label>
</div>
<p class="upload-hint">皇冠大小默认为英雄冠军头像的1.2建议设置为合适的大小以确保美观</p>
<p class="upload-hint">皇冠位置默认值为顶部-100px且水平居中负值向上/左偏移正值向下/右偏移</p>
</div>
</div>
</div>
@@ -971,6 +1004,12 @@ onMounted(async () => {
localTeamRankings.value = [...teamRankings];
localBonusRules.value = [...bonusRules];
localDisplayConfig.value = { ...displayConfig };
// 确保皇冠位置配置存在
if (!localDisplayConfig.value.crownPosition) {
localDisplayConfig.value.crownPosition = { top: '-100px' };
} else if (!localDisplayConfig.value.crownPosition.top) {
localDisplayConfig.value.crownPosition.top = '-100px';
}
localBattleEndTime.value = { ...battleEndTime };
localDrumConfig.value = { ...drumConfig };

View File

@@ -1,5 +1,5 @@
<template>
<div class="battle-ranking">
<div>
<!-- 第一部分百日大战主题 - 使用banner0.png图片 -->
<section class="theme-section card-game">
<div class="theme-container">
@@ -61,6 +61,10 @@
<!-- 战区排名 -->
<div class="team-rankings">
<!-- 战区排名宣传语 -->
<div class="team-rankings-propagation">
<img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image">
</div>
<!-- 战区冠军 -->
<div class="team-champion">
<div class="team-logo" :class="{ 'photo-container': localDisplayConfig.championLogos?.teamChampionType === 'photo' }">
@@ -113,6 +117,10 @@
</div>
<div class="individual-rankings">
<!-- 英雄排名宣传语 -->
<div class="individual-rankings-propagation">
<img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image">
</div>
<!-- 英雄冠军 -->
<div class="individual-champion">
<div class="champion-content">
@@ -226,6 +234,12 @@ 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,
@@ -430,9 +444,7 @@ onBeforeMount(async () => {
// 定义英雄排名表中每行默认高度
const tableIndividualTopThreeHeight = 3 * 47.5; // 前三名高度px
const tableIndividualRowHeight = 34.5; // 其他行高度px
const tableIndividualReserveHeight = 20; // 保留空间高度px
const tableIndividualReserveHeight = 10; // 保留空间高度px
// 更新CSS变量将默认显示行数传递给样式
watch(
@@ -540,6 +552,43 @@ watch(
{ 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
@@ -1133,11 +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);
}
.crown-animation-run {
@@ -1272,14 +1323,17 @@ onUnmounted(() => {
/* 响应式设计 */
@media (max-width: 768px) {
.total-score-total-image {
width: 320px;
}
.team-rankings-propagation-image {
width: 320px;
}
/** 皇冠动画 */
.crown-animation {
top: -120px;
.individual-rankings-propagation-image {
width: 320px;
}
/* 隐藏倒计时模块 */
@@ -1387,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 {
@@ -1922,6 +1960,7 @@ onUnmounted(() => {
/* 照片容器样式 */
.team-logo.photo-container {
overflow: hidden;
margin-top: -40px;
}
.individual-champion {
@@ -1933,6 +1972,18 @@ onUnmounted(() => {
gap: 30px;
}
.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 {
@@ -1969,6 +2020,11 @@ onUnmounted(() => {
white-space: normal !important;
}
.individual-rankings-propagation {
margin-top: -40px;
padding-bottom: 40px;
}
.individual-rankings {
margin-top: 60px; /* 增加排名列表的顶部间距 */
}
@@ -2067,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;