changes

app/components/dialog/CountDown.vue

@@ -1,12 +1,14 @@
 <template>
   <div id="countdown">
-    <div id="countdown-number"></div>
+    <div
+      ref="countdownNumber"
+      style="display: inline-block; line-height: 40px"
+    ></div>
     <svg>
       <circle
         r="18"
         cx="20"
         cy="20"
-        color="red"
       ></circle>
     </svg>
   </div>
@@ -21,18 +23,19 @@ export default {
     };
   },
   mounted() {
-    var countdownNumberEl = document.getElementById("countdown-number");
-    countdownNumberEl.textContent = this.countdown;
+    this.$refs.countdownNumber.textContent = this.countdown;
     this.timer = setInterval(() => this.startCount(), 1000);
   },
+  unmounted() {
+    clearInterval(this.timer);
+  },
   beforeDestroy() {
     clearInterval(this.timer);
   },
   methods: {
     startCount() {
       this.countdown -= 1;
-      var countdownNumberEl = document.getElementById("countdown-number");
-      countdownNumberEl.textContent = this.countdown;
+      this.$refs.countdownNumber.textContent = this.countdown;
       if (this.countdown === 0) {
         clearInterval(this.timer);
         this.$emit("close");
@@ -49,12 +52,7 @@ export default {
   width: 40px;
   text-align: center;
 }
-#countdown-number {
-  color: black;
-  display: inline-block;
-  line-height: 40px;
-}
-:deep(svg) {
+svg {
   position: absolute;
   top: 0;
   right: 0;
@@ -62,12 +60,12 @@ export default {
   height: 40px;
   transform: rotateY(-180deg) rotateZ(-90deg);
 }
-:deep(svg circle) {
+svg circle {
   stroke-dasharray: 113px;
   stroke-dashoffset: 0px;
   stroke-linecap: round;
   stroke-width: 2px;
-  stroke: black;
+  stroke: var(--bulma-primary);
   fill: none;
   animation: countdown 10s linear infinite forwards;
 }