diff --git a/pages-game/game/minesweeper/play.scss b/pages-game/game/minesweeper/play.scss index 4880fbe..eccb212 100644 --- a/pages-game/game/minesweeper/play.scss +++ b/pages-game/game/minesweeper/play.scss @@ -991,7 +991,7 @@ // 确保格子始终保持正方形 aspect-ratio: 1 / 1; // 防止双击缩放 - touch-action: manipulation; + touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; @@ -1010,7 +1010,7 @@ width: 100%; height: auto; // 防止双击缩放和长按菜单 - touch-action: manipulation; + touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; @@ -1031,8 +1031,8 @@ border: 2rpx dashed rgba($accent-cyan, 0.5); } - // 观察者旗帜标记样式 - &.has-flag { + // 观察者画板标记样式 + &.has-mark { border: 2rpx solid rgba($color-warning, 0.6); background: rgba($color-warning, 0.1); } @@ -1221,18 +1221,40 @@ font-weight: 900; } - // 观察者旗帜图标 - .spectator-flag { + // 观察者画板标记 + .spectator-mark { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; - animation: flagWave 2s ease-in-out infinite; + animation: markAppear 0.3s ease-out; - .flag-icon { + .mark-icon { font-size: 36rpx; filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3)); + + &.flag { + animation: flagWave 2s ease-in-out infinite; + } + + &.check { + animation: checkBounce 0.5s ease-out; + } + } + } + + @keyframes markAppear { + 0% { + transform: scale(0); + opacity: 0; + } + 60% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + opacity: 1; } } @@ -1248,6 +1270,15 @@ } } + @keyframes checkBounce { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.3) rotate(10deg); + } + } + .magnifier-mark { display: flex; justify-content: center; @@ -1329,6 +1360,56 @@ height: 180rpx; // 减小高度 } +// 观察者工具栏 +.spectator-toolbar { + display: flex; + gap: $spacing-md; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.tool-btn { + flex: 1; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: $spacing-xs; + background: rgba(255, 255, 255, 0.05); + border: 2rpx solid rgba(255, 255, 255, 0.1); + border-radius: $radius-lg; + transition: all $transition-normal; + cursor: pointer; + + &:active { + transform: scale(0.95); + } + + &.active { + background: rgba($brand-primary, 0.2); + border-color: rgba($brand-primary, 0.6); + box-shadow: 0 0 20rpx rgba($brand-primary, 0.3); + + .tool-icon { + transform: scale(1.1); + } + } + + .tool-icon { + font-size: 48rpx; + transition: transform $transition-normal; + } + + .tool-name { + font-size: $font-xs; + color: $text-dark-sub; + font-weight: 600; + } +} + .game-logs { flex: 1; height: 100%; diff --git a/pages-game/game/minesweeper/play.vue b/pages-game/game/minesweeper/play.vue index b7caf3f..8d937a7 100644 --- a/pages-game/game/minesweeper/play.vue +++ b/pages-game/game/minesweeper/play.vue @@ -166,11 +166,10 @@ { 'revealed': cell.revealed, 'has-magnifier': myPlayer && myPlayer.revealedCells && myPlayer.revealedCells[i], - 'has-flag': isSpectator && spectatorFlags[i] // 观察者旗帜标记 + 'has-mark': isSpectator && spectatorMarks[i] // 观察者画板标记 } ]" @tap="handleCellClick(i)" - catchtap="handleCellCatchTap(i)" > 💣 @@ -190,9 +189,10 @@ 🔍 - - - 🚩 + + + 🚩 + @@ -205,7 +205,25 @@ - + + + {{ tool.icon }} + {{ tool.name }} + + + +