From 50f82b71deb2a0b4e82775632d9ac4bb6c002661 Mon Sep 17 00:00:00 2001
From: Cool <747682928@qq.com>
Date: Thu, 4 Jul 2024 15:11:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9Alarm=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/element/Alarm.vue | 41 +++++++++++++++++++++++++++--------------
 src/views/User.vue    | 34 ++++------------------------------
 2 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/element/Alarm.vue b/src/element/Alarm.vue
index 6ef3a1d..e4a86b9 100644
--- a/src/element/Alarm.vue
+++ b/src/element/Alarm.vue
@@ -1,29 +1,41 @@
 <template>
-    <div class="alarmOn">
-      <slot></slot>
-    </div>
-  </template>
+  <div class="alarmOn" :style="alarmStyle">
+    <slot></slot>
+  </div>
+</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>
\ No newline at end of file
+</style>
+  
\ No newline at end of file
diff --git a/src/views/User.vue b/src/views/User.vue
index 44519e0..1a59f4a 100644
--- a/src/views/User.vue
+++ b/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>
\ No newline at end of file