zfc/bindbox-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 调整扫雷游戏底部面板和弹窗样式，并移除部分引导和动画样式

Browse Source
This commit is contained in:
邹方成 2026-01-03 18:22:57 +08:00
parent 45190e1004
commit 40cfb8c36e
2 changed files with 243 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
pages-game/game/minesweeper/play.scss
View File

@ -1182,11 +1182,12 @@
font-size: 16rpx; font-size: 16rpx;
} }
} }
}
// ===================================== // =====================================
// 底部面板 // 底部面板
// ===================================== // =====================================
.bottom-panel { .bottom-panel {
padding: $spacing-sm; padding: $spacing-sm;
padding-bottom: calc($spacing-sm + env(safe-area-inset-bottom)); padding-bottom: calc($spacing-sm + env(safe-area-inset-bottom));
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
@ -1194,17 +1195,17 @@
gap: $spacing-md; gap: $spacing-md;
border-top: 1px solid $border-dark; border-top: 1px solid $border-dark;
height: 180rpx; // 减小高度 height: 180rpx; // 减小高度
} }
.game-logs { .game-logs {
flex: 1; flex: 1;
height: 100%; height: 100%;
padding: $spacing-sm; padding: $spacing-sm;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border-radius: $radius-md; border-radius: $radius-md;
} }
.log-line { .log-line {
font-size: $font-xxs; font-size: $font-xxs;
line-height: 1.6; line-height: 1.6;
color: $text-dark-sub; color: $text-dark-sub;
@ -1219,46 +1220,65 @@
&.log-effect { &.log-effect {
color: $brand-primary; color: $brand-primary;
} }
} }
// =====================================
// 弹窗 // =====================================
// ===================================== // 弹窗 (全屏遮罩)
.modal-overlay { // =====================================
.modal-overlay {
position: fixed; position: fixed;
inset: 0; top: 0;
background: rgba(0, 0, 0, 0.8); left: 0;
backdrop-filter: blur(10rpx); right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12rpx);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1000; z-index: 10000; // 确保在最厚层
} }
.modal-content { .modal-content {
width: 520rpx; width: 560rpx;
padding: $spacing-xxl $spacing-xl; padding: $spacing-xxl $spacing-xl;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: $spacing-lg; gap: $spacing-lg;
animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.8);
} }
.modal-emoji { to {
font-size: 100rpx; opacity: 1;
transform: scale(1);
} }
}
.modal-title { .modal-emoji {
font-size: 40rpx; font-size: 110rpx;
filter: drop-shadow(0 0 20rpx rgba(255, 255, 255, 0.2));
}
.modal-title {
font-size: 44rpx;
font-weight: 900; font-weight: 900;
color: $text-dark-main; color: $text-dark-main;
margin-top: $spacing-md; text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
} }
.result-details { .result-details {
margin: $spacing-lg 0; margin: $spacing-lg 0;
padding: $spacing-md; padding: $spacing-md;
background: rgba($bg-dark-card, 0.5); background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: $radius-md; border-radius: $radius-md;
width: 100%; width: 100%;
@ -1268,81 +1288,94 @@
text-align: center; text-align: center;
line-height: 1.6; line-height: 1.6;
} }
} }
// ===================================== // =====================================
// 玩法说明弹窗 // 玩法说明弹窗
// ===================================== // =====================================
.guide-modal { .guide-modal {
width: 90%; width: 90%;
max-width: 640rpx; max-width: 640rpx;
max-height: 80vh; max-height: 85vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(100rpx);
} }
.guide-header { to {
opacity: 1;
transform: translateY(0);
}
}
.guide-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: $spacing-lg; padding: $spacing-lg;
border-bottom: 1px solid $border-dark; border-bottom: 1px solid $border-dark;
} }
.guide-title { .guide-title {
font-size: $font-lg; font-size: $font-lg;
font-weight: 800; font-weight: 800;
color: $text-dark-main; color: $text-dark-main;
} }
.close-btn { .close-btn {
width: 56rpx; width: 64rpx;
height: 56rpx; height: 64rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: $font-lg; font-size: $font-lg;
color: $text-dark-sub; color: $text-dark-sub;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.08);
border-radius: 50%; border-radius: 50%;
} }
.guide-body { .guide-body {
padding: $spacing-lg; padding: $spacing-lg;
max-height: 60vh; max-height: 65vh;
} }
.section-title { .section-title {
display: block; display: block;
font-size: $font-md; font-size: $font-md;
font-weight: 700; font-weight: 700;
color: $brand-primary; color: $brand-primary;
margin-bottom: $spacing-md; margin-bottom: $spacing-md;
} }
.guide-grid { .guide-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-md; gap: $spacing-md;
} }
.guide-item { .guide-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: $spacing-md; gap: $spacing-md;
padding: $spacing-sm; padding: $spacing-md;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.04);
border-radius: $radius-md; border-radius: $radius-md;
.icon { .icon {
font-size: 32rpx; font-size: 36rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.desc { .desc {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4rpx; gap: 6rpx;
} }
.name { .name {
@ -1356,85 +1389,14 @@
color: $text-dark-sub; color: $text-dark-sub;
line-height: 1.5; line-height: 1.5;
} }
} }
// ===================================== // 通用辅助类 (全局可用)
// 飘字动画 .fadeInUp {
// =====================================
.float-label {
position: absolute;
font-size: $font-md;
font-weight: 900;
pointer-events: none;
animation: floatUp 1s ease-out forwards;
z-index: 100;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.8);
&.global {
position: fixed;
}
&.text-damage {
color: $color-error;
}
&.text-heal {
color: $color-success;
}
&.text-effect {
color: $accent-cyan;
}
}
@keyframes floatUp {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-60rpx) scale(0.8);
}
}
// =====================================
// 屏幕震动 & 通用动画
// =====================================
.screen-shake {
animation: screenShake 0.4s ease-in-out;
}
@keyframes screenShake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-8rpx);
}
40% {
transform: translateX(8rpx);
}
60% {
transform: translateX(-4rpx);
}
80% {
transform: translateX(4rpx);
}
}
.fadeInUp {
animation: fadeInUp 0.5s ease-out both; animation: fadeInUp 0.5s ease-out both;
} }
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
opacity: 0; opacity: 0;
transform: translateY(40rpx); transform: translateY(40rpx);
@ -1444,13 +1406,13 @@
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.pulse { .pulse {
animation: pulse 2s ease-in-out infinite; animation: pulse 2s ease-in-out infinite;
} }
@keyframes pulse { @keyframes pulse {
0%, 0%,
100% { 100% {
@ -1462,5 +1424,16 @@
transform: scale(1.03); transform: scale(1.03);
opacity: 1; opacity: 1;
} }
} }
.bg-red {
background-color: $color-error !important;
}
.bg-yellow {
background-color: $color-warning !important;
}
.bg-green {
background-color: $color-success !important;
} }

