英雄排名
+
排名
@@ -698,7 +702,7 @@ const isPlayingSound = ref(false);
const drumsPosition = ref({ x: 20, y: 20 });
// 倒计时位置状态已移除，直接在模板中使用固定位置
// 奖金设置模块位置状态 - 使用reactive存储实际定位值
-const bonusPosition = reactive({ x: 'auto', y: 'auto' });
+const bonusPosition = reactive({ x: 320, y: 360 });
let isDragging = false;
let isBonusDragging = false;
@@ -731,12 +735,20 @@ const startDrag = (e) => {
const startBonusDrag = (e) => {
e.stopPropagation(); // 阻止事件冒泡
isBonusDragging = true;
- // 计算鼠标相对于元素左上角的偏移量
- const rect = e.currentTarget.getBoundingClientRect();
- bonusDragOffset.x = e.clientX - rect.left;
- bonusDragOffset.y = e.clientY - rect.top;
+
+ // 根据事件类型处理拖动偏移量
+ if (e.type === 'touchstart') {
+ const touch = e.touches[0];
+ 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;
+ }
+
// 提高拖动时的性能，临时禁用动画效果
- e.currentTarget.style.transition = 'none';
+ const bonusElement = e.currentTarget;
+ bonusElement.style.transition = 'none';
e.preventDefault();
};
@@ -761,9 +773,22 @@ const drag = throttle((e) => {
drumsPosition.value.y = e.clientY - dragOffset.y;
}
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 = e.clientX - bonusDragOffset.x;
- const newY = e.clientY - bonusDragOffset.y;
+ const newX = clientX - bonusDragOffset.x;
+ const newY = clientY - bonusDragOffset.y;
// 确保元素不会被拖出视口
const windowWidth = window.innerWidth;
@@ -1012,7 +1037,8 @@ const startDrumAnimation = () => {
drum.style.setProperty('--drum-translate-y', isStrongBeat ?
`${(animationConfig.beatTranslateY || -15) * (1 + (patternConfig.accentAnimation || 0) / 100)}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-saturation', isStrongBeat ? '1.3' : '1.2');
});
@@ -1091,6 +1117,8 @@ onMounted(async () => {
// 添加拖放相关的事件监听
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
+ document.addEventListener('touchmove', drag);
+ document.addEventListener('touchend', endDrag);
});
// 监听结束时间变化（在真实环境中，可能需要通过props或store来监听）
@@ -1115,6 +1143,8 @@ onUnmounted(() => {
// 移除拖放相关的事件监听
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', endDrag);
+ document.removeEventListener('touchmove', drag);
+ document.removeEventListener('touchend', endDrag);
// 清理音频资源
if (audioContext) {
@@ -1136,11 +1166,43 @@ onUnmounted(() => {
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 {
object-fit: cover;
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 {
display: flex;
@@ -1295,6 +1357,13 @@ onUnmounted(() => {
position: fixed;
cursor: move;
transition: transform 0.2s ease;
+ background: rgba(255, 255, 255, 0.95);
+ 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布局居中且保持一行 */
@@ -1310,14 +1379,13 @@ onUnmounted(() => {
.award-image {
width: auto;
height: 120px;
- /* border-radius: 8px; */
- /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
- /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
+ border-radius: 8px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.award-image:hover {
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);
}
@@ -1329,11 +1397,11 @@ onUnmounted(() => {
}
.team-rankings-propagation-image {
- width: 220px;
+ width: 320px;
}
.individual-rankings-propagation-image {
- width: 220px;
+ width: 320px;
}
/* 隐藏倒计时模块 */
@@ -1778,6 +1846,8 @@ onUnmounted(() => {
overflow-y: auto;
position: relative;
margin-top: 0.8rem;
+ max-height: 480px;
+ min-height: 480px;
}
.table-header {
@@ -1938,10 +2008,14 @@ onUnmounted(() => {
font-size: calc(var(--individual-champion-font-size, 2.4rem) * 2);
font-weight: bold;
color: #fff2c4;
- 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);
+ text-shadow:
+ 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 {
+
margin-top: -40px;
}
@@ -1965,7 +2039,7 @@ onUnmounted(() => {
flex-direction: row;
align-items: center;
justify-content: center;
- margin-bottom: 20px;
+ margin-bottom: 100px;
gap: 30px;
}
@@ -1982,6 +2056,7 @@ onUnmounted(() => {
}
@media (max-width: 768px) {
+
.total-score-total-title {
align-items: center;
@@ -2267,8 +2342,10 @@ onUnmounted(() => {
/* 英雄排名列表设置 - 根据配置决定显示行数和滚动行为 */
.individual-rankings-container .rank-table {
+
overflow-x: hidden !important;
/* 禁止横向滚动 */
+
height: var(--individual-default-height, auto) !important;
overflow-y: var(--individual-overflow-y, auto) !important;
/* 确保英雄排名列表隐藏滚动条 */
@@ -2447,4 +2524,39 @@ onUnmounted(() => {
transition: transform 0.2s ease;
}
}
+/* ========== 新增的电脑端总业绩样式（放在最底部） ========== */
+/* 电脑端（769px以上）总业绩字体样式 - 不影响移动端 */
+@media (min-width: 769px) {
+ /* 总战绩大数字（核心修改项） */
+ .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;
+ }
+}
+/* ========== 移动端英雄榜滚动修复 ========== */
+@media (max-width: 768px) {
+ .individual-rankings-container .scroll-wrapper {
+ 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;
+ }
+}
\ No newline at end of file