fix: 修复了奖金设置模块的拖动功能

This commit is contained in:
2025-11-13 11:50:22 +08:00
parent 20fe7c5202
commit f1f423eceb
2 changed files with 21 additions and 4 deletions

View File

@@ -36,8 +36,9 @@
</section> </section>
<!-- 第三部分奖金设置图片形式 --> <!-- 第三部分奖金设置图片形式 -->
<section v-if="localDisplayConfig.showBonusModule" class="bonus-section" <section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game"
:style="{ margin: '20px 0' }"> @mousedown="startBonusDrag"
@click.stop>
<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>
@@ -462,9 +463,12 @@ const startBonusDrag = (e) => {
const endDrag = (e) => { const endDrag = (e) => {
isDragging = false; isDragging = false;
if (isBonusDragging && e?.currentTarget) { if (isBonusDragging) {
// 恢复动画效果 // 恢复动画效果
e.currentTarget.style.transition = ''; const bonusElement = document.querySelector('.bonus-section');
if (bonusElement) {
bonusElement.style.transition = '';
}
} }
isBonusDragging = false; isBonusDragging = false;
}; };
@@ -903,6 +907,15 @@ onUnmounted(() => {
border-radius: 8px; border-radius: 8px;
} }
.bonus-section {
position: 'fixed';
right: '20px';
bottom: '20px';
zIndex: 100;
cursor: 'move';
transition: 'transform 0.1s ease-out' ;
}
/* 奖金图片容器样式 - Flex布局居中且保持一行 */ /* 奖金图片容器样式 - Flex布局居中且保持一行 */
.bonus-awards-container { .bonus-awards-container {
display: flex; display: flex;
@@ -954,9 +967,13 @@ onUnmounted(() => {
} }
/* 奖金模块响应式调整 */ /* 奖金模块响应式调整 */
.bonus-section { .bonus-section {
position: fixed;
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
padding: 10px; padding: 10px;
z-index: 100;
cursor: move;
transition: transform 0.2s ease;
} }
.bonus-awards-container { .bonus-awards-container {

BIN
vs100.zip Normal file

Binary file not shown.