Big-Data-Lab
/
AI-VUE
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改Alarm组件

This commit is contained in:
Cool 2024-07-04 15:11:39 +08:00
parent ce503379cc
commit 50f82b71de
2 changed files with 31 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/element/Alarm.vue
View File

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

34
src/views/User.vue
View File

@ -1,13 +1,14 @@
<template> <template>
<div class="outer"> <div class="outer">
<Alarm>!</Alarm>
<div class="video"> <div class="video">
<video ref="video" autoplay></video> <video ref="video" autoplay></video>
</div> </div>
<div> <div>
<Alarm></Alarm>
</div> </div>
<!-- <img src="../image/感叹号.png" alt="error" class="alarmOn" /> --> <!-- <img src="../image/感叹号.png" alt="error" class="alarmOn" /> -->
<span class="alarmOn">!</span>
<!-- <button @click="startRecording">开始录像</button> <!-- <button @click="startRecording">开始录像</button>
<button @click="stopRecording">停止录像</button> --> <button @click="stopRecording">停止录像</button> -->
<!-- <video ref="recordedVideo" controls></video> --> <!-- <video ref="recordedVideo" controls></video> -->
@ -26,7 +27,7 @@ export default {
selectedDeviceId: null, selectedDeviceId: null,
}; };
}, },
comments: { components: {
Alarm, Alarm,
}, },
async mounted() { async mounted() {
@ -88,33 +89,6 @@ video {
width: 100%; width: 100%;
max-width: 700px; 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> </style>