Compare commits
10 Commits
改变了战区排名英雄排
...
f9400a76ca
| Author | SHA1 | Date | |
|---|---|---|---|
| f9400a76ca | |||
| 9ed6935707 | |||
| 7fb210599f | |||
| 2eea1fb213 | |||
| 6cbcce505a | |||
| e33f227aa0 | |||
| d9e88f757f | |||
| b6f20fd76d | |||
| 7e90289fdd | |||
| 2a9153217b |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 508 KiB |
40
src/App.vue
40
src/App.vue
@@ -25,7 +25,7 @@
|
|||||||
<!-- 页脚 -->
|
<!-- 页脚 -->
|
||||||
<footer class="game-footer">
|
<footer class="game-footer">
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<p>© 2025-2026 聚上集团 | 云上企. 所有权利保留.</p>
|
<p>© 2025-2026 聚上集团 | 云上企 版权所有.</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
@@ -108,7 +108,28 @@
|
|||||||
|
|
||||||
.footer-content {
|
.footer-content {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-shadow: 1px 1px 10px black;
|
/* 雕刻效果:使用多层text-shadow创建凸起感 */
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 rgba(255, 255, 255, 0.3), /* 高光 - 左上 */
|
||||||
|
1px 1px 0 rgba(0, 0, 0, 0.5), /* 阴影 - 右下 */
|
||||||
|
0 0 5px rgba(17, 17, 17, 0.5); /* 光晕 */
|
||||||
|
/* 背景和内边距 */
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
/* 添加轻微的3D效果 */
|
||||||
|
transform: perspective(1000px) rotateX(0deg);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 鼠标悬停时增强3D效果 */
|
||||||
|
.footer-content:hover {
|
||||||
|
transform: perspective(1000px) rotateX(2deg) translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 rgba(255, 255, 255, 0.4),
|
||||||
|
1px 1px 0 rgba(0, 0, 0, 0.6),
|
||||||
|
0 0 8px rgba(15, 15, 15, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 针对1920x1080分辨率的banner精确定位 */
|
/* 针对1920x1080分辨率的banner精确定位 */
|
||||||
@@ -172,5 +193,20 @@
|
|||||||
.app-logo {
|
.app-logo {
|
||||||
width: 200px; /* 移动设备上设置固定宽度为200px */
|
width: 200px; /* 移动设备上设置固定宽度为200px */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动设备上的页脚雕刻效果适配 */
|
||||||
|
.footer-content {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 rgba(255, 255, 255, 0.2),
|
||||||
|
1px 1px 0 rgba(0, 0, 0, 0.4),
|
||||||
|
0 0 3px rgba(255, 215, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content:hover {
|
||||||
|
transform: none; /* 移动设备上禁用悬停效果 */
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -14,10 +14,10 @@
|
|||||||
<!-- 战鼓动画在上面 -->
|
<!-- 战鼓动画在上面 -->
|
||||||
<div class="drums-animation">
|
<div class="drums-animation">
|
||||||
<div class="drum glow-border" :class="{ beating: isBeating }">🥁</div>
|
<div class="drum glow-border" :class="{ beating: isBeating }">🥁</div>
|
||||||
<div class="drum" :class="{ beating: isBeating }">锣</div>
|
<div class="drum" :class="{ beating: isBeating }">🥁</div>
|
||||||
<div class="trophy" style="font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--gold-primary));">🏆</div>
|
<div class="trophy" style="font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--gold-primary));">🏆</div>
|
||||||
<div class="drum" :class="{ beating: isBeating }">锣</div>
|
<div class="drum" :class="{ beating: isBeating }">🥁</div>
|
||||||
<div class="drum" :class="{ beating: isBeating }">锣</div>
|
<div class="drum" :class="{ beating: isBeating }">🥁</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -33,10 +33,9 @@
|
|||||||
|
|
||||||
<!-- 第三部分:奖金设置(图片形式) -->
|
<!-- 第三部分:奖金设置(图片形式) -->
|
||||||
<section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game"
|
<section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game"
|
||||||
@mousedown="startBonusDrag"
|
@mousedown="startBonusDrag"
|
||||||
@touchstart="startBonusDrag"
|
@touchstart="startBonusTouch"
|
||||||
@click.stop
|
@click.stop>
|
||||||
:style="{ left: bonusPosition.x + 'px', top: bonusPosition.y + 'px' }">
|
|
||||||
<div class="bonus-awards-container">
|
<div class="bonus-awards-container">
|
||||||
<div><img src="/award1.png" alt="一等奖" class="award-image"></div>
|
<div><img src="/award1.png" alt="一等奖" class="award-image"></div>
|
||||||
<div><img src="/award2.png" alt="二等奖" class="award-image"></div>
|
<div><img src="/award2.png" alt="二等奖" class="award-image"></div>
|
||||||
@@ -48,7 +47,10 @@
|
|||||||
<section class="total-score-section card-game">
|
<section class="total-score-section card-game">
|
||||||
<div class="total-score-container">
|
<div class="total-score-container">
|
||||||
<div class="game-subtitle total-score-total-title">
|
<div class="game-subtitle total-score-total-title">
|
||||||
<img src="/completed_performance.png" alt="总战绩" class="total-score-total-image">
|
<img src="/completed_performance.png"
|
||||||
|
alt="总战绩"
|
||||||
|
style="width: 880px; display: block; margin: 0 auto; height: auto;"
|
||||||
|
class="total-score-total-image">
|
||||||
</div>
|
</div>
|
||||||
<div class="total-score-content">
|
<div class="total-score-content">
|
||||||
<div class="total-score-item">
|
<div class="total-score-item">
|
||||||
@@ -66,7 +68,8 @@
|
|||||||
<div class="team-rankings">
|
<div class="team-rankings">
|
||||||
<!-- 战区排名宣传语 -->
|
<!-- 战区排名宣传语 -->
|
||||||
<div class="team-rankings-propagation">
|
<div class="team-rankings-propagation">
|
||||||
<img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image">
|
<img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image"
|
||||||
|
style="width: 500px; height: auto">
|
||||||
</div>
|
</div>
|
||||||
<!-- 战区冠军 -->
|
<!-- 战区冠军 -->
|
||||||
<div class="team-champion">
|
<div class="team-champion">
|
||||||
@@ -122,7 +125,8 @@
|
|||||||
<div class="individual-rankings">
|
<div class="individual-rankings">
|
||||||
<!-- 英雄排名宣传语 -->
|
<!-- 英雄排名宣传语 -->
|
||||||
<div class="individual-rankings-propagation">
|
<div class="individual-rankings-propagation">
|
||||||
<img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image">
|
<img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image"
|
||||||
|
style="width: 500px; height: auto">
|
||||||
</div>
|
</div>
|
||||||
<!-- 英雄冠军 -->
|
<!-- 英雄冠军 -->
|
||||||
<div class="individual-champion">
|
<div class="individual-champion">
|
||||||
@@ -154,7 +158,6 @@
|
|||||||
<!-- 英雄排名 -->
|
<!-- 英雄排名 -->
|
||||||
<div class="individual-rankings-container">
|
<div class="individual-rankings-container">
|
||||||
<h2 class="game-subtitle">英雄排名</h2>
|
<h2 class="game-subtitle">英雄排名</h2>
|
||||||
<div class="scroll-wrapper"></div>
|
|
||||||
<div class="rank-table">
|
<div class="rank-table">
|
||||||
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
|
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
|
||||||
<span class="rank-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }">排名</span>
|
<span class="rank-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }">排名</span>
|
||||||
@@ -213,7 +216,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onBeforeMount, onMounted, onUnmounted, watch, computed, reactive } from 'vue';
|
import { ref, onBeforeMount, onMounted, onUnmounted, watch, computed, reactive, proxyRefs } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import {
|
import {
|
||||||
individualRankings as importedIndividualRankings,
|
individualRankings as importedIndividualRankings,
|
||||||
@@ -702,7 +705,7 @@ const isPlayingSound = ref(false);
|
|||||||
const drumsPosition = ref({ x: 20, y: 20 });
|
const drumsPosition = ref({ x: 20, y: 20 });
|
||||||
// 倒计时位置状态已移除,直接在模板中使用固定位置
|
// 倒计时位置状态已移除,直接在模板中使用固定位置
|
||||||
// 奖金设置模块位置状态 - 使用reactive存储实际定位值
|
// 奖金设置模块位置状态 - 使用reactive存储实际定位值
|
||||||
const bonusPosition = reactive({ x: 320, y: 360 });
|
const bonusPosition = reactive({ x: 'auto', y: 'auto' });
|
||||||
|
|
||||||
let isDragging = false;
|
let isDragging = false;
|
||||||
let isBonusDragging = false;
|
let isBonusDragging = false;
|
||||||
@@ -731,28 +734,37 @@ const startDrag = (e) => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 开始拖动奖金模块
|
// 开始拖动奖金模块(鼠标事件)
|
||||||
const startBonusDrag = (e) => {
|
const startBonusDrag = (e) => {
|
||||||
e.stopPropagation(); // 阻止事件冒泡
|
e.stopPropagation(); // 阻止事件冒泡
|
||||||
isBonusDragging = true;
|
isBonusDragging = true;
|
||||||
|
// 计算鼠标相对于元素左上角的偏移量
|
||||||
// 根据事件类型处理拖动偏移量
|
const rect = e.currentTarget.getBoundingClientRect();
|
||||||
if (e.type === 'touchstart') {
|
bonusDragOffset.x = e.clientX - rect.left;
|
||||||
const touch = e.touches[0];
|
bonusDragOffset.y = e.clientY - rect.top;
|
||||||
bonusDragOffset.x = touch.clientX - bonusPosition.x;
|
|
||||||
bonusDragOffset.y = touch.clientY - bonusPosition.y;
|
|
||||||
} else {
|
|
||||||
bonusDragOffset.x = e.clientX - bonusPosition.x;
|
|
||||||
bonusDragOffset.y = e.clientY - bonusPosition.y;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提高拖动时的性能,临时禁用动画效果
|
// 提高拖动时的性能,临时禁用动画效果
|
||||||
const bonusElement = e.currentTarget;
|
e.currentTarget.style.transition = 'none';
|
||||||
bonusElement.style.transition = 'none';
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 结束拖动
|
// 开始拖动奖金模块(触摸事件)
|
||||||
|
const startBonusTouch = (e) => {
|
||||||
|
e.stopPropagation(); // 阻止事件冒泡
|
||||||
|
e.preventDefault(); // 阻止默认行为,如滚动
|
||||||
|
|
||||||
|
const touch = e.touches[0];
|
||||||
|
isBonusDragging = true;
|
||||||
|
|
||||||
|
// 计算触摸点相对于元素左上角的偏移量
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect();
|
||||||
|
bonusDragOffset.x = touch.clientX - rect.left;
|
||||||
|
bonusDragOffset.y = touch.clientY - rect.top;
|
||||||
|
|
||||||
|
// 提高拖动时的性能,临时禁用动画效果
|
||||||
|
e.currentTarget.style.transition = 'none';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 结束拖动(鼠标和触摸事件)
|
||||||
const endDrag = (e) => {
|
const endDrag = (e) => {
|
||||||
isDragging = false;
|
isDragging = false;
|
||||||
|
|
||||||
@@ -766,29 +778,65 @@ const endDrag = (e) => {
|
|||||||
isBonusDragging = false;
|
isBonusDragging = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 优化的拖动函数 - 使用节流减少更新频率
|
// 结束触摸拖动
|
||||||
|
const endTouch = (e) => {
|
||||||
|
if (isBonusDragging) {
|
||||||
|
// 恢复动画效果
|
||||||
|
const bonusElement = document.querySelector('.bonus-section');
|
||||||
|
if (bonusElement) {
|
||||||
|
bonusElement.style.transition = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
isBonusDragging = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 优化的拖动函数 - 使用节流减少更新频率(鼠标事件)
|
||||||
const drag = throttle((e) => {
|
const drag = throttle((e) => {
|
||||||
if (isDragging) {
|
if (isDragging) {
|
||||||
drumsPosition.value.x = e.clientX - dragOffset.x;
|
drumsPosition.value.x = e.clientX - dragOffset.x;
|
||||||
drumsPosition.value.y = e.clientY - dragOffset.y;
|
drumsPosition.value.y = e.clientY - dragOffset.y;
|
||||||
}
|
}
|
||||||
if (isBonusDragging) {
|
if (isBonusDragging) {
|
||||||
// 根据事件类型处理拖动位置
|
|
||||||
let clientX, clientY;
|
|
||||||
if (e.type === 'mousemove') {
|
|
||||||
clientX = e.clientX;
|
|
||||||
clientY = e.clientY;
|
|
||||||
} else if (e.type === 'touchmove') {
|
|
||||||
const touch = e.touches[0];
|
|
||||||
clientX = touch.clientX;
|
|
||||||
clientY = touch.clientY;
|
|
||||||
} else {
|
|
||||||
return; // 如果不是鼠标或触摸事件,直接返回
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算新的位置
|
// 计算新的位置
|
||||||
const newX = clientX - bonusDragOffset.x;
|
const newX = e.clientX - bonusDragOffset.x;
|
||||||
const newY = clientY - bonusDragOffset.y;
|
const newY = e.clientY - bonusDragOffset.y;
|
||||||
|
|
||||||
|
// 确保元素不会被拖出视口
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
const element = document.querySelector('.bonus-section');
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
const elementWidth = element.offsetWidth;
|
||||||
|
const elementHeight = element.offsetHeight;
|
||||||
|
|
||||||
|
// 限制在视口内,添加一些边距
|
||||||
|
const limitedX = Math.max(10, Math.min(newX, windowWidth - elementWidth - 10));
|
||||||
|
const limitedY = Math.max(10, Math.min(newY, windowHeight - elementHeight - 10));
|
||||||
|
|
||||||
|
// 使用优化的更新函数更新奖金模块位置
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
bonusPosition.x = limitedX;
|
||||||
|
bonusPosition.y = limitedY;
|
||||||
|
// 直接设置元素样式确保实时更新
|
||||||
|
element.style.left = `${limitedX}px`;
|
||||||
|
element.style.top = `${limitedY}px`;
|
||||||
|
element.style.right = 'auto';
|
||||||
|
element.style.bottom = 'auto';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 10); // 10ms节流,约100FPS
|
||||||
|
|
||||||
|
// 优化的触摸拖动函数 - 使用节流减少更新频率
|
||||||
|
const touchMove = throttle((e) => {
|
||||||
|
if (isBonusDragging) {
|
||||||
|
e.preventDefault(); // 阻止页面滚动
|
||||||
|
|
||||||
|
const touch = e.touches[0];
|
||||||
|
// 计算新的位置
|
||||||
|
const newX = touch.clientX - bonusDragOffset.x;
|
||||||
|
const newY = touch.clientY - bonusDragOffset.y;
|
||||||
|
|
||||||
// 确保元素不会被拖出视口
|
// 确保元素不会被拖出视口
|
||||||
const windowWidth = window.innerWidth;
|
const windowWidth = window.innerWidth;
|
||||||
@@ -1037,8 +1085,7 @@ const startDrumAnimation = () => {
|
|||||||
drum.style.setProperty('--drum-translate-y', isStrongBeat ?
|
drum.style.setProperty('--drum-translate-y', isStrongBeat ?
|
||||||
`${(animationConfig.beatTranslateY || -15) * (1 + (patternConfig.accentAnimation || 0) / 100)}px` :
|
`${(animationConfig.beatTranslateY || -15) * (1 + (patternConfig.accentAnimation || 0) / 100)}px` :
|
||||||
`${animationConfig.beatTranslateY || -15}px`);
|
`${animationConfig.beatTranslateY || -15}px`);
|
||||||
drum.style.setProperty('--drum-rotate', `${animationConfig.beatRotate || 5}deg`);
|
drum.style.setProperty('--drum-rotate', `${animationConfig.beatRotate || 5}deg`);
|
||||||
|
|
||||||
drum.style.setProperty('--drum-brightness', isStrongBeat ? '1.4' : '1.3');
|
drum.style.setProperty('--drum-brightness', isStrongBeat ? '1.4' : '1.3');
|
||||||
drum.style.setProperty('--drum-saturation', isStrongBeat ? '1.3' : '1.2');
|
drum.style.setProperty('--drum-saturation', isStrongBeat ? '1.3' : '1.2');
|
||||||
});
|
});
|
||||||
@@ -1117,8 +1164,11 @@ onMounted(async () => {
|
|||||||
// 添加拖放相关的事件监听
|
// 添加拖放相关的事件监听
|
||||||
document.addEventListener('mousemove', drag);
|
document.addEventListener('mousemove', drag);
|
||||||
document.addEventListener('mouseup', endDrag);
|
document.addEventListener('mouseup', endDrag);
|
||||||
document.addEventListener('touchmove', drag);
|
|
||||||
document.addEventListener('touchend', endDrag);
|
// 添加触摸事件监听
|
||||||
|
document.addEventListener('touchmove', touchMove, { passive: false });
|
||||||
|
document.addEventListener('touchend', endTouch);
|
||||||
|
document.addEventListener('touchcancel', endTouch);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 监听结束时间变化(在真实环境中,可能需要通过props或store来监听)
|
// 监听结束时间变化(在真实环境中,可能需要通过props或store来监听)
|
||||||
@@ -1143,8 +1193,11 @@ onUnmounted(() => {
|
|||||||
// 移除拖放相关的事件监听
|
// 移除拖放相关的事件监听
|
||||||
document.removeEventListener('mousemove', drag);
|
document.removeEventListener('mousemove', drag);
|
||||||
document.removeEventListener('mouseup', endDrag);
|
document.removeEventListener('mouseup', endDrag);
|
||||||
document.removeEventListener('touchmove', drag);
|
|
||||||
document.removeEventListener('touchend', endDrag);
|
// 移除触摸事件监听
|
||||||
|
document.removeEventListener('touchmove', touchMove);
|
||||||
|
document.removeEventListener('touchend', endTouch);
|
||||||
|
document.removeEventListener('touchcancel', endTouch);
|
||||||
|
|
||||||
// 清理音频资源
|
// 清理音频资源
|
||||||
if (audioContext) {
|
if (audioContext) {
|
||||||
@@ -1166,43 +1219,11 @@ onUnmounted(() => {
|
|||||||
transform: translateY(0px) rotate(0deg);
|
transform: translateY(0px) rotate(0deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.team-rankings-propagation-image {
|
|
||||||
width: 360px;
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.individual-rankings-propagation-image {
|
|
||||||
width: 360px;
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.avatar-image-champion {
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.avatar-image-champion {
|
.avatar-image-champion {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 新增:电脑端「已完成业绩」图片居中 */
|
|
||||||
.total-score-total-title {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center; /* 水平居中 */
|
|
||||||
}
|
|
||||||
.total-score-total-image {
|
|
||||||
width: 780px; /* 电脑端图片宽度(可按需调小,比如160px/200px) */
|
|
||||||
height: auto; /* 保持宽高比不变形 */
|
|
||||||
}
|
|
||||||
.score-value {
|
|
||||||
font-size: 10rem; /* 电脑端所有业绩数字大小 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-score-total-value {
|
|
||||||
font-size: 10rem;
|
|
||||||
margin-top: -40px;
|
|
||||||
}
|
|
||||||
/* 冠军模块样式 */
|
/* 冠军模块样式 */
|
||||||
.champion-section {
|
.champion-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1219,12 +1240,12 @@ onUnmounted(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-logo {
|
.team-logo {
|
||||||
font-size: 2rem;
|
font-size: 0;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: gold;
|
color: gold;
|
||||||
}
|
}
|
||||||
@@ -1357,13 +1378,7 @@ onUnmounted(() => {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
transition: transform 0.2s ease;
|
transition: transform 0.2s ease;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
z-index: 9999; /* 设置最高层级,确保在最上层显示 */
|
||||||
border-radius: 15px;
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
border: 2px solid rgba(255, 215, 0, 0.5);
|
|
||||||
padding: 15px;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 奖金图片容器样式 - Flex布局居中且保持一行 */
|
/* 奖金图片容器样式 - Flex布局居中且保持一行 */
|
||||||
@@ -1379,13 +1394,14 @@ onUnmounted(() => {
|
|||||||
.award-image {
|
.award-image {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
border-radius: 8px;
|
/* border-radius: 8px; */
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
|
||||||
|
/* transition: transform 0.2s ease, box-shadow 0.2s ease; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.award-image:hover {
|
.award-image:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -1393,15 +1409,69 @@ onUnmounted(() => {
|
|||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
.total-score-total-image {
|
.total-score-total-image {
|
||||||
width: 320px;
|
width: 340px !important; /* 调整总战绩图片大小,覆盖内联样式 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端总战绩金额字体调小 */
|
||||||
|
.total-score-total-value {
|
||||||
|
font-size: 5rem !important; /* 调小总战绩金额字体 */
|
||||||
|
margin-top: -40px !important; /* 调整与图片的间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-rankings-propagation-image {
|
.team-rankings-propagation-image {
|
||||||
width: 320px;
|
width: 200px !important; /* 覆盖内联样式 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.individual-rankings-propagation-image {
|
.individual-rankings-propagation-image {
|
||||||
width: 320px;
|
width: 200px !important; /* 覆盖内联样式 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 战区排名宣传语容器调整 */
|
||||||
|
.team-rankings-propagation {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5; /* 提高z-index避免被其他元素遮挡 */
|
||||||
|
margin-bottom: 70px; /* 进一步增大战区冠军的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 英雄排名宣传语容器调整 */
|
||||||
|
.individual-rankings-propagation {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5; /* 提高z-index避免被其他元素遮挡 */
|
||||||
|
margin-bottom: 10px; /* 减小英雄榜虎狼之师图片与个人英雄图片的距离 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端战区冠军布局调整,与个人英雄冠军保持一致 */
|
||||||
|
.team-champion {
|
||||||
|
margin-bottom: 30px; /* 增加与下方战区排名标题的间距 */
|
||||||
|
padding: 10px; /* 调整内边距 */
|
||||||
|
min-height: 120px; /* 确保与英雄冠军有相同的视觉权重 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端英雄冠军布局调整 */
|
||||||
|
.individual-champion {
|
||||||
|
margin-bottom: -10px; /* 恢复为修改之前的间距 */
|
||||||
|
padding: 10px; /* 与战区冠军保持一致的内边距 */
|
||||||
|
min-height: 120px; /* 确保与战区冠军有相同的视觉权重 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保两个排名区域在移动端有相同的起始位置 */
|
||||||
|
.team-rankings,
|
||||||
|
.individual-rankings {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2; /* 统一的层级 */
|
||||||
|
padding-top: 10px; /* 统一的顶部内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 战区和英雄排名容器在移动端的统一样式 */
|
||||||
|
.team-rankings-container,
|
||||||
|
.individual-rankings-container {
|
||||||
|
margin-top: 20px; /* 与上方冠军图片的统一间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 隐藏倒计时模块 */
|
/* 隐藏倒计时模块 */
|
||||||
@@ -1431,7 +1501,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
/* 保留响应式中的padding设置,但移除其他可能冲突的位置样式 */
|
/* 保留响应式中的padding设置,但移除其他可能冲突的位置样式 */
|
||||||
.bonus-section {
|
.bonus-section {
|
||||||
padding: 10px;
|
padding: 8px; /* 减小padding */
|
||||||
}
|
}
|
||||||
|
|
||||||
.bonus-awards-container {
|
.bonus-awards-container {
|
||||||
@@ -1439,6 +1509,12 @@ onUnmounted(() => {
|
|||||||
scale: 0.8;
|
scale: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 确保图片容器有足够的显示空间 */
|
||||||
|
.team-rankings, .individual-rankings {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2; /* 确保排名区域在奖金模块之上 */
|
||||||
|
}
|
||||||
|
|
||||||
.timer-float {
|
.timer-float {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
@@ -1658,7 +1734,7 @@ onUnmounted(() => {
|
|||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.95);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
z-index: 100;
|
z-index: 1000;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
transition: box-shadow 0.3s ease;
|
transition: box-shadow 0.3s ease;
|
||||||
}
|
}
|
||||||
@@ -1846,8 +1922,29 @@ onUnmounted(() => {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 0.8rem;
|
margin-top: 0.8rem;
|
||||||
max-height: 480px;
|
max-height: 420px;
|
||||||
min-height: 480px;
|
// 只对左侧战区的.rank-table生效(通过父容器限定)
|
||||||
|
.team-rankings-container & {
|
||||||
|
-ms-overflow-style: none; /* IE/Edge 隐藏 */
|
||||||
|
scrollbar-width: none; /* Firefox 隐藏 */
|
||||||
|
}
|
||||||
|
// Chrome/Safari 隐藏左侧滚动条(伪元素必须单独写)
|
||||||
|
.team-rankings-container &::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 新增:右侧英雄排名滚动条保留原样 ==========
|
||||||
|
.individual-rankings-container & {
|
||||||
|
-ms-overflow-style: auto; /* 恢复IE/Edge默认 */
|
||||||
|
scrollbar-width: auto; /* 恢复Firefox默认 */
|
||||||
|
}
|
||||||
|
// Chrome/Safari 恢复右侧滚动条
|
||||||
|
.individual-rankings-container &::-webkit-scrollbar {
|
||||||
|
display: block !important;
|
||||||
|
width: 6px !important; // 恢复默认滚动条宽度
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-header {
|
.table-header {
|
||||||
@@ -1909,7 +2006,7 @@ onUnmounted(() => {
|
|||||||
/* 前三名特殊背景色,增强亮度和对比度 - 确保英雄排名和战区排名样式一致 */
|
/* 前三名特殊背景色,增强亮度和对比度 - 确保英雄排名和战区排名样式一致 */
|
||||||
.team-rankings-container .table-row:nth-child(1),
|
.team-rankings-container .table-row:nth-child(1),
|
||||||
.individual-rankings-container .table-row:nth-child(1) {
|
.individual-rankings-container .table-row:nth-child(1) {
|
||||||
background: linear-gradient(135deg, #ffd700, #ffed4a);
|
background: linear-gradient(135deg, #ffd700, #403f3c);
|
||||||
color: #333;
|
color: #333;
|
||||||
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
|
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
|
||||||
}
|
}
|
||||||
@@ -1992,9 +2089,7 @@ onUnmounted(() => {
|
|||||||
gap: 15px;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-score-content {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-score-item {
|
.total-score-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -2005,23 +2100,19 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.score-value {
|
.score-value {
|
||||||
font-size: calc(var(--individual-champion-font-size, 2.4rem) * 2);
|
font-size: calc(var(--individual-champion-font-size, 6rem) * 2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff2c4;
|
color: #fff2c4;
|
||||||
text-shadow:
|
text-shadow: 0 0 10px rgba(0, 0, 0, .8), 0 0 20px rgb(16 16 16 / 30%), 1px 1px 2px rgba(0, 0, 0, .8);
|
||||||
0 0 10px rgba(255, 215, 0, 0.5),
|
|
||||||
0 0 20px rgba(255, 215, 0, 0.3),
|
|
||||||
1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-score-total-value {
|
.total-score-total-value {
|
||||||
|
|
||||||
margin-top: -40px;
|
margin-top: -40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 战区冠军分数特殊样式 */
|
/* 战区冠军分数特殊样式 */
|
||||||
.team-champion .score-value {
|
.team-champion .score-value {
|
||||||
font-size: calc(var(--team-champion-font-size, 1.8rem) * 2);
|
font-size: calc(var(--team-champion-font-size, 1.8rem) * 4);
|
||||||
text-shadow:
|
text-shadow:
|
||||||
0 0 15px rgba(255, 215, 0, 0.7),
|
0 0 15px rgba(255, 215, 0, 0.7),
|
||||||
0 0 30px rgba(255, 215, 0, 0.4),
|
0 0 30px rgba(255, 215, 0, 0.4),
|
||||||
@@ -2031,7 +2122,7 @@ onUnmounted(() => {
|
|||||||
/* 照片容器样式 */
|
/* 照片容器样式 */
|
||||||
.team-logo.photo-container {
|
.team-logo.photo-container {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: -40px;
|
margin-top: -97px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.individual-champion {
|
.individual-champion {
|
||||||
@@ -2039,7 +2130,7 @@ onUnmounted(() => {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 20px;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2057,7 +2148,6 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
|
||||||
.total-score-total-title {
|
.total-score-total-title {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -2068,68 +2158,84 @@ onUnmounted(() => {
|
|||||||
.team-rankings-container .rank-table {
|
.team-rankings-container .rank-table {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
/* 如果配置了具体了默认显示行数,则设置高度和滚动,否则显示所有行 */
|
/* 移动端强制显示所有行,覆盖JS动态设置的CSS变量 */
|
||||||
height: var(--team-default-height, auto) !important;
|
height: auto !important;
|
||||||
overflow-y: var(--team-overflow-y, hidden);
|
max-height: none !important;
|
||||||
overflow-x: var(--team-overflow-x, auto);
|
overflow-y: visible !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
/* 强制覆盖CSS变量 */
|
||||||
|
--team-default-height: auto !important;
|
||||||
|
--team-overflow-y: visible !important;
|
||||||
|
--team-overflow-x: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 当设置了滚动锁定时,禁止所有滚动 */
|
/* 移动端战区排名显示所有内容,不受滚动锁定影响 */
|
||||||
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
|
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table {
|
||||||
overflow-y: hidden !important;
|
overflow-y: visible !important;
|
||||||
overflow-x: hidden !important;
|
overflow-x: auto !important;
|
||||||
height: var(--team-default-height, auto) !important;
|
height: auto !important;
|
||||||
min-width: auto !important;
|
min-width: auto !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确保表格内容在锁定模式下正确显示 */
|
/* 确保表格内容在移动端正确显示 */
|
||||||
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-header,
|
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-header,
|
||||||
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-row {
|
:root[style*="--team-scroll-lock: lock"] .team-rankings-container .rank-table .table-row {
|
||||||
min-width: auto !important;
|
min-width: auto !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
overflow-x: visible !important;
|
overflow-x: visible !important;
|
||||||
white-space: normal !important;
|
white-space: nowrap !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.individual-rankings-propagation {
|
.individual-rankings-propagation {
|
||||||
margin-top: -40px;
|
margin-top: -40px;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: 20px; /* 恢复为修改之前的间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.individual-rankings {
|
.individual-rankings {
|
||||||
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动端战区排名容器位置调整 */
|
||||||
|
.team-rankings {
|
||||||
|
margin-top: 0; /* 确保与英雄排名区域在统一水平线 */
|
||||||
|
}
|
||||||
|
|
||||||
/* 英雄排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
/* 英雄排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
||||||
.individual-rankings-container .rank-table {
|
.individual-rankings-container .rank-table {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
/* 如果配置了具体了默认显示行数,则设置高度和滚动,否则显示所有行 */
|
/* 移动端强制显示所有行,覆盖JS动态设置的CSS变量 */
|
||||||
height: var(--individual-default-height, auto) !important;
|
height: auto !important;
|
||||||
overflow-y: var(--individual-overflow-y, hidden);
|
max-height: none !important;
|
||||||
overflow-x: var(--individual-overflow-x, auto);
|
overflow-y: visible !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
/* 隐藏滚动条 */
|
/* 隐藏滚动条 */
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
/* 强制覆盖CSS变量 */
|
||||||
|
--individual-default-height: auto !important;
|
||||||
|
--individual-overflow-y: visible !important;
|
||||||
|
--individual-overflow-x: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 当设置了滚动锁定时,禁止所有滚动 */
|
/* 移动端英雄排名显示所有内容,不受滚动锁定影响 */
|
||||||
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
|
||||||
overflow-y: hidden !important;
|
overflow-y: visible !important;
|
||||||
overflow-x: hidden !important;
|
overflow-x: auto !important;
|
||||||
height: var(--individual-default-height, auto) !important;
|
height: auto !important;
|
||||||
min-width: auto !important;
|
min-width: auto !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确保表格内容在锁定模式下正确显示 */
|
/* 确保表格内容在移动端正确显示 */
|
||||||
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-header,
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-header,
|
||||||
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-row {
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-row {
|
||||||
min-width: auto !important;
|
min-width: auto !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
overflow-x: visible !important;
|
overflow-x: visible !important;
|
||||||
white-space: normal !important;
|
white-space: nowrap !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端非前三名字体放大 */
|
/* 移动端非前三名字体放大 */
|
||||||
@@ -2342,10 +2448,8 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
/* 英雄排名列表设置 - 根据配置决定显示行数和滚动行为 */
|
/* 英雄排名列表设置 - 根据配置决定显示行数和滚动行为 */
|
||||||
.individual-rankings-container .rank-table {
|
.individual-rankings-container .rank-table {
|
||||||
|
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
/* 禁止横向滚动 */
|
/* 禁止横向滚动 */
|
||||||
|
|
||||||
height: var(--individual-default-height, auto) !important;
|
height: var(--individual-default-height, auto) !important;
|
||||||
overflow-y: var(--individual-overflow-y, auto) !important;
|
overflow-y: var(--individual-overflow-y, auto) !important;
|
||||||
/* 确保英雄排名列表隐藏滚动条 */
|
/* 确保英雄排名列表隐藏滚动条 */
|
||||||
@@ -2519,44 +2623,17 @@ onUnmounted(() => {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 360px;
|
top: 360px;
|
||||||
left: 720px;
|
left: 720px;
|
||||||
z-index: 100;
|
z-index: 9999; /* 设置最高层级,确保在最上层显示 */
|
||||||
cursor: move;
|
cursor: move;
|
||||||
transition: transform 0.2s ease;
|
transition: transform 0.2s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* ========== 新增的电脑端总业绩样式(放在最底部) ========== */
|
.team-rankings-container .rank-table {
|
||||||
/* 电脑端(769px以上)总业绩字体样式 - 不影响移动端 */
|
-ms-overflow-style: none !important;
|
||||||
@media (min-width: 769px) {
|
scrollbar-width: none !important;
|
||||||
/* 总战绩大数字(核心修改项) */
|
|
||||||
.total-score-total-value {
|
|
||||||
font-size: 10rem !important; /* 电脑端字体大小(默认10rem,可按需调整) */
|
|
||||||
font-weight: 900 !important; /* 字体粗细(加粗) */
|
|
||||||
color: #ffd700 !important; /* 字体颜色(金色) */
|
|
||||||
text-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important; /* 发光效果 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 兜底:确保所有电脑端业绩数值样式统一 */
|
|
||||||
.score-value {
|
|
||||||
font-size: 10rem !important; /* 与总战绩数值保持一致 */
|
|
||||||
font-weight: 900 !important;
|
|
||||||
color:#fff2c4 !important;
|
|
||||||
text-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
/* ========== 移动端英雄榜滚动修复 ========== */
|
.team-rankings-container .rank-table::-webkit-scrollbar {
|
||||||
@media (max-width: 768px) {
|
display: none !important;
|
||||||
.individual-rankings-container .scroll-wrapper {
|
width: 0 !important;
|
||||||
max-height: 60vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
.individual-rankings-container .scroll-wrapper::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.individual-rankings-container .rank-table {
|
|
||||||
min-height: auto !important;
|
|
||||||
max-height: none !important;
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user