考试剩余时间style

src/features/OnlineExam/Examing/RemainTime.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="remain-time">剩余时间 {{ remainTimeFormatted }}</div>
+  <div class="remain-time">
+    剩余时间
+    <span
+      :class="
+        enhancedRemainTime && 'enhanced-remain-time animated infinite pulse'
+      "
+    >
+      {{ remainTimeFormatted }}
+    </span>
+  </div>
 </template>
 
 <script>
@@ -12,11 +21,14 @@ export default {
   data() {
     return {
       remainTime: null,
+      enhancedRemainTime: true,
     };
   },
   computed: {
     remainTimeFormatted: function() {
-      return moment.utc(this.remainTime).format("HH:mm:ss");
+      return this.remainTime
+        ? moment.utc(this.remainTime).format("HH:mm:ss")
+        : "计算中";
     },
   },
   watch: {
@@ -38,6 +50,14 @@ export default {
         this.remainTime = this.remainTime - 1000;
       }
     }, 1000);
+
+    this.__count = 10;
+    this.enhancedRemainTimeInterval = setInterval(() => {
+      if (this.__count-- <= 0) {
+        this.enhancedRemainTime = false;
+        clearInterval(this.enhancedRemainTimeInterval);
+      }
+    }, 1000);
   },
   beforeDestroy() {
     this.clearIntervals();
@@ -133,7 +153,48 @@ export default {
       clearInterval(this.heartbeatInterval);
       clearInterval(this.remainTimeInterval);
       clearTimeout(this.retryHeartbeatTimeout);
+      clearInterval(this.enhancedRemainTimeInterval);
     },
   },
 };
 </script>
+
+<style scoped>
+/* .remain-time {
+  background-color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+} */
+
+.enhanced-remain-time {
+  color: red;
+}
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  display: inline-block;
+}
+
+.animated.infinite {
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  animation-name: pulse;
+}
+</style>

src/features/OnlineExam/OnlineExamOverview.vue

@@ -190,6 +190,7 @@ export default {
 }
 
 .pulse {
+  color: rgb(5, 88, 88);
   animation-name: pulse;
 }
 </style>