日常开发

src/components/ActionConfirmWindow/index.vue

@@ -21,7 +21,9 @@
                   <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 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">
@@ -401,7 +403,8 @@ defineExpose({
             height: calc(60vh * (1080 / 1920));
             position: relative;
             display: flex;
-            .time{
+
+            .time {
               position: absolute;
               left: 0;
               top: 0;
@@ -414,6 +417,7 @@ defineExpose({
               align-items: center;
               justify-content: center;
             }
+
             img {
               width: 100%;
               height: 100%;
@@ -436,6 +440,20 @@ defineExpose({
                 height: calc(22vh * (1000 / 518));
               }
 
+              .ok {
+                width: 8vh;
+                height: 8vh;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-top: 1vh;
+                margin-left: -4vh;
+
+                img {
+                  width: 100%;
+                }
+              }
+
               .fade-image {
                 width: 100%;
                 height: 100%;
@@ -452,38 +470,28 @@ defineExpose({
                 animation: fadeOpacity2 2s infinite;
               }
 
-              .ok {
-                width: 8vh;
-                height: 8vh;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                margin-top: 1vh;
-                margin-left: -4vh;
-
-                img {
-                  width: 100%;
-                }
-              }
-
               @keyframes fadeOpacity1 {
                 0% {
                   opacity: 1;
                 }
-
-                100% {
+                50% {
                   opacity: 0;
                 }
+                100% {
+                  opacity: 1;
+                }
               }
 
               @keyframes fadeOpacity2 {
                 0% {
                   opacity: 0;
                 }
-
-                100% {
+                50% {
                   opacity: 1;
                 }
+                100% {
+                  opacity: 0;
+                }
               }
             }
           }