24
pages-game/game/minesweeper/play.vue
View File

@ -232,25 +232,16 @@
</view> </view>
</view> </view>
<!-- 结算弹窗 --> <!-- 结算弹窗 - 移至根级，确保不被 game-screen 的销毁影响 -->
<<<<<<< HEAD <view v-if="showResultModal" class="modal-overlay" style="z-index: 9999;">
<view v-if="shouldShowResultModal" class="modal-overlay">
<view class="modal-content glass-card"> <view class="modal-content glass-card">
<text class="modal-emoji">{{ getGameResultEmoji() }}</text> <text class="modal-emoji">{{ getGameResultEmoji() }}</text>
<text class="modal-title">{{ getGameResultTitle() }}</text> <text class="modal-title">{{ getGameResultTitle() }}</text>
<view class="result-details" v-if="gameState.players"> <view class="result-details" v-if="gameState && gameState.players">
<text class="detail-text">{{ getResultMessage() }}</text> <text class="detail-text">{{ getResultMessage() }}</text>
</view> </view>
<view <view
class="btn-primary" class="btn-primary"
=======
<view v-if="showSettlement" class="modal-overlay">
<view class="modal-content glass-card">
<text class="modal-emoji">{{ settlementWinnerId === 'draw' ? '🤝' : (settlementWinnerId === myUserId ? '🏆' : '💀') }}</text>
<text class="modal-title">{{ settlementWinnerId === 'draw' ? '平局' : (settlementWinnerId === myUserId ? '胜利！' : '很遗憾失败了') }}</text>
<view
class="btn-primary"
>>>>>>> 5ec793a (feat: 为扫雷游戏添加房间列表功能，支持加入和围观现有对局。)
:class="{ disabled: isRefreshing }" :class="{ disabled: isRefreshing }"
@tap="refreshAndPlayAgain" @tap="refreshAndPlayAgain"
> >
@ -259,6 +250,8 @@
</view> </view>
</view> </view>
<!-- 玩法说明弹窗 --> <!-- 玩法说明弹窗 -->
<view v-if="showGuide" class="modal-overlay" @tap="showGuide = false"> <view v-if="showGuide" class="modal-overlay" @tap="showGuide = false">
<view class="guide-modal glass-card" @tap.stop> <view class="guide-modal glass-card" @tap.stop>
@ -326,6 +319,7 @@ export default {
isSpectator: false, isSpectator: false,
showSettlement: false, showSettlement: false,
settlementWinnerId: '', settlementWinnerId: '',
showResultModal: false,
// Timers // Timers
matchInterval: null, matchInterval: null,
turnInterval: null, turnInterval: null,
@ -392,6 +386,12 @@ export default {
} }
}, },
watch: { watch: {
shouldShowResultModal(newVal) {
console.log('[WATCH] shouldShowResultModal changed:', newVal);
if (newVal) {
this.showResultModal = true;
}
},
logs() { logs() {
this.$nextTick(() => { this.$nextTick(() => {
this.logsScrollTop = 99999 + Math.random(); this.logsScrollTop = 99999 + Math.random();