日常开发

src/components/ActionConfirmWindow/index.vue

@@ -21,6 +21,7 @@
                   <template v-if="currentGame == 'game_football'">
                     <img src="@/assets/images/game/img3.png" width="200" />
                   </template>
+                  <div class="time" v-if="timerNum>0"><div>{{timerNum}}</div></div>
                 </div>
                 <div class="gamePlayer">
                   <div class="item" v-for="item in areaStateList" :key="item.area">
@@ -81,9 +82,10 @@ const data = reactive<any>({
   lock: false,
   actionText: "",
   timer: null,
+  timerNum: null,
 });
 
-const { currentGame, currentGameArea, actionState, areaStateList, lock, actionText, timer } = toRefs(data);
+const { currentGame, currentGameArea, actionState, areaStateList, lock, actionText, timer, timerNum } = toRefs(data);
 
 
 
@@ -295,18 +297,16 @@ watch(
     })
     if (state) {
       lock.value = true;
-      let num = 3;
+      timerNum.value = 3;
       timer.value = setInterval(() => {
-        if (num == 1) {
+        if (timerNum.value == 1) {
           actionState.value = false;
           clearInterval(timer.value);
           timer.value = null;
-          if (actionState.value) {
-            emit('confirmStart', areaStateList.value);
-          }
+          emit('confirmStart', areaStateList.value);
         }
-        speckText(num);
-        num--;
+        speckText(timerNum.value);
+        timerNum.value--;
       }, 1000)
     }
   },
@@ -399,7 +399,21 @@ defineExpose({
             border: 5px solid #3BDDCE;
             width: 60vh;
             height: calc(60vh * (1080 / 1920));
-
+            position: relative;
+            display: flex;
+            .time{
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 100%;
+              background: rgba(0, 0, 0, 0.5);
+              color: #ffffff;
+              font-size: 7rem;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
             img {
               width: 100%;
               height: 100%;