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 }}
+
+
+
+