修改Alarm组件

src/element/Alarm.vue

@@ -1,29 +1,41 @@
 <template>
-    <div class="alarmOn">
+  <div class="alarmOn" :style="alarmStyle">
     <slot></slot>
   </div>
-  </template>
+</template>
   
   <script>
-  export default {
-    name: 'Alarm'
-  }
-  </script>
+export default {
+  name: "Alarm",
+  props: {
+    backgroudColor: {
+      type: String,
+      default: "red",
+    },
+  },
+  computed: {
+    alarmStyle() {
+      return {
+        background: this.backgroudColor,
+      };
+    },
+  },
+};
+</script>
   
-  <style scoped>
+  <style>
 @keyframes flashing {
   0% {
-    background: red;
+    /* background: var(--alarmStyle-color); */
   }
   50% {
     background: transparent;
   }
   100% {
-    background: red;
+    /* background: var(--alarmStyle-color); */
   }
 }
 .alarmOn {
-
   display: flex;
   justify-content: center;
   align-items: center;
@@ -34,9 +46,10 @@
   height: 200px;
 
   width: 200px;
-  background: red;
+  /* background: var(--alarmStyle-color); */
   border-radius: 50%;
 
   animation: flashing 2000ms infinite ease-in-out;
 }
-  </style>
+</style>
+  

src/views/User.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="outer">
+    <Alarm>!</Alarm>
+
     <div class="video">
       <video ref="video" autoplay></video>
     </div>
     <div>
-      <Alarm></Alarm>
     </div>
     <!-- <img src="../image/感叹号.png" alt="error" class="alarmOn" /> -->
-    <span class="alarmOn">!</span>
+   
     <!-- <button @click="startRecording">开始录像</button>
     <button @click="stopRecording">停止录像</button> -->
     <!-- <video ref="recordedVideo" controls></video> -->
@@ -26,7 +27,7 @@ export default {
       selectedDeviceId: null,
     };
   },
-  comments: {
+  components: {
     Alarm,
   },
   async mounted() {
@@ -88,33 +89,6 @@ video {
   width: 100%;
   max-width: 700px;
 }
-@keyframes flashing {
-  0% {
-    background: red;
-  }
-  50% {
-    background: transparent;
-  }
-  100% {
-    background: red;
-  }
-}
-.alarmOn {
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-
-  font-size: 100px;
-  color: white;
-  height: 200px;
-
-  width: 200px;
-  background: red;
-  border-radius: 50%;
-
-  animation: flashing 2000ms infinite ease-in-out;
-}
 
 </style>