update

src/components/signal.vue

@@ -14,7 +14,7 @@
 import { ref, watch } from 'vue'
 
 const props = defineProps<{
-    signalValue: number
+  signalValue: number
 }>()
 
 const list = ref([
@@ -59,50 +59,50 @@ watch(() => props.signalValue, (v: number) => {
 
 <style scoped lang="scss">
 .signal-box {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    height: 23px;
-    width: 23px;
-    position: relative;
-    z-index: 3;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: 23px;
+  width: 23px;
+  position: relative;
+  z-index: 3;
 
-    ul {
-        height: 21px;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        align-items: flex-end;
-    }
+  ul {
+    height: 21px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: flex-end;
+  }
 
-    li {
-        width: 4px;
-        height: 5px;
-        border-radius: 10px;
-        list-style: none;
-        margin: 0 0.5px;
+  li {
+    width: 4px;
+    height: 5px;
+    border-radius: 10px;
+    list-style: none;
+    margin: 0 0.5px;
 
-        @for $i from 1 through 5 {
-            &:nth-child(#{$i}) {
-                height: $i*5 - ($i - 1) +px;
-            }
-        }
+    @for $i from 1 through 5 {
+      &:nth-child(#{$i}) {
+        height:#{ $i * 5 - ($i - 1) }px;
+      }
     }
+  }
 
-    .signal-default {
-        background: rgba(0, 0, 0, 0.3);
-    }
+  .signal-default {
+    background: rgba(0, 0, 0, 0.3);
+  }
 
-    .signal-red {
-        background-color: red;
-    }
+  .signal-red {
+    background-color: red;
+  }
 
-    .signal-yellow {
-        background-color: #e7d055;
-    }
+  .signal-yellow {
+    background-color: #e7d055;
+  }
 
-    .signal-green {
-        background-color: #32cd32;
-    }
+  .signal-green {
+    background-color: #32cd32;
+  }
 }
 </style